From 85171810f3a5df1abb4246f2f9417460545461de Mon Sep 17 00:00:00 2001
From: puri-ph4tt <puriphat001@gmail.com>
Date: Wed, 14 Feb 2024 13:55:36 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87=E0=B8=9C=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=9A=E0=B8=9A=20support=20(user)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../00_support/components/ChatMessage.vue     |   9 +-
 .../00_support/components/NewIssue.vue        | 168 ++++++++----------
 src/modules/00_support/views/MainPage.vue     |  65 +++++--
 3 files changed, 132 insertions(+), 110 deletions(-)

diff --git a/src/modules/00_support/components/ChatMessage.vue b/src/modules/00_support/components/ChatMessage.vue
index 3f405ec..d415a54 100644
--- a/src/modules/00_support/components/ChatMessage.vue
+++ b/src/modules/00_support/components/ChatMessage.vue
@@ -37,11 +37,14 @@ function dateChat(timestamp: string) {
             <span> {{ dateChat(item.createdAt) }} </span>
           </template>
           <template v-slot:avatar>
-            <img
+            <q-img
               v-if="item.fromUserId === store.userId"
-              class="q-message-avatar q-message-avatar--sent"
-              src="https://cdn.quasar.dev/img/avatar4.jpg"
+              src="@/assets/avatar_user.jpg"
+              class="q-ml-sm"
+              spinner-color="white"
+              style="height: 42px; max-width: 42px; border-radius: 50%"
             />
+
             <div
               v-else
               class="q-mr-sm"
diff --git a/src/modules/00_support/components/NewIssue.vue b/src/modules/00_support/components/NewIssue.vue
index ca9ade3..9b15b6f 100644
--- a/src/modules/00_support/components/NewIssue.vue
+++ b/src/modules/00_support/components/NewIssue.vue
@@ -1,16 +1,27 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useSupportStore } from "@/modules/00_support/store/Main";
+import DialogHeader from "@/components/DialogHeader.vue";
 
 const store = useSupportStore();
 
-const isOpen = ref<boolean>(false);
 const title = ref<string>("");
 const titleRef = ref();
 const categoryId = ref<string>("");
 const categoryRef = ref();
 const options = ref<{ label: string; value: string }[]>([]);
 
