From 115455cc8f0a4202cfa0d79b71320479d3329b3d Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Wed, 31 Jan 2024 11:02:24 +0700
Subject: [PATCH] =?UTF-8?q?pop=20up=20=E0=B8=AA=E0=B8=B3=E0=B8=AB=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=9A=E0=B8=88=E0=B8=B1=E0=B8=94=E0=B8=A5=E0=B8=B3?=
 =?UTF-8?q?=E0=B8=94=E0=B8=B1=E0=B8=9A=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DialogSortAgency.vue           | 130 ++++++++++++++++++
 .../components/StructureDetail.vue            |   2 -
 2 files changed, 130 insertions(+), 2 deletions(-)
 create mode 100644 src/modules/02_organizationalNew/components/DialogSortAgency.vue

diff --git a/src/modules/02_organizationalNew/components/DialogSortAgency.vue b/src/modules/02_organizationalNew/components/DialogSortAgency.vue
new file mode 100644
index 000000000..bed77d4e5
--- /dev/null
+++ b/src/modules/02_organizationalNew/components/DialogSortAgency.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import type {
+  FormDataNewStructure,
+  FormNewStructureRef,
+  DataOption,
+  HistoryType,
+} from "@/modules/02_organizationalNew/interface/index/Main";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
+
+const $q = useQuasar();
+const store = useOrganizational();
+const { dialogConfirm, showLoader, success, hideLoader, messageError } =
+  useCounterMixin();
+
+const modal = defineModel<boolean>("sortAgency", { required: true });
+const rows = ref<any>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "id",
+    required: true,
+    label: "ชื่อเครื่องราชฯ",
+    align: "left",
+    field: "id",
+    sortable: true,
+  },
+  {
+    name: "shortName",
+    align: "center",
+    label: "ชื่อย่อ",
+    field: "shortName",
+  },
+  {
+    name: "insigniaType",
+    align: "left",
+    label: "ลำดับชั้นเครื่องราชฯ",
+    field: "insigniaType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sortable: true,
+  },
+]);
+
+function onDrop(from: any, to: any) {
+  onDropRow(from, to);
+}
+
+function onDropRow(from: any, to: any) {
+  rows.value.splice(to, 0, rows.value.splice(from, 1)[0]);
+}
+
+function save() {
+  dialogConfirm($q, () => {
+    const data = rows.value;
+    const dataId = data.map((item: any) => item.id);
+    console.log(dataId);
+  });
+}
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value == true) {
+      const dataList = [
+        {
+          id: "x1",
+          shortName: "test1",
+          insigniaType: "test1",
+        },
+        {
+          id: "x2",
+          shortName: "test2",
+          insigniaType: "test2",
+        },
+      ];
+
+      rows.value = dataList;
+    }
+  }
+);
+</script>
+<template>
+  <template>
+    <q-dialog v-model="modal" persistent>
+      <q-card style="min-width: 50vw">
+        <!-- <form @submit.prevent="validateForm"> -->
+        <DialogHeader
+          :tittle="`จัดลำดับการแสดงผล`"
+          :close="() => (modal = false)"
+        />
+        <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" class="bg-white text-teal">
+          <q-btn type="submit" :label="`บันทึก`" color="public" @click="save" />
+        </q-card-actions>
+        <!-- </form> -->
+      </q-card>
+    </q-dialog>
+  </template>
+</template>
diff --git a/src/modules/02_organizationalNew/components/StructureDetail.vue b/src/modules/02_organizationalNew/components/StructureDetail.vue
index bf30060de..c3e2e84ce 100644
--- a/src/modules/02_organizationalNew/components/StructureDetail.vue
+++ b/src/modules/02_organizationalNew/components/StructureDetail.vue
@@ -4,8 +4,6 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { HistoryType } from "@/modules/02_organizationalNew/interface/index/Main";
-
 import DialogHeader from "@/components/DialogHeader.vue";
 
 import { useCounterMixin } from "@/stores/mixin";