From d73f8b052f056b19d719629535cec980fc8fb548 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Tue, 14 May 2024 14:45:43 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=20tab=20=E0=B8=88=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=87=E0=B8=AB=E0=B8=A7=E0=B8=B1=E0=B8=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/personal/08ListProvince.vue    | 279 ++++++++++++++++++
 src/modules/01_metadataNew/views/personal.vue |  19 +-
 2 files changed, 291 insertions(+), 7 deletions(-)
 create mode 100644 src/modules/01_metadataNew/components/personal/08ListProvince.vue

diff --git a/src/modules/01_metadataNew/components/personal/08ListProvince.vue b/src/modules/01_metadataNew/components/personal/08ListProvince.vue
new file mode 100644
index 000000000..8016e7c20
--- /dev/null
+++ b/src/modules/01_metadataNew/components/personal/08ListProvince.vue
@@ -0,0 +1,279 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRouter } from "vue-router";
+import { usePersonalDataStore } from "@/modules/01_metadataNew/stores/personalStore";
+import { useQuasar } from "quasar";
+import DialogForm from "@/modules/01_metadataNew/components/personal/DialogForm.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const store = usePersonalDataStore();
+const mixin = useCounterMixin();
+const { dialogRemove, messageError, showLoader, hideLoader, success } = mixin;
+const columns = [
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "rank",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "rank",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+] as const satisfies QTableProps["columns"];
+
+const $q = useQuasar();
+const editId = ref<string>("");
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const educationLevel = ref<string>("");
+const educationRank = ref<number>();
+const dialogStatus = ref<string>("");
+const personalName = ref<string>("ระดับการศึกษา");
+const visibleColumns = ref<string[]>([
+  "name",
+  "rank",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
+]);
+
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.orgEducationLevel)
+    .then(async (res) => {
+      store.save(res.data.result);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function addData() {
+  await http
+    .post(config.API.orgEducationLevel, {
+      name: educationLevel.value,
+      rank: educationRank.value,
+    })
+    .then(() => {
+      fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function editData(id: string) {
+  await http
+    .put(config.API.orgEducationLevelId(id), {
+      name: educationLevel.value,
+      rank: educationRank.value,
+    })
+    .then(() => {
+      fetchData();
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function deleteData(id: string) {
+  await http
+    .delete(config.API.orgEducationLevelId(id))
+    .then(() => {
+      fetchData();
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(async () => {
+  fetchData();
+});
+</script>
+
+<template>
+  <q-toolbar style="padding: 0">
+    <q-btn
+      flat
+      round
+      color="primary"
+      icon="add"
+      @click.stop="
+        () => {
+          dialogStatus = 'create';
+          dialog = true;
+          educationLevel = '';
+          educationRank = undefined;
+        }
+      "
+    >
+      <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+    </q-btn>
+    <q-space />
+    <div class="row q-gutter-sm">
+      <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></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
+        style="min-width: 150px"
+      />
+    </div>
+  </q-toolbar>
+
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="store.row"
+    :filter="filterKeyword"
+    row-key="name"
+    flat
+    bordered
+    :paging="true"
+    dense
+    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">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+        <q-th auto-width />
+      </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.id">
+          <div>
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="edit"
+            flat
+            dense
+            round
+            class="q-mr-xs"
+            size="12px"
+            icon="edit"
+            clickable
+            @click.stop="
+              () => {
+                dialogStatus = 'edit';
+                dialog = true;
+                editId = props.row.id;
+                educationLevel = props.row.name;
+                educationRank = props.row.rank;
+              }
+            "
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
+          <q-btn
+            color="red"
+            flat
+            dense
+            round
+            size="12px"
+            icon="mdi-delete"
+            clickable
+            @click.stop="
+              dialogRemove($q, async () => await deleteData(props.row.id))
+            "
+            v-close-popup
+          >
+            <q-tooltip>ลบข้อมูล</q-tooltip>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+  </d-table>
+
+  <DialogForm
+    v-model:educationRank="educationRank"
+    v-model:dialog="dialog"
+    v-model:data="educationLevel"
+    v-model:personalName="personalName"
+    v-model:dialogStatus="dialogStatus"
+    v-model:editId="editId"
+    :addData="addData"
+    :fetch-data="fetchData"
+    :edit-data="editData"
+  />
+</template>
diff --git a/src/modules/01_metadataNew/views/personal.vue b/src/modules/01_metadataNew/views/personal.vue
index 0830da32b..4056bbc15 100644
--- a/src/modules/01_metadataNew/views/personal.vue
+++ b/src/modules/01_metadataNew/views/personal.vue
@@ -7,6 +7,7 @@ import ListGender from "@/modules/01_metadataNew/components/personal/04ListGende
 import ListReligion from "@/modules/01_metadataNew/components/personal/05ListReligion.vue";
 import ListRelationship from "@/modules/01_metadataNew/components/personal/06ListRelationship.vue";
 import ListEducation from "@/modules/01_metadataNew/components/personal/07ListEducationLevel.vue";
+import ListProvince from "@/modules/01_metadataNew/components/personal/08ListProvince.vue";
 
 const currentTab = ref<string>("list_prefix");
 const tabs = ref<Array<any>>([]);
@@ -15,10 +16,11 @@ onMounted(() => {
   const tabsPerson = [
     { label: "คำนำหน้าชื่อ", value: "list_prefix" },
     { label: "ยศ", value: "list_rank" },
-    { label: "กลุ่มเลือด", value: "list_bloodGroup" },
     { label: "เพศ", value: "list_gender" },
-    { label: "ศาสนา", value: "list_religion" },
     { label: "สถานภาพ", value: "list_relationship" },
+    { label: "กลุ่มเลือด", value: "list_bloodGroup" },
+    { label: "ศาสนา", value: "list_religion" },
+    { label: "จังหวัด", value: "list_province" },
     { label: "ระดับการศึกษา", value: "list_education" },
   ];
   tabs.value = tabsPerson;
@@ -60,17 +62,20 @@ onMounted(() => {
         <q-tab-panel name="list_rank">
           <ListRank v-if="currentTab == 'list_rank'" />
         </q-tab-panel>
-        <q-tab-panel name="list_bloodGroup">
-          <ListBloodGroup v-if="currentTab == 'list_bloodGroup'" />
-        </q-tab-panel>
         <q-tab-panel name="list_gender">
           <ListGender v-if="currentTab == 'list_gender'" />
         </q-tab-panel>
+        <q-tab-panel name="list_relationship">
+          <ListRelationship v-if="currentTab == 'list_relationship'" />
+        </q-tab-panel>
+        <q-tab-panel name="list_bloodGroup">
+          <ListBloodGroup v-if="currentTab == 'list_bloodGroup'" />
+        </q-tab-panel>
         <q-tab-panel name="list_religion">
           <ListReligion v-if="currentTab == 'list_religion'" />
         </q-tab-panel>
-        <q-tab-panel name="list_relationship">
-          <ListRelationship v-if="currentTab == 'list_relationship'" />
+        <q-tab-panel name="list_province">
+          <ListProvince v-if="currentTab == 'list_province'" />
         </q-tab-panel>
         <q-tab-panel name="list_education">
           <ListEducation v-if="currentTab == 'list_education'" />