+const props = defineProps({
+  modal: {
+    type: Boolean,
+    default: false,
+  },
+  clickClose: {
+    type: Function,
+    default: () => {},
+  },
+});
+
 onMounted(async () => {
   await store.fetchIssueCategory();
   if (store.issueCategory) {
@@ -25,109 +36,76 @@ async function onSubmit() {
   titleRef.value.validate();
   categoryRef.value.validate();
   if (titleRef.value.hasError || categoryRef.value.hasError) return "";
-  await store.newIssue(title.value, categoryId.value);
-  isOpen.value = false;
+  await store.newIssue(title.value, categoryId.value).then(() => {
+    props.clickClose();
+    title.value = "";
+    categoryId.value = "";
+  });
 }
 </script>
 
 <template>
-  <div
-    @click="isOpen = true"
-    class="col-10 row items-center q-py-sm q-px-md new"
-  >
-    <div class="noactive-avatar">
-      <div class="new-avatar">
-        <q-icon name="mdi-plus" size="24px" color="primary" />
-      </div>
-    </div>
-
-    <div class="col column q-ml-md">
-      <span class="col text-grey"> เพิ่มเรื่องปรึกษาใหม่ </span>
-    </div>
-  </div>
-
-  <!-- Dialog -->
-  <q-dialog v-model="isOpen">
-    <q-card class="q-pa-md" style="width: 100%">
-      <q-card-section class="row items-center">
-        <div class="text-h6">เพิ่มเรื่องปรึกษาใหม่</div>
-        <q-space />
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          v-close-popup
-          style="color: #ff8080; background-color: #ffdede"
-        />
-      </q-card-section>
-
-      <form @submit.prevent.stop="onSubmit">
-        <q-card-section class="q-gutter-x-md row">
-          <q-select
-            ref="categoryRef"
-            class="col-3"
-            outlined
-            dense
-            emit-value
-            map-options
-            v-model="categoryId"
-            :options="options"
-            option-value="value"
-            option-label="label"
-            label="หมวดหมู่"
-            lazy-rules
-            :rules="[
-              (val) => (val !== null && val !== '') || 'กรุณาเลือหมวดหมู่',
-            ]"
-          />
-          <q-input
-            ref="titleRef"
-            class="col-grow"
-            outlined
-            dense
-            v-model="title"
-            label="ชื่อเรื่อง"
-            lazy-rules
-            :rules="[
-              (val) => (val && val.length > 0) || 'กรุณาเพิ่มชื่อเรื่อง',
-            ]"
-          />
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="width: 40vw; max-width: 40vw">
+      <q-form ref="myForm" @submit.prevent.stop="onSubmit">
+        <DialogHeader tittle="แจ้งปัญหา" :close="clickClose" />
+        <q-separator />
+        <q-card-section class="q-pa-sm bg-grey-1">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12">
+              <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
+                <q-select
+                  outlined
+                  dense
+                  hide-bottom-space
+                  emit-value
+                  map-options
+                  lazy-rules
+                  ref="categoryRef"
+                  class="full-width inputgreen cursor-pointer"
+                  option-value="value"
+                  option-label="label"
+                  label="หมวดหมู่"
+                  v-model="categoryId"
+                  :options="options"
+                  :rules="[
+                    (val) =>
+                      (val !== null && val !== '') || 'กรุณาเลือหมวดหมู่',
+                  ]"
+                />
+                <q-input
+                  ref="titleRef"
+                  outlined
+                  dense
+                  hide-bottom-space
+                  lazy-rules
+                  class="full-width inputgreen cursor-pointer"
+                  label="ชื่อเรื่อง"
+                  v-model="title"
+                  :rules="[
+                    (val) => (val && val.length > 0) || 'กรุณากรอกชื่อเรื่อง',
+                  ]"
+                />
+              </div>
+            </div>
+          </div>
         </q-card-section>
-
+        <q-separator />
         <q-card-actions align="right">
-          <q-btn flat v-close-popup label="ยกเลิก" text-color="primary" />
           <q-btn
+            dense
+            unelevated
+            label="แจ้งปัญหา"
+            color="public"
             type="submit"
-            label="บันทึก"
-            color="primary"
-            text-color="white"
-          />
+            class="q-px-md"
+            v-close-popup
+          >
+            <!-- icon="mdi-content-save-outline" -->
+            <q-tooltip>แจ้งปัญหา</q-tooltip>
+          </q-btn>
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
-
-<style scoped lang="scss">
-.new {
-  transition: 0.1s ease all;
-  opacity: 1;
-  cursor: pointer;
-  border-left: 5px solid transparent;
-
-  &:hover {
-    background: #ebf9f7;
-  }
-}
-
-.new-avatar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  border: 2px dashed #9e9e9e;
-}
-</style>
diff --git a/src/modules/00_support/views/MainPage.vue b/src/modules/00_support/views/MainPage.vue
index 80260e9..435518c 100644
--- a/src/modules/00_support/views/MainPage.vue
+++ b/src/modules/00_support/views/MainPage.vue
@@ -7,6 +7,7 @@ import moment from "moment";
 
 const store = useSupportStore();
 const searchData = ref<string>("");
