From f6f28dd1019ec4c9fd320d0fb528ab6c10824305 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 8 Mar 2024 16:08:46 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04_registryNew/components/TableView.vue   |  73 +++----------
 .../detail/PersonalInformation/01_Profile.vue |   6 ++
 .../02_NameChangeHistory.vue                  |   6 ++
 .../detail/PersonalInformation/03_Address.vue |   6 ++
 .../detail/PersonalInformation/04_Family.vue  |   6 ++
 .../PersonalInformation/05_Education.vue      |   6 ++
 .../PersonalInformation/06_SpecialSkill.vue   |   6 ++
 .../detail/PersonalInformation/Main.vue       |  64 +++++++++++
 .../components/detail/TabMain.vue             |  76 +++++++++++++
 src/modules/04_registryNew/router.ts          |  13 +++
 .../04_registryNew/stores/DetailMain.ts       |  11 ++
 .../04_registryNew/views/detailView.vue       | 100 +++++++++++++++++-
 12 files changed, 310 insertions(+), 63 deletions(-)
 create mode 100644 src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue
 create mode 100644 src/modules/04_registryNew/stores/DetailMain.ts

diff --git a/src/modules/04_registryNew/components/TableView.vue b/src/modules/04_registryNew/components/TableView.vue
index f5552c3f4..ba9554871 100644
--- a/src/modules/04_registryNew/components/TableView.vue
+++ b/src/modules/04_registryNew/components/TableView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ref, watch, computed, onMounted } from "vue";
+import { ref, watch } from "vue";
+import { useRouter } from "vue-router";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -13,6 +14,7 @@ import DialogHistory from "@/modules/04_registryNew/components/DialogHistory.vue
 import { useRegistryNewDataStore } from "@/modules/04_registryNew/store";
 
 const store = useRegistryNewDataStore();
+const router = useRouter();
 
 const formFilter = defineModel<FormFilter>("formFilter", { required: true });
 const maxPage = defineModel<Number>("maxPage", { required: true });
@@ -173,6 +175,10 @@ function onClickHistory() {
   modalHistory.value = !modalHistory.value;
 }
 
