From 0303b2e60d5fb8fdd433253c2815d53532fbab22 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Sat, 23 Dec 2023 20:14:30 +0700
Subject: [PATCH] reply message

---
 src/api/api.message.ts                       |   2 +
 src/components/PopupReplyInbox.vue           | 111 +++++++++++++++++++
 src/modules/01_dashboard/views/Dashboard.vue |  39 ++++++-
 3 files changed, 149 insertions(+), 3 deletions(-)
 create mode 100644 src/components/PopupReplyInbox.vue

diff --git a/src/api/api.message.ts b/src/api/api.message.ts
index 34e20b2..be5d2c6 100644
--- a/src/api/api.message.ts
+++ b/src/api/api.message.ts
@@ -1,8 +1,10 @@
 import env from "./index";
 
 const message = `${env.API_URI}/message`;
+const reply = `${env.API_URI}/placement/noti`;
 
 export default {
     msgNotificate: `${message}/my-notifications`,
     msgInbox: `${message}/my-inboxes`,
+    replyMessage: (id: string) => `${reply}/${id}`,
 };
diff --git a/src/components/PopupReplyInbox.vue b/src/components/PopupReplyInbox.vue
new file mode 100644
index 0000000..1eed8b2
--- /dev/null
+++ b/src/components/PopupReplyInbox.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar } from "quasar";
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const $q = useQuasar();
+
+const { showLoader, hideLoader, success, messageError } = mixin;
+
+const myForm = ref<any>();
+const props = defineProps({
+  modal: {
+    type: Boolean,
+    default: false,
+  },
+  idInbox: {
+    type: String,
+    default: "",
+  },
+  clickClose: {
+    type: Function,
+    default: () => {},
+  },
+});
+
+const subject = ref<string>("");
+const body = ref<string>("");
+async function submit() {
+  myForm.value.validate().then(async (result: boolean) => {
+    if (result) {
+      // props.savaForm(reason.value);
+      showLoader();
+      await http
+        .put(config.API.replyMessage(props.idInbox), {
+          subject: subject.value,
+          body: body.value,
+        })
+        .then((res) => {
+          props.clickClose()
+          success($q, "ส่งข้อความสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    }
+  });
+}
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="width: 40vw; max-width: 40vw">
+      <q-form ref="myForm">
+        <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-input
+                  class="full-width inputgreen cursor-pointer"
+                  hide-bottom-space
+                  outlined
+                  dense
+                  lazy-rules
+                  :rules="[(val) => !!val || 'กรุณากรอกหัวข้อ']"
+                  v-model="subject"
+                  label="หัวข้อ"
+                />
+
+                <q-input
+                  type="textarea"
+                  class="full-width inputgreen cursor-pointer"
+                  hide-bottom-space
+                  outlined
+                  dense
+                  lazy-rules
+                  :rules="[(val) => !!val || 'กรุณากรอกข้อความ']"
+                  v-model="body"
+                  label="ข้อความ"
+                />
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="ส่งข้อความ"
+            color="public"
+            @click="submit"
+            class="q-px-md"
+          >
+            <!-- icon="mdi-content-save-outline" -->
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/01_dashboard/views/Dashboard.vue b/src/modules/01_dashboard/views/Dashboard.vue
index 8a14f3f..bd88c11 100644
--- a/src/modules/01_dashboard/views/Dashboard.vue
+++ b/src/modules/01_dashboard/views/Dashboard.vue
@@ -6,6 +6,7 @@ import router from "@/router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
+import PopupReplyInbox from "@/components/PopupReplyInbox.vue";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -117,7 +118,18 @@ const fetchlistInbox = async () => {
 const transferToPage = (path?: string) => {
   router.push(`${path}`);
 };
+
+// Dialog Reply
+const modalReply = ref<boolean>(false);
+function dialogRepleOpen() {
+  modalReply.value = true;
+}
+
+function modalReplyClose() {
+  modalReply.value = false;
+}
 </script>
+
 <template>
   <div class="col-12 row q-col-gutter-md" style="padding-top: 1.8%">
     <div class="col-12 row" v-if="!$q.screen.gt.xs">
@@ -177,16 +189,17 @@ const transferToPage = (path?: string) => {
           <div class="text-subtitle1 text-weight-bold text-dark">
             กล่องข้อความ
           </div>
-          <q-space />
+          <!-- <q-space />
           <q-btn
             dense
             icon="mdi-dots-vertical"
             color="grey-6"
             size="11px"
             flat
-          />
+          /> -->
         </div>
-        <q-scroll-area style="height: 64vh" v-if="inboxList.length > 1">
+
+        <q-scroll-area style="height: 64vh" v-if="inboxList.length > 0">
           <q-list
             v-for="(contact, index) in inboxList"
             :key="index"
@@ -210,6 +223,26 @@ const transferToPage = (path?: string) => {
               <q-item-section side top>
                 <q-item-label caption>{{ contact.timereceive }}</q-item-label>
               </q-item-section>
+
+              <q-item-section side top>
+                <q-btn
+                  flat
+                  round
+                  dense
+                  icon="mdi-reply"
+                  size="10px"
+                  color="grey-7"
+                  @click="dialogRepleOpen()"
+                >
+                  <q-tooltip>ตอบกลับข้อความ</q-tooltip>
+                </q-btn>
+
+                <PopupReplyInbox
+                  :modal="modalReply"
+                  :idInbox="contact.no"
+                  :click-close="modalReplyClose"
+                />
+              </q-item-section>
             </q-item>
           </q-list>
         </q-scroll-area>