From 0541697d99b8c756ee6aeb8ed357eacf1377fcfd Mon Sep 17 00:00:00 2001
From: puri-ph4tt <puriphat001@gmail.com>
Date: Tue, 6 Feb 2024 11:19:42 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20responsive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/00_support/components/FormChat.vue | 10 +++++++++-
 src/modules/00_support/store/Main.ts           |  2 ++
 src/modules/00_support/views/MainPage.vue      |  5 +++--
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/modules/00_support/components/FormChat.vue b/src/modules/00_support/components/FormChat.vue
index 122c599..964c9ce 100644
--- a/src/modules/00_support/components/FormChat.vue
+++ b/src/modules/00_support/components/FormChat.vue
@@ -20,7 +20,15 @@ function getOnlineStatus(option: "icon" | "status") {
     class="row q-py-md q-px-lg justify-between items-center"
     v-if="store.currentTitle && store.currentTitle.length > 0"
   >
-    <div class="col row">
+    <div class="col row items-center">
+      <q-btn
+        flat
+        padding="none"
+        class="q-mr-md"
+        icon="mdi-chevron-left"
+        @click="store.isOpen = false"
+        v-if="!$q.screen.gt.xs"
+      />
       <div style="border-radius: 50%; border: 1px solid teal">
         <q-avatar color="teal-1" text-color="white" size="40px">
           <q-icon :name="store.icon" size="24px" color="teal" />
diff --git a/src/modules/00_support/store/Main.ts b/src/modules/00_support/store/Main.ts
index bcb94da..1b1e458 100644
--- a/src/modules/00_support/store/Main.ts
+++ b/src/modules/00_support/store/Main.ts
@@ -18,6 +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 icon = ref<string>("mdi-account-check");
   const userId = ref<string | undefined>(keycloak.subject);
   const userStatus = ref<SupportUserStatus[]>([]);
@@ -227,6 +228,7 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
     sendMessage,
     newIssue,
     searchIssue,
+    isOpen,
     items,
     socket,
     scrollContainer,
diff --git a/src/modules/00_support/views/MainPage.vue b/src/modules/00_support/views/MainPage.vue
index 1471c1c..80260e9 100644
--- a/src/modules/00_support/views/MainPage.vue
+++ b/src/modules/00_support/views/MainPage.vue
@@ -49,7 +49,7 @@ watch(searchData, () => {
         <q-card bordered>
           <div class="row">
             <!-- Left -->
-            <div class="col-xs-12 col-sm-4 col-md-3">
+            <div v-if="!store.isOpen" class="col-xs-12 col-sm-4 col-md-3">
               <!-- New -->
               <div class="q-pt-md bg-white">
                 <div class="q-px-md q-pb-md">
@@ -105,6 +105,7 @@ watch(searchData, () => {
                   <div
                     @click="
                       async () => {
+                        $q.screen.gt.xs ? '' : (store.isOpen = true);
                         store.currentIssue = item.id;
                         store.currentTitle = item.title;
                         store.issue
@@ -186,7 +187,7 @@ watch(searchData, () => {
             <q-separator vertical />
 
             <!-- Right -->
-            <div v-if="$q.screen.gt.xs" class="col-grow">
+            <div v-if="$q.screen.gt.xs || store.isOpen" class="col-grow">
               <form-chat v-if="store.currentIssue.length !== 0" />
             </div>
           </div>