เพิ่ม Socket เข้าสู่หน้าหลัก , เปิดห้องแซท , รับ-ส่ง ข้อความ

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

@@ -1,13 +1,22 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, watch, onUpdated, onMounted, nextTick } from "vue";
 import { useSupportStore } from "@/modules/00_support/store/Main.ts";
 import MessageChat from "@/modules/00_support/components/MessageChat.vue";
 
 const store = useSupportStore();
-const currentIssue = ref<string>("");
+
 const content = ref<string>("");
+const scrollContainerRef = ref();
+const readStatus = ref<boolean>(false);
+
+onUpdated(() => {
+  nextTick(() => {
+    store.scrollToEnd();
+  });
+});
 
 onMounted(async () => {
+  store.scrollContainer = scrollContainerRef.value;
   store.fetchIssue();
 });
 </script>
@@ -34,22 +43,22 @@ onMounted(async () => {
         </q-avatar>
 
         <q-item-section class="q-pl-sm">
-          <q-item-label>สุวิมล คงสวัสดิ์</q-item-label>
-          <q-item-label caption>
+          <q-item-label>{{ currentTitle }}</q-item-label>
+          <!-- <q-item-label caption>
             <q-icon name="noise_control_off" color="positive" />
             ออนไลน์
-          </q-item-label>
+          </q-item-label> -->
         </q-item-section>
         <q-space />
 
-        <q-btn
+        <!-- <q-btn
           flat
           round
           dense
           icon="o_videocam"
           class="q-mr-xs"
           text-color="primary"
-        />
+        /> -->
         <q-btn flat round dense icon="o_info" text-color="grey" />
       </q-toolbar>
     </div>
@@ -62,7 +71,8 @@ onMounted(async () => {
             :active="currentIssue === data.id"
             @click="
               () => {
-                currentIssue = data.id;
+                store.currentIssue = data.id;
+                store.currentTitle = data.title;
                 store.fetchMessage(data.id);
               }
             "
@@ -74,8 +84,20 @@ onMounted(async () => {
 
             <q-item-section class="q-pl-sm">
               <q-item-label>{{ data.title }}</q-item-label>
-              <q-item-label caption>
+
+              <q-item-label class="flex" caption>
                 {{ data.lastMessage }}
+
+                <q-space />
+                <q-toggle v-model="readStatus" label="test" />
+                <q-badge
+                  v-if="readStatus"
+                  class=""
+                  rounded
+                  color="red"
+                  label="1"
+                />
+                <q-icon v-else size="18px" name="done_all" />
               </q-item-label>
             </q-item-section>
           </q-item>
@@ -83,9 +105,12 @@ onMounted(async () => {
         </div>
       </q-list>
     </div>
-    <div class="i4 bg-grey-3 q-pa-sm" style="overflow-y: auto">
+
+    <div class="i4 bg-grey-3">
       <!-- <div class="i4 bg-grey-3 q-pa-sm"> -->
-      <message-chat v-if="currentIssue" />
+      <q-scroll-area ref="scrollContainerRef" style="height: 400px; width: 1fr">
+        <message-chat class="q-pr-md" />
+      </q-scroll-area>
     </div>
     <div class="i5 bg-white container-input align-center">
       <div class="input-file">
@@ -101,6 +126,12 @@ onMounted(async () => {
           standout="bg-teal text-white"
           label="Aa"
           v-model="content"
+          @keydown.enter.prevent="
+            () => {
+              store.sendMessage(content, store.currentIssue);
+              content = '';
+            }
+          "
         />
       </div>
 
@@ -108,7 +139,8 @@ onMounted(async () => {
         <q-btn
           @click="
             () => {
-              store.sendMessage(content, currentIssue);
+              store.sendMessage(content, store.currentIssue);
+              content = '';
             }
           "
           flat
@@ -121,6 +153,9 @@ onMounted(async () => {
 </template>
 
 <style scoped>
+.scroll {
+  overflow-y: auto;
+}
 .align-center {
   display: flex;
   align-items: center;
@@ -158,6 +193,7 @@ onMounted(async () => {
 .i1 {
   grid-area: search;
 }
+
 .i2 {
   grid-area: toolbar;
 }

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

@@ -1,29 +1,28 @@
 <script setup lang="ts">
 import "moment/dist/locale/th";
 import moment from "moment";
-import { useSupportStore } from "@/modules/00_support/store/Main";
 import { ref, onMounted } from "vue";
+import type { SupportMessageResponse } from "@/modules/00_support/interface/index/Main";
+import { useSupportStore } from "@/modules/00_support/store/Main";
 const store = useSupportStore();
-moment.locale("th");
-console.log(moment.locale());
+
+onMounted(() => {});
 </script>
 <template>
-  <q-infinite-scroll reverse>
-    <div class="bg-grey-3 q-pb-sm">
-      <q-chat-message label="Sunday, 19th" />
-      <q-chat-message
-        v-if="store.message"
-        v-for="data in store.message?.result.message.reverse()"
-        :id="data.id"
-        avatar="https://cdn.quasar.dev/img/avatar4.jpg"
-        :text="[data.content]"
-        :bg-color="data.fromUserId === store.userId ? 'primary' : 'white'"
-        :text-color="data.fromUserId === store.userId ? 'white' : 'black'"
-        :sent="data.fromUserId === store.userId"
-        :stamp="moment(data.createdAt).fromNow()"
-      />
-    </div>
-  </q-infinite-scroll>
+  <div class="bg-grey-3 q-pb-sm">
+    <q-chat-message label="Sunday, 19th" />
+    <q-chat-message
+      v-for="(data, index) in store.message?.result.message"
+      :key="index"
+      :id="data.id"
+      avatar="https://cdn.quasar.dev/img/avatar4.jpg"
+      :text="[data.content]"
+      :bg-color="data.fromUserId === store.userId ? 'primary' : 'white'"
+      :text-color="data.fromUserId === store.userId ? 'white' : 'black'"
+      :sent="data.fromUserId === store.userId"
+      :stamp="moment(data.createdAt).fromNow()"
+    />
+  </div>
 </template>
 
 <style scoped></style>