API จัดลำดับการแสดงผล

src/api/registry/api.registry.ts

@@ -76,6 +76,9 @@ export default {
 
   // ประวัติการศึกษา
   profileNewEducation: (type: string) => `${registryNew}${type}/educations`,
+  profileNewEducationSort: (type: string) =>
+    `${registryNew}${type}/educations/sort`,
+
   profileNewEducationByProfileId: (profileId: string, type: string) =>
     `${registryNew}${type}/educations/${profileId}`,
   profileNewEducationByEducationId: (educationId: string, type: string) =>
@@ -202,5 +205,6 @@ export default {
 
   developMentPlan: `${registryNew}/development`,
 
-  requestInformationbyType:(type:string,id:string)=>`${registryNew}/request-edit/${type}/${id}`
+  requestInformationbyType: (type: string, id: string) =>
+    `${registryNew}/request-edit/${type}/${id}`,
 };

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

@@ -6,6 +6,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useOrganizational } from "@/modules/02_organization/store/organizational";
+import { useRoute } from "vue-router";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -18,6 +19,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
 
 /** use*/
 const $q = useQuasar();
+const route = useRoute();
 const store = useOrganizational();
 const {
   dialogConfirm,
@@ -34,21 +36,12 @@ const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
   dataSort: Array as PropType<ResponseObject[]>,
 });
+const profileId = ref<string>(route.params.id.toString()); //id profile
 
 /** ข้อมูล Table*/
 const rows = ref<ResponseObject[]>([]);
+const selected = ref<any[]>([]);
 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",
@@ -234,16 +227,42 @@ const columns = ref<QTableProps["columns"]>([
  */
 function onDrop(from: number, to: number) {
   rows.value.splice(to, 0, rows.value.splice(from, 1)[0]);
+  selected.value.push(rows.value[0]);
 }
 
 /** function บันทึกการจัดลำดับ*/
 function onSubmit() {
-  dialogConfirm($q, () => {});
+  dialogConfirm($q, async () => {
+    showLoader();
+    const body = rows.value.map((e: any) => ({
+      id: e.id,
+      isUse: selected.value.some((i: any) => i.id === e.id),
+    }));
+
+    await http
+      .put(config.API.profileNewEducationSort("") + `/${profileId.value}`, {
+        data: body,
+      })
+      .then(async () => {
+        await success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
 watch(modal, async () => {
   if (modal.value && props.dataSort) {
     rows.value = props.dataSort;
+    selected.value.push(rows.value[0]);
+  } else {
+    selected.value = [];
+    rows.value = [];
   }
 });
 </script>
@@ -277,26 +296,33 @@ watch(modal, async () => {
             hide-bottom
             hide-pagination
             hide-header
+            selection="multiple"
+            v-model:selected="selected"
           >
+            <template v-slot:header-selection="scope">
+              <q-checkbox
+                keep-color
+                color="primary"
+                dense
+                v-model="scope.checkBox"
+              />
+            </template>
             <template v-slot:body="props">
               <q-tr :props="props">
+                <q-td>
+                  <q-checkbox
+                    keep-color
+                    color="primary"
+                    dense
+                    v-model="props.selected"
+                  />
+                </q-td>
                 <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>
+                  <div>
                     {{
                       col.value === "" || col.value === null ? "-" : col.value
                     }}