Merge branch 'NiceDev' into develop

src/modules/01_dashboard/views/Dashboard.vue

@@ -11,7 +11,7 @@ import PopupDetailInbox from "@/components/PopupDetailInbox.vue";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, date2Thai } = mixin;
+const { showLoader, hideLoader, date2Thai, messageError } = mixin;
 
 const fullname = ref<string>("ธัญลักษณ์");
 const inboxList = ref<any>([
@@ -105,8 +105,9 @@ const fetchlistInbox = async (index: number) => {
             timereceive: date2Thai(e.createdAt),
             body: e.body ?? "-",
             ratingModel: 0,
-            receiveDate: date2Thai(e.receiveDate),
+            receiveDate: e.receiveDate,
             payload: e.payload,
+            isOpen: e.isOpen,
           });
         });
         inboxList.value.push(...listItem);
@@ -138,10 +139,25 @@ function modalReplyClose() {
 
 const dataInbox = ref<any>();
 const modalDetial = ref<boolean>(false);
-function onClickOpenPopupDetail(data: any) {
-  dataInbox.value = data;
-  link.value = data.no;
-  modalDetial.value = !modalDetial.value;
+async function onClickOpenPopupDetail(data: any) {
+  showLoader();
+  await http
+    .get(config.API.msgInboxRead(data.no))
+    .then(() => {
+      const filterDate = inboxList.value.filter((r: any) => r.no == data.no);
+      for (const item of filterDate) {
+        item.isOpen = true;
+      }
+      dataInbox.value = data;
+      link.value = data.no;
+      modalDetial.value = !modalDetial.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 function updateModalDetail(val: boolean) {
@@ -156,9 +172,13 @@ async function onLoad(index: number, done: any) {
     setTimeout(() => {
       fetchlistInbox(num);
       done();
-    }, 2000);
+    }, 3000);
   }
 }
+const thaiOptions: Intl.DateTimeFormatOptions = {
+  hour: "2-digit",
+  minute: "2-digit",
+};
 </script>
 
 <template>
@@ -220,14 +240,8 @@ async function onLoad(index: number, done: any) {
           <div class="text-subtitle1 text-weight-bold text-dark">
             กล่องข้อความ
           </div>
-          <!-- <q-space />
-          <q-btn
-            dense
-            icon="mdi-dots-vertical"
-            color="grey-6"
-            size="11px"
-            flat
-          /> -->
+          <q-space />
+          <div class="text-grey-5" style="font-size: 12px">ทั้งหมด {{ totalInbox }} ข้อความ</div>
         </div>
         <div
           v-if="totalInbox != 0"
@@ -248,13 +262,25 @@ async function onLoad(index: number, done: any) {
               <q-item
                 clickable
                 v-ripple
-                class="q-py-md q-mb-sm my-menu"
+                class="'q-py-md q-mb-sm my-menu'"
                 :active="link === item.no"
                 active-class="my-menu-link"
                 @click="onClickOpenPopupDetail(item)"
               >
                 <q-item-section>
-                  <q-item-label>
+                  <q-item-label caption class="text-weight-light">
+                    {{ date2Thai(item.receiveDate) }}
+                    {{
+                      new Date(item.receiveDate).toLocaleTimeString(
+                        "th-TH",
+                        thaiOptions
+                      )
+                    }}
+                    น. <q-space />
+                  </q-item-label>
+                  <q-item-label
+                    :class="!item.isOpen ? 'text-weight-medium' : 'text-grey-7'"
+                  >
                     {{ item.sender }}
                     <q-icon
                       v-if="item.payload"
@@ -262,9 +288,12 @@ async function onLoad(index: number, done: any) {
                       color="grey-6"
                       size="18px"
                   /></q-item-label>
-                  <q-item-label caption class="text-grey-6" lines="2">{{
-                    item.subject
-                  }}</q-item-label>
+                  <q-item-label
+                    caption
+                    :class="!item.isOpen ? 'text-weight-medium text-dark' : ''"
+                    lines="2"
+                    >{{ item.subject }}</q-item-label
+                  >
                 </q-item-section>
 
                 <q-item-section side top>
@@ -372,12 +401,19 @@ async function onLoad(index: number, done: any) {
   />
 </template>
 <style>
+.my-menu-notread {
+  color: #1bb19b;
+  background: #ebf9f7 !important;
+  font-weight: 600;
+  border-radius: 10px;
+}
 .my-menu-link {
   color: #1bb19b;
   background: #ebf9f7 !important;
   font-weight: 600;
   border-radius: 10px;
 }
+
 .my-menu-link .q-hoverable {
   border-radius: 10px;
 }