ui รายการอุทธรณ์ร้องทุกข์ *ยังไม่เสร็จดี

src/modules/11_discipline/components/8_AppealComplain/dialog/DialogEditStatus.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { ref, defineProps, watch, reactive } from "vue";
+import { useAppealComplainStore } from "@/modules/11_discipline/store/AppealComplainStore";
+import type { EditStatusRef } from "@/modules/11_discipline/interface/response/appealComplain";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+const $q = useQuasar();
+
+const mixin = useCounterMixin();
+const { dialogConfirm } = mixin;
+const dataStore = useAppealComplainStore();
+
+interface status {
+  status: string;
+  reason: string;
+}
+
+/** ตัวแปร validate */
+const reasonRef = ref<Object | null>(null);
+const statusRef = ref<Object | null>(null);
+
+const objectEditStatus: EditStatusRef = {
+  reason: reasonRef,
+  status: statusRef,
+};
+
+const formData = reactive<status>({
+  status: "",
+  reason: "",
+});
+
+const props = defineProps({
+  modal: {
+    type: Boolean,
+    default: false,
+  },
+  data: {
+    type: Object,
+    default: {},
+  },
+  close: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+const emit = defineEmits(["editStatusReturn"]);
+
+function clickClose() {
+  props.close();
+}
+
+/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
+function validateForm() {
+  console.log("1");
+  const hasError = [];
+  for (const key in objectEditStatus) {
+    if (Object.prototype.hasOwnProperty.call(objectEditStatus, key)) {
+      const property = objectEditStatus[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+
+  if (hasError.every((result) => result === true)) {
+    emit("editStatusReturn", formData);
+  } else {
+    console.log("ไม่ผ่าน ");
+    console.log(hasError);
+  }
+}
+
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      console.log("add");
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+
+watch(
+  () => props.data,
+  () => {
+    formData.status = props.data.status;
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="min-width: 30vw">
+      <form @submit.prevent="validateForm">
+        <q-toolbar>
+          <q-toolbar-title class="text-subtitle2 text-bold">
+            {{ `แก้ไขสถานะ ${props.data.name}` }}
+          </q-toolbar-title>
+          <q-btn
+            icon="close"
+            unelevated
+            round
+            dense
+            @click="clickClose"
+            style="color: #ff8080; background-color: #ffdede"
+          />
+        </q-toolbar>
+        <q-separator />
+        <q-card-section class="q-pa-md bg-grey-1">
+          <div class="q-gutter-sm">
+            <q-select
+              ref="statusRef"
+              v-model="props.data.status"
+              label="สถานะ"
+              dense
+              bg-color="white"
+              outlined
+              emit-value
+              :rules="[(val) => !!val || `${'กรุณาเลือกสถานะ'}`]"
+              map-options
+              hide-bottom-space
+              option-label="name"
+              option-value="id"
+              :options="dataStore.statusOptions"
+            />
+            <q-input
+              ref="reasonRef"
+              v-model="formData.reason"
+              dense
+              outlined
+              :rules="[(val) => !!val || `${'กรุณากรอกเหตุผล'}`]"
+              bg-color="white"
+              type="textarea"
+              label="เหตุผล"
+              lazy-rules
+              hide-bottom-space
+            />
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <div class="row justify-end q-px-md q-py-sm items-center">
+          <q-btn
+            dense
+            color="public"
+            id="onSubmit"
+            type="submit"
+            class="q-px-md q-py-xs"
+            label="บันทึก"
+          />
+        </div>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>