Merge branch 'dev/phatt' into develop

src/components/FormDialog.vue

@@ -13,6 +13,11 @@ defineProps<{
   close?: (...args: unknown[]) => void;
 }>();
 
+defineExpose({
+  fetchDistrict,
+  fetchSubDistrict,
+});
+
 const adrressStore = useAddressStore();
 const modal = defineModel('modal', { default: false });
 const address = defineModel('address', { default: '' });
@@ -48,39 +53,38 @@ async function fetchSubDistrict(id: string | undefined) {
   if (id) {
     const result = await adrressStore.fetchSubDistrictByProvinceId(id);
     if (result) {
-      console.log(addrOptions.value.subDistrictOps);
       addrOptions.value.subDistrictOps = result;
     }
   }
 }
 
-onMounted(async () => {
+async function selectProvince(id: string) {
-  await fetchProvince();
+  if (!id) return;
-});
+  districtId.value = undefined;
-
-watch(provinceId, async (v) => {
-  await fetchDistrict(v);
-});
-
-watch(districtId, async (v) => {
   subDistrictId.value = undefined;
-  await fetchSubDistrict(v);
+  addrOptions.value.districtOps = [];
-});
+  addrOptions.value.subDistrictOps = [];
+  zipCode.value = '';
+  await fetchDistrict(id);
+}
 
-watch(subDistrictId, async (v) => {
+async function selectDistrict(id: string) {
+  if (!id) return;
+  subDistrictId.value = undefined;
+  zipCode.value = '';
+  await fetchSubDistrict(id);
+}
+
+async function selectSubDistrict(id: string) {
+  if (!id) return;
   zipCode.value =
     addrOptions.value.subDistrictOps
-      ?.filter((x) => x.id === v)
+      ?.filter((x) => x.id === id)
       .map((x) => x.zipCode)[0] ?? '';
-});
+}
 
