From dfeb1061c704619331d22bae417201d0c8baec45 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Wed, 10 Apr 2024 18:08:25 +0700
Subject: [PATCH] feat: view personnel info (wip)

---
 .../person-info/MainPage.vue                  | 353 ++++++++++++++++++
 src/router/routes.ts                          |   7 +
 2 files changed, 360 insertions(+)
 create mode 100644 src/pages/02_personnel-management/person-info/MainPage.vue

diff --git a/src/pages/02_personnel-management/person-info/MainPage.vue b/src/pages/02_personnel-management/person-info/MainPage.vue
new file mode 100644
index 00000000..c6b02e31
--- /dev/null
+++ b/src/pages/02_personnel-management/person-info/MainPage.vue
@@ -0,0 +1,353 @@
+<script lang="ts" setup>
+import { useRoute } from 'vue-router';
+import { onMounted, ref, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+
+import useUserStore from 'stores/user';
+import useBranchStore from 'stores/branch';
+
+import { User } from 'stores/user/types';
+import { Branch, BranchWithChildren } from 'stores/branch/types';
+
+import PersonCard from 'components/home/PersonCard.vue';
+import AppBox from 'components/app/AppBox.vue';
+import useAddressStore, {
+  District,
+  Province,
+  SubDistrict,
+} from 'src/stores/address';
+import { reactive } from 'vue';
+
+const route = useRoute();
+
+const userStore = useUserStore();
+const addrStore = useAddressStore();
+const branchStore = useBranchStore();
+
+const { data: userData } = storeToRefs(userStore);
+
+const currentUser = ref<User>();
+const currentUserBranch = ref<Branch[]>([]);
+const currentHQ = ref<string | null>();
+const currentBR = ref<string | null>();
+
+const hq = ref<Branch[]>([]);
+const br = ref<Branch[]>([]);
+
+async function getCurrentUser() {
+  if (typeof route.params.id !== 'string') return;
+
+  const record = userData.value?.result.find((v) => v.id === route.params.id);
+
+  if (record) return (currentUser.value = record);
+
+  const res = await userStore.fetchById(route.params.id);
+
+  if (res) currentUser.value = res;
+}
+
+async function getUserBranch() {
+  if (!currentUser.value) return;
+
+  const res = await userStore.getBranch(currentUser.value.id);
+
+  if (!res) return;
+
+  currentUserBranch.value = res.result;
+
+  const mainBranch = currentUserBranch.value[0];
+
+  if (mainBranch && mainBranch.headOfficeId) {
+    currentHQ.value = mainBranch.headOfficeId;
+    currentBR.value = mainBranch.id;
+  } else {
+    currentHQ.value = mainBranch.id;
+  }
+}
+
+async function getHQ() {
+  const res = await branchStore.fetchList({
+    filter: 'head',
+    pageSize: 9999,
+  });
+  if (res) hq.value = res.result;
+}
+
+async function getBR() {
+  if (!currentHQ.value) return;
+
+  const res = await branchStore.fetchById<BranchWithChildren>(currentHQ.value, {
+    includeSubBranch: true,
+  });
+  if (res) br.value = res.branch;
+}
+
+const opts = reactive<{
+  province: Province[];
+  district: District[];
+  subDistrict: SubDistrict[];
+}>({
+  province: [],
+  district: [],
+  subDistrict: [],
+});
+
+async function getProvince() {
+  const result = await addrStore.fetchProvince();
+  if (result) opts.province = result;
+}
+async function getDistrict() {
+  if (!currentUser.value?.provinceId) return;
+  const result = await addrStore.fetchDistrictByProvinceId(
+    currentUser.value?.provinceId,
+  );
+  if (result) opts.district = result;
+}
+async function getSubDistrict() {
+  if (!currentUser.value?.districtId) return;
+  const result = await addrStore.fetchSubDistrictByProvinceId(
+    currentUser.value?.districtId,
+  );
+  if (result) opts.subDistrict = result;
+}
+
+onMounted(async () => {
+  getCurrentUser();
+  getHQ();
+  getProvince();
+});
+
+watch(() => route.params.id, getCurrentUser);
+watch(currentUser, getUserBranch);
+watch(currentHQ, getBR);
+watch(() => currentUser.value?.provinceId, getDistrict);
+watch(() => currentUser.value?.districtId, getSubDistrict);
+</script>
+
+<template>
+  <div
+    class="info-container"
+    :class="{ desktop: $q.screen.gt.sm, dark: $q.dark.isActive }"
+  >
+    <div>
+      <PersonCard
+        :list="[
+          {
+            id: currentUser.id,
+            img: `${currentUser.profileImageUrl}`,
+            name: `${currentUser.firstName} ${currentUser.lastName}`,
+            male: currentUser.gender === 'male',
+            female: currentUser.gender === 'female',
+            detail: [
+              { label: 'ตำแหน่ง', value: currentUser.userType },
+              { label: 'โทรศัพท์', value: currentUser.telephoneNo },
+              { label: 'อีเมล', value: currentUser.email },
+            ],
+            badge: currentUser.code,
+            disabled: currentUser.status === 'INACTIVE',
+          },
+        ]"
+        v-if="currentUser"
+        :grid-columns="1"
+        no-hover
+        no-action
+      />
+    </div>
+    <AppBox class="surface-1" rounded bordered v-if="currentUser">
+      <div class="row q-col-gutter-md">
+        <q-select
+          dense
+          outlined
+          emit-value
+          map-options
+          readonly
+          class="col-6"
+          option-value="id"
+          option-label="code"
+          id="selectHQ"
+          v-model="currentHQ"
+          @update:model-value="currentBR = null"
+          :label="$t('branchHQLabel')"
+          :options="hq"
+        />
+        <q-select
+          v-model="currentBR"
+          dense
+          outlined
+          emit-value
+          map-options
+          readonly
+          class="col-6"
+          id="selectBR"
+          option-value="id"
+          option-label="code"
+          :label="$t('branchLabel')"
+          :options="br"
+        />
+
+        <q-input
+          dense
+          readonly
+          outlined
+          :label="$t('firstname')"
+          class="col-3"
+          v-model="currentUser.firstName"
+        />
+
+        <div class="col-12 group-label">{{ $t('address') }}</div>
+
+        <q-input
+          dense
+          outlined
+          readonly
+          id="address"
+          label="ที่อยู่"
+          class="col-12"
+          v-model="currentUser.addressEN"
+        />
+        <q-select
+          dense
+          outlined
+          emit-value
+          map-options
+          readonly
+          id="selectProvince"
+          v-model="currentUser.provinceId"
+          option-value="id"
+          option-label="name"
+          :label="$t('province')"
+          class="col-3"
+          @update:model-value="
+            (currentUser.districtId = null), (currentUser.subDistrictId = null)
+          "
+          :options="opts.province"
+        />
+        <q-select
+          dense
+          outlined
+          emit-value
+          map-options
+          readonly
+          id="selectDistrict"
+          v-model="currentUser.districtId"
+          option-value="id"
+          option-label="name"
+          :label="$t('district')"
+          class="col-3"
+          @update:model-value="currentUser.subDistrictId = null"
+          :options="opts.district"
+        />
+        <q-select
+          dense
+          outlined
+          readonly
+          emit-value
+          map-options
+          id="SelectSubDistrict"
+          v-model="currentUser.subDistrictId"
+          option-value="id"
+          option-label="name"
+          :label="$t('subDistrict')"
+          class="col-3"
+          :options="opts.subDistrict"
+        />
+        <q-input
+          dense
+          readonly
+          outlined
+          :label="$t('zipCode')"
+          class="col-3"
+          v-model="currentUser.zipCode"
+        />
+
+        <div class="col-12 group-label">{{ $t('address') }} EN</div>
+
+        <q-input
+          dense
+          outlined
+          readonly
+          id="addressEN"
+          label="ที่อยู่"
+          class="col-12"
+          v-model="currentUser.addressEN"
+        />
+        <q-select
+          dense
+          outlined
+          emit-value
+          map-options
+          readonly
+          id="selectProvinceEN"
+          v-model="currentUser.provinceId"
+          option-value="id"
+          option-label="nameEN"
+          :label="$t('province')"
+          class="col-3"
+          @update:model-value="
+            (currentUser.districtId = null), (currentUser.subDistrictId = null)
+          "
+          :options="opts.province"
+        />
+        <q-select
+          dense
+          outlined
+          emit-value
+          map-options
+          readonly
+          id="selectDistrictEN"
+          v-model="currentUser.districtId"
+          option-value="id"
+          option-label="nameEN"
+          :label="$t('district')"
+          class="col-3"
+          @update:model-value="currentUser.subDistrictId = null"
+          :options="opts.district"
+        />
+        <q-select
+          dense
+          outlined
+          readonly
+          emit-value
+          map-options
+          id="SelectSubDistrictEN"
+          v-model="currentUser.subDistrictId"
+          option-value="id"
+          option-label="nameEN"
+          :label="$t('subDistrict')"
+          class="col-3"
+          :options="opts.subDistrict"
+        />
+        <q-input
+          dense
+          readonly
+          outlined
+          zip="zipEN"
+          :label="$t('zipCode')"
+          class="col-3"
+          v-model="currentUser.zipCode"
+        />
+      </div>
+    </AppBox>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.info-container {
+  --_group-label-color: currentColor;
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  gap: var(--size-4);
+
+  .group-label {
+    color: var(--_group-label-color);
+  }
+
+  &.dark {
+    --_group-label-color: hsl(var(--info-bg));
+  }
+
+  &.desktop {
+    grid-template-columns: 1fr 4fr;
+  }
+}
+</style>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index ca05d277..b89bddfd 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -1,6 +1,7 @@
 import { RouteRecordRaw } from 'vue-router';
 
 const routes: RouteRecordRaw[] = [
+  { path: '/test', component: () => import('pages/99-test/MainPage.vue') },
   {
     path: '',
     redirect: { name: 'Home' },
@@ -21,6 +22,12 @@ const routes: RouteRecordRaw[] = [
         name: 'PersonnelManagement',
         component: () => import('pages/02_personnel-management/MainPage.vue'),
       },
+      {
+        path: '/personnel-management/:id',
+        name: 'PersonnelInfo',
+        component: () =>
+          import('pages/02_personnel-management/person-info/MainPage.vue'),
+      },
     ],
   },