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

---
 src/api/00_dashboard/api.message.ts        |   4 +-
 src/components/Dialogs/PopupReplyInbox.vue | 111 +++++++++++++++++++++
 src/views/Dashboard.vue                    |  28 +++++-
 3 files changed, 139 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Dialogs/PopupReplyInbox.vue

diff --git a/src/api/00_dashboard/api.message.ts b/src/api/00_dashboard/api.message.ts
index a157d61fb..fefbcc22a 100644
--- a/src/api/00_dashboard/api.message.ts
+++ b/src/api/00_dashboard/api.message.ts
@@ -4,10 +4,12 @@
 import env from "../index";
 
 const message = `${env.API_PLACEMENT_URI}/message`;
+const reply = `${env.API_PLACEMENT_URI}/placement/noti`;
 
 export default {
   msgNotificate: `${message}/my-notifications`,
   msgInbox: `${message}/my-inboxes`,
   msgId: (id: string) => `${message}/my-notifications/${id}`,
-  msgInboxDelete:(id:string) => `${message}/my-inboxes/${id}`,
+  msgInboxDelete: (id: string) => `${message}/my-inboxes/${id}`,
+  replyMessage: (id: string) => `${reply}/${id}`,
 };
diff --git a/src/components/Dialogs/PopupReplyInbox.vue b/src/components/Dialogs/PopupReplyInbox.vue
new file mode 100644
index 000000000..1eed8b25b
--- /dev/null
+++ b/src/components/Dialogs/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/views/Dashboard.vue b/src/views/Dashboard.vue
index dce973290..db03e7a44 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -6,6 +6,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import PopupReplyInbox from "@/components/Dialogs/PopupReplyInbox.vue";
 import type {
   ResponseInbox,
   DataInbox,
@@ -94,6 +95,16 @@ const removeData = async (id: string) => {
 const fileOpen = (url: string) => {
   window.open(url, "_blank");
 };
+
+// Dialog Reply
+const modalReply = ref<boolean>(false);
+function dialogRepleOpen() {
+  modalReply.value = true;
+}
+
+function modalReplyClose() {
+  modalReply.value = false;
+}
 </script>
 
 <!-- page:หน้าแรก -->
@@ -197,7 +208,7 @@ const fileOpen = (url: string) => {
         bordered
         :style="$q.screen.gt.xs ? 'height: 80vh' : 'height: auto;'"
       >
-        <div class=" col-12" v-for="(d, index) in data" :key="index">
+        <div class="col-12" v-for="(d, index) in data" :key="index">
           <div class="col-12 q-pa-xs">
             <q-item>
               <q-item-section top avatar>
@@ -225,14 +236,25 @@ const fileOpen = (url: string) => {
                   date2Thai(d.timereceive)
                 }}</q-item-label>
                 <div class="text-grey-8 q-gutter-xs q-pt-sm">
-                  <!-- <q-btn
+                  <!-- Reply -->
+                  <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="d.no"
+                    :click-close="modalReplyClose"
+                  />
+
                   <q-btn
                     flat
                     round