-watch(provinceId, (v) => {
+onMounted(async () => {
-  if (v) {
+  await fetchProvince();
-    addrOptions.value.districtOps = [];
-    addrOptions.value.subDistrictOps = [];
-    districtId.value = undefined;
-    subDistrictId.value = undefined;
-  }
 });
 </script>
 <template>
@@ -144,7 +148,7 @@ watch(provinceId, (v) => {
               <q-input
                 dense
                 outlined
-                id="AddrL"
+                id="Addr"
                 label="ที่อยู่"
                 class="col-12"
                 v-model="address"
@@ -154,45 +158,48 @@ watch(provinceId, (v) => {
                 outlined
                 emit-value
                 map-options
-                id="selectProvinceL"
+                id="selectProvince"
                 v-model="provinceId"
                 option-value="id"
                 option-label="name"
                 label="จังหวัด"
                 class="col-3"
                 :options="addrOptions.provinceOps"
+                @update:model-value="(v: string) => selectProvince(v)"
               />
               <q-select
                 dense
                 outlined
                 emit-value
                 map-options
-                id="selectDistrictL"
+                id="selectDistrict"
                 v-model="districtId"
                 option-value="id"
                 option-label="name"
                 label="อำเภอ"
                 class="col-3"
                 :options="addrOptions.districtOps"
+                @update:model-value="(v: string) => selectDistrict(v)"
               />
               <q-select
                 dense
                 outlined
                 emit-value
                 map-options
-                id="SelectSubDistrictEN"
+                id="SelectSubDistrict"
                 v-model="subDistrictId"
                 option-value="id"
                 option-label="name"
                 label="ตำบล"
                 class="col-3"
                 :options="addrOptions.subDistrictOps"
+                @update:model-value="(v: string) => selectSubDistrict(v)"
               />
               <q-input
                 dense
                 readonly
                 outlined
-                id="zipL"
+                id="zip"
                 label="รหัสไปรษณีย์"
                 class="col-3"
                 v-model="zipCode"
@@ -220,6 +227,7 @@ watch(provinceId, (v) => {
                 label="จังหวัด"
                 class="col-3"
                 :options="addrOptions.provinceOps"
+                @update:model-value="(v: string) => selectProvince(v)"
               />
               <q-select
                 dense
@@ -233,6 +241,7 @@ watch(provinceId, (v) => {
                 label="อำเภอ"
                 class="col-3"
                 :options="addrOptions.districtOps"
+                @update:model-value="(v: string) => selectDistrict(v)"
               />
               <q-select
                 dense
@@ -246,6 +255,7 @@ watch(provinceId, (v) => {
                 label="ตำบล"
                 class="col-3"
                 :options="addrOptions.subDistrictOps"
+                @update:model-value="(v: string) => selectSubDistrict(v)"
               />
               <q-input
                 dense

src/components/GlobalLoading.vue

@@ -8,7 +8,7 @@ defineProps<{
   <q-inner-loading :showing="visibility" class="loader q-gutter-y-xl">
     <q-spinner size="80px" color="primary" />
     <span class="text-h5 text-weight-bold text-primary">
-      {{ $t('loading') }}
+      {{ 'loading' }}
     </span>
   </q-inner-loading>
 </template>

src/components/StatCardComponent.vue

@@ -38,7 +38,7 @@ const color = ['pink', 'purple'];
 
       <div class="column justify-around stat-card-content">
         <div class="col-4 text-h5 text-weight-bold">{{ v.amount }}</div>
-        <div class="text-weight-bold">{{ $t(v.label) }}</div>
+        <div class="text-weight-bold">{{ v.label }}</div>
       </div>
     </AppBox>
   </div>

src/components/home/PersonCard.vue

@@ -119,7 +119,10 @@ const status = ref(false);
             class="avatar"
             style="border: 2px solid var(--border-color)"
           >
-            <q-img :src="v.img" width="100%" />
+            <q-img
+              :src="v.img"
+              style="object-fit: cover; width: 100%; height: 100%"
+            />
             <div class="status-circle">
               <q-icon
                 :name="`mdi-${v.disabled ? 'close' : 'check'}`"

src/css/quasar.variables.scss

@@ -51,3 +51,7 @@ $separator-dark-color: var(--border-color);
 .q-field--dense .q-field__label {
   font-family: 'Noto Sans Thai', sans-serif;
 }
+
+.q-field__inner {
+  font-family: 'Noto Sans Thai', sans-serif;
+}

src/pages/02_personnel-management/MainPage.vue

@@ -5,7 +5,12 @@ import { storeToRefs } from 'pinia';
 import useUserStore from 'stores/user';
 import useBranchStore from 'src/stores/branch';
 
-import { UserCreate, UserTypeStats, UserOption } from 'src/stores/user/types';
+import {
+  UserCreate,
+  UserTypeStats,
+  UserOption,
+  RoleData,
+} from 'src/stores/user/types';
 import { BranchUserStats } from 'src/stores/branch/types';
 
 import PersonCard from 'components/home/PersonCard.vue';
@@ -53,6 +58,7 @@ const defaultFormData = {
   responsibleArea: '',
 };
 
+const urlProfile = ref<string>();
 const isEdit = ref(false);
 const modal = ref(false);
 const status = ref(false);
@@ -62,6 +68,10 @@ const selectorLabel = ref('');
 const hqId = ref('');
 const brId = ref('');
 const username = ref('');
+const age = ref<string>();
+const formDialogRef = ref();
+const userStats = ref<BranchUserStats[]>();
+const typeStats = ref<UserTypeStats>();
 const formData = ref<UserCreate>({
   provinceId: null,
   districtId: null,
@@ -93,9 +103,6 @@ const formData = ref<UserCreate>({
   birthDate: null,
   responsibleArea: '',
 });
-const userStats = ref<BranchUserStats[]>();
-const typeStats = ref<UserTypeStats>();
-const age = ref<number>();
 
 const profileFile = ref<File | undefined>(undefined);
 const inputFile = document.createElement('input');
@@ -120,6 +127,7 @@ const genderOpts = [
 const userOption = ref<UserOption>({
   hqOpts: [],
   brOpts: [],
+  roleOpts: [],
 });
 
 const selectorList = [
@@ -139,6 +147,16 @@ async function createKeycloak() {
   return res.data;
 }
 
+async function fetchRoleOption() {
+  const res = await api.get<RoleData[]>('/keycloak/role');
+  res.data.map((item) => {
+    userOption.value.roleOpts.push({
+      label: item.name,
+      value: item.id,
+    });
+  });
+}
+
 async function fetchHqOption() {
   if (userOption.value.hqOpts.length === 0) {
     const res = await branchStore.fetchList({ pageSize: 999, filter: 'head' });
@@ -169,6 +187,7 @@ async function fetchBrOption(id: string) {
 
 async function openDialog(id?: string) {
   await fetchHqOption();
+  await fetchRoleOption();
   modal.value = true;
   if (id && userData.value) {
     const foundUser = userData.value.result.find((user) => user.id === id);
@@ -196,7 +215,11 @@ async function openDialog(id?: string) {
       hqId.value = foundUser.branch[0].headOfficeId as string;
       brId.value = foundUser.branch[0].id;
       code.value = foundUser.code;
+      urlProfile.value = foundUser.profileImageUrl;
       isEdit.value = true;
+      await fetchBrOption(hqId.value);
+      await formDialogRef.value.fetchSubDistrict(formData.value.districtId);
+      await formDialogRef.value.fetchDistrict(formData.value.provinceId);
     }
   }
 }
@@ -204,31 +227,28 @@ async function openDialog(id?: string) {
 function onClose() {
   modal.value = false;
   Object.assign(formData.value, defaultFormData);
+  mapUserType(selectorLabel.value);
+  isEdit.value = false;
   hqId.value = '';
   brId.value = '';
   username.value = '';
   userId.value = '';
   code.value = '';
-  mapUserType(selectorLabel.value);
+  urlProfile.value = '';
 }
 
 async function onSubmit() {
-  console.log('enter');
   formData.value.profileImage = profileFile.value as File;
   if (isEdit.value === true && userId.value) {
-    console.log('edit');
+    const formDataEdit = { ...formData.value };
-    await userStore.editById(userId.value, formData.value);
+    delete formDataEdit.keycloakId;
+    await userStore.editById(userId.value, formDataEdit);
   } else {
-    console.log('post');
     formData.value.keycloakId = await createKeycloak();
-    if (formData.value.keycloakId !== '') {
+    if (formData.value.keycloakId) {
-      console.log('keycloakOk');
       const result = await userStore.create(formData.value);
-      console.log('Result after create:', result);
       if (result) {
-        console.log('hi3');
+        await branchStore.addUser(brId.value, result.id);
-        console.log(result.id);
-        // await branchStore.addUser(result.id, userId.value);
       }
     }
   }
@@ -253,6 +273,27 @@ function mapUserType(label: string) {
   }
 }
 
+function calculateAge(birthDate: Date | null) {
+  if (!birthDate) return null;
+  const birthDateTimeStamp = new Date(birthDate).getTime();
+  const now = new Date();
+  const diff = now.getTime() - birthDateTimeStamp;
+
+  const ageDate = new Date(diff);
+  const years = ageDate.getUTCFullYear() - 1970;
+  const months = ageDate.getUTCMonth();
+  const days = ageDate.getUTCDate() - 1;
+
+  age.value = `${years} ปี ${months} เดือน ${days} วัน`;
+}
+
+async function selectHq(id: string) {
+  if (!id) return;
+  brId.value = '';
+  userOption.value.brOpts = [];
+  await fetchBrOption(id);
+}
+
 onMounted(async () => {
   await userStore.fetchList({ includeBranch: true });
   typeStats.value = await userStore.typeStats();
@@ -274,11 +315,11 @@ watch(
 );
 
 watch(
-  () => hqId.value,
+  () => formData.value.birthDate,
-  async (id) => {
+  (birthDate) => {
-    fetchBrOption(id);
+    if (birthDate) {
-    brId.value = '';
+      calculateAge(birthDate);
-    userOption.value.brOpts = [];
+    }
   },
 );
 </script>
@@ -377,6 +418,7 @@ watch(
 
   <!-- form -->
   <FormDialog
+    ref="formDialogRef"
     v-model:modal="modal"
     v-model:address="formData.address"
     v-model:addressEN="formData.addressEN"
@@ -405,6 +447,7 @@ watch(
         v-model="hqId"
         :options="userOption.hqOpts"
         :rules="[(val: string) => !!val || 'กรุณาเลือกสำนักงานใหญ่']"
+        @update:model-value="(val: string) => selectHq(val)"
       />
       <q-select
         dense
@@ -448,7 +491,7 @@ watch(
         option-label="label"
         option-value="value"
         v-model="formData.userRole"
-        :options="genderOpts"
+        :options="userOption.roleOpts"
       />
       <!--         :rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']" -->
       <q-input
@@ -476,13 +519,31 @@ watch(
     <template #prepend>
       <div class="q-pl-md text-center">
         <div class="upload-img-preview">
+          <q-img
+            v-if="urlProfile"
+            :src="urlProfile"
+            style="object-fit: cover; width: 100%; height: 100%"
+          />
           <q-icon
+            v-else
             name="mdi-account full-height"
             size="3vw"
             style="color: var(--border-color)"
           />
         </div>
         <q-btn
+          v-if="urlProfile"
+          dense
+          unelevated
+          outlined
+          padding="8px"
+          icon="mdi-pencil-outline"
+          class="edit-img-btn q-my-md full-width"
+          label="แก้ไขโปรไฟล์"
+          @click="inputFile.click()"
+        />
+        <q-btn
+          v-else
           dense
           unelevated
           outlined
@@ -503,13 +564,6 @@ watch(
           />
           <span>สถานะผู้ใช้งาน</span>
         </div>
-        <q-file
-          dense
-          outlined
-          ref="file"
-          style="visibility: hidden"
-          v-model="formData.profileImage"
-        />
       </div>
     </template>
 
@@ -669,7 +723,7 @@ watch(
         <VueDatePicker
           utc
           autoApply
-          v-model="formData.retireDate"
+          v-model="formData.birthDate"
           :locale="'th'"
           :enableTimePicker="false"
           class="col-3"
@@ -681,7 +735,7 @@ watch(
             <q-input
               dense
               outlined
-              label="วันที่พ้นสภาพพนักงาน"
+              label="วันเดือนปีเกิด"
               :model-value="dateFormat(formData.birthDate)"
             >
               <template v-slot:prepend>
@@ -694,17 +748,24 @@ watch(
               </template>
               <template v-slot:append>
                 <q-icon
-                  v-if="formData.retireDate"
+                  v-if="formData.birthDate"
                   name="mdi-close"
                   class="cursor-pointer"
                   size="xs"
-                  @click="formData.retireDate = undefined"
+                  @click="formData.birthDate = undefined"
                 />
               </template>
             </q-input>
           </template>
         </VueDatePicker>
-        <q-input dense outlined label="อายุ" class="col-3" v-model="age" />
+        <q-input
+          dense
+          outlined
+          readonly
+          label="อายุ"
+          class="col-3"
+          v-model="age"
+        />
         <q-select
           v-if="formData.userType === 'MESSENGER'"
           dense
@@ -819,4 +880,11 @@ watch(
     background-color: transparent;
   }
 }
+
+.edit-img-btn {
+  color: hsl(var(--info-bg));
+  border: 1px solid hsl(var(--info-bg));
+  background-color: transparent;
+  border-radius: var(--radius-2);
+}
 </style>

src/stores/user/types.ts

@@ -71,7 +71,7 @@ export type UserCreate = {
   firstName: string;
   userRole: string;
   userType: string;
-  keycloakId: string;
+  keycloakId?: string;
   profileImage?: File | null; // required but not strict
   birthDate?: Date | null;
   responsibleArea: string;
@@ -100,9 +100,15 @@ export type UserTypeStats = {
 export type UserOption = {
   hqOpts: Option[];
   brOpts: Option[];
+  roleOpts: Option[];
 };
 
 export type Option = {
   label: string;
   value: string;
 };
+
+export type RoleData = {
+  id: string;
+  name: string;
+}