feat: Personnel info (bg, layout)

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

@@ -2,6 +2,7 @@
 import { useRoute } from 'vue-router';
 import { onMounted, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
+import { useRouter } from 'vue-router';
 
 import useUserStore from 'stores/user';
 import useBranchStore from 'stores/branch';
@@ -20,6 +21,7 @@ import { reactive } from 'vue';
 
 const route = useRoute();
 
+const router = useRouter();
 const userStore = useUserStore();
 const addrStore = useAddressStore();
 const branchStore = useBranchStore();
@@ -115,6 +117,9 @@ onMounted(async () => {
   getCurrentUser();
   getHQ();
   getProvince();
+  if (userStore.userOption.roleOpts.length === 0) {
+    userStore.fetchRoleOption();
+  }
 });
 
 watch(() => route.params.id, getCurrentUser);
@@ -125,6 +130,25 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
 </script>
 
 <template>
+  <div class="text-h6 text-weight-bold q-mb-md" v-if="currentUser">
+    <q-btn
+      flat
+      round
+      padding="xs"
+      icon="mdi-arrow-left"
+      style="color: hsl(var(--info-bg))"
+      @click="router.go(-1)"
+    />
+    {{
+      $i18n.locale === 'en-US'
+        ? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`
+        : `${currentUser.firstName} ${currentUser.lastName}`
+    }}
+  </div>
+  <div
+    class="q-pa-md info-bg"
+    :style="`background-image: url(/personnel-info-bg-${$q.dark.isActive ? 'dark' : 'light'}.png)`"
+  >
     <div
       class="info-container"
       :class="{ desktop: $q.screen.gt.sm, dark: $q.dark.isActive }"
@@ -135,7 +159,10 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
             {
               id: currentUser.id,
               img: `${currentUser.profileImageUrl}`,
-            name: `${currentUser.firstName} ${currentUser.lastName}`,
+              name:
+                $i18n.locale === 'en-US'
+                  ? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`
+                  : `${currentUser.firstName} ${currentUser.lastName}`,
               male: currentUser.gender === 'male',
               female: currentUser.gender === 'female',
               detail: [
@@ -151,16 +178,43 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
           :grid-columns="1"
           no-hover
           no-action
+          style="box-shadow: var(--shadow-2)"
         />
+        <div class="col-12 row items-center q-pt-md q-col-gutter-x-md">
+          <div class="col-6">
+            <q-btn class="btn-edt full-width" padding="8px 8px">
+              <q-icon size="16px" name="mdi-pencil-outline" class="q-pr-xs" />
+              <span class="text-caption">แก้ไขข้อมูล</span>
+            </q-btn>
           </div>
-    <AppBox class="surface-1" rounded bordered v-if="currentUser">
+          <div class="col-6">
+            <q-btn class="btn-delete full-width" padding="8px 8px">
+              <q-icon
+                size="16px"
+                name="mdi-trash-can-outline"
+                class="q-pr-xs"
+              />
+              <span class="text-caption">ลบข้อมูล</span>
+            </q-btn>
+          </div>
+        </div>
+      </div>
+
+      <AppBox
+        class="surface-1"
+        rounded
+        bordered
+        v-if="currentUser"
+        style="box-shadow: var(--shadow-2)"
+      >
         <div class="row q-col-gutter-md">
           <q-select
             dense
-          outlined
+            borderless
             emit-value
             map-options
             readonly
+            hide-dropdown-icon
             class="col-6"
             option-value="id"
             option-label="code"
@@ -173,10 +227,11 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
           <q-select
             v-model="currentBR"
             dense
-          outlined
+            borderless
             emit-value
             map-options
             readonly
+            hide-dropdown-icon
             class="col-6"
             id="selectBR"
             option-value="id"
@@ -184,21 +239,110 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
             :label="$t('branchLabel')"
             :options="br"
           />
-
+          <q-select
+            dense
+            borderless
+            emit-value
+            map-options
+            options-dense
+            hide-bottom-space
+            readonly
+            hide-dropdown-icon
+            class="col-3"
+            option-value="value"
+            option-label="label"
+            :label="$t('userType')"
+            v-model="currentUser.userType"
+            :options="userStore.userOption.userTypeOpts"
+            :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทผู้ใช้งาน']"
+          />
+          <q-select
+            dense
+            borderless
+            emit-value
+            map-options
+            options-dense
+            hide-bottom-space
+            readonly
+            hide-dropdown-icon
+            class="col-3"
+            :label="$t('userRole')"
+            option-label="label"
+            option-value="value"
+            v-model="currentUser.userRole"
+            :options="userStore.userOption.roleOpts"
+            :rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']"
+          />
           <q-input
             dense
             readonly
-          outlined
+            borderless
-          :label="$t('firstname')"
+            :label="$t('userCode')"
+            class="col-6"
+            v-model="currentUser.code"
+          />
+          <q-input
+            dense
+            borderless
+            hide-bottom-space
+            readonly
             class="col-3"
+            label="ชื่อ ภาษาไทย"
             v-model="currentUser.firstName"
+            :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาไทย']"
+          />
+          <q-input
+            dense
+            borderless
+            hide-bottom-space
+            readonly
+            class="col-3"
+            label="นามสกุล ภาษาไทย"
+            v-model="currentUser.lastName"
+            :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาไทย']"
+          />
+          <q-input
+            dense
+            borderless
+            hide-bottom-space
+            readonly
+            class="col-3"
+            label="ชื่อ ภาษาอังกฤษ"
+            v-model="currentUser.firstNameEN"
+            :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาอังกฤษ']"
+          />
+          <q-input
+            dense
+            borderless
+            hide-bottom-space
+            readonly
+            class="col-3"
+            label="นามสกุล ภาษาอังกฤษ"
+            v-model="currentUser.lastNameEN"
+            :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาอังกฤษ']"
+          />
+          <q-input
+            dense
+            readonly
+            borderless
+            label="เบอร์โทร"
+            class="col-6"
+            v-model="currentUser.zipCode"
+          />
+          <q-input
+            dense
+            readonly
+            borderless
+            label="อีเมล"
+            class="col-6"
+            v-model="currentUser.zipCode"
           />
 
           <div class="col-12 group-label">{{ $t('address') }}</div>
 
           <q-input
             dense
-          outlined
+            borderless
             readonly
             id="address"
             label="ที่อยู่"
@@ -207,10 +351,11 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
           />
           <q-select
             dense
-          outlined
+            borderless
             emit-value
             map-options
             readonly
+            hide-dropdown-icon
             id="selectProvince"
             v-model="currentUser.provinceId"
             option-value="id"
@@ -218,16 +363,18 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
             :label="$t('province')"
             class="col-3"
             @update:model-value="
-            (currentUser.districtId = null), (currentUser.subDistrictId = null)
+              (currentUser.districtId = null),
+                (currentUser.subDistrictId = null)
             "
             :options="opts.province"
           />
           <q-select
             dense
-          outlined
+            borderless
             emit-value
             map-options
             readonly
+            hide-dropdown-icon
             id="selectDistrict"
             v-model="currentUser.districtId"
             option-value="id"
@@ -239,10 +386,11 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
           />
           <q-select
             dense
-          outlined
+            borderless
             readonly
             emit-value
             map-options
+            hide-dropdown-icon
             id="SelectSubDistrict"
             v-model="currentUser.subDistrictId"
             option-value="id"
@@ -254,7 +402,7 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
           <q-input
             dense
             readonly
-          outlined
+            borderless
             :label="$t('zipCode')"
             class="col-3"
             v-model="currentUser.zipCode"
@@ -264,7 +412,8 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
 
           <q-input
             dense
-          outlined
+            borderless
+            hide-dropdown-icon
             readonly
             id="addressEN"
             label="ที่อยู่"
@@ -273,9 +422,10 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
           />
           <q-select
             dense
-          outlined
+            borderless
             emit-value
             map-options
+            hide-dropdown-icon
             readonly
             id="selectProvinceEN"
             v-model="currentUser.provinceId"
@@ -284,16 +434,18 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
             :label="$t('province')"
             class="col-3"
             @update:model-value="
-            (currentUser.districtId = null), (currentUser.subDistrictId = null)
+              (currentUser.districtId = null),
+                (currentUser.subDistrictId = null)
             "
             :options="opts.province"
           />
           <q-select
             dense
-          outlined
             emit-value
             map-options
+            borderless
             readonly
+            hide-dropdown-icon
             id="selectDistrictEN"
             v-model="currentUser.districtId"
             option-value="id"
@@ -305,8 +457,9 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
           />
           <q-select
             dense
-          outlined
+            borderless
             readonly
+            hide-dropdown-icon
             emit-value
             map-options
             id="SelectSubDistrictEN"
@@ -320,7 +473,7 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
           <q-input
             dense
             readonly
-          outlined
+            borderless
             zip="zipEN"
             :label="$t('zipCode')"
             class="col-3"
@@ -329,6 +482,7 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
         </div>
       </AppBox>
     </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
@@ -350,4 +504,24 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
     grid-template-columns: 1fr 4fr;
   }
 }
+
+.info-bg {
+  background-color: var(--surface-1);
+  height: 45vw;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.btn-edt {
+  color: white;
+  background-color: hsl(var(--info-bg));
+  border-radius: var(--radius-2);
+}
+
+.btn-delete {
+  color: hsl(var(--info-bg));
+  background-color: var(--surface-1);
+  border-radius: var(--radius-2);
+  border: 1px solid hsl(var(--info-bg));
+}
 </style>