From 8f8634c50f71ece2a42448ec91bc04b7d613833e Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Thu, 27 Mar 2025 18:18:17 +0700
Subject: [PATCH] sort

---
 src/api/15_development/api.development.ts     |   2 +
 .../strategic/DialogSortStrategic.vue         | 116 ++++++++++++++++++
 src/modules/01_masterdata/views/Strategic.vue |  40 +++++-
 3 files changed, 156 insertions(+), 2 deletions(-)
 create mode 100644 src/modules/01_masterdata/components/strategic/DialogSortStrategic.vue

diff --git a/src/api/15_development/api.development.ts b/src/api/15_development/api.development.ts
index 99845f6a7..da4023246 100644
--- a/src/api/15_development/api.development.ts
+++ b/src/api/15_development/api.development.ts
@@ -55,4 +55,6 @@ export default {
   developmentReQuestIDP: (id: string) =>
     `${developmentOrg}/profile/development/registry/OFFICER/${id}`,
   developmentIDP: (id: string) => `${development}/main/registry/OFFICER/${id}`,
+
+  devStrategySort:`${devStrategy}/sort`
 };
diff --git a/src/modules/01_masterdata/components/strategic/DialogSortStrategic.vue b/src/modules/01_masterdata/components/strategic/DialogSortStrategic.vue
new file mode 100644
index 000000000..6c868db87
--- /dev/null
+++ b/src/modules/01_masterdata/components/strategic/DialogSortStrategic.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import type { PropType } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
+
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import type { DataStrategic } from "@/modules/01_masterdata/interface/response/Strategic";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, success, messageError } = mixin;
+const props = defineProps({
+  dataSort: Array as PropType<DataStrategic[]>,
+  idSort: String,
+  getData: Function,
+});
+
+const modal = defineModel<boolean>("modal", { required: true });
+const rows = ref<any[]>([]);
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ยุทธศาสตร์",
+    field: "name",
+  },
+]);
+
+/**
+ * ฟังก์ชันการจัดลำดับการแสดงผล
+ * @param from ตำแหน่งปัจจบัน
+ * @param to ตำแหน่งที่ต้องการไป
+ */
+function onDrop(from: number, to: number) {
+  rows.value.splice(to, 0, rows.value.splice(from, 1)[0]);
+}
+
+function closeDialog() {
+  modal.value = false;
+}
+
+async function onSubmit() {
+  const minLevel = Math.min(...rows.value.map((item) => item.level));
+  const strategyId = rows.value.map((item: any) => item.id);
+  const body = {
+    strategy: minLevel,
+    strategyId: strategyId,
+    id: minLevel == 1 ? null : props.idSort,
+  };
+  showLoader();
+  await http
+    .post(config.API.devStrategySort, body)
+    .then(async(res) => {
+      await props.getData?.();
+      closeDialog();
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+watch(modal, () => {
+  if (modal.value && props.dataSort) {
+    const listData = props.dataSort;
+    rows.value = [];
+    rows.value.push(...listData);
+  }
+});
+</script>
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="col-12" style="width: 80%">
+      <DialogHeader tittle="จัดลำดับการแสดงผล" :close="closeDialog" />
+      <q-separator />
+      <q-card-section>
+        <q-table
+          v-draggable-table="{
+            options: {
+              mode: 'row',
+              onlyBody: true,
+              dragHandler: 'th,td',
+            },
+            onDrop,
+          }"
+          flat
+          bordered
+          :rows="rows"
+          :columns="columns"
+          :rows-per-page-options="[100]"
+          row-key="name"
+          hide-bottom
+          hide-pagination
+          hide-header
+        />
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right">
+        <q-btn label="บันทึก" color="secondary" type="submit" @click="onSubmit"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/01_masterdata/views/Strategic.vue b/src/modules/01_masterdata/views/Strategic.vue
index b5fd7fc27..c5e393ed0 100644
--- a/src/modules/01_masterdata/views/Strategic.vue
+++ b/src/modules/01_masterdata/views/Strategic.vue
@@ -10,6 +10,7 @@ import { checkPermission } from "@/utils/permissions";
 import type { DataStrategic } from "@/modules/01_masterdata/interface/response/Strategic";
 
 import DialogHeader from "@/components/DialogHeader.vue";
+import DialogSortStrategic from "@/modules/01_masterdata/components/strategic/DialogSortStrategic.vue";
 
 const $q = useQuasar();
 const {
@@ -21,7 +22,10 @@ const {
   success,
 } = useCounterMixin();
 
+const modalSort = ref<boolean>(false);
+const idSort = ref<string>("");
 const nodes = ref<DataStrategic[]>([]);
+const dataSort = ref<DataStrategic[]>([]);
 const filter = ref<string>("");
 const expanded = ref<Array<string>>([]);
 const nodeId = ref<string>("");
@@ -39,6 +43,7 @@ function fetchDataTree() {
     .then((res) => {
       const data: DataStrategic[] = res.data.result;
       nodes.value = data;
+      dataSort.value = data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -175,7 +180,7 @@ onMounted(() => {
   <div class="toptitle text-dark col-12 row items-center">ยุทธศาสตร์</div>
   <q-card flat bordered class="q-pa-md">
     <div class="row q-col-gutter-sm q-pl-sm">
-      <q-toolbar class="text-primary">
+      <q-toolbar class="text-primary q-gutter-x-sm">
         <q-btn
           v-if="checkPermission($route)?.attrIsCreate"
           dense
@@ -187,7 +192,16 @@ onMounted(() => {
         >
           <q-tooltip>เพิ่มยุทธศาสตร์</q-tooltip>
         </q-btn>
-
+        <q-btn
+          round
+          flat
+          dense
+          color="blue"
+          icon="mdi-sort"
+          @click="modalSort = true,idSort = '',dataSort = nodes"
+        >
+          <q-tooltip>จัดลำดับข้อมูล</q-tooltip></q-btn
+        >
         <q-input dense outlined v-model="filter" label="ค้นหา">
           <template v-slot:append>
             <q-icon name="search" />
@@ -283,6 +297,21 @@ onMounted(() => {
                       {{ `แก้ไขกลยุทธ์ที่/เป้าประสงค์` }}
                     </q-item-section>
                   </q-item>
+                  <q-item
+                    v-if="prop.node.children.length !== 0"
+                    clickable
+                    v-close-popup
+                    @click="
+                      (modalSort = true),
+                        (idSort = prop.node.id),
+                        (dataSort = prop.node.children)
+                    "
+                  >
+                    <q-item-section avatar style="min-width: 20px">
+                      <q-icon size="17px" :color="'blue'" :name="'mdi-sort'" />
+                    </q-item-section>
+                    <q-item-section> จัดลำดับข้อมูล </q-item-section>
+                  </q-item>
                   <q-item
                     v-if="checkPermission($route)?.attrIsDelete"
                     clickable
@@ -344,6 +373,13 @@ onMounted(() => {
       </q-form>
     </q-card>
   </q-dialog>
+
+  <DialogSortStrategic
+    v-model:modal="modalSort"
+    :data-sort="dataSort"
+    :get-data="fetchDataTree"
+    :id-sort="idSort"
+  />
 </template>
 
 <style lang="scss" scoped>