From 7a16873d66e9ad2f9bced54b0ecf37c5f2c3cfa8 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Fri, 16 Feb 2024 16:21:19 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=95=E0=B8=A3=E0=B8=A7=E0=B8=88=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=9A=E0=B8=84=E0=B9=88=E0=B8=B2=20=20null=20?=
 =?UTF-8?q?=E0=B8=82=E0=B8=AD=E0=B8=87=20Category?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../00_support/components/FormChat.vue        | 56 ++++++++++++-------
 1 file changed, 36 insertions(+), 20 deletions(-)

diff --git a/src/modules/00_support/components/FormChat.vue b/src/modules/00_support/components/FormChat.vue
index ffd5668a7..e51e90787 100644
--- a/src/modules/00_support/components/FormChat.vue
+++ b/src/modules/00_support/components/FormChat.vue
@@ -46,6 +46,11 @@ function getOnlineStatus(option: "icon" | "status", userId: string) {
   if (option === "status") return isOnline ? "ออนไลน์" : "ออฟไลน์";
 }
 
+function validateCategory(category: String | undefined) {
+  if (!!category) return category;
+  return "ระบุไม่ได้";
+}
+
 onMounted(async () => {
   if (store.currentIssue) {
     await store.fetchIssue();
@@ -109,19 +114,22 @@ const onLoad = (async (_: any, done: any) => {
           <img :src="iconAvatar" />
         </q-avatar>
         <q-item-section v-if="store.currentIssue" class="q-pl-sm">
-          <q-item-label
-            >{{ store.currentTitle }}
-            <q-badge color="blue">
-              {{ store.currentCategory }}
-            </q-badge></q-item-label
-          >
+          <q-item-label>
+            <span class="tite-on-message-long">
+              <q-badge color="blue" outline>
+                {{ validateCategory(store.currentCategory) }}
+              </q-badge>
+
+              {{ store.currentTitle }}
+            </span>
+          </q-item-label>
           <span>
             <q-icon
               name="mdi-circle"
               size="10px"
-              :color="getOnlineStatus('icon', store.createdByUser)"
+              :color="getOnlineStatus('icon', store.createdByUserId)"
             />
-            {{ getOnlineStatus("status", store.createdByUser) }}
+            {{ getOnlineStatus("status", store.createdByUserId) }}
           </span>
         </q-item-section>
 
@@ -154,8 +162,8 @@ const onLoad = (async (_: any, done: any) => {
               store.currentIssue = item.id;
               store.currentTitle = item.title;
               store.correntStatusIssue = item.status;
-              store.currentCategory = item.category.name;
-              store.createdByUser = item.createdByUserId;
+              store.currentCategory = item.category?.name;
+              store.createdByUserId = item.createdByUserId;
               store.issue
                 ? (store.issue.result = store.issue.result.map((v) => {
                     if (v.id === item.id) {
@@ -178,13 +186,14 @@ const onLoad = (async (_: any, done: any) => {
               </q-avatar>
             </div>
             <div class="col column q-ml-md">
-              <span>
-                <q-badge color="blue">
-                  {{ item.category.name }}
-                </q-badge>
-              </span>
-              <span class="text-longcol text-weight-bold line-ellipsis">
-                {{ item.title }}
+              <span> {{ item.createdByUserName }} </span>
+              <span class="col column">
+                <p class="tite-long text-weight-bold line-ellipsis">
+                  <q-badge color="blue" outline>{{
+                    validateCategory(item.category?.name)
+                  }}</q-badge>
+                  {{ item.title }}
+                </p>
               </span>
 
               <span
@@ -260,7 +269,6 @@ const onLoad = (async (_: any, done: any) => {
                   :stamp="moment(item.createdAt).fromNow()"
                 />
               </q-item-label>
-              {{ console.log(item.fromUserId === store.userId) }}
               <q-item-label
                 v-if="item.fromUserId === store.userId"
                 class="flex"
@@ -354,8 +362,16 @@ const onLoad = (async (_: any, done: any) => {
 </template>
 
 <style scoped>
-.text-long {
-  width: 100px;
+.tite-long {
+  width: 150px;
+  display: inline-block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.tite-on-message-long {
+  width: 250px;
   display: inline-block;
   text-overflow: ellipsis;
   overflow: hidden;