ตรวจสอบค่า null ของ Category

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;