+function onClickViewDetail(id: string) {
+  router.push(`/registry-new/${id}`);
+}
+
 watch(
   () => formFilter.value.pageSize,
   () => {
@@ -278,7 +284,11 @@ watch(
     </template>
     <template v-slot:body="props" v-if="store.mode === 'table'">
       <q-tr :props="props" class="cursor-pointer">
-        <q-td v-for="col in props.cols" :key="col.id">
+        <q-td
+          v-for="col in props.cols"
+          :key="col.id"
+          @click="onClickViewDetail(props.row.id)"
+        >
           <div v-if="col.name === 'no'">
             {{
               (formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
@@ -388,67 +398,10 @@ watch(
             color="black"
             label="ดูเพิ่มเติม"
             class="hover-button full-width q-pa-md"
+            @click="onClickViewDetail(props.row.id)"
           />
         </q-card>
       </div>
-
-      <!-- <div class="col-xs-12 col-sm-6 col-md-3"> -->
-      <!-- <q-card style="border: 0.5px solid #e4e4e4">
-          <div class="flex justify-center q-pt-md q-px-md">
-            <q-item-section avatar class="q-pa-none">
-              <img
-                src="@/assets/avatar_user.jpg"
-                class="col-4 img-info q-mt-md"
-                style="width: 120px; height: 120px; border-radius: 50%"
-              />
-              <div class="text-weight-medium q-mt-md">
-                {{
-                  `${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
-                }}
-              </div>
-              <div class="text-weight-light full-width text-center">
-                {{ props.row.citizenId }}
-              </div>
-            </q-item-section>
-            <q-card
-              bordered
-              class="q-my-md q-py-md full-width bg-grey-2"
-              style="border: 0.5px solid #e4e4e4"
-            >
-              <div class="row q-pl-md">
-                <div class="col">
-                  <div class="text-weight-light">ตำแหน่งเลขที่</div>
-                  <div class="text-weight-medium">{{ props.row.posNo }}</div>
-                </div>
-                <div class="col">
-                  <div class="text-weight-light">ตำแหน่ง</div>
-                  <div class="text-weight-medium">
-                    {{ props.row.position }}
-                  </div>
-                </div>
-              </div>
-              <div class="row q-pl-md q-pt-md">
-                <div class="col">
-                  <div class="text-weight-light">ประเภท</div>
-                  <div class="text-weight-medium">
-                    {{ props.row.posType }}
-                  </div>
-                </div>
-                <div class="col">
-                  <div class="text-weight-light">ระดับชั้นงาน</div>
-                  <div class="text-weight-medium">
-                    {{ props.row.posLevel }}
-                  </div>
-                </div>
-              </div>
-            </q-card>
-          </div>
-          <q-separator class="" color="" />
-          <div class="see-more text-center q-py-md" style="width: 100%">
-            <span style="font-size: 14px; font-weight: 500">ดูเพิ่มเติม</span>
-          </div>
-        </q-card> -->
-      <!-- </div> -->
     </template>
     <template v-slot:pagination="scope">
       <q-pagination
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
index e69de29bb..3e136d8d4 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <div>1</div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
index e69de29bb..e24c62a13 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <div>2</div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
index e69de29bb..2bb5eb5c5 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <div>3</div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
index e69de29bb..ecfe8f03f 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <div>4</div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
index e69de29bb..884511056 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <div>5</div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
index e69de29bb..1352cb483 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts"></script>
+<template>
+  <div>6</div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue
new file mode 100644
index 000000000..6b382cb68
--- /dev/null
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+/** importComponents*/
+import Profile from "@/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue";
+import NameChangeHistory from "@/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue";
+import Address from "@/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue";
+import Family from "@/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue";
+import Education from "@/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue";
+import SpecialSkill from "@/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue";
+
+const tab = ref<string>("1");
+</script>
+<template>
+  <div class="row items-center q-mb-lg">
+    <div class="text-dark row items-center" style="font-size: 22px">
+      <q-icon name="mdi-account" class="q-mr-md" />
+      <span>ข้อมูลส่วนตัว</span>
+    </div>
+  </div>
+
+  <q-separator />
+  <q-tabs
+    v-model="tab"
+    dense
+    class="text-grey"
+    active-color="blue"
+    indicator-color="white"
+    align="justify"
+    narrow-indicator
+    bordered
+  >
+    <q-tab name="1" label="ข้อมูลส่วนตัว" />
+    <q-tab name="2" label="ประวัติการเปลี่ยนชื่อ-นามสกุล" />
+    <q-tab name="3" label="ข้อมูลที่อยู่" />
+    <q-tab name="4" label="ข้อมูลครอบครัว" />
+    <q-tab name="5" label="ประวัติการศึกษา" />
+    <q-tab name="6" label="ความสามารถพิเศษ" />
+  </q-tabs>
+  <q-separator />
+
+  <q-tab-panels v-model="tab" animated>
+    <q-tab-panel name="1">
+      <Profile />
+    </q-tab-panel>
+    <q-tab-panel name="2">
+      <NameChangeHistory />
+    </q-tab-panel>
+    <q-tab-panel name="3">
+      <Address />
+    </q-tab-panel>
+    <q-tab-panel name="4">
+      <Family />
+    </q-tab-panel>
+    <q-tab-panel name="5">
+      <Education />
+    </q-tab-panel>
+    <q-tab-panel name="6">
+      <SpecialSkill />
+    </q-tab-panel>
+  </q-tab-panels>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryNew/components/detail/TabMain.vue b/src/modules/04_registryNew/components/detail/TabMain.vue
index e69de29bb..b7d7b7465 100644
--- a/src/modules/04_registryNew/components/detail/TabMain.vue
+++ b/src/modules/04_registryNew/components/detail/TabMain.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+import { useRegistryDetailNewDataStore } from "@/modules/04_registryNew/stores/DetailMain";
+
+import PersonalInformationMain from "@/modules/04_registryNew/components/detail/PersonalInformation/Main.vue";
+
+const store = useRegistryDetailNewDataStore();
+
+const itemsTab = ref<any>([
+  {
+    name: "1",
+    icon: "mdi-account",
+    label: "ข้อมูลส่วนตัว",
+  },
+  {
+    name: "2",
+    icon: "mdi-account-tie",
+    label: "ข้อมูลราชการ",
+  },
+  {
+    name: "3",
+    icon: "mail",
+    label: "ข้อมูลเงินเดือน/ค่าจ้าง",
+  },
+  {
+    name: "4",
+    icon: "mdi-cash",
+    label: "ข้อมูลเครื่องราช",
+  },
+  {
+    name: "5",
+    icon: "mdi-bookmark",
+    label: "ข้อมูลอื่นๆ",
+  },
+]);
+
+const splitterModel = ref<number>(12);
+</script>
+<template>
+  <q-splitter v-model="splitterModel" disable>
+    <template v-slot:before>
+      <q-tabs v-model="store.tabMain" vertical class="text-blue">
+        <q-tab
+          v-for="(tab, index) in itemsTab"
+          :key="index"
+          :name="tab.name"
+          :icon="tab.icon"
+          :label="tab.label"
+        />
+      </q-tabs>
+    </template>
+
+    <template v-slot:after>
+      <q-tab-panels
+        v-model="store.tabMain"
+        animated
+        swipeable
+        vertical
+        transition-prev="jump-up"
+        transition-next="jump-up"
+      >
+        <q-tab-panel
+          v-for="(tab, index) in itemsTab"
+          :key="index"
+          :name="tab.name"
+        >
+          <PersonalInformationMain v-if="store.tabMain === '1'" />
+          <!-- <div class="text-h4 q-mb-md">{{ tab.label }}</div> -->
+        </q-tab-panel>
+      </q-tab-panels>
+    </template>
+  </q-splitter>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryNew/router.ts b/src/modules/04_registryNew/router.ts
index 463704fc6..23717baee 100644
--- a/src/modules/04_registryNew/router.ts
+++ b/src/modules/04_registryNew/router.ts
@@ -1,5 +1,7 @@
 const mainPage = () => import("@/modules/04_registryNew/views/main.vue");
 const listPage = () => import("@/modules/04_registryNew/views/list.vue");
+const detailPage = () =>
+  import("@/modules/04_registryNew/views/detailView.vue");
 
 export default [
   {
@@ -12,6 +14,17 @@ export default [
       Role: "organization",
     },
   },
+  {
+    path: "/registry-new/:id",
+    name: "registryNewByid",
+    component: detailPage,
+    meta: {
+      Auth: true,
+      Key: [7],
+      Role: "organization",
+    },
+  },
+
   // {
   //   path: "/registry-new/list",
   //   name: "registryNewList",
diff --git a/src/modules/04_registryNew/stores/DetailMain.ts b/src/modules/04_registryNew/stores/DetailMain.ts
new file mode 100644
index 000000000..fec5f95ce
--- /dev/null
+++ b/src/modules/04_registryNew/stores/DetailMain.ts
@@ -0,0 +1,11 @@
+import { defineStore } from "pinia";
+
+import { ref } from "vue";
+
+export const useRegistryDetailNewDataStore = defineStore(
+  "registryNewDetail",
+  () => {
+    const tabMain = ref<string>("1");
+    return { tabMain };
+  }
+);
diff --git a/src/modules/04_registryNew/views/detailView.vue b/src/modules/04_registryNew/views/detailView.vue
index 371c2a2f5..b23d8c8ad 100644
--- a/src/modules/04_registryNew/views/detailView.vue
+++ b/src/modules/04_registryNew/views/detailView.vue
@@ -1,6 +1,100 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+import TabMain from "@/modules/04_registryNew/components/detail/TabMain.vue";
+
+const router = useRouter();
+</script>
 <template>
-  <div></div>
+  <div class="row items-center q-gutter-sm">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      ทะเบียนประวัติ
+    </div>
+    <q-space />
+    <q-btn-dropdown
+      size="16px"
+      rounded
+      unelevated
+      color="grey-4"
+      text-color="red"
+      icon="mdi-home-export-outline"
+      dropdown-icon="mdi-chevron-down"
+    >
+      <q-list>
+        <q-item clickable v-close-popup>
+          <q-item-section avatar>
+            <q-avatar icon="folder" color="primary" text-color="white" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>Photos</q-item-label>
+            <q-item-label caption>February 22, 2016</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-icon name="info" color="amber" />
+          </q-item-section>
+        </q-item>
+
+        <q-item clickable v-close-popup>
+          <q-item-section avatar>
+            <q-avatar icon="assignment" color="secondary" text-color="white" />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>Vacation</q-item-label>
+            <q-item-label caption>February 22, 2016</q-item-label>
+          </q-item-section>
+          <q-item-section side>
+            <q-icon name="info" color="amber" />
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-btn-dropdown>
+    <q-btn
+      unelevated
+      round
+      color="grey-4"
+      text-color="primary"
+      icon="mdi-file-eye-outline"
+    />
+  </div>
+
+  <q-card>
+    <div class="column" style="height: 150px; position: relative">
+      <div class="col justify-center"></div>
+      <div class="absolute-center-left q-ml-lg">
+        <q-avatar size="130px">
+          <img src="https://cdn.quasar.dev/img/avatar2.jpg" />
+        </q-avatar>
+        <q-btn
+          round
+          color="white"
+          text-color="primary"
+          icon="mdi-pencil-outline"
+          style="position: absolute; bottom: 0; right: 0"
+        />
+      </div>
+      <div class="col bg-teal-2"></div>
+    </div>
+  </q-card>
+
+  <q-card class="q-mt-md">
+    <TabMain />
+  </q-card>
 </template>
 
-<style scoped></style>
+<style scoped>
+.absolute-center-left {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+</style>