เพิ่ม ui sort เครื่องราชแบบ drag & drop

env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+declare module 'quasar-ui-q-draggable-table';

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",

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,

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

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>

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>

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;

tsconfig.json

@@ -13,6 +13,8 @@
   ],
   
   "compilerOptions": {
+    "typeRoots": ["./typings", "./node_modules/@types"],
+    "types": ["quasar-ui-q-draggable-table"],
     /* other configs */
     "paths": {
       "@/*": [