From 039d6ede24d68d986d23b48ebd7a3b8dff652170 Mon Sep 17 00:00:00 2001
From: puri-ph4tt <puriphat001@gmail.com>
Date: Mon, 5 Feb 2024 18:01:29 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87?=
 =?UTF-8?q?=E0=B8=9C=E0=B8=A5=E0=B9=80=E0=B8=A7=E0=B8=A5=E0=B8=B2=20?=
 =?UTF-8?q?=E0=B9=81=E0=B8=A5=E0=B8=B0=E0=B8=AA=E0=B9=88=E0=B8=A7=E0=B8=99?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=B7=E0=B9=88=E0=B8=99=E0=B9=80=E0=B8=A5=E0=B9=87?=
 =?UTF-8?q?=E0=B8=81=E0=B8=99=E0=B9=89=E0=B8=AD=E0=B8=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../00_support/components/ChatMessage.vue     | 60 +++++++++++++++----
 .../00_support/components/NewIssue.vue        |  2 +-
 2 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/src/modules/00_support/components/ChatMessage.vue b/src/modules/00_support/components/ChatMessage.vue
index c901ea0..0940cd6 100644
--- a/src/modules/00_support/components/ChatMessage.vue
+++ b/src/modules/00_support/components/ChatMessage.vue
@@ -4,27 +4,61 @@ import moment from "moment";
 import { useSupportStore } from "@/modules/00_support/store/Main";
 
 const store = useSupportStore();
+
+function dateChat(timestamp: string): string {
+  const parsedTimestamp = moment(timestamp);
+  const diff = moment().diff(parsedTimestamp);
+
+  if (diff < 1000) {
+    return "just now";
+  } else if (diff < 86400000) {
+    const formattedDate = parsedTimestamp.format("HH:MM") + " น.";
+    return formattedDate;
+  } else {
+    const beYear = parsedTimestamp.year() + 543;
+    const formattedDate = parsedTimestamp.clone().year(beYear).format("DD MMM");
+    return formattedDate;
+  }
+}
 </script>
 
 <template>
   <div class="col-grow q-pt-md q-pb-sm">
-    <div v-for="(data, index) in store.message?.result.message">
+    <div v-for="(item, index) in store.message?.result.message">
       <q-item-label>
         <q-chat-message
           ref="myElement"
           :key="index"
-          :id="data.id"
-          avatar="https://cdn.quasar.dev/img/avatar4.jpg"
-          :text="[data.content]"
-          :bg-color="data.fromUserId === store.userId ? 'teal' : 'white'"
-          :text-color="data.fromUserId === store.userId ? 'white' : 'black'"
-          :sent="data.fromUserId === store.userId"
-          :stamp="moment(data.createdAt).fromNow()"
-        />
+          :id="item.id"
+          :text="[item.content]"
+          :bg-color="item.fromUserId === store.userId ? 'teal' : 'white'"
+          :text-color="item.fromUserId === store.userId ? 'white' : 'black'"
+          :sent="item.fromUserId === store.userId"
+        >
+          <template v-slot:stamp>
+            <span> {{ dateChat(item.createdAt) }} </span>
+          </template>
+          <template v-slot:avatar>
+            <img
+              v-if="item.fromUserId === store.userId"
+              class="q-message-avatar q-message-avatar--sent"
+              src="https://cdn.quasar.dev/img/avatar4.jpg"
+            />
+            <div
+              v-else
+              class="q-mr-sm"
+              style="border-radius: 50%; border: 1px solid teal"
+            >
+              <q-avatar color="teal-1" text-color="white" size="42px">
+                <q-icon :name="store.icon" size="24px" color="teal" />
+              </q-avatar>
+            </div>
+          </template>
+        </q-chat-message>
       </q-item-label>
 
       <q-item-label
-        v-if="data.fromUserId === store.userId"
+        v-if="item.fromUserId === store.userId"
         class="flex"
         caption
       >
@@ -34,12 +68,14 @@ const store = useSupportStore();
             store.messageStatus?.result.some(
               (v) =>
                 new Date(v.lastAccessDate).getTime() >=
-                  new Date(data.createdAt).getTime() &&
+                  new Date(item.createdAt).getTime() &&
                 index + 1 === store.message?.result.message.length
             )
           "
+          class="q-mr-xl"
         >
-          อ่านเเล้ว
+          <q-icon name="mdi-check-all" size="xs" />
+          <span class="text-caption q-ml-sm">อ่านแล้ว</span>
         </div>
       </q-item-label>
     </div>
diff --git a/src/modules/00_support/components/NewIssue.vue b/src/modules/00_support/components/NewIssue.vue
index 1e3af8e..1bb6ef2 100644
--- a/src/modules/00_support/components/NewIssue.vue
+++ b/src/modules/00_support/components/NewIssue.vue
@@ -22,7 +22,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div @click="isOpen = true" class="col-10 row items-center q-pa-md new">
+  <div @click="isOpen = true" class="col-10 row items-center q-py-sm q-px-md new">
     <div class="noactive-avatar">
       <div class="new-avatar">
         <q-icon name="mdi-plus" size="24px" color="primary" />