รายละเอียดรับโอน

src/views/Dashboard.vue

@@ -1,34 +1,57 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  ResponseInbox,
+  DataInbox,
+} from "@/interface/response/dashboard/dashboard";
+
+const $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const {
+  showLoader,
+  hideLoader,
+  dialogMessage,
+  success,
+  messageError,
+  date2Thai,
+} = mixin;
+
 const iteminbox = ref<any>([]);
 const splitterModel = ref<number>(30);
-const link = ref<number>(1);
-const inboxList = ref<any>([
+const link = ref<string>("0");
+const inboxList = ref<DataInbox[]>([
   {
-    no: 1,
+    no: "1",
     sender: "เจ้าหน้าที่ทะเบียนประวัติ",
     subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
-    timereceive: "13/12/2565",
+    timereceive: new Date(),
     body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
     ratingModel: 0,
   },
   {
-    no: 2,
+    no: "2",
     sender: "เจ้าหน้าที่ทะเบียนประวัติ",
     subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
-    timereceive: "13/12/2565",
+    timereceive: new Date(),
     body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
-    ratingModel: 1,
+    ratingModel: 0,
   },
 ]);
-const data = ref<any>([
-  {
-    no: 1,
-    sender: "เจ้าหน้าที่ทะเบียนประวัติ",
-    subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
-    timereceive: "13/12/2565",
-    body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
-  },
+const data = ref<DataInbox[]>([
+  //   {
+  //     no: "1",
+  //     sender: "เจ้าหน้าที่ทะเบียนประวัติ",
+  //     subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
+  //     timereceive: new Date(),
+  //     body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
+  //     ratingModel: 0,
+  //   },
 ]);
 const btnReply = ref<boolean>(true);
 const listpayload = ref<any>([]);
@@ -51,6 +74,46 @@ const barStyle = ref<any>({
   width: "9px",
   opacity: 0.2,
 });
+
+onMounted(async () => {
+  await getData();
+});
+
+const getData = async () => {
+  showLoader();
+  await http
+    .get(config.API.msgInbox)
+    .then((res: any) => {
+      const response = res.data.result;
+      //   console.log(response);
+      let list: DataInbox[] = [];
+      response.map((e: ResponseInbox) => {
+        list.push({
+          no: e.id ?? "",
+          sender:
+            e.createdFullName == "" || e.createdFullName == null
+              ? "เจ้าหน้าที่"
+              : e.createdFullName,
+          subject: e.subject ?? "",
+          timereceive: new Date(e.createdAt),
+          body: e.body ?? "",
+          ratingModel: 0,
+        });
+      });
+      inboxList.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const selectInbox = (id: string) => {
+  link.value = id;
+  data.value = inboxList.value.filter((r) => r.no == id);
+};
 </script>
 
 <!-- page:หน้าแรก -->
@@ -88,10 +151,11 @@ const barStyle = ref<any>({
               class="mytry"
               :active="link === contact.no"
               active-class="my-menu-link"
+              @click="selectInbox(contact.no)"
             >
               <q-item-section>
                 <q-item-label caption class="text-weight-light">{{
-                  contact.timereceive
+                  date2Thai(contact.timereceive)
                 }}</q-item-label>
                 <q-item-label class="text-weight-medium">{{
                   contact.sender
@@ -174,7 +238,9 @@ const barStyle = ref<any>({
               </q-item-section>
 
               <q-item-section side top>
-                <q-item-label caption>{{ d.timereceive }}</q-item-label>
+                <q-item-label caption>{{
+                  date2Thai(d.timereceive)
+                }}</q-item-label>
                 <div class="text-grey-8 q-gutter-xs q-pt-sm">
                   <q-btn
                     flat

src/views/MainLayout.vue

@@ -5,6 +5,11 @@ import { useRoute, useRouter } from "vue-router";
 import { useDataStore } from "@/stores/data";
 import { storeToRefs } from "pinia";
 import { scroll, useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import type {
   ScrollType,
   notiType,
@@ -21,6 +26,15 @@ const store = useDataStore();
 const route = useRoute();
 const router = useRouter();
 const link = ref<string>("");
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const {
+  showLoader,
+  hideLoader,
+  dialogMessage,
+  success,
+  messageError,
+  date2Thai,
+} = mixin;
 
 const $q = useQuasar();
 const { tabData, loader } = storeToRefs(store);
@@ -38,10 +52,10 @@ const text = ref<string>("");
 
 const notiList = ref<notiType[]>([
   {
-    id: 1,
+    id: "1",
     sender: "ท",
     body: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
-    timereceive: "13/12/2565",
+    timereceive: new Date(),
   },
 ]);
 const options = ref<optionType[]>([
@@ -64,6 +78,36 @@ const options = ref<optionType[]>([
     color: "indigo",
   },
 ]);
+
+const getDataNotification = async () => {
+  showLoader();
+  await http
+    .get(config.API.msgNotificate)
+    .then((res: any) => {
+      const response = res.data.result;
+      //   console.log("response", response);
+      let list: notiType[] = [];
+      response.map((e: any) => {
+        list.push({
+          id: e.id,
+          sender:
+            e.createdFullName == "" || e.createdFullName == null
+              ? "เจ้าหน้าที่"[0]
+              : e.createdFullName[0],
+          body: e.body ?? "",
+          timereceive: new Date(e.createdAt),
+        });
+      });
+      notiList.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
 /**
  * ให้แสดง แทปด้านขวา เมื่อเข้าหน้า รายละเอียดทะเบียนประวัติ
  */
@@ -166,7 +210,8 @@ const activeBtn = () => {
  * เริ่มเข้ามา state rightActive เป็น state ที่โชว์ ปุ่มขวา
  * ยังจับ boolean ผิด จึงต้อง set
  */
-onMounted(() => {
+onMounted(async () => {
+  await getDataNotification();
   myEventHandler(null, false);
   window.addEventListener("resize", (e: any) => {
     myEventHandler(e, true);
@@ -221,7 +266,8 @@ const myEventHandler = (e: any, setSCroll: boolean) => {
  */
 const activeMenu = (path: string) => {
   if (path == "dashboard" && route.fullPath == "/") return true;
-  if (path == "registry" && route.fullPath == "/registry-employee") return false;
+  if (path == "registry" && route.fullPath == "/registry-employee")
+    return false;
   if (path == "registry" && route.fullPath == "/") return false;
   // if (path != "registry" && path == "registryEmployee" && route.fullPath == "/registryEmployee") return true;
   const bool = route.fullPath.includes(`/${path}`);
@@ -427,7 +473,7 @@ if (keycloak.tokenParsed != null) {
                     n.body
                   }}</q-item-label>
                   <q-item-label caption class="row items-center text-grey-7">{{
-                    n.timereceive
+                    date2Thai(n.timereceive)
                   }}</q-item-label>
                 </q-item-section>
                 <q-btn