feat: customer employee form (basic info & checkup)

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

@@ -14,6 +14,7 @@ defineProps<{
   outlined?: boolean;
   readonly?: boolean;
   separator?: boolean;
+  employee?: boolean;
 }>();
 
 const adrressStore = useAddressStore();
@@ -23,6 +24,7 @@ const provinceId = defineModel<string | null | undefined>('provinceId');
 const districtId = defineModel<string | null | undefined>('districtId');
 const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
 const zipCode = defineModel<string | null | undefined>('zipCode');
+const sameWithEmployer = defineModel<boolean>('sameWithEmployer');
 
 const addrOptions = reactive<{
   provinceOps: Province[];
@@ -73,9 +75,30 @@ watch(provinceId, fetchDistrict);
 watch(districtId, fetchSubDistrict);
 </script>
 <template>
-  <div class="col-12 app-text-muted">
+  <div class="col-12 app-text-muted row items-center">
     • {{ title || $t('formDialogTitlePersonnelAddress') }}
+    <div
+      v-if="employee"
+      class="q-ml-lg surface-3 q-px-sm q-py-xs row"
+      style="border-radius: var(--radius-3)"
+    >
+      <span
+        class="q-px-sm q-mr-lg rounded cursor-pointer"
+        :class="{ dark: $q.dark.isActive, 'active-addr': sameWithEmployer }"
+        @click="sameWithEmployer = true"
+      >
+        เลือกที่อยู่ตามนายจ้าง
+      </span>
+      <span
+        class="q-px-sm rounded cursor-pointer"
+        :class="{ dark: $q.dark.isActive, 'active-addr': !sameWithEmployer }"
+        @click="sameWithEmployer = false"
+      >
+        กำหนดเอง
+      </span>
+    </div>
   </div>
+
   <div class="col-12 row q-col-gutter-y-md">
     <div class="col-3 q-pl-xl app-text-muted">
       {{ addressTitle || $t('formDialogTitleAddressPure') }}
@@ -85,7 +108,7 @@ watch(districtId, fetchSubDistrict);
         for="input-address"
         :dense="dense"
         :outlined="readonly ? false : outlined"
-        :readonly="readonly"
+        :readonly="readonly || sameWithEmployer"
         :borderless="readonly"
         hide-bottom-space
         :label="$t('address')"
@@ -100,9 +123,9 @@ watch(districtId, fetchSubDistrict);
       <q-select
         id="select-province"
         :dense="dense"
-        :readonly="readonly"
+        :readonly="readonly || sameWithEmployer"
         :outlined="readonly ? false : outlined"
-        :hide-dropdown-icon="readonly"
+        :hide-dropdown-icon="readonly || sameWithEmployer"
         :borderless="readonly"
         hide-bottom-space
         emit-value
@@ -123,9 +146,9 @@ watch(districtId, fetchSubDistrict);
       <q-select
         id="select-district"
         :dense="dense"
-        :readonly="readonly"
+        :readonly="readonly || sameWithEmployer"
         :outlined="readonly ? false : outlined"
-        :hide-dropdown-icon="readonly"
+        :hide-dropdown-icon="readonly || sameWithEmployer"
         :borderless="readonly"
         hide-bottom-space
         emit-value
@@ -146,9 +169,9 @@ watch(districtId, fetchSubDistrict);
       <q-select
         id="select-sub-district"
         :dense="dense"
-        :readonly="readonly"
+        :readonly="readonly || sameWithEmployer"
         :outlined="readonly ? false : outlined"
-        :hide-dropdown-icon="readonly"
+        :hide-dropdown-icon="readonly || sameWithEmployer"
         :borderless="readonly"
         hide-bottom-space
         emit-value
@@ -184,7 +207,7 @@ watch(districtId, fetchSubDistrict);
       <q-input
         for="input-address-en"
         :dense="dense"
-        :readonly="readonly"
+        :readonly="readonly || sameWithEmployer"
         :outlined="readonly ? false : outlined"
         :borderless="readonly"
         hide-bottom-space
@@ -200,10 +223,10 @@ watch(districtId, fetchSubDistrict);
       <q-select
         id="select-province-en"
         :dense="dense"
-        :readonly="readonly"
+        :readonly="readonly || sameWithEmployer"
         :outlined="readonly ? false : outlined"
         :borderless="readonly"
-        :hide-dropdown-icon="readonly"
+        :hide-dropdown-icon="readonly || sameWithEmployer"
         emit-value
         map-options
         v-model="provinceId"
@@ -222,10 +245,10 @@ watch(districtId, fetchSubDistrict);
       <q-select
         id="select-district-en"
         :dense="dense"
-        :readonly="readonly"
+        :readonly="readonly || sameWithEmployer"
         :outlined="readonly ? false : outlined"
         :borderless="readonly"
-        :hide-dropdown-icon="readonly"
+        :hide-dropdown-icon="readonly || sameWithEmployer"
         emit-value
         map-options
         v-model="districtId"
@@ -244,10 +267,10 @@ watch(districtId, fetchSubDistrict);
       <q-select
         id="select-sub-district-en"
         :dense="dense"
-        :readonly="readonly"
+        :readonly="readonly || sameWithEmployer"
         :outlined="readonly ? false : outlined"
         :borderless="readonly"
-        :hide-dropdown-icon="readonly"
+        :hide-dropdown-icon="readonly || sameWithEmployer"
         emit-value
         map-options
         v-model="subDistrictId"
@@ -282,3 +305,14 @@ watch(districtId, fetchSubDistrict);
     style="padding-block: 0.5px; margin-top: 32px"
   />
 </template>
+
+<style lang="scss" scoped>
+.active-addr {
+  color: hsl(var(--info-bg));
+  background-color: hsla(var(--info-bg) / 0.1);
+
+  &.dark {
+    background-color: var(--surface-1);
+  }
+}
+</style>

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

@@ -12,12 +12,14 @@ const telephoneNo = defineModel<string>('telephoneNo');
 const email = defineModel<string>('email');
 const gender = defineModel<string>('gender');
 const birthDate = defineModel<Date | null>('birthDate');
+const nationality = defineModel<string>('nationality');
 
 defineProps<{
   dense?: boolean;
   outlined?: boolean;
   readonly?: boolean;
   separator?: boolean;
+  employee?: boolean;
 }>();
 </script>
 <template>
@@ -78,6 +80,7 @@ defineProps<{
       ]"
     />
     <q-input
+      v-if="!employee"
       for="input-telephone"
       :dense="dense"
       :outlined="readonly ? false : outlined"
@@ -89,6 +92,7 @@ defineProps<{
       mask="##########"
     />
     <q-input
+      v-if="!employee"
       for="input-email"
       :dense="dense"
       :outlined="readonly ? false : outlined"
@@ -99,6 +103,7 @@ defineProps<{
       v-model="email"
     />
     <q-select
+      v-if="!employee"
       id="select-gender"
       :dense="dense"
       :outlined="readonly ? false : outlined"
@@ -167,6 +172,41 @@ defineProps<{
       class="col-3"
       :model-value="birthDate ? userStore.calculateAge(birthDate) : ''"
     />
+    <q-select
+      v-if="employee"
+      id="select-gender"
+      :dense="dense"
+      :outlined="readonly ? false : outlined"
+      :readonly="readonly"
+      :hide-dropdown-icon="readonly"
+      :borderless="readonly"
+      emit-value
+      map-options
+      :label="$t('formDialogInputGender')"
+      class="col-3"
+      option-label="label"
+      option-value="value"
+      v-model="gender"
+      :options="userStore.userOption.genderOpts"
+    />
+    <q-select
+      v-if="employee"
+      id="select-nationality"
+      :dense="dense"
+      :outlined="readonly ? false : outlined"
+      :readonly="readonly"
+      :borderless="readonly"
+      :hide-dropdown-icon="readonly"
+      emit-value
+      map-options
+      options-dense
+      :label="$t('formDialogInputNationality')"
+      class="col-3"
+      option-label="label"
+      option-value="label"
+      v-model="nationality"
+      :options="userStore.userOption.nationalityOpts"
+    />
   </div>
   <q-separator
     v-if="separator"