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

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