From fb0347fbe907cbbabcb74bc08d20aef82cd09dc2 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Tue, 30 Jan 2024 12:06:06 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20ui=20sort=20=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=87=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B9=81=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=9A=20drag=20&=20drop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 env.d.ts                                      |   1 +
 package.json                                  |   1 +
 src/main.ts                                   |   6 +-
 .../components/insignia/InsigniaDetail.vue    |   1 +
 .../components/insignia/InsigniaList.vue      |  12 ++
 .../components/insignia/TableDraggable.vue    | 152 ++++++++++++++++++
 .../01_metadataNew/stores/InsigniaStore.ts    |   2 +-
 tsconfig.json                                 |   2 +
 8 files changed, 175 insertions(+), 2 deletions(-)
 create mode 100644 src/modules/01_metadataNew/components/insignia/TableDraggable.vue

diff --git a/env.d.ts b/env.d.ts
index 11f02fe2a..33cd2182c 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+declare module 'quasar-ui-q-draggable-table';
\ No newline at end of file
diff --git a/package.json b/package.json
index 403f6f025..cc3443f41 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "node-sass": "^9.0.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
+    "quasar-ui-q-draggable-table": "^1.0.1",
     "sass": "^1.69.4",
     "start-server-and-test": "^1.15.2",
     "typescript": "~4.7.4",
diff --git a/src/main.ts b/src/main.ts
index 2926f9112..79578a04c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,7 +2,10 @@ import { createApp, defineAsyncComponent } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import { Dialog, Notify, Quasar, Loading } from "quasar";
-import quasarUserOptions from "./quasar-user-options";
+import "./quasar-user-options";
+
+import qDraggableTable from 'quasar-ui-q-draggable-table';
+import 'quasar-ui-q-draggable-table/dist/index.css';
 
 import "quasar/src/css/index.sass";
 import th from "quasar/lang/th";
@@ -29,6 +32,7 @@ app.config.globalProperties.$filters = filters;
 
 app.use(router);
 app.use(pinia);
+app.use(qDraggableTable);
 
 app.use(
   Quasar,
diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue b/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue
index db71f6c5e..7a82b6fab 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue
@@ -43,6 +43,7 @@ onMounted(async () => {
   fetchData(id.value);
 });
 </script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaList.vue b/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
index 227ac7657..e00d6202c 100644
--- a/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
@@ -5,6 +5,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useRouter, useRoute } from "vue-router";
 import { useInsigniaDataStore } from "@/modules/01_metadataNew/stores/InsigniaStore";
 import dialogHeader from "@/components/DialogHeader.vue";
+import TableDraggable from "@/modules/01_metadataNew/components/insignia/TableDraggable.vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -231,6 +232,7 @@ async function deleteData(idData: string) {
 import { defineEmits } from "vue";
 
 const emit = defineEmits(["nameType"]);
+const dialogOrder = ref<boolean>(false);
 </script>
 
 <template>
@@ -250,6 +252,16 @@ const emit = defineEmits(["nameType"]);
       >
         <q-tooltip> เพิ่มข้อมูล </q-tooltip>
       </q-btn>
+      <q-btn
+        flat
+        round
+        color="blue-6"
+        icon="mdi-sort"
+        @click.stop="() => (dialogOrder = true)"
+      >
+        <q-tooltip> จัดลำดับการแสดงผล </q-tooltip>
+      </q-btn>
+      <TableDraggable v-model:modal="dialogOrder" />
       <q-space />
       <div class="row q-gutter-sm">
         <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
diff --git a/src/modules/01_metadataNew/components/insignia/TableDraggable.vue b/src/modules/01_metadataNew/components/insignia/TableDraggable.vue
new file mode 100644
index 000000000..d5a5a4712
--- /dev/null
+++ b/src/modules/01_metadataNew/components/insignia/TableDraggable.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRouter, useRoute } from "vue-router";
+import { useInsigniaDataStore } from "@/modules/01_metadataNew/stores/InsigniaStore";
+import dialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar } from "quasar";
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+const store = useInsigniaDataStore();
+const mixin = useCounterMixin();
+const { dialogRemove, dialogConfirm, showLoader, hideLoader, messageError } =
+  mixin;
+const $q = useQuasar();
+const route = useRoute();
+const modal = defineModel("modal", { type: Boolean });
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    required: true,
+    label: "ชื่อเครื่องราชฯ",
+    align: "left",
+    field: "name",
+    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);
+}
+
+const rows = ref<any>([]);
+function onDropRow(from: any, to: any) {
+  rows.value.splice(to, 0, rows.value.splice(from, 1)[0]);
+}
+
+async function save() {
+  const dataPost = await rows.value.map((obj:any) => {
+  return obj.id;
+});
+  console.log("post data===>", dataPost);
+  modal.value = false
+  // showLoader();
+  // await http
+  //   .put(config.API.insigniaTypeNewId(id), dataPost)
+  //   .then(async (res) => {
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+async function onSubmit() {
+  dialogConfirm($q, async () => {
+    save();
+  });
+}
+
+watch(modal, () => {
+  if (modal.value === true) {
+    rows.value = store.row;
+  }
+});
+</script>
+
+<template>
+  <q-dialog v-model="modal" class="dialog" persistent>
+    <q-card style="min-width: 50vw" class="bg-grey-11">
+      <form @submit.prevent="onSubmit">
+        <DialogHeader
+          tittle="จัดลำดับการแสดงผล"
+          :close="() => (modal = false)"
+        />
+        <q-separator />
+        <q-card-section class="q-pa-md bg-grey-1">
+          <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-table
+            v-draggable-table="{
+              options: {
+                mode: 'row',
+                onlyBody: true,
+                dragHandler: 'tr',
+              },
+              onDrop,
+            }"
+            ref="table"
+            :columns="columns"
+            :rows="rows"
+            row-key="name"
+            flat
+            bordered
+            hide-bottom
+          /> -->
+        </q-card-section>
+
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <!-- icon="mdi-content-save-outline" -->
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/01_metadataNew/stores/InsigniaStore.ts b/src/modules/01_metadataNew/stores/InsigniaStore.ts
index f127e4f90..c1a101b40 100644
--- a/src/modules/01_metadataNew/stores/InsigniaStore.ts
+++ b/src/modules/01_metadataNew/stores/InsigniaStore.ts
@@ -9,7 +9,7 @@ import { useCounterMixin } from "@/stores/mixin";
 const { date2Thai } = useCounterMixin();
 
 export const useInsigniaDataStore = defineStore("insigniaData", () => {
-  const row = ref<DataRow[]>();
+  const row = ref<DataRow[]>([]);
   function fetchData(data: DataResponse[], insigniaType?: string) {
     data.forEach((row, index) => {
       row.level = index + 1;
diff --git a/tsconfig.json b/tsconfig.json
index 7f365145e..3a8d5e262 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,6 +13,8 @@
   ],
   
   "compilerOptions": {
+    "typeRoots": ["./typings", "./node_modules/@types"],
+    "types": ["quasar-ui-q-draggable-table"],
     /* other configs */
     "paths": {
       "@/*": [