+const newIssueModal = ref<boolean>(false);
 
 function dateIssue(timestamp: string): string {
   const parsedTimestamp = moment(timestamp);
@@ -44,14 +45,16 @@ watch(searchData, () => {
 <template>
   <div class="col-12 row justify-center">
     <div class="col-xs-12 col-sm-12 col-md-11">
-      <div class="toptitle text-white col-12 row items-center">ถาม - ตอบ</div>
+      <div class="toptitle text-white col-12 row items-center">
+        แจ้งปัญหาการใช้งาน
+      </div>
       <div class="col-12">
         <q-card bordered>
           <div class="row">
             <!-- Left -->
             <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-pt-md">
                 <div class="q-px-md q-pb-md">
                   <q-input
                     rounded
@@ -63,14 +66,27 @@ watch(searchData, () => {
                     id="inputSearch"
                     @keydown.enter.prevent="store.searchIssue(searchData)"
                   >
-                    <template v-slot:prepend
-                      ><q-icon name="mdi-magnify" class="pointer" />
+                    <template v-slot:prepend>
+                      <q-icon name="mdi-magnify" class="pointer" />
                     </template>
                   </q-input>
                 </div>
                 <q-separator inset />
                 <div>
-                  <new-issue />
+                  <div
+                    @click="newIssueModal = true"
+                    class="col-10 row items-center q-py-sm q-px-md new"
+                  >
+                    <div class="no-active-avatar">
+                      <div class="new-avatar">
+                        <q-icon name="mdi-plus" size="24px" color="primary" />
+                      </div>
+                    </div>
+
+                    <div class="col column q-ml-md">
+                      <span class="col text-grey"> แจ้งปัญหา </span>
+                    </div>
+                  </div>
                 </div>
                 <q-separator inset />
                 <!-- No Issue -->
@@ -78,7 +94,7 @@ watch(searchData, () => {
                   v-if="store.issue?.result.length === 0"
                   class="col-10 row items-center q-pa-md new"
                 >
-                  <div class="noactive-avatar">
+                  <div class="no-active-avatar">
                     <q-avatar
                       color="transparent"
                       text-color="white"
@@ -123,10 +139,10 @@ watch(searchData, () => {
                       }
                     "
                     :class="{ active: store.currentIssue === item.id }"
-                    class="noactive row q-py-md justify-between items-center q-px-md"
+                    class="no-active row q-py-md justify-between items-center q-px-md"
                   >
                     <div class="col-9 row items-center">
-                      <div class="noactive-avatar">
+                      <div class="no-active-avatar">
                         <q-avatar color="grey-2" text-color="white" size="40px">
                           <q-icon
                             :name="store.icon"
@@ -194,11 +210,15 @@ watch(searchData, () => {
         </q-card>
       </div>
     </div>
+    <new-issue
+      :modal="newIssueModal"
+      :click-close="() => (newIssueModal = false)"
+    />
   </div>
 </template>
 
 <style scoped lang="scss">
-.noactive {
+.no-active {
   transition: 0.1s ease all;
   opacity: 1;
   cursor: pointer;
@@ -207,7 +227,7 @@ watch(searchData, () => {
   &:hover {
     background: #ebf9f7;
 
-    .noactive-avatar {
+    .no-active-avatar {
       transition: 0.1s ease all;
       border-radius: 50%;
       border: 1px solid $primary;
@@ -215,7 +235,7 @@ watch(searchData, () => {
   }
 }
 
-.noactive-avatar {
+.no-active-avatar {
   border-radius: 50%;
   border: 1px solid #f5f4f4;
 }
@@ -224,13 +244,34 @@ watch(searchData, () => {
   background: #ebf9f7;
   border-left: 5px solid $primary;
   & {
-    .noactive-avatar {
+    .no-active-avatar {
       border-radius: 50%;
       border: 1px solid $primary;
     }
   }
 }
 
+.new {
+  transition: 0.1s ease all;
+  opacity: 1;
+  cursor: pointer;
+  border-left: 5px solid transparent;
+
+  &:hover {
+    background: #ebf9f7;
+  }
+}
+
+.new-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 2px dashed #9e9e9e;
+}
+
 .line-ellipsis {
   display: block;
   white-space: nowrap;