เพิ่มจัดลำดับรายการส่วนของประวัติการศึกษาในทะเบียนประวัติ

src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue

@@ -20,6 +20,7 @@ import type {
 } from "@/modules/04_registryPerson/interface/response/Education";
 
 import dialogHeader from "@/components/DialogHeader.vue";
+import DialogSortEducation from "@/modules/04_registryPerson/components/detail/PersonalInformation/DialogSortEducation.vue";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -523,6 +524,9 @@ const educationData = reactive<RequestItemsObject>({
   positionPathId: "",
 });
 
+const modalSort = ref<boolean>(false);
+const dataSort = ref<ResponseObject[]>([]);
+
 /** function ยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
   dialogConfirm(
@@ -642,6 +646,7 @@ async function fetchData(id: string) {
     .then(async (res) => {
       rows.value = await res.data.result;
       rowsMain.value = await res.data.result;
+      dataSort.value = res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -769,7 +774,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="row items-center q-gutter-x-sm q-pb-sm">
+  <div class="row items-center q-col-gutter-x-sm q-pb-sm">
     <q-btn
       v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
       round
@@ -787,6 +792,17 @@ onMounted(async () => {
     >
       <q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
     >
+    <q-btn
+      v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
+      round
+      flat
+      dense
+      color="blue"
+      icon="mdi-sort"
+      @click="modalSort = true"
+    >
+      <q-tooltip>จัดลำดับข้อมูล</q-tooltip></q-btn
+    >
 
     <q-space />
     <q-input
@@ -1534,6 +1550,8 @@ onMounted(async () => {
       </q-card-section>
     </q-card>
   </q-dialog>
+
+  <DialogSortEducation v-model:modal="modalSort" :data-sort="dataSort" />
 </template>
 
 <style scoped>

src/modules/04_registryPerson/components/detail/PersonalInformation/DialogSortEducation.vue

@@ -0,0 +1,327 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrganizational } from "@/modules/02_organization/store/organizational";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { PropType } from "vue";
+
+import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Education";
+
+/** importComponents*/
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** use*/
+const $q = useQuasar();
+const store = useOrganizational();
+const {
+  dialogConfirm,
+  showLoader,
+  success,
+  hideLoader,
+  messageError,
+  date2Thai,
+} = useCounterMixin();
+
+/** props*/
+const modal = defineModel<boolean>("modal", { required: true });
+
+const props = defineProps({
+  dataSort: Array as PropType<ResponseObject[]>,
+});
+
+/** ข้อมูล Table*/
+const rows = ref<ResponseObject[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "educationLevel",
+    align: "left",
+    label: "ระดับการศึกษา",
+    sortable: true,
+    field: "educationLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "institute",
+    align: "left",
+    label: "สถานศึกษา",
+    sortable: true,
+    field: "institute",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "ตั้งแต่",
+    sortable: true,
+    field: "startDate",
+    format(val, row) {
+      return row.isDate
+        ? date2Thai(row.startDate)
+        : new Date(row.startDate).getFullYear() + 543;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "endDate",
+    align: "left",
+    label: "ถึง",
+    sortable: true,
+    field: "endDate",
+    format(val, row) {
+      return row.isDate
+        ? date2Thai(row.endDate)
+        : new Date(row.endDate).getFullYear() + 543;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "finishDate",
+    align: "left",
+    label: "วันที่สำเร็จการศึกษา",
+    sortable: true,
+    field: "finishDate",
+    format: (v) => date2Thai(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isEducation",
+    align: "left",
+    label: "เป็นวุฒิการศึกษาในตำแหน่ง",
+    sortable: true,
+    field: "isEducation",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => (v === true ? "ใช่" : "ไม่ใช่"),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "degree",
+    align: "left",
+    label: "วุฒิการศึกษา",
+    sortable: true,
+    field: "degree",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "field",
+    align: "left",
+    label: "สาขาวิชา/ทาง",
+    sortable: true,
+    field: "field",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fundName",
+    align: "left",
+    label: "ทุน",
+    sortable: true,
+    field: "fundName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "gpa",
+    align: "left",
+    label: "เกรดเฉลี่ย",
+    sortable: true,
+    field: "gpa",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "country",
+    align: "left",
+    label: "ประเทศ",
+    sortable: true,
+    field: "country",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "other",
+    align: "left",
+    label: "ข้อมูลการติดต่อ",
+    sortable: true,
+    field: "other",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "duration",
+    align: "left",
+    label: "ระยะเวลา",
+    sortable: true,
+    field: "duration",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "durationYear",
+    align: "left",
+    label: "ระยะเวลาหลักสูตร (ปี)",
+    sortable: true,
+    field: "durationYear",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "note",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "note",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+/**
+ * fiunction จัดลำดับ
+ * @param from ตำแหน่งปัจุบัน
+ * @param to ตำแหน่งที่จะย้ายไป
+ */
+function onDrop(from: number, to: number) {
+  rows.value.splice(to, 0, rows.value.splice(from, 1)[0]);
+}
+
+/** function บันทึกการจัดลำดับ*/
+function onSubmit() {
+  dialogConfirm($q, () => {});
+}
+
+watch(modal, async () => {
+  if (modal.value && props.dataSort) {
+    rows.value = props.dataSort;
+  }
+});
+</script>
+<template>
+  <template>
+    <q-dialog v-model="modal" persistent>
+      <q-card style="min-width: 80vw">
+        <DialogHeader
+          :tittle="`จัดลำดับการแสดง`"
+          :close="() => (modal = false)"
+        />
+        <q-separator />
+
+        <q-card-section style="max-height: 70vh" class="scroll">
+          <q-table
+            v-if="rows.length > 0"
+            v-draggable-table="{
+              options: {
+                mode: 'row',
+                onlyBody: true,
+                dragHandler: 'td',
+              },
+              onDrop,
+            }"
+            flat
+            bordered
+            :rows="rows"
+            :columns="columns"
+            :rows-per-page-options="[100]"
+            row-key="id"
+            hide-bottom
+            hide-pagination
+            hide-header
+          >
+            <template v-slot:body="props">
+              <q-tr :props="props">
+                <q-td
+                  v-for="col in props.cols"
+                  :key="col.id"
+                  :class="props.rowIndex === 0 ? 'text-primary' : ''"
+                >
+                  <div v-if="col.name === 'no'">
+                    {{
+                      props.rowIndex === 0
+                        ? "วุฒิในตำแหน่ง"
+                        : props.rowIndex === 1
+                        ? "ลำดับที่ 2"
+                        : props.rowIndex === 2
+                        ? "ลำดับที่ 3"
+                        : ""
+                    }}
+                  </div>
+                  <div v-else>
+                    {{
+                      col.value === "" || col.value === null ? "-" : col.value
+                    }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </q-table>
+          <div v-else class="bg-grey-1 text-center q-pa-md">ไม่มีข้อมูล</div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn
+            :disable="rows.length === 0"
+            type="submit"
+            :label="`บันทึก`"
+            color="public"
+            @click="onSubmit"
+          >
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+  </template>
+</template>
+
+<style lang="scss"></style>