ปรับ กล่องข้อความ

src/components/PopupDetailInbox.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+
+import PopupReplyInbox from "@/components/PopupReplyInbox.vue";
+
+const props = defineProps({
+  modal: {
+    type: Boolean,
+    default: false,
+  },
+  data: {
+    type: Object,
+  },
+  clickClose: {
+    type: Function,
+    default: () => {},
+  },
+});
+
+const emit = defineEmits(["update:modal"]);
+
+const modal = ref<boolean>(false);
+const detail = reactive<any>({
+  no: "",
+  body: "",
+  ratingModel: 0,
+  receiveDate: "",
+  sender: "",
+  subject: "",
+  payload: [],
+});
+
+watch(
+  () => props.modal,
+  () => {
+    if (props.modal) {
+      const data = props.data;
+      if (data) {
+        detail.no = data.no;
+        detail.body = data.body;
+        detail.ratingMode = data.ratingMode;
+        detail.receiveDate = data.receiveDate;
+        detail.sender = data.sender;
+        detail.subject = data.subject;
+        detail.payload = data.payload;
+        modal.value = props.modal;
+      }
+    }
+  }
+);
+
+watch(
+  () => modal.value,
+  () => {
+    if (!modal.value) {
+      emit("update:modal", modal.value);
+    }
+  }
+);
+
+const modalReply = ref<boolean>(false);
+
+function fileOpen(url: string) {
+  window.open(url, "_blank");
+}
+</script>
+<template>
+  <q-dialog v-model="modal">
+    <q-card class="my-card" style="width: 700px; max-width: 80vw">
+      <!-- title -->
+      <q-item>
+        <q-item-section avatar>
+          <q-avatar>
+            <q-icon name="mail_outline" color="teal" size="1.4em" />
+          </q-avatar>
+        </q-item-section>
+
+        <q-item-section>
+          <q-item-label>{{ detail.subject }}</q-item-label>
+
+          <q-item-label caption>
+            วันที่ได้รับ {{ detail.receiveDate }}
+          </q-item-label>
+        </q-item-section>
+        <q-item-section side top>
+          <q-btn
+            flat
+            round
+            dense
+            icon="mdi-reply"
+            color="grey-7"
+            @click="(modalReply = true), (modal = false)"
+          >
+            <q-tooltip>ตอบกลับข้อความ</q-tooltip>
+          </q-btn>
+        </q-item-section>
+      </q-item>
+
+      <q-separator />
+
+      <!-- body -->
+      <q-card-section style="padding: 2px">
+        <q-card-section class="col-12">
+          {{ detail.body }}
+        </q-card-section>
+      </q-card-section>
+
+      <q-separator />
+
+      <!-- file -->
+      <q-card-actions v-if="detail.payload">
+        <q-btn flat color="grey-5" icon="mdi-paperclip"
+          >ดาวน์โหลดเอกสารแนบ
+          <q-menu max-width="480px">
+            <q-list
+              v-for="(item, index) in detail.payload.attachments"
+              :key="index"
+            >
+              <q-item clickable v-close-popup @click.stop="fileOpen(item.url)">
+                <q-item-section>{{ item.name }}</q-item-section>
+              </q-item>
+              <q-separator />
+            </q-list>
+          </q-menu>
+          <q-tooltip>ดาวน์โหลดเอกสารแนบ</q-tooltip>
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
+  <PopupReplyInbox
+    :modal="modalReply"
+    :idInbox="detail.no"
+    :click-close="() => (modalReply = false)"
+  />
+</template>
+
+<style scoped></style>