เพิ่มฟัง์ชันและ api การค้นหาหัวข้อปัญหา (support)

src/modules/00_support/views/MainPage.vue

@@ -1,13 +1,31 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from "vue";
+import { onMounted, onUnmounted, ref, watch } from "vue";
 import { useSupportStore } from "@/modules/00_support/store/Main";
 import FormChat from "@/modules/00_support/components/FormChat.vue";
 import NewIssue from "@/modules/00_support/components/NewIssue.vue";
+import moment from "moment";
 
 const store = useSupportStore();
+const searchData = ref<string>("");
 
-const search = ref<string>("");
-const icon = ref<string>("mdi-account-check");
+function dateIssue(timestamp: string): string {
+  const parsedTimestamp = moment(timestamp);
+  const diff = moment().diff(parsedTimestamp);
+
+  if (diff < 1000) {
+    return "just now";
+  } else if (diff < 60000) {
+    return `${Math.floor(diff / 1000)}s`;
+  } else if (diff < 3600000) {
+    return `${Math.floor(diff / 60000)}m`;
+  } else if (diff < 86400000) {
+    return `${Math.floor(diff / 3600000)}h`;
+  } else {
+    const beYear = parsedTimestamp.year() + 543;
+    const formattedDate = parsedTimestamp.clone().year(beYear).format("DD MMM");
+    return formattedDate;
+  }
+}
 
 onUnmounted(async () => {
   store.socket.disconnect();
@@ -17,6 +35,10 @@ onMounted(async () => {
   store.socket.connect();
   store.fetchIssue();
 });
+
+watch(searchData, () => {
+  store.searchIssue(searchData.value);
+});
 </script>
 
 <template>
@@ -28,6 +50,7 @@ onMounted(async () => {
           <div class="row">
             <!-- Left -->
             <div class="col-xs-12 col-sm-4 col-md-3">
+              <!-- New -->
               <div class="q-pt-md bg-white">
                 <div class="q-px-md q-pb-md">
                   <q-input
@@ -36,8 +59,9 @@ onMounted(async () => {
                     dense
                     placeholder="ค้นหา"
                     debounce="300"
-                    v-model="search"
+                    v-model="searchData"
                     id="inputSearch"
+                    @keydown.enter.prevent="store.searchIssue(searchData)"
                   >
                     <template v-slot:prepend
                       ><q-icon name="mdi-magnify" class="pointer" />
@@ -49,6 +73,25 @@ onMounted(async () => {
                   <new-issue />
                 </div>
                 <q-separator inset />
+                <!-- No Issue -->
+                <div
+                  v-if="store.issue?.result.length === 0"
+                  class="col-10 row items-center q-pa-md new"
+                >
+                  <div class="noactive-avatar">
+                    <q-avatar
+                      color="transparent"
+                      text-color="white"
+                      size="40px"
+                    >
+                      <q-icon name="mdi-close" size="24px" color="negative" />
+                    </q-avatar>
+                  </div>
+
+                  <div class="col column q-ml-md">
+                    <span class="col text-grey"> ไม่พบเรื่องปรึกษา </span>
+                  </div>
+                </div>
               </div>
 
               <!-- List Issue -->
@@ -81,10 +124,14 @@ onMounted(async () => {
                     :class="{ active: store.currentIssue === item.id }"
                     class="noactive row q-py-md justify-between items-center q-px-md"
                   >
-                    <div class="col-10 row items-center">
+                    <div class="col-9 row items-center">
                       <div class="noactive-avatar">
                         <q-avatar color="grey-2" text-color="white" size="40px">
-                          <q-icon :name="icon" size="24px" color="primary" />
+                          <q-icon
+                            :name="store.icon"
+                            size="24px"
+                            color="primary"
+                          />
                         </q-avatar>
                       </div>
                       <div class="col column q-ml-md">
@@ -102,7 +149,7 @@ onMounted(async () => {
                         >
                       </div>
                     </div>
-                    <div class="col-2 items-center text-right">
+                    <div class="col-3 items-center text-right">
                       <q-icon
                         v-if="item.lastMessage?.length === 0"
                         name="mdi-send"
@@ -110,7 +157,9 @@ onMounted(async () => {
                         color="primary"
                       />
                       <div v-else class="column">
-                        <span class="col text-caption text-grey">20 s</span>
+                        <span class="col text-caption text-grey">{{
+                          dateIssue(item.updatedAt)
+                        }}</span>
                         <div class="col">
                           <q-badge
                             v-if="item.unreadCount > 0"
@@ -138,7 +187,7 @@ onMounted(async () => {
 
             <!-- Right -->
             <div v-if="$q.screen.gt.xs" class="col-grow">
-              <form-chat v-if="store.currentIssue.length !== 0" :icon="icon" />
+              <form-chat v-if="store.currentIssue.length !== 0" />
             </div>
           </div>
         </q-card>
@@ -160,7 +209,7 @@ onMounted(async () => {
     .noactive-avatar {
       transition: 0.1s ease all;
       border-radius: 50%;
-      border: 1px solid teal;
+      border: 1px solid $primary;
     }
   }
 }
@@ -172,11 +221,11 @@ onMounted(async () => {
 
 .active {
   background: #ebf9f7;
-  border-left: 5px solid #03a898;
+  border-left: 5px solid $primary;
   & {
     .noactive-avatar {
       border-radius: 50%;
-      border: 1px solid #03a898;
+      border: 1px solid $primary;
     }
   }
 }