แก้การแสดงผลหน้าแจ้งปัญหา (support)

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

@@ -19,14 +19,15 @@ function getOnlineStatus(option: "icon" | "status") {
   <div
     class="row q-py-md q-px-lg justify-between items-center"
     v-if="store.currentTitle && store.currentTitle.length > 0"
+    style="flex-wrap: nowrap"
   >
-    <div class="col row items-center">
+    <div class="row items-center" style="flex-wrap: nowrap">
       <q-btn
         flat
         padding="none"
         class="q-mr-md"
         icon="mdi-chevron-left"
-        @click="store.isOpen = false"
+        @click="store.openChat = false"
         v-if="!$q.screen.gt.xs"
       />
       <div style="border-radius: 50%; border: 1px solid teal">
@@ -34,8 +35,8 @@ function getOnlineStatus(option: "icon" | "status") {
           <q-icon :name="store.icon" size="24px" color="teal" />
         </q-avatar>
       </div>
-      <div class="col column q-ml-md">
-        <span class="col text-weight-bold">
+      <div class="column q-ml-md">
+        <span class="text-weight-bold ellipsis-2-lines">
           {{ store.currentTitle }}
         </span>
         <span>
@@ -74,7 +75,10 @@ function getOnlineStatus(option: "icon" | "status") {
   </q-scroll-area>
 
   <q-separator />
-  <div class="row q-py-md q-px-lg justify-between items-center q-gutter-x-lg">
+  <div
+    class="row q-py-md q-px-lg justify-between items-center q-gutter-x-lg"
+    style="flex-wrap: nowrap"
+  >
     <!-- <div>
       <q-btn flat disable class="col-1">
         <q-icon
@@ -118,8 +122,10 @@ function getOnlineStatus(option: "icon" | "status") {
         flat
         class="col-2"
         style="color: #009789"
-        label="ส่งข้อความ"
-      />
+      >
+        <span v-if="$q.screen.gt.xs">ส่งข้อความ</span>
+        <q-icon v-else name="mdi-send" size="xs" color="primary" />
+      </q-btn>
     </div>
   </div>
 </template>

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

@@ -74,13 +74,14 @@ async function onSubmit() {
                   ]"
                 />
                 <q-input
+                  type="textarea"
                   ref="titleRef"
                   outlined
                   dense
                   hide-bottom-space
                   lazy-rules
                   class="full-width inputgreen cursor-pointer"
-                  label="ชื่อเรื่อง"
+                  label="รายละเอียด"
                   v-model="title"
                   :rules="[
                     (val) => (val && val.length > 0) || 'กรุณากรอกชื่อเรื่อง',

src/modules/00_support/store/Main.ts

@@ -18,7 +18,7 @@ import { useCounterMixin } from "@/stores/mixin";
 export const useSupportStore = defineStore("supportServiceStore", () => {
   const { showLoader, hideLoader, messageError } = useCounterMixin();
   const $q = useQuasar();
-  const isOpen = ref<boolean>(false);
+  const openChat = ref<boolean>(false);
   const icon = ref<string>("mdi-account-check");
   const userId = ref<string | undefined>(keycloak.subject);
   const userStatus = ref<SupportUserStatus[]>([]);
@@ -102,8 +102,10 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
   function sendMessage(content: string, to: string) {
     // console.log(content);
     // console.log(to);
-    socket.emit("message", { to, content });
-    scrollToEnd();
+    if (content.trim() !== "") {
+      socket.emit("message", { to, content });
+      scrollToEnd();
+    }
   }
 
   async function fetchMessageStatus(issueId: string) {
@@ -228,7 +230,7 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
     sendMessage,
     newIssue,
     searchIssue,
-    isOpen,
+    openChat,
     items,
     socket,
     scrollContainer,

src/modules/00_support/views/MainPage.vue

@@ -50,9 +50,9 @@ watch(searchData, () => {
       </div>
       <div class="col-12">
         <q-card bordered>
-          <div class="row">
+          <div class="row" style="flex-wrap: nowrap">
             <!-- Left -->
-            <div v-if="!store.isOpen" class="col-xs-12 col-sm-4 col-md-3">
+            <div v-if="!store.openChat || $q.screen.gt.xs" class="col-xs-12 col-sm-4 col-md-4">
               <!-- New -->
               <div class="q-pt-md">
                 <div class="q-px-md q-pb-md">
@@ -89,25 +89,6 @@ watch(searchData, () => {
                   </div>
                 </div>
                 <q-separator inset />
-                <!-- No Issue -->
-                <div
-                  v-if="store.issue?.result.length === 0"
-                  class="col-10 row items-center q-pa-md new"
-                >
-                  <div class="no-active-avatar">
-                    <q-avatar
-                      color="transparent"
-                      text-color="white"
-                      size="40px"
-                    >
-                      <q-icon name="mdi-close" size="24px" color="negative" />
-                    </q-avatar>
-                  </div>
-
-                  <div class="col column q-ml-md">
-                    <span class="col text-grey"> ไม่พบเรื่องปรึกษา </span>
-                  </div>
-                </div>
               </div>
 
               <!-- List Issue -->
@@ -121,7 +102,7 @@ watch(searchData, () => {
                   <div
                     @click="
                       async () => {
-                        $q.screen.gt.xs ? '' : (store.isOpen = true);
+                        $q.screen.gt.xs ? '' : (store.openChat = true);
                         store.currentIssue = item.id;
                         store.currentTitle = item.title;
                         store.issue
@@ -203,7 +184,7 @@ watch(searchData, () => {
             <q-separator vertical />
 
             <!-- Right -->
-            <div v-if="$q.screen.gt.xs || store.isOpen" class="col-grow">
+            <div v-if="$q.screen.gt.xs || store.openChat" style="width: 100%">
               <form-chat v-if="store.currentIssue.length !== 0" />
             </div>
           </div>