update code

resources/js/src/components/user/Info.vue

@@ -0,0 +1,117 @@
+<template>
+  <CCard>
+    <CCardHeader>
+      <strong>Thông tin</strong>
+    </CCardHeader>
+    <CCardBody>
+      <CForm>
+        <CInput label="Mã" :value.sync="user.id" horizontal :readonly="true" />
+        <CInput
+          placeholder="Let us know your full name."
+          label="Tên"
+          :value.sync="user.name"
+          horizontal
+        />
+        <CInput
+          label="Email"
+          placeholder="Enter your email"
+          type="email"
+          :value.sync="user.email"
+          horizontal
+          autocomplete="email"
+        />
+        <CInput
+          label="Số điện thoại"
+          placeholder="Enter your tel"
+          :value.sync="user.tel"
+          horizontal
+          autocomplete="tel"
+        />
+        <CInput label="Ngày sinh" type="date" :value.sync="user.birthday" horizontal />
+        <CSelect
+          label="Chức danh"
+          horizontal
+          :value.sync="user.title_id"
+          :options="titles"
+          placeholder="Please select"
+        />
+        <CSelect
+          label="Phòng ban"
+          horizontal
+          :value.sync="user.department_id"
+          :options="departments"
+          placeholder="Please select"
+        />
+        <CFormGroup class="form-group form-row">
+          <template #label>
+            <slot name="label">
+              <label class="col-form-label col-sm-3">Kích hoạt</label>
+            </slot>
+          </template>
+          <template #input>
+            <CSwitch class="mx-1" color="success" :checked.sync="user.active" />
+          </template>
+        </CFormGroup>
+      </CForm>
+    </CCardBody>
+    <CCardFooter>
+      <CButton type="submit" size="sm" @click="updateInfo" class="float-right" color="success">
+        <CIcon name="cil-check" />Lưu
+      </CButton>
+    </CCardFooter>
+  </CCard>
+</template>
+
+<script>
+import services from "../../services/factory";
+
+export default {
+  name: "Info",
+  props: {
+    userId: {
+      required: true,
+    },
+    isMe: {
+      required: false,
+      type: Boolean,
+      default: false,
+    },
+  },
+  beforeRouteEnter(to, from, next) {
+    next((vm) => {
+      vm.usersOpened = from.fullPath.includes("users");
+    });
+  },
+  data() {
+    return {
+      usersOpened: null,
+      user: [],
+      titles: [],
+      departments: [],
+    };
+  },
+  created() {
+    this.fetch();
+  },
+  methods: {
+    async fetch() {
+      const titleResponse = await services.title.all();
+      this.titles = this.formatKeys(titleResponse.data);
+      const departmentResponse = await services.department.all();
+      this.departments = this.formatKeys(departmentResponse.data);
+      const userResponse = await services.user.get(this.userId);
+      this.user = userResponse.data;
+    },
+    async updateInfo() {
+      return await (this.isMe ? services.auth : services.user)
+        .update(this.user, this.userId)
+        .then((response) => {
+          this.$toast.success("Đã lưu");
+        })
+        .catch((error) => {
+          this.toastHttpError(error);
+        });
+    },
+  },
+};
+</script>