รายการอุทธรณ์ร้องทุกข์

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

@@ -1,35 +1,52 @@
 <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 type { HistoryStatusType } from "@/modules/11_discipline/interface/response/appealComplain";
+import type { QTableProps } from "quasar";
+
 import { useCounterMixin } from "@/stores/mixin";
+
 const $q = useQuasar();
 
 const mixin = useCounterMixin();
-const { dialogConfirm } = mixin;
+const { dialogConfirm,date2Thai } = 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 rows = ref<HistoryStatusType[]>([]);
+/** หัวข้อที่เเสดงในตารางผู้ถูกร้องเรียน */
+const visibleColumns = ref<string[]>(["no", "status", "createdAt"]);
+/** หัวตารางผู้ถูกร้องเรียน */
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "แก้ไขเมื่อวันที่",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
 const props = defineProps({
   modal: {
     type: Boolean,
@@ -45,49 +62,17 @@ const props = defineProps({
   },
 });
 
-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;
+    rows.value = props.data.map((item: HistoryStatusType) => ({
+      status: dataStore.statusTothai(item.status),
+      createdAt: date2Thai(item.createdAt),
+    }));
   }
 );
 </script>
@@ -95,65 +80,59 @@ watch(
 <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.fullname}` }}
-          </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.statusOptionsEdit"
-            />
-            <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-toolbar>
+        <q-toolbar-title class="text-subtitle2 text-bold">
+          ประวัติแก้ไขสถานะ
+        </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">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          row-key="idcard"
+          flat
+          bordered
+          dense
+          hide-bottom
+          class="custom-header-table"
+          :visible-columns="visibleColumns"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th
+                v-for="col in props.cols"
+                :key="col.name"
+                :props="props"
+                style="color: #000000; font-weight: 500"
+              >
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <div v-else>
+                  {{ col.value }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </q-table>
+      </q-card-section>
     </q-card>
   </q-dialog>
 </template>