reply message

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>