From e7d7239923be44dc94c7d190c05a37f1f0ffcd1e Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Thu, 28 Mar 2024 11:32:03 +0700
Subject: [PATCH] =?UTF-8?q?component=20=E0=B8=97=E0=B8=B0=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=B1=E0=B8=95=E0=B8=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/02_organizational/api.organization.ts |   2 +
 src/components/Dialogs/PopupPersonalNew.vue   | 424 ++++++++++++++++++
 .../interface/response/Information.ts         |   2 +-
 3 files changed, 427 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Dialogs/PopupPersonalNew.vue

diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index b497f4431..ec907dceb 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -84,4 +84,6 @@ export default {
   orgPosMoveEmp: `${orgEmployeePos}/move`,
   orgProfileEmp: `${orgEmployeePos}/profile`,
   orgSearchProfileEmp: `${orgProfile}-employee/search`,
+
+  orgProfileById:(id:string)=>`${orgProfile}/${id}`
 };
diff --git a/src/components/Dialogs/PopupPersonalNew.vue b/src/components/Dialogs/PopupPersonalNew.vue
new file mode 100644
index 000000000..3dedffa82
--- /dev/null
+++ b/src/components/Dialogs/PopupPersonalNew.vue
@@ -0,0 +1,424 @@
+<script setup lang="ts">
+import { ref, reactive, watch, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { PersonalImformation } from "@/components/information/interface/response/Information";
+import type { Goverment } from "@/components/information/interface/response/Government";
+import type { Avatar } from "@/components/information/interface/response/avatar";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const mixin = useCounterMixin();
+const $q = useQuasar();
+const retireDate = ref<Date>();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const fileName = ref<string>("");
+
+/** props*/
+const props = defineProps({
+  id: {
+    type: String,
+    requier: true,
+  },
+  modal: {
+    type: Boolean,
+    requier: true,
+  },
+});
+
+/** emit*/
+const emit = defineEmits(["update:modal"]);
+
+/** interface*/
+interface StatusLoad {
+  val: boolean;
+  val2: boolean;
+  val3: boolean;
+}
+
+/** ตัวแปร*/
+const modal = ref<boolean>(false);
+const statusLoad = ref<StatusLoad>({ val: false, val2: false, val3: false }); // เช็คสถานะการโหลด
+const avatar = reactive<Avatar>({
+  avatar: "",
+  fullname: "",
+  position: "",
+});
+const imformation = reactive<PersonalImformation>({
+  prefix: "",
+  citizenId: "",
+  firstName: "",
+  lastName: "",
+  birthDate: "",
+  age: "",
+  gender: "",
+});
+const goverment = reactive<Goverment>({
+  oc: "",
+  posNo: "",
+  position: "",
+  positionPathSide: "",
+  positionLine: "",
+  positionType: "",
+  positionLevel: "",
+  positionExecutive: "",
+  positionExecutiveSide: "",
+});
+
+function calculateAge(birthDate: Date | null) {
+  if (!birthDate) return null;
+  const birthDateTimeStamp = new Date(birthDate).getTime();
+  const now = new Date();
+  const diff = now.getTime() - birthDateTimeStamp;
+
+  const ageDate = new Date(diff);
+  const years = ageDate.getUTCFullYear() - 1970;
+  const months = ageDate.getUTCMonth();
+  const days = ageDate.getUTCDate() - 1;
+  const retire = new Date(birthDate);
+  retire.setFullYear(retire.getFullYear() + 60);
+  retireDate.value = retire;
+
+  if (years > 60) {
+    return "อายุเกิน 60 ปี";
+  }
+
+  return `${years} ปี ${months} เดือน ${days} วัน`;
+}
+
+/**
+ * function เรียกข้อมูลส่วนตัว
+ * @param id profileID
+ */
+async function fetchInformation(id: string) {
+  showLoader();
+  await http
+    .get(config.API.orgProfileById(id))
+    .then((res) => {
+      const data = res.data.result;
+      imformation.prefix = data.prefix ? data.prefix : "-";
+      imformation.citizenId = data.citizenId ? data.citizenId : "-";
+      imformation.firstName = data.firstName ? data.firstName : "-";
+      imformation.lastName = data.lastName ? data.lastName : "-";
+      imformation.birthDate = data.birthDate ? date2Thai(data.birthDate) : "-";
+      imformation.age = data.birthDate ? calculateAge(data.birthDate) : "-";
+      imformation.gender = data.gender ?? "-";
+
+      avatar.fullname = data.createdFullName
+        ? `${data.prefix}${data.lastUpdateFullName}`
+        : "-";
+      avatar.position = data.position ? data.position : "-";
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      statusLoad.value.val2 = true;
+      loaderFunction();
+    });
+}
+
+/**
+ * function เรียกข้อมูลข้อมูลราชการ
+ * @param id profileID
+ */
+async function fetchProfileGov(id: string) {
+  showLoader();
+  await http
+    .get(config.API.profileNewGovernmentById(id))
+    .then((res) => {
+      const data = res.data.result;
+      goverment.oc = data.org ?? "-";
+      goverment.posNo = data.posMasterNo ?? "-";
+      goverment.position = data.position ?? "-";
+      goverment.positionPathSide = data.positionArea ?? "-";
+      goverment.positionLine = data.positionField ?? "-";
+      goverment.positionType = data.posType ?? "-";
+      goverment.positionLevel = data.posLevel ?? "-";
+      goverment.positionExecutive = data.posExecutive ?? "-";
+      goverment.positionExecutiveSide = data.positionExecutiveField ?? "-";
+    })
+
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      statusLoad.value.val3 = true;
+      loaderFunction();
+    });
+}
+
+/** functoion เช็คการโหลดของข้อมูล*/
+function loaderFunction() {
+  const allTrue = Object.values(statusLoad.value).every((val) => val);
+  allTrue && hideLoader();
+}
+
+function redirecToRegistry() {
+  window.open(`/registry-new/${props.id}`, "_blank");
+  modal.value = false;
+}
+
+watch(
+  () => props.modal,
+  async () => {
+    modal.value = props.modal ? props.modal : false;
+    modal.value &&
+      props.id &&
+      (await fetchInformation(props.id), await fetchProfileGov(props.id)),
+      (fileName.value = `profile-${props.id}`),
+      await fetchProfile(props.id as string);
+  }
+);
+
+watch(modal, (newValue) => {
+  if (!newValue) {
+    emit("update:modal", false);
+  }
+});
+
+async function fetchProfile(id: string) {
+  showLoader();
+  await http
+    .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, fileName.value))
+    .then(async (res) => {
+      avatar.avatar = res.data.downloadUrl;
+    })
+    .catch(() => {})
+    .finally(() => {
+      hideLoader();
+    });
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" position="right" :maximized="true">
+    <q-card style="width: 420px; overflow: visible">
+      <q-toolbar>
+        <q-toolbar-title class="text-subtitle1 text-bold"
+          >ทะเบียนประวัติ</q-toolbar-title
+        >
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="emit('update:modal', false)"
+          style="color: red; background-color: #ffdede"
+        />
+      </q-toolbar>
+      <!-- <q-card-section>
+        <div class="text-bold text-h6 text-center">ข้อมูลทะเบียนประวัติ</div>
+        <q-space />
+
+      </q-card-section> -->
+
+      <q-card-section class="col q-pt-none bg-grey-12">
+        <div class="q-gutter-md">
+          <q-card bordered class="text-center bg-grey-12">
+            <div>
+              <q-avatar size="120px" color="grey-4">
+                <img
+                  v-if="avatar.avatar"
+                  :src="avatar.avatar"
+                  class="bg-grey-3"
+                  style="object-fit: cover"
+                />
+                <img
+                  v-else
+                  src="@/assets/avatar_user.jpg"
+                  class="bg-grey-3"
+                  style="object-fit: cover"
+                />
+              </q-avatar>
+            </div>
+            <div
+              class="q-mt-md text-subtitle2 text-bold"
+              style="font-size: 18px"
+            >
+              {{ avatar.fullname }}
+            </div>
+            <div
+              v-if="avatar.position != '-'"
+              class="q-mb-xs text-center text-grey"
+            >
+              {{ avatar.position }}
+            </div>
+            <div class="q-mt-md">
+              <q-btn
+                class="bg-white"
+                outline
+                rounded
+                label="ดูรายละเอียดเพิ่มเติมทั้งหมด"
+                color="secondary"
+                @click.prevent="redirecToRegistry"
+              />
+            </div>
+          </q-card>
+
+          <q-scroll-area style="height: 65vh; max-width: 100%">
+            <div class="q-gutter-md q-pa-sm">
+              <q-card bordered style="border: 1px solid #d6dee1">
+                <div class="q-pa-md">
+                  <div class="text-weight-bold row items-center">
+                    <q-icon name="mdi-account" color="grey-7" />
+                    <span class="q-ml-md">ข้อมูลส่วนตัว </span>
+                  </div>
+                  <div class="row q-pa-sm">
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="imformation.citizenId"
+                        label="เลขประจำตัวประชาชน"
+                      ></q-input>
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="imformation.prefix"
+                        label="คำนำหน้าชื่อ"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="imformation.firstName"
+                        label="ชื่่อ"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="imformation.lastName"
+                        label="นามสกุล"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="imformation.birthDate"
+                        label="วัน/เดือน/ปีเกิด"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="imformation.gender"
+                        label="เพศ"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="imformation.age"
+                        label="อายุ"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </q-card>
+
+              <q-card bordered style="border: 1px solid #d6dee1">
+                <div class="q-pa-md">
+                  <div class="text-weight-bold row items-center">
+                    <q-icon name="mdi-account-tie" color="grey-7" />
+                    <span class="q-ml-md">ข้อมูลราชการ </span>
+                  </div>
+                  <div class="row q-pa-sm">
+                    <div class="col-xs-12 col-md-12">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="goverment.oc === '' ? '-' : goverment.oc"
+                        label="สังกัด"
+                        autogrow
+                      ></q-input>
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="goverment.posNo"
+                        label="ตำแหน่งเลขที่"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="goverment.position"
+                        label="ตำแหน่ง"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="goverment.positionPathSide"
+                        label="ด้าน/สาขา"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="goverment.positionLine"
+                        label="สายงาน"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="goverment.positionType"
+                        label="ประเภท"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="goverment.positionLevel"
+                        label="ระดับ"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="goverment.positionExecutive"
+                        label="ตำแหน่งทางการบริหาร"
+                      />
+                    </div>
+                    <div class="col-xs-6 col-md-6">
+                      <q-input
+                        borderless
+                        readonly
+                        :model-value="goverment.positionExecutiveSide"
+                        label="ด้านตำแหน่งทางการบริหาร"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </q-card>
+            </div>
+          </q-scroll-area>
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/components/information/interface/response/Information.ts b/src/components/information/interface/response/Information.ts
index 53fda083a..65e4e7e80 100644
--- a/src/components/information/interface/response/Information.ts
+++ b/src/components/information/interface/response/Information.ts
@@ -27,7 +27,7 @@ interface PersonalImformation {
   firstName: string;
   lastName: string;
   birthDate: string | null;
-  age: string;
+  age: any;
   gender: string;
 }