feat: add contact name and contact tel fields to user types and forms

src/components/02_personnel-management/FormPerson.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { QSelect } from 'quasar';
 import useOptionStore from 'stores/options';
-import { selectFilterOptionRefMod } from 'stores/utils';
 import { calculateAge, disabledAfterToday } from 'src/utils/datetime';
-import { ref, onMounted, watch } from 'vue';
+import { watch } from 'vue';
-import { capitalize } from 'vue';
+import SelectInput from '../shared/SelectInput.vue';
 import DatePicker from '../shared/DatePicker.vue';
 
 const optionStore = useOptionStore();
@@ -23,6 +21,8 @@ const midNameEN = defineModel<string | null>('midNameEn');
 const citizenId = defineModel<string>('citizenId');
 const citizenIssue = defineModel<Date | null>('citizenIssue');
 const citizenExpire = defineModel<Date | null>('citizenExpire');
+const contactName = defineModel<string>('contactName');
+const contactTel = defineModel<string>('contactTel');
 
 const props = defineProps<{
   dense?: boolean;
@@ -30,94 +30,19 @@ const props = defineProps<{
   readonly?: boolean;
   separator?: boolean;
   employee?: boolean;
+  agency?: boolean;
   title?: string;
   prefixId: string;
   hideNameEn?: boolean;
 }>();
 
-const prefixNameOptions = ref<Record<string, unknown>[]>([]);
+function matchPreFixName() {
-let prefixNameFilter: (
-  value: string,
-  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-) => void;
-
-const prefixNameOptionsEn = ref<Record<string, unknown>[]>([]);
-let prefixNameFilterEn: (
-  value: string,
-  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-) => void;
-
-const genderOptions = ref<Record<string, unknown>[]>([]);
-let genderFilter: (
-  value: string,
-  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-) => void;
-
-const nationalityOptions = ref<Record<string, unknown>[]>([]);
-let nationalityFilter: (
-  value: string,
-  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
-) => void;
-
-function matPreFixName() {
   if (gender.value === 'male') prefixName.value = 'mr';
   if (gender.value === 'female' && prefixName.value === 'mr') {
     prefixName.value = 'mrs';
   }
 }
 
-onMounted(() => {
-  prefixNameFilter = selectFilterOptionRefMod(
-    ref(optionStore.globalOption?.prefix),
-    prefixNameOptions,
-    'label',
-  );
-
-  prefixNameFilterEn = selectFilterOptionRefMod(
-    ref(optionStore.rawOption?.eng.prefix),
-    prefixNameOptionsEn,
-    'label',
-  );
-
-  genderFilter = selectFilterOptionRefMod(
-    ref(optionStore.globalOption?.gender),
-    genderOptions,
-    'label',
-  );
-  nationalityFilter = selectFilterOptionRefMod(
-    ref(optionStore.globalOption?.nationality),
-    nationalityOptions,
-    'label',
-  );
-});
-
-watch(
-  () => optionStore.globalOption,
-  () => {
-    prefixNameFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.prefix),
-      prefixNameOptions,
-      'label',
-    );
-    genderFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.gender),
-      genderOptions,
-      'label',
-    );
-    nationalityFilter = selectFilterOptionRefMod(
-      ref(optionStore.globalOption.nationality),
-      nationalityOptions,
-      'label',
-    );
-
-    prefixNameFilterEn = selectFilterOptionRefMod(
-      ref(optionStore.rawOption?.eng.prefix),
-      prefixNameOptionsEn,
-      'label',
-    );
-  },
-);
-
 watch(
   () => prefixName.value,
   (v) => {
@@ -131,7 +56,7 @@ watch(
   () => gender.value,
   () => {
     if (props.readonly) return;
-    matPreFixName();
+    matchPreFixName();
   },
 );
 </script>
@@ -171,41 +96,17 @@ watch(
         for="input-citizen-id"
       />
       <div class="col-12 row" style="display: flex; gap: var(--size-2)">
-        <q-select
+        <SelectInput
-          outlined
-          use-input
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          input-debounce="0"
-          option-label="label"
-          option-value="value"
           hide-dropdown-icon
-          autocomplete="off"
+          :readonly
-          class="col-md-1 col-6"
+          :option="optionStore.globalOption?.prefix"
-          :dense="dense"
+          :id="`${prefixId}-select-prefix-name`"
-          :readonly="readonly"
-          :options="prefixNameOptions"
           :for="`${prefixId}-select-prefix-name`"
-          :label="$t('personnel.form.prefixName')"
-          @filter="prefixNameFilter"
-          :model-value="readonly ? prefixName || '-' : prefixName"
-          @update:model-value="
-            (v) => (typeof v === 'string' ? (prefixName = v) : '')
-          "
-          @clear="prefixName = ''"
           :rules="[(val: string) => !!val || $t('form.error.required')]"
-        >
+          :label="$t('personnel.form.prefixName')"
-          <template v-slot:no-option>
+          class="col-md-1 col-6"
-            <q-item>
+          v-model="prefixName"
-              <q-item-section class="text-grey">
+        />
-                {{ $t('general.noData') }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
 
         <q-input
           :for="`${prefixId}-input-first-name`"
@@ -217,7 +118,7 @@ watch(
           :label="$t('personnel.form.firstName')"
           v-model="firstName"
           :rules="
-            employee
+            employee || agency
               ? []
               : [(val: string) => !!val || $t('form.error.required')]
           "
@@ -255,41 +156,17 @@ watch(
         class="col-12 row"
         style="display: flex; gap: var(--size-2)"
       >
-        <q-select
+        <SelectInput
-          outlined
-          use-input
-          fill-input
-          emit-value
-          map-options
-          hide-selected
-          hide-bottom-space
-          input-debounce="0"
-          option-label="label"
-          option-value="value"
           hide-dropdown-icon
-          autocomplete="off"
+          :readonly
-          class="col-md-1 col-6"
+          :option="optionStore.rawOption?.eng.prefix"
-          :dense="dense"
+          :id="`${prefixId}-select-prefix-name-en`"
-          :readonly="readonly"
-          :options="prefixNameOptionsEn"
           :for="`${prefixId}-select-prefix-name-en`"
-          label="Prefix"
-          @filter="prefixNameFilter"
-          :model-value="readonly ? prefixName || '-' : prefixName"
-          @update:model-value="
-            (v) => (typeof v === 'string' ? (prefixName = v) : '')
-          "
-          @clear="prefixName = ''"
           :rules="[(val: string) => !!val || $t('form.error.required')]"
-        >
+          :label="$t('personnel.form.prefixName')"
-          <template v-slot:no-option>
+          class="col-md-1 col-6"
-            <q-item>
+          v-model="prefixName"
-              <q-item-section class="text-grey">
+        />
-                {{ $t('general.noData') }}
-              </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
 
         <q-input
           :for="`${prefixId}-input-first-name-en`"
@@ -405,39 +282,16 @@ watch(
         </template>
       </q-input>
 
-      <q-select
+      <SelectInput
         v-if="!employee"
-        outlined
+        :readonly
-        use-input
+        :option="optionStore.globalOption?.gender"
-        fill-input
+        :id="`${prefixId}-select-gender`"
-        emit-value
-        map-options
-        hide-selected
-        hide-bottom-space
-        input-debounce="0"
-        option-label="label"
-        option-value="value"
-        autocomplete="off"
-        class="col-md-2 col-6"
-        :dense="dense"
-        :readonly="readonly"
-        :options="genderOptions"
-        :hide-dropdown-icon="readonly"
         :for="`${prefixId}-select-gender`"
         :label="$t('form.gender')"
-        @filter="genderFilter"
+        class="col-md-2 col-6"
-        :model-value="readonly ? gender || '-' : gender"
+        v-model="gender"
-        @update:model-value="(v) => (typeof v === 'string' ? (gender = v) : '')"
+      />
-        @clear="gender = ''"
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">
-              {{ $t('general.noData') }}
-            </q-item-section>
-          </q-item>
-        </template>
-      </q-select>
 
       <DatePicker
         v-model="birthDate"
@@ -514,70 +368,67 @@ watch(
         "
       />
 
-      <q-select
+      <SelectInput
         v-if="employee"
-        outlined
+        :readonly
-        clearable
+        :option="optionStore.globalOption?.gender"
-        use-input
+        :id="`${prefixId}-select-gender`"
-        fill-input
-        emit-value
-        map-options
-        hide-selected
-        autocomplete="off"
-        hide-bottom-space
-        input-debounce="0"
-        option-label="label"
-        option-value="value"
-        class="col-md-2 col-6"
-        :dense="dense"
-        v-model="gender"
-        :readonly="readonly"
-        :options="genderOptions"
-        :hide-dropdown-icon="readonly"
         :for="`${prefixId}-select-gender`"
         :label="$t('form.gender')"
-        @filter="genderFilter"
-      >
-        <template v-slot:no-option>
-          <q-item>
-            <q-item-section class="text-grey">
-              {{ $t('general.noData') }}
-            </q-item-section>
-          </q-item>
-        </template>
-      </q-select>
-      <q-select
-        v-if="employee"
-        outlined
-        clearable
-        use-input
-        fill-input
-        emit-value
-        map-options
-        hide-selected
-        hide-bottom-space
-        autocomplete="off"
-        input-debounce="0"
-        option-label="label"
-        option-value="value"
-        v-model="nationality"
         class="col-md-2 col-6"
-        :dense="dense"
+        v-model="gender"
-        :readonly="readonly"
+      />
-        :options="nationalityOptions"
+      <SelectInput
-        :hide-dropdown-icon="readonly"
+        v-if="employee"
+        :readonly
+        :option="optionStore.globalOption.nationality"
+        :id="`${prefixId}-select-nationality`"
         :for="`${prefixId}-select-nationality`"
         :label="$t('general.nationality')"
-        @filter="nationalityFilter"
+        class="col-md-2 col-6"
+        v-model="nationality"
+        clearable
+      />
+
+      <q-input
+        v-if="agency"
+        for="input-agencies-contact-name"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-md-4 col-12"
+        :label="$t('personnel.form.contactName')"
+        :model-value="readonly ? contactName || '-' : contactName"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (contactName = v) : '')
+        "
+      />
+
+      <q-input
+        v-if="agency"
+        for="input-agencies-contact-tel"
+        id="input-agencies-contact-tel"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-md-4 col-12"
+        :label="$t('personnel.form.contactTel')"
+        :model-value="readonly ? contactTel || '-' : contactTel"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (contactTel = v) : '')
+        "
       >
-        <template v-slot:no-option>
+        <template #prepend>
-          <q-item>
+          <q-icon
-            <q-item-section class="text-grey">
+            size="xs"
-              {{ $t('general.noData') }}
+            name="mdi-phone-outline"
-            </q-item-section>
+            class="cursor-pointer"
-          </q-item>
+            color="primary"
+          />
         </template>
-      </q-select>
+      </q-input>
     </div>
   </div>
 </template>

src/components/07_agencies-management/FormBasicInfoAgencies.vue

@@ -133,7 +133,7 @@ type Options = { label: string; value: string };
         :readonly="readonly"
         hide-bottom-space
         class="col-md-4 col-12"
-        :label="$t('form.telephone')"
+        :label="$t('agencies.contactTel')"
         :model-value="readonly ? contactTel || '-' : contactTel"
         @update:model-value="
           (v) => (typeof v === 'string' ? (contactTel = v) : '')

src/components/shared/SelectInput.vue

@@ -28,6 +28,7 @@ const props = withDefaults(
     disable?: boolean;
     multiple?: boolean;
     hideInput?: boolean;
+    hideDropdownIcon?: boolean;
 
     rules?: ((value: string) => string | true)[];
   }>(),
@@ -82,7 +83,7 @@ watch(
     :hide-selected
     hide-bottom-space
     :fill-input="fillInput && !!model"
-    :hide-dropdown-icon="readonly"
+    :hide-dropdown-icon="readonly || hideDropdownIcon"
     input-debounce="500"
     :option-value="
       typeof props.optionValue === 'string' ? props.optionValue : 'value'

src/i18n/eng.ts

@@ -60,7 +60,7 @@ export default {
     branchStatus: 'Branch Status',
     success: 'Success',
     taxNo: 'Legal Person',
-    contactName: 'Contact Name',
+    contactName: 'Contact Person',
     image: 'Image of ',
     apply: 'Apply',
     licenseNumber: 'License number',
@@ -382,7 +382,7 @@ export default {
       branchLabel: 'Branch',
       branchHQLabel: 'Headoffice',
       taxNo: 'Legal Person',
-      contactName: 'Contact Name',
+      contactName: 'Contact Person',
     },
     page: {
       captionManage: 'Manage',
@@ -403,8 +403,8 @@ export default {
       code: 'Headoffice Code',
       codeBranch: 'Branch Code',
       taxNo: 'Tax Identification Number',
-      contactName: 'Contact Name',
+      contactName: 'Contact Person',
-      contactTelephone: 'Contact Telephone',
+      contactTelephone: 'Contact Number',
       branchName: 'Branch Name',
       branchNameEN: 'Branch Name (EN)',
       servicePointName: 'Service Point Name',
@@ -469,6 +469,8 @@ export default {
       normal: 'Normal',
       canceled: 'Canceled',
       blacklist: 'Black list',
+      contactName: 'Contact Person',
+      contactTel: 'Contact Number',
     },
   },
   customer: {
@@ -560,7 +562,7 @@ export default {
       jobPosition: 'Job Position',
       address: 'Address',
       workPlace: 'Workplace',
-      contactName: 'Contact Name',
+      contactName: 'Contact Person',
       contactPhone: 'Contact Phone',
       totalEmployee: 'Total Employee',
       officeTel: 'Headoffice Telephone',
@@ -798,7 +800,7 @@ export default {
     employee: 'Employee',
     employeeName: 'Full Name',
     workName: 'Work Name',
-    contactName: 'Contact Name',
+    contactName: 'Contact Person',
     documentReceivePoint: 'Document Drop-Off Point"',
     dueDate: 'Quotation Due Date',
     specialCondition: 'Special Conditions',
@@ -916,8 +918,8 @@ export default {
     code: 'Agencies Code',
     group: 'Agencies Group',
     name: 'Agencies Name',
-    contactName: 'Contact Name',
+    contactName: 'Contact Person',
-    contactTel: 'Contact Telephone',
+    contactTel: 'Contact Number',
     bankInfo: 'Bank Information',
   },
 
@@ -1006,7 +1008,7 @@ export default {
     issueBranch: 'Issue Branch',
     issueDate: 'Issue Date',
     madeBy: 'Made By',
-    contactName: 'Contact Name',
+    contactName: 'Contact Person',
     workOrderCode: 'Work Order Code',
     workOrderName: 'Work Order Name',
     telephone: 'Telephone',

src/i18n/tha.ts

@@ -465,6 +465,8 @@ export default {
       normal: 'ปกติ',
       canceled: 'ยกเลิก',
       blacklist: 'แบล็คลิสต์',
+      contactName: 'ชื่อผู้ติดต่อ',
+      contactTel: 'เบอร์โทรศัพท์ผู้ติดต่อ',
     },
   },
   customer: {

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

@@ -151,6 +151,8 @@ const defaultFormData = {
   citizenExpire: null,
   citizenIssue: null,
   citizenId: '',
+  contactName: '',
+  contactTel: '',
   remark: '',
   agencyStatus: '',
 };
@@ -201,6 +203,8 @@ const formData = ref<UserCreate>({
   citizenExpire: null,
   citizenIssue: null,
   citizenId: '',
+  contactName: '',
+  contactTel: '',
   remark: '',
   agencyStatus: '',
 });
@@ -590,6 +594,8 @@ async function assignFormData(idEdit: string) {
       responsibleArea: foundUser.responsibleArea,
       status: foundUser.status,
       selectedImage: foundUser.selectedImage,
+      contactName: foundUser.contactName,
+      contactTel: foundUser.contactTel,
       licenseExpireDate:
         (foundUser.licenseExpireDate &&
           new Date(foundUser.licenseExpireDate)) ||
@@ -1752,12 +1758,15 @@ watch(
               v-model:citizen-id="formData.citizenId"
               v-model:citizen-issue="formData.citizenIssue"
               v-model:citizen-expire="formData.citizenExpire"
+              v-model:contact-name="formData.contactName"
+              v-model:contact-tel="formData.contactTel"
               :title="'personnel.form.personalInformation'"
               prefix-id="drawer-info-personnel"
               dense
               outlined
               separator
               :readonly="!infoDrawerEdit"
+              :agency="formData.userType === 'AGENCY'"
               class="q-mb-xl"
             />
 
@@ -1967,6 +1976,7 @@ watch(
             id="dialog-form-personal"
             prefix-id="form-dialog-personnel"
             dense
+            :agency="formData.userType === 'AGENCY'"
             outlined
             separator
             :title="'personnel.form.personalInformation'"
@@ -1985,6 +1995,8 @@ watch(
             v-model:citizen-id="formData.citizenId"
             v-model:citizen-issue="formData.citizenIssue"
             v-model:citizen-expire="formData.citizenExpire"
+            v-model:contact-name="formData.contactName"
+            v-model:contact-tel="formData.contactTel"
             class="q-mb-xl"
           />
           <AddressForm

src/stores/user/types.ts

@@ -57,7 +57,8 @@ export type User = {
   citizenIssue?: Date | null;
   citizenId: string;
   branch: Branch[];
-
+  contactName?: string;
+  contactTel?: string;
   remark?: string;
   agencyStatus?: AgencyStatus;
 };
@@ -108,7 +109,8 @@ export type UserCreate = {
   citizenExpire?: Date | null;
   citizenIssue?: Date | null;
   citizenId: string;
-
+  contactName?: string;
+  contactTel?: string;
   remark?: string;
   agencyStatus?: AgencyStatus | string;
 };