ทะเบียนประวัติ => UI รายการยื่นคำร้องขอแก้ไขข้อมูล

src/modules/10_registry/components/DialogAddPetiton.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useRequestEditStore } from "@/modules/10_registry/store/RequestEdit";
+import { useCounterMixin } from "@/stores/mixin";
+
+/**
+ * use
+ */
+const $q = useQuasar();
+const store = useRequestEditStore();
+const { dialogConfirm, showLoader, hideLoader, messageError, success } =
+  useCounterMixin();
+
+/**
+ *  props
+ */
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  fetchData: { type: Function, requied: true },
+});
+
+const isReadOnly = ref<boolean>(false);
+const formData = reactive({
+  topic: "",
+  detail: "",
+  document: null,
+});
+const topicOption = ref<string[]>(store.optionTopic);
+
+function closeDialog() {
+  modal.value = false;
+  formData.topic = "";
+  formData.detail = "";
+  formData.document = null;
+}
+
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      await showLoader();
+      console.log(formData);
+      props.fetchData?.();
+      await success($q, "บันทึกข้อมูลสำเร็จ");
+      await closeDialog();
+      await hideLoader();
+    },
+    "ยืนยันการยื่นคำร้อง",
+    "ต้องการยืนยันการยื่นคำร้องนี้ใช่หรือไม่?"
+  );
+}
+
+function classInput(val: boolean) {
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+function filterOption(val: string, update: Function) {
+  update(() => {
+    topicOption.value = store.optionTopic.filter(
+      (v: any) => v.indexOf(val) > -1
+    );
+  });
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 700px; max-width: 80vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader tittle="ยื่นคำร้องขอแก้ไขข้อมูล" :close="closeDialog" />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-xs-12 col-md-12">
+              <q-select
+                :class="classInput(isReadOnly)"
+                v-model="formData.topic"
+                label="ชื่อเรื่อง"
+                dense
+                outlined
+                emit-value
+                map-options
+                :options="topicOption"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อเรื่อง'}`]"
+                lazy-rules
+                hide-bottom-space
+                use-input
+                @filter="(inputValue:string,
+                doneFn:Function) => filterOption(inputValue, doneFn
+                ) "
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
+            </div>
+
+            <div class="col-xs-12 col-md-12">
+              <q-input
+                :class="classInput(isReadOnly)"
+                v-model="formData.detail"
+                label="รายละเอียด"
+                dense
+                outlined
+                type="textarea"
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-xs-12 col-md-12">
+              <q-file
+                :class="classInput(isReadOnly)"
+                v-model="formData.document"
+                label="อัปโหลดเอกสารหลักฐาน"
+                flat
+                dense
+                outlined
+                hide-bottom-space
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn label="ยื่นคำร้อง" color="secondary" type="submit"
+            ><q-tooltip>ยื่นคำร้อง</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/10_registry/interface/index/Main.ts

@@ -0,0 +1,6 @@
+interface DataOption {
+  id: string;
+  name: string;
+}
+
+export type { DataOption };

src/modules/10_registry/router.ts

@@ -1,12 +1,20 @@
 // registry
 const registryPage = () => import("@/modules/10_registry/views/main.vue");
 
-const registryInformation = () => import("@/modules/10_registry/tabs/01_information.vue");
-const registryGovernment = () => import("@/modules/10_registry/tabs/02_government.vue");
+const registryInformation = () =>
+  import("@/modules/10_registry/tabs/01_information.vue");
+const registryGovernment = () =>
+  import("@/modules/10_registry/tabs/02_government.vue");
 const registrySalary = () => import("@/modules/10_registry/tabs/03_salary.vue");
-const registryAchievement = () => import("@/modules/10_registry/tabs/04_Achievement.vue");
+const registryAchievement = () =>
+  import("@/modules/10_registry/tabs/04_Achievement.vue");
 const registryOther = () => import("@/modules/10_registry/tabs/05_other.vue");
 
+/**
+ * คำร้องแก้ไข
+ */
+const requestEditMain = () => import("@/modules/10_registry/views/requestEditMain.vue");
+
 export default [
   {
     path: "/registry",
@@ -63,4 +71,14 @@ export default [
       Key: [10],
     },
   },
+
+  {
+    path: "/registry/request-edit",
+    name: "request-edit",
+    component: requestEditMain,
+    meta: {
+      Auth: true,
+      Key: [10],
+    },
+  },
 ];

src/modules/10_registry/store/RequestEdit.ts

@@ -0,0 +1,36 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type { DataOption } from "@/modules/10_registry/interface/index/Main";
+
+export const useRequestEditStore = defineStore("requestEditStore", () => {
+  const optionTopic = ref<string[]>([
+    "ขอแก้ไขคำนำหน้านาม ชื่อ นามสกุล",
+    "ขอแก้ไขรูปภาพประจำตัว",
+    "ขอแก้ไขชื่อ - นามสกุล คู่สมรส",
+    "ขอแก้ไขชื่อ - นามสกุล บิดา",
+    "ขอแก้ไขชื่อ - นามสกุล มารดา",
+    "ขอแก้ไขข้อมูลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์/เหรียญจักรพรรดิมาลา",
+    "ขอแก้ไขประกาศเกียรติคุณ",
+    "ขอแก้ไขข้อมูลประวัติการศึกษา",
+  ]);
+  const optionStatus = ref<DataOption[]>([
+    { id: "", name: "ทั้งหมด" },
+    { id: "PENDING", name: "รอดำเนินการ" },
+    { id: "COMPLETE", name: "ดำเนินการแก้ไขแล้ว" },
+    { id: "REJECT", name: "ไม่อนุมัตการแก้ไข" },
+  ]);
+
+  function convertStatus(val: string) {
+    switch (val) {
+      case "PENDING":
+        return "รอดำเนินการ";
+      case "COMPLETE":
+        return "ดำเนินการแก้ไขแล้ว";
+      case "REJECT":
+        return "ไม่อนุมัตการแก้ไข";
+      default:
+        return "-";
+    }
+  }
+  return { convertStatus, optionTopic, optionStatus };
+});

src/modules/10_registry/views/main.vue

@@ -150,6 +150,13 @@ const clickBack = () => {
   router.push(`/`);
 };
 
+/**
+ * function redirect ไปหน้ารายการคำร้องขอแก้ไขข้อมูล
+ */
+function redirectToPagePetition() {
+  router.push(`/registry/request-edit`);
+}
+
 onMounted(async () => {
   store.typeProfile = "OFFICER";
   await getType();
@@ -171,7 +178,14 @@ onMounted(async () => {
           class="q-mr-sm"
           @click="clickBack"
         />
-        ข้อมูลทะเบียนประวัติ
+        ข้อมูลทะเบียนประวัติ <q-space />
+        <q-btn
+          color="primary"
+          label="ยื่นคำร้องขอแก้ไขข้อมูล"
+          @click="redirectToPagePetition"
+        >
+          <q-tooltip>ยื่นคำร้องขอแก้ไขข้อมูล</q-tooltip>
+        </q-btn>
       </div>
       <div v-if="$q.screen.gt.xs" class="row q-col-gutter-md">
         <div class="col-3">

src/modules/10_registry/views/requestEditMain.vue

@@ -0,0 +1,289 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+import type { QTableProps } from "quasar";
+import type { DataOption } from "@/modules/10_registry/interface/index/Main";
+
+import DialogAddPetiton from "@/modules/10_registry/components/DialogAddPetiton.vue";
+
+import { useRequestEditStore } from "@/modules/10_registry/store/RequestEdit";
+import { useCounterMixin } from "@/stores/mixin";
+
+const store = useRequestEditStore();
+const router = useRouter();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+
+/**
+ * ตัวแปร
+ */
+const modalPetiton = ref<boolean>(false);
+const status = ref<string>("");
+const keyword = ref<string>("");
+const statusOption = ref<DataOption[]>(store.optionStatus);
+const dataList = ref<any[]>([]);
+
+/**
+ * Table
+ */
+const rows = ref<any[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: (row) => rows.value.indexOf(row) + 1,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "topic",
+    align: "left",
+    label: "ชื่อเรื่อง",
+    sortable: true,
+    field: "topic",
+    format: (v) => (v ? v : "-"),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: true,
+    field: "detail",
+    format: (v) => (v ? v : "-"),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "document",
+    align: "left",
+    label: "หลักฐานอ้างอิง",
+    sortable: true,
+    field: "document",
+    format: (v) => (v ? v : "-"),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะคำร้อง",
+    sortable: true,
+    field: "status",
+    format: (v) => store.convertStatus(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "remark",
+    align: "left",
+    label: "หมายเหตุ ",
+    sortable: true,
+    field: "remark",
+    format: (v) => (v ? v : "-"),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "topic",
+  "detail",
+  "document",
+  "status",
+  "remark",
+]);
+
+function onclickBackPage() {
+  router.push(`/registry`);
+}
+
+function onClickAdd() {
+  modalPetiton.value = true;
+}
+
+function fetchListRequset() {
+  const data = [
+    {
+      topic: "ขอแก้ไขคำนำหน้านาม ชื่อ นามสกุล",
+      detail: "ขอแก้ไขคำนำหน้านาม",
+      document: null,
+      status: "PENDING",
+      remark: "",
+    },
+    {
+      topic: "ขอแก้ไขข้อมูลประวัติการศึกษา",
+      detail: "ขอแก้ไขคำนำหน้านาม",
+      document: null,
+      status: "COMPLETE",
+      remark: "",
+    },
+    {
+      topic: "ขอแก้ไขชื่อ - นามสกุล คู่สมรส",
+      detail: "ขอแก้ไขคำนำหน้านาม",
+      document: null,
+      status: "REJECT",
+      remark: "",
+    },
+  ];
+  dataList.value = data;
+  rows.value = dataList.value;
+}
+
+function updateStatusValue(val: string) {
+  if (val) {
+    rows.value = dataList.value.filter((e) => e.status === val);
+  } else {
+    rows.value = dataList.value;
+  }
+}
+
+function clearStatus() {
+  status.value = "";
+  statusOption.value = store.optionStatus;
+}
+
+function filterOption(val: string, update: Function) {
+  update(() => {
+    status.value = val ? "" : status.value;
+    statusOption.value = store.optionStatus.filter(
+      (v: any) => v.name.indexOf(val) > -1
+    );
+  });
+}
+
+onMounted(() => {
+  fetchListRequset();
+});
+</script>
+
+<template>
+  <div class="row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="onclickBackPage"
+        />
+        รายการยื่นคำร้องขอแก้ไขข้อมูล
+      </div>
+      <q-card bordered class="q-pa-md">
+        <div class="row q-mb-sm q-col-gutter-sm">
+          <div class="col-xs-10 col-md-2">
+            <q-select
+              v-model="status"
+              label="สถานะคำร้อง"
+              dense
+              outlined
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              :options="statusOption"
+              @update:model-value="updateStatusValue"
+              :clearable="status !== ''"
+              @clear="clearStatus"
+              use-input
+              @filter="(inputValue:string,
+              doneFn:Function) => filterOption(inputValue, doneFn
+              ) "
+            >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    ไม่มีข้อมูล
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+          </div>
+          <div>
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="mdi-plus"
+              @click="onClickAdd()"
+            >
+              <q-tooltip>ยื่นคำร้องขอแก้ไขข้อมูล</q-tooltip>
+            </q-btn>
+          </div>
+          <q-space />
+          <q-input
+            v-model="keyword"
+            outlined
+            clearable
+            dense
+            label="ค้นหา"
+            style="width: 250px"
+          >
+          </q-input>
+
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            class="col-xs-12 col-sm-3 col-md-2"
+          />
+        </div>
+        <div class="col-12">
+          <d-table
+            :columns="columns"
+            :rows="rows"
+            row-key="id"
+            :rows-per-page-options="[10, 25, 50, 100]"
+            :paging="true"
+            :visible-columns="visibleColumns"
+            :filter="keyword"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <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 class="table_ellipsis2">
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </q-card>
+    </div>
+  </div>
+
+  <DialogAddPetiton
+    v-model:modal="modalPetiton"
+    :fetchData="fetchListRequset"
+  />
+</template>
+
+<style scoped></style>