เพิ่มระบบเวลา กับ สถานะออนไลน์

src/modules/00_support/components/FormChat.vue

@@ -12,8 +12,36 @@ const content = ref<string>("");
 const searchInput = ref<string>("");
 const currentIssuePage = ref<number>(1);
 const totalPageIssue = ref<number>();
+const createdByUser = ref<string>("");
 const { scrollContainer } = storeToRefs(store);
 
+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;
+  }
+}
+
+function getOnlineStatus(option: "icon" | "status", userId: string) {
+  const isOnline: boolean = store.userStatus.some((u) =>
+    u.userId.includes(userId)
+  );
+  if (option === "icon") return isOnline ? "green" : "grey";
+  if (option === "status") return isOnline ? "ออนไลน์" : "ออฟไลน์";
+}
+
 onMounted(async () => {
   await store.fetchIssue();
   totalPageIssue.value = Math.ceil((store.currentTotalIssue || 0) / 30);
@@ -29,11 +57,16 @@ const onLoad = (async (_: any, done: any) => {
 </script>
 
 <template>
-  <div class="flex q-mt-md">
+  <div class="flex">
     <p class="text-h6 text-weight-medium align-center">ถาม - ตอบ</p>
     <q-space />
     <p>
-      <q-btn dense size="16px" flat text-color="teal">
+      <q-btn
+        dense
+        size="16px"
+        color="primary"
+        class="button-link-no-deco q-px-md"
+      >
         <router-link to="/support/category"> จัดการประเภทของปัญหา </router-link>
       </q-btn>
     </p>
@@ -70,6 +103,14 @@ const onLoad = (async (_: any, done: any) => {
               {{ store.currentCategory }}
             </q-badge></q-item-label
           >
+          <span>
+            <q-icon
+              name="mdi-circle"
+              size="10px"
+              :color="getOnlineStatus('icon', createdByUser)"
+            />
+            {{ getOnlineStatus("status", createdByUser) }}
+          </span>
         </q-item-section>
 
         <q-space />
@@ -102,6 +143,7 @@ const onLoad = (async (_: any, done: any) => {
               store.currentTitle = item.title;
               store.correntStatusIssue = item.status;
               store.currentCategory = item.category.name;
+              createdByUser = item.createdByUserId;
               store.issue
                 ? (store.issue.result = store.issue.result.map((v) => {
                     if (v.id === item.id) {
@@ -150,7 +192,9 @@ const onLoad = (async (_: any, done: any) => {
             />
 
             <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
@@ -325,6 +369,7 @@ const onLoad = (async (_: any, done: any) => {
 .container-input {
   display: grid;
   grid-template-areas: "input-chat btn";
+
   grid-template-rows: 1fr;
   grid-template-columns: 1fr 100px;
 }
@@ -372,4 +417,9 @@ const onLoad = (async (_: any, done: any) => {
   /* grid-template-columns: 1fr 2fr; */
   grid: 50px 450px / 1fr 2fr;
 }
+
+.button-link-no-deco >>> a {
+  text-decoration: none;
+  color: inherit;
+}
 </style>