Refactoring code module 01_metadata => 05_insignia

src/modules/01_metadata/components/insignia/InsigniaDetail.vue

@@ -1,11 +1,243 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
-import { useRouter } from "vue-router";
+import { useQuasar } from "quasar";
-import InsigniaList from "@/modules/01_metadata/components/insignia/InsigniaList.vue";
 
+import { useRouter, useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useInsigniaDataStore } from "@/modules/01_metadata/stores/InsigniaStore";
+
+import type { QTableProps } from "quasar";
+
+import TableDraggable from "@/modules/01_metadata/components/insignia/TableDraggable.vue";
+import dialogHeader from "@/components/DialogHeader.vue";
+
+const route = useRoute();
 const router = useRouter();
+const $q = useQuasar();
+const store = useInsigniaDataStore();
+const mixin = useCounterMixin();
+const { dialogConfirm, showLoader, hideLoader, messageError, success } = mixin;
 
-const nameId = ref<string>("");
+const id = ref<string>(route.params.id.toString()); // ชั้นเครื่องราชอิสริยาภรณ์
+const title = ref<string>(""); // ชือชั้นเครื่องราชอิสริยาภรณ์
+
+//Table
+const filterKeyword = ref<string>("");
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px; width:0px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อเครื่องราชฯ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "shortName",
+    align: "left",
+    label: "ชื่อย่อ",
+    sortable: true,
+    field: "shortName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "insigniaType",
+    align: "left",
+    label: "ลำดับชั้นเครื่องราชฯ",
+    sortable: true,
+    field: "insigniaType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "createdAt",
+    align: "center",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "lastUpdatedAt",
+    align: "center",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "isActive",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isActive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "note",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "note",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "name",
+  "shortName",
+  "insigniaType",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
+  "isActive",
+  "note",
+]);
+
+const dialogOrder = ref<boolean>(false); //จัดลำดับการแสดงผล
+const dialog = ref<boolean>(false); //เพิ่มข้อมูล,แก้ไขข้อมูล
+
+const insigniaTypeId = ref<string>(""); //ลำดับชั้นเครื่องราชอิสริยาภรณ์
+const name = ref<string>("");
+const shortName = ref<string>("");
+const note = ref<string>("");
+const isActive = ref<boolean>(false);
+
+const dialogStatus = ref<string>(""); // สถานะเพิ่มข้อมูล,แก้ไขข้อมูล
+const editId = ref<string>(""); //  id รายการข้อมูลเครื่องราชอิสริยาภรณ์ที่แก้ไข
+
+/**
+ * ดึงรายการข้อมูลเครื่องราชอิสริยาภรณ์
+ * @param id ลำดับชั้นเครื่องราชอิสริยาภรณ์
+ *
+ */
+async function fetchData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.insigniaTypeNewIdOrg(id))
+    .then(async (res) => {
+      title.value = res.data.result.name; // กำหนดชื่อลำดับชั้นเครื่องราชอิสริยาภรณ์
+      insigniaTypeId.value = res.data.result.name;
+      store.fetchData(res.data.result.insignias, res.data.result.name);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ยืนยันการบันทึกข้อมูลเครื่องราชอิสริยาภรณ์
+ *
+ *  dialogStatus.value เป็น "create"  จะเพิ่มข้อมูล ถ้าไม่จะเป็นการแก้ไขข้อมูล
+ */
+async function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+
+    // กำหนด Path API
+    const path =
+      dialogStatus.value === "create"
+        ? config.API.insigniaOrg
+        : config.API.insigniaNewIdOrg(editId.value);
+
+    // กำหนด method
+    const method = dialogStatus.value === "create" ? "post" : "put";
+
+    // call API
+    await http[method](path, {
+      name: name.value,
+      isActive: isActive.value,
+      shortName: shortName.value,
+      note: note.value == "" || note.value == null ? "" : note.value,
+      insigniaTypeId: id.value,
+    })
+      .then(async () => {
+        await fetchData(id.value);
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        closeDialog();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * ปืด popup เพิ่ม,แก้ไข ข้อมูล
+ *
+ * และ กำหนดฟอร์ม เพิ่มข้อมูล,แก้ไขข้อมูลเป็น defult
+ */
+function closeDialog() {
+  dialog.value = false;
+  name.value = "";
+  isActive.value = false;
+  shortName.value = "";
+  note.value = "";
+}
+
+/**
+ * hook จำทำเมื่อมีการเรียกใช้ components
+ *
+ * ทำการดึงรายการข้อมูลเครื่องราชอิสริยาภรณ์ตามลำดับชั้นเครื่องราชอิสริยาภรณ์
+ */
+onMounted(async () => {
+  await fetchData(id.value);
+});
 </script>
 
 <template>
@@ -20,12 +252,235 @@ const nameId = ref<string>("");
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    รายการข้อมูลเครื่องราชอิสริยาภรณ์ {{ nameId }}
+    รายการข้อมูลเครื่องราชอิสริยาภรณ์{{ title }}
   </div>
 
   <q-card flat bordered>
-    <InsigniaList v-model:insigniaTypeName="nameId" />
+    <!-- <InsigniaList v-model:insigniaTypeName="title" /> -->
+    <q-card-section>
+      <div class="row">
+        <div class="col-12">
+          <q-toolbar style="padding: 0">
+            <q-btn
+              flat
+              round
+              color="primary"
+              icon="add"
+              @click.stop="
+                () => {
+                  dialogStatus = 'create';
+                  dialog = true;
+                }
+              "
+            >
+              <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+            </q-btn>
+            <q-btn
+              v-if="store.row.length > 0"
+              flat
+              round
+              color="blue-6"
+              icon="mdi-sort"
+              @click.stop="() => (dialogOrder = true)"
+            >
+              <q-tooltip> จัดลำดับการแสดงผล </q-tooltip>
+            </q-btn>
+            <TableDraggable
+              v-model:modal="dialogOrder"
+              :fetchData="fetchData"
+            />
+            <q-space />
+            <div class="row q-gutter-sm">
+              <q-input
+                outlined
+                dense
+                v-model="filterKeyword"
+                label="ค้นหา"
+              ></q-input>
+              <q-select
+                v-model="visibleColumns"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+              />
+            </div>
+          </q-toolbar>
+        </div>
+
+        <div class="col-12">
+          <d-table
+            ref="table"
+            :columns="columns"
+            :rows="store.row"
+            :filter="filterKeyword"
+            row-key="name"
+            flat
+            bordered
+            :paging="true"
+            dense
+            class="custom-header-table"
+            :visible-columns="visibleColumns"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th auto-width />
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-bold">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props">
+                <q-td auto-width>
+                  <q-btn
+                    color="edit"
+                    flat
+                    dense
+                    round
+                    class="q-mr-xs"
+                    icon="edit"
+                    clickable
+                    @click.stop="
+                      () => {
+                        dialogStatus = 'edit';
+                        dialog = true;
+                        editId = props.row.id;
+                        name = props.row.name;
+                        shortName = props.row.shortName;
+                        note = props.row.note;
+                        isActive = props.row.isActive;
+                      }
+                    "
+                  >
+                    <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                  </q-btn>
+                </q-td>
+                <q-td v-for="(col, index) in props.cols" :key="col.id">
+                  <div v-if="col.name == 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+                  <div v-else-if="col.name == 'isActive'">
+                    <q-icon
+                      v-if="col.value == false"
+                      name="mdi-close"
+                      color="red"
+                      class="text-h5"
+                    />
+                    <q-icon
+                      v-else
+                      name="mdi-check"
+                      color="positive"
+                      class="text-h5"
+                    />
+                  </div>
+                  <div v-else>
+                    {{ col.value }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+          </d-table>
+        </div>
+      </div>
+    </q-card-section>
   </q-card>
+
+  <q-dialog v-model="dialog" class="dialog" persistent>
+    <q-card style="max-width: 350px">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <dialog-header
+          :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+          :close="closeDialog"
+        />
+
+        <q-separator />
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                outlined
+                :model-value="insigniaTypeId"
+                label="ลำดับชั้นเครื่องราชฯ"
+                dense
+                lazy-rules
+                borderless
+                hide-bottom-space
+                readonly
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                ref="nameRef"
+                outlined
+                v-model="name"
+                label="ชื่อเครื่องราชฯ"
+                dense
+                lazy-rules
+                borderless
+                :rules="[
+                  (val:string) => val.length > 0 || 'กรุณากรอกลำดับชั้นเครื่องราชฯ',
+                ]"
+                hide-bottom-space
+                class="inputgreen"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                ref="shortNameRef"
+                outlined
+                v-model="shortName"
+                label="ชื่อย่อ"
+                dense
+                lazy-rules
+                borderless
+                :rules="[
+                  (val:string) => val.length > 0 || 'กรุณากรอกลำดับชั้นเครื่องราชฯ',
+                ]"
+                hide-bottom-space
+                class="inputgreen"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                outlined
+                v-model="note"
+                label="หมายเหตุ"
+                dense
+                type="textarea"
+                borderless
+                hide-bottom-space
+                class="inputgreen"
+              />
+            </div>
+            <div class="col-12">
+              <div class="row items-center justify-between">
+                <p class="q-ma-none">สถานะการใช้งาน</p>
+                <label>
+                  <q-checkbox v-model="isActive" color="primary" />
+                  <span class="control"></span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn id="onSubmit" type="submit" label="บันทึก" color="public">
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>

src/modules/01_metadata/components/insignia/InsigniaList.vue

@@ -1,575 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import type { QTableProps } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRoute } from "vue-router";
-import { useInsigniaDataStore } from "@/modules/01_metadata/stores/InsigniaStore";
-import dialogHeader from "@/components/DialogHeader.vue";
-import TableDraggable from "@/modules/01_metadata/components/insignia/TableDraggable.vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-const store = useInsigniaDataStore();
-const mixin = useCounterMixin();
-
-const insigniaTypeName = defineModel<string>("insigniaTypeName", {
-  required: true,
-});
-
-const {
-  dialogRemove,
-  dialogConfirm,
-  showLoader,
-  hideLoader,
-  messageError,
-  success,
-} = mixin;
-const $q = useQuasar();
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: false,
-    field: "no",
-    headerStyle: "font-size: 14px; width:0px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อเครื่องราชฯ",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-
-  {
-    name: "shortName",
-    align: "left",
-    label: "ชื่อย่อ",
-    sortable: true,
-    field: "shortName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-
-  {
-    name: "insigniaType",
-    align: "left",
-    label: "ลำดับชั้นเครื่องราชฯ",
-    sortable: true,
-    field: "insigniaType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-
-  {
-    name: "createdAt",
-    align: "center",
-    label: "วันที่สร้าง",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-
-  {
-    name: "lastUpdatedAt",
-    align: "center",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-
-  {
-    name: "lastUpdateFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "lastUpdateFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-
-  {
-    name: "isActive",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "isActive",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-
-  {
-    name: "note",
-    align: "left",
-    label: "หมายเหตุ",
-    sortable: true,
-    field: "note",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const route = useRoute();
-const id = ref<string>(route.params.id.toString());
-const filterKeyword = ref<string>("");
-const dialog = ref<boolean>(false);
-const isActive = ref<boolean>(false);
-const shortName = ref<string>("");
-const note = ref<string>("");
-const name = ref<string>("");
-const insigniaTypeId = ref<string>("");
-const nameRef = ref<any>(null);
-const shortNameRef = ref<any>(null);
-const dialogStatus = ref<string>("");
-const editId = ref<string>("");
-const visibleColumns = ref<string[]>([
-  "no",
-  "name",
-  "shortName",
-  "insigniaType",
-  "createdAt",
-  "lastUpdatedAt",
-  "lastUpdateFullName",
-  "isActive",
-  "note",
-]);
-
-function closeDialog() {
-  dialog.value = false;
-  name.value = "";
-  isActive.value = false;
-  shortName.value = "";
-  note.value = "";
-}
-
-function validateForm() {
-  nameRef.value.validate();
-  shortNameRef.value.validate();
-  onSubmit();
-}
-
-async function fetchData(id: string) {
-  showLoader();
-  await http
-    .get(config.API.insigniaTypeNewIdOrg(id))
-    .then(async (res) => {
-      insigniaTypeId.value = res.data.result.name;
-      store.fetchData(res.data.result.insignias, res.data.result.name);
-      insigniaTypeName.value = res.data.result.name;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-onMounted(async () => {
-  await fetchData(id.value);
-});
-
-async function onSubmit() {
-  if (name.value.length > 0 && shortName.value.length > 0) {
-    dialogConfirm(
-      $q,
-      async () => {
-        dialogStatus.value === "create" ? addData() : editData(editId.value);
-        closeDialog();
-        name.value = "";
-        shortName.value = "";
-        isActive.value = false;
-        note.value = "";
-      },
-      "ยืนยันการบันทึกข้อมูล",
-      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-    );
-  }
-}
-
-async function addData() {
-  await http
-    .post(config.API.insigniaOrg, {
-      name: name.value,
-      isActive: isActive.value,
-      shortName: shortName.value,
-      note: note.value == "" || note.value == null ? "" : note.value,
-      insigniaTypeId: id.value,
-    })
-    .then(() => {
-      fetchData(id.value);
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function editData(idData: string) {
-  await http
-    .put(config.API.insigniaNewIdOrg(idData), {
-      name: name.value,
-      isActive: isActive.value,
-      shortName: shortName.value,
-      note: note.value == "" || note.value == null ? "" : note.value,
-      insigniaTypeId: id.value,
-    })
-    .then(() => {
-      fetchData(id.value);
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function deleteData(idData: string) {
-  await http
-    .delete(config.API.insigniaNewIdOrg(idData))
-    .then(() => {
-      fetchData(id.value);
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-const emit = defineEmits(["nameType"]);
-const dialogOrder = ref<boolean>(false);
-</script>
-
-<template>
-  <div class="q-pa-md">
-    <q-toolbar style="padding: 0">
-      <q-btn
-        flat
-        round
-        color="primary"
-        icon="add"
-        @click.stop="
-          () => {
-            dialogStatus = 'create';
-            dialog = true;
-          }
-        "
-      >
-        <q-tooltip> เพิ่มข้อมูล </q-tooltip>
-      </q-btn>
-      <q-btn
-        v-if="store.row.length > 0"
-        flat
-        round
-        color="blue-6"
-        icon="mdi-sort"
-        @click.stop="() => (dialogOrder = true)"
-      >
-        <q-tooltip> จัดลำดับการแสดงผล </q-tooltip>
-      </q-btn>
-      <TableDraggable v-model:modal="dialogOrder" :fetchData="fetchData" />
-      <q-space />
-      <div class="row q-gutter-sm">
-        <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
-        <q-select
-          v-model="visibleColumns"
-          multiple
-          outlined
-          dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
-          :options="columns"
-          option-value="name"
-          options-cover
-          style="min-width: 150px"
-        />
-      </div>
-    </q-toolbar>
-
-    <d-table
-      ref="table"
-      :columns="columns"
-      :rows="store.row"
-      :filter="filterKeyword"
-      row-key="name"
-      flat
-      bordered
-      :paging="true"
-      dense
-      class="custom-header-table"
-      :visible-columns="visibleColumns"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th auto-width />
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-bold">{{ col.label }}</span>
-          </q-th>
-        </q-tr>
-      </template>
-      <template v-slot:body="props">
-        <q-tr :props="props">
-          <q-td auto-width>
-            <q-btn
-              color="edit"
-              flat
-              dense
-              round
-              class="q-mr-xs"
-              icon="edit"
-              clickable
-              @click.stop="
-                () => {
-                  dialogStatus = 'edit';
-                  dialog = true;
-                  editId = props.row.id;
-                  name = props.row.name;
-                  shortName = props.row.shortName;
-                  note = props.row.note;
-                  isActive = props.row.isActive;
-                }
-              "
-            >
-              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-            </q-btn>
-            <!-- <q-btn
-              color="red"
-              flat
-              dense
-              round
-              icon="mdi-delete"
-              clickable
-              @click.stop="
-                dialogRemove($q, async () => await deleteData(props.row.id))
-              "
-              v-close-popup
-            >
-              <q-tooltip>ลบข้อมูล</q-tooltip>
-            </q-btn> -->
-          </q-td>
-          <q-td v-for="(col, index) in props.cols" :key="col.id">
-            <div v-if="col.name == 'no'">
-              {{ props.rowIndex + 1 }}
-            </div>
-            <div v-else-if="col.name == 'isActive'">
-              <q-icon
-                v-if="col.value == false"
-                name="mdi-close"
-                color="red"
-                class="text-h5"
-              />
-              <q-icon
-                v-else
-                name="mdi-check"
-                color="positive"
-                class="text-h5"
-              />
-            </div>
-            <div v-else>
-              {{ col.value }}
-            </div>
-          </q-td>
-        </q-tr>
-      </template>
-    </d-table>
-  </div>
-
-  <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="min-width: 350px">
-      <form @submit.prevent="validateForm">
-        <q-card-section class="flex justify-between" style="padding: 0">
-          <dialog-header
-            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
-            :close="closeDialog"
-          />
-        </q-card-section>
-
-        <q-separator color="grey-4" />
-        <q-card-section class="q-pa-none">
-          <div class="col-12 q-ma-md">
-            <q-input
-              outlined
-              :model-value="insigniaTypeId"
-              label="ลำดับชั้นเครื่องราชฯ"
-              dense
-              lazy-rules
-              borderless
-              hide-bottom-space
-              readonly
-              class="inputgreen"
-            />
-          </div>
-          <div class="col-12 q-ma-md">
-            <q-input
-              ref="nameRef"
-              outlined
-              v-model="name"
-              label="ชื่อเครื่องราชฯ"
-              dense
-              lazy-rules
-              borderless
-              :rules="[
-                (val) => val.length > 0 || 'กรุณากรอกลำดับชั้นเครื่องราชฯ',
-              ]"
-              hide-bottom-space
-              class="inputgreen"
-            />
-          </div>
-          <div class="col-12 q-ma-md">
-            <q-input
-              ref="shortNameRef"
-              outlined
-              v-model="shortName"
-              label="ชื่อย่อ"
-              dense
-              lazy-rules
-              borderless
-              :rules="[
-                (val) => val.length > 0 || 'กรุณากรอกลำดับชั้นเครื่องราชฯ',
-              ]"
-              hide-bottom-space
-              class="inputgreen"
-            />
-          </div>
-          <div class="col-12 q-ma-md">
-            <q-input
-              outlined
-              v-model="note"
-              label="หมายเหตุ"
-              dense
-              type="textarea"
-              borderless
-              hide-bottom-space
-              class="inputgreen"
-            />
-          </div>
-          <div
-            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
-          >
-            <div class="row items-center q-my-sm justify-between">
-              <p class="q-ma-none">สถานะการใช้งาน</p>
-              <label class="toggle-control">
-                <input type="checkbox" dense v-model="isActive" @change="" />
-                <span class="control"></span>
-              </label>
-            </div>
-          </div>
-        </q-card-section>
-
-        <q-card-actions align="right">
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </q-card-actions>
-      </form>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped lang="scss">
-.border_custom {
-  border-radius: 6px !important;
-  border: 1px solid #e1e1e1;
-}
-$toggle-background-color-on: #06884d;
-$toggle-background-color-off: darkgray;
-$toggle-control-color: white;
-$toggle-width: 40px;
-$toggle-height: 25px;
-$toggle-gutter: 3px;
-$toggle-radius: 50%;
-$toggle-control-speed: 0.15s;
-$toggle-control-ease: ease-in;
-
-// These are our computed variables
-// change at your own risk.
-$toggle-radius: $toggle-height / 2;
-$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
-
-.toggle-control {
-  display: block;
-  position: relative;
-  padding-left: $toggle-width;
-  margin-bottom: 12px;
-  cursor: pointer;
-  font-size: 22px;
-  user-select: none;
-
-  input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-  }
-
-  input:checked ~ .control {
-    background-color: $toggle-background-color-on;
-
-    &:after {
-      left: $toggle-width - $toggle-control-size - $toggle-gutter;
-    }
-  }
-
-  .control {
-    position: absolute;
-    top: -7px;
-    left: -15px;
-    height: $toggle-height;
-    width: $toggle-width;
-    border-radius: $toggle-radius;
-    background-color: $toggle-background-color-off;
-    transition: background-color $toggle-control-speed $toggle-control-ease;
-
-    &:after {
-      content: "";
-      position: absolute;
-      left: $toggle-gutter;
-      top: $toggle-gutter;
-      width: $toggle-control-size;
-      height: $toggle-control-size;
-      border-radius: $toggle-radius;
-      background: $toggle-control-color;
-      transition: left $toggle-control-speed $toggle-control-ease;
-    }
-  }
-}
-</style>

src/modules/01_metadata/components/insignia/InsigniaType.vue

@@ -1,450 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-import type { QTableProps } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRouter } from "vue-router";
-import { useInsigniaDataStore } from "@/modules/01_metadata/stores/InsigniaStore";
-import dialogHeader from "@/components/DialogHeader.vue";
-import { useQuasar } from "quasar";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const store = useInsigniaDataStore();
-const router = useRouter();
-const mixin = useCounterMixin();
-const {
-  dialogRemove,
-  dialogConfirm,
-  success,
-  messageError,
-  showLoader,
-  hideLoader,
-} = mixin;
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "name",
-    align: "left",
-    label: "ลำดับชั้นเครื่องราชฯ",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "createdAt",
-    align: "center",
-    label: "วันที่สร้าง",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "center",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdateFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "lastUpdateFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "isActive",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "isActive",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-
-const $q = useQuasar();
-
-const editId = ref<string>("");
-const filterKeyword = ref<string>("");
-const dialog = ref<boolean>(false);
-const isActive = ref<boolean>(false);
-const name = ref<string>("");
-const nameRef = ref<any>(null);
-const dialogStatus = ref<string>("");
-const visibleColumns = ref<string[]>([
-  "name",
-  "createdAt",
-  "lastUpdatedAt",
-  "lastUpdateFullName",
-  "isActive",
-]);
-
-async function fetchData() {
-  showLoader();
-  await http
-    .get(config.API.insigniaTypeOrg)
-    .then(async (res) => {
-      store.fetchData(res.data.result);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-onMounted(async () => {
-  fetchData();
-});
-
-function closeDialog() {
-  dialog.value = false;
-  name.value = "";
-  isActive.value = false;
-}
-
-function onclickDetail(id: string) {
-  router.push(`/master-data/insignia/detail/${id}`);
-}
-
-async function addData() {
-  await http
-    .post(config.API.insigniaTypeOrg, {
-      name: name.value,
-      isActive: isActive.value,
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function editData(id: string) {
-  await http
-    .put(config.API.insigniaTypeNewIdOrg(id), {
-      name: name.value,
-      isActive: isActive.value,
-    })
-    .then(() => {
-      fetchData();
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-async function deleteData(id: string) {
-  await http
-    .delete(config.API.insigniaTypeNewIdOrg(id))
-    .then(() => {
-      fetchData();
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-function validateForm() {
-  nameRef.value.validate();
-  onSubmit();
-}
-
-async function onSubmit() {
-  if (name.value.length > 0) {
-    dialogConfirm(
-      $q,
-      async () => {
-        dialogStatus.value === "create" ? addData() : editData(editId.value);
-        closeDialog();
-        name.value = "";
-        isActive.value = false;
-      },
-      "ยืนยันการบันทึกข้อมูล",
-      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
-    );
-  }
-}
-</script>
-
-<template>
-  <q-toolbar style="padding: 0">
-    <q-btn
-      flat
-      round
-      color="primary"
-      icon="add"
-      @click.stop="
-        () => {
-          dialogStatus = 'create';
-          dialog = true;
-        }
-      "
-    >
-      <q-tooltip> เพิ่มข้อมูล </q-tooltip>
-    </q-btn>
-    <q-space />
-    <div class="row q-gutter-sm">
-      <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></q-input>
-      <q-select
-        v-model="visibleColumns"
-        multiple
-        outlined
-        dense
-        options-dense
-        :display-value="$q.lang.table.columns"
-        emit-value
-        map-options
-        :options="columns"
-        option-value="name"
-        options-cover
-        style="min-width: 150px"
-      />
-    </div>
-  </q-toolbar>
-
-  <div class="col-12">
-    <d-table
-      ref="table"
-      :columns="columns"
-      :rows="store.row"
-      :filter="filterKeyword"
-      row-key="name"
-      flat
-      bordered
-      :paging="true"
-      dense
-      class="custom-header-table"
-      :visible-columns="visibleColumns"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <q-th auto-width />
-          <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            <span class="text-weight-medium">{{ col.label }}</span>
-          </q-th>
-        </q-tr>
-      </template>
-      <template v-slot:body="props">
-        <q-tr
-          :props="props"
-          class="cursor-pointer"
-          @click.stop="onclickDetail(props.row.id)"
-        >
-          <q-td auto-width>
-            <q-btn
-              color="edit"
-              flat
-              dense
-              round
-              class="q-mr-xs"
-              icon="edit"
-              clickable
-              @click.stop="
-                () => {
-                  dialogStatus = 'edit';
-                  dialog = true;
-                  editId = props.row.id;
-                  name = props.row.name;
-                  isActive = props.row.isActive;
-                }
-              "
-            >
-              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-            </q-btn>
-            <!-- <q-btn
-            color="red"
-            flat
-            dense
-            round
-            icon="mdi-delete"
-            clickable
-            @click.stop="
-              dialogRemove($q, async () => await deleteData(props.row.id))
-            "
-            v-close-popup
-          >
-            <q-tooltip>ลบข้อมูล</q-tooltip>
-          </q-btn> -->
-          </q-td>
-          <q-td v-for="col in props.cols" :key="col.id">
-            <div v-if="col.name == 'isActive'">
-              <q-icon
-                v-if="col.value == false"
-                name="mdi-close"
-                color="red"
-                class="text-h5"
-              />
-              <q-icon
-                v-else
-                name="mdi-check"
-                color="positive"
-                class="text-h5"
-              />
-            </div>
-            <div v-else>
-              {{ col.value }}
-            </div>
-          </q-td>
-        </q-tr>
-      </template>
-    </d-table>
-  </div>
-
-  <q-dialog v-model="dialog" class="dialog" persistent>
-    <q-card style="min-width: 350px">
-      <form @submit.prevent="validateForm">
-        <q-card-section class="flex justify-between" style="padding: 0">
-          <dialog-header
-            :tittle="dialogStatus === 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
-            :close="closeDialog"
-          />
-        </q-card-section>
-
-        <q-separator color="grey-4" />
-        <q-card-section class="q-pa-none">
-          <div class="col-12 q-ma-md">
-            <q-input
-              ref="nameRef"
-              outlined
-              v-model="name"
-              label="ลำดับชั้นเครื่องราชฯ"
-              dense
-              lazy-rules
-              borderless
-              :rules="[
-                (val) => val.length > 0 || 'กรุณากรอกลำดับชั้นเครื่องราชฯ',
-              ]"
-              hide-bottom-space
-              class="inputgreen"
-            />
-          </div>
-          <div
-            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
-          >
-            <div class="row items-center q-my-sm justify-between">
-              <p class="q-ma-none">สถานะการใช้งาน</p>
-              <label class="toggle-control">
-                <input type="checkbox" dense v-model="isActive" @change="" />
-                <span class="control"></span>
-              </label>
-            </div>
-          </div>
-        </q-card-section>
-
-        <q-card-actions align="right">
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-          >
-            <q-tooltip>บันทึกข้อมูล</q-tooltip>
-          </q-btn>
-        </q-card-actions>
-      </form>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped lang="scss">
-.border_custom {
-  border-radius: 6px !important;
-  border: 1px solid #e1e1e1;
-}
-$toggle-background-color-on: #06884d;
-$toggle-background-color-off: darkgray;
-$toggle-control-color: white;
-$toggle-width: 40px;
-$toggle-height: 25px;
-$toggle-gutter: 3px;
-$toggle-radius: 50%;
-$toggle-control-speed: 0.15s;
-$toggle-control-ease: ease-in;
-
-// These are our computed variables
-// change at your own risk.
-$toggle-radius: $toggle-height / 2;
-$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
-
-.toggle-control {
-  display: block;
-  position: relative;
-  padding-left: $toggle-width;
-  margin-bottom: 12px;
-  cursor: pointer;
-  font-size: 22px;
-  user-select: none;
-
-  input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-  }
-
-  input:checked ~ .control {
-    background-color: $toggle-background-color-on;
-
-    &:after {
-      left: $toggle-width - $toggle-control-size - $toggle-gutter;
-    }
-  }
-
-  .control {
-    position: absolute;
-    top: -7px;
-    left: -15px;
-    height: $toggle-height;
-    width: $toggle-width;
-    border-radius: $toggle-radius;
-    background-color: $toggle-background-color-off;
-    transition: background-color $toggle-control-speed $toggle-control-ease;
-
-    &:after {
-      content: "";
-      position: absolute;
-      left: $toggle-gutter;
-      top: $toggle-gutter;
-      width: $toggle-control-size;
-      height: $toggle-control-size;
-      border-radius: $toggle-radius;
-      background: $toggle-control-color;
-      transition: left $toggle-control-speed $toggle-control-ease;
-    }
-  }
-}
-</style>

src/modules/01_metadata/components/insignia/TableDraggable.vue

@@ -1,22 +1,33 @@
 <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_metadata/stores/InsigniaStore";
-import dialogHeader from "@/components/DialogHeader.vue";
 import { useQuasar } from "quasar";
-import DialogHeader from "@/components/DialogHeader.vue";
 
+import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-const store = useInsigniaDataStore();
+import { useCounterMixin } from "@/stores/mixin";
-const mixin = useCounterMixin();
+import { useInsigniaDataStore } from "@/modules/01_metadata/stores/InsigniaStore";
-const { dialogRemove, dialogConfirm, showLoader, hideLoader, messageError } =
+
-  mixin;
+import type { QTableProps } from "quasar";
+import type { DataRow } from "@/modules/01_metadata/interface/response/insignia/Insignia";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
 const $q = useQuasar();
 const route = useRoute();
+const store = useInsigniaDataStore();
+const mixin = useCounterMixin();
+const { dialogConfirm, showLoader, hideLoader, messageError } = mixin;
+
+/**
+ * props
+ */
 const modal = defineModel("modal", { type: Boolean });
+
+const id = ref<string>(route.params.id.toString()); // id ชั้นเครื่องราชอิสริยาภรณ์
+
+// Table
+const rows = ref<DataRow[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
@@ -42,69 +53,63 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
   },
 ]);
-const id = ref<string>(route.params.id.toString());
 
-const props = defineProps({
+/**
-  fetchData: {
+ * ฟังก์ชันการจัดลำดับการแสดงผล
-    type: Function,
+ * @param from ตำแหน่งปัจจบัน
-    default: () => console.log("not function"),
+ * @param to ตำแหน่งที่ต้องการไป
-  },
+ */
-});
+function onDrop(from: number, to: number) {
-
-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;
+ */
-  });
-  modal.value = false;
-
-  showLoader();
-  await http
-    .put(config.API.insigniaSortOrg(id.value), { id: dataPost })
-    .then(() => {
-      store.row = rows.value;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-      // props.fetchData(id.value);
-    });
-}
-
 async function onSubmit() {
   dialogConfirm($q, async () => {
-    save();
+    const dataPost = rows.value.map((obj: DataRow) => {
+      return obj.id;
+    });
+    showLoader();
+    await http
+      .put(config.API.insigniaSortOrg(id.value), { id: dataPost })
+      .then(() => {
+        store.row = rows.value;
+        modal.value = false;
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
+/**
+ * ดูการเปลี่ยนแปลงของ modal เมื่อ  modal เป็น true
+ *
+ * ทำการคัดลองข้อมูลรายการข้อมูลเครื่องราชอิสริยาภรณ์มาจัดลำดับ
+ */
 watch(modal, () => {
   if (modal.value === true) {
-    // rows.value = store.row;
+    rows.value = [];
-    rows.value = [...store.row]; // ดึงมาใช้ sort แล้วใน store ไม่เปลี่ยน
+    rows.value.push(...store.row); // ดึงมาใช้ sort แล้วใน store ไม่เปลี่ยน
   }
 });
 </script>
 
 <template>
   <q-dialog v-model="modal" class="dialog" persistent>
-    <q-card style="min-width: 50vw" class="bg-grey-11">
+    <q-card style="min-width: 50vw">
       <form @submit.prevent="onSubmit">
         <DialogHeader
           tittle="จัดลำดับการแสดงผล"
           :close="() => (modal = false)"
         />
         <q-separator />
-        <q-card-section class="q-pa-md bg-grey-1">
+        <q-card-section>
           <q-table
             v-draggable-table="{
               options: {
@@ -124,36 +129,11 @@ watch(modal, () => {
             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
+          <q-btn type="submit" label="บันทึก" color="public">
-            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>

src/modules/01_metadata/stores/InsigniaStore.ts

@@ -10,10 +10,8 @@ const { date2Thai } = useCounterMixin();
 
 export const useInsigniaDataStore = defineStore("insigniaData", () => {
   const row = ref<DataRow[]>([]);
-  function fetchData(data: DataResponse[], insigniaType?: string) {
+
-    // data.forEach((row, index) => {
+  async function fetchData(data: DataResponse[], insigniaType?: string) {
-    //   row.level = index + 1;
-    // });
     const list = data.map((e) => ({
       ...e,
       insigniaType: insigniaType,

src/modules/01_metadata/views/05_insignia.vue

@@ -1,12 +1,350 @@
 <script setup lang="ts">
-import InsigniaType from "@/modules/01_metadata/components/insignia/InsigniaType.vue";
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+
+import { useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useInsigniaDataStore } from "@/modules/01_metadata/stores/InsigniaStore";
+
+import type { QTableProps } from "quasar";
+
+import dialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const router = useRouter();
+const store = useInsigniaDataStore();
+const { dialogConfirm, success, messageError, showLoader, hideLoader } =
+  useCounterMixin();
+
+// Table
+const filterKeyword = ref<string>("");
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ลำดับชั้นเครื่องราชฯ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "center",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "center",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isActive",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isActive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "name",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
+  "isActive",
+]);
+
+const dialog = ref<boolean>(false); // popup เพิ่ม แก้ไข
+const dialogStatus = ref<string>(""); // สถานะการแก้ไข
+const name = ref<string>(""); // ลำดับชั้นเครื่องราชฯ
+const isActive = ref<boolean>(false); //  สถานะการใช้งาน
+const editId = ref<string>(""); // id รายการที่จะแก้ไข
+
+/**
+ * ดึงข้อมูลเครื่องราชอิสริยาภรณ์
+ *
+ * และบันทึกใน store.fetchData
+ */
+async function fetchData() {
+  showLoader();
+  await http
+    .get(config.API.insigniaTypeOrg)
+    .then(async (res) => {
+      await store.fetchData(res.data.result);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ยืนยันการบันทึกข้อมูลเครื่องราชอิสริยาภรณ์
+ *
+ *  dialogStatus.value เป็น "create"  จะเพิ่มข้อมูล ถ้าไม่จะเป็นการแก้ไขข้อมูล
+ */
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+
+    // กำหนด Path API
+    const path =
+      dialogStatus.value === "create"
+        ? config.API.insigniaTypeOrg
+        : config.API.insigniaTypeNewIdOrg(editId.value);
+
+    // กำหนด method
+    const method = dialogStatus.value === "create" ? "post" : "put";
+
+    // call API
+    await http[method](path, { name: name.value, isActive: isActive.value })
+      .then(async () => {
+        await fetchData();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        closeDialog();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * ปืด popup เพิ่ม,แก้ไข ข้อมูล
+ *
+ * และ กำหนดลำดับชั้นเครื่องราช เป็นค่าว่าง  สถานะการใช้งาน เป็น false
+ */
+function closeDialog() {
+  dialog.value = false;
+  name.value = "";
+  isActive.value = false;
+}
+
+/**
+ * ไปยังหน้ารายการข้อมูลเครื่องราชอิสริยาภรณ์
+ * @param id ลำดับชั้นเครื่องราชอิสริยาภรณ์
+ */
+function onclickDetail(id: string) {
+  router.push(`/master-data/insignia/detail/${id}`);
+}
+
+/**
+ * hook จำทำเมื่อมีการเรียกใช้ components
+ *
+ * ทำการดึงข้อมูลเครื่องราชอิสริยาภรณ์
+ */
+onMounted(async () => {
+  await fetchData();
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     ข้อมูลเครื่องราชอิสริยาภรณ์
   </div>
 
-  <q-card flat bordered class="q-pa-md"> <InsigniaType /> </q-card>
+  <q-card flat bordered>
+    <q-card-section>
+      <q-toolbar style="padding: 0">
+        <q-btn
+          flat
+          round
+          color="primary"
+          icon="add"
+          @click.stop="
+            () => {
+              dialogStatus = 'create';
+              dialog = true;
+            }
+          "
+        >
+          <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+        </q-btn>
+        <q-space />
+        <div class="row q-gutter-sm">
+          <q-input
+            outlined
+            dense
+            v-model="filterKeyword"
+            label="ค้นหา"
+          ></q-input>
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+      </q-toolbar>
+
+      <div class="col-12">
+        <d-table
+          ref="table"
+          :columns="columns"
+          :rows="store.row"
+          :filter="filterKeyword"
+          row-key="name"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          :visible-columns="visibleColumns"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width />
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr
+              :props="props"
+              class="cursor-pointer"
+              @click.stop="onclickDetail(props.row.id)"
+            >
+              <q-td auto-width>
+                <q-btn
+                  color="edit"
+                  flat
+                  dense
+                  round
+                  class="q-mr-xs"
+                  icon="edit"
+                  clickable
+                  @click.stop="
+                    () => {
+                      dialogStatus = 'edit';
+                      dialog = true;
+                      editId = props.row.id;
+                      name = props.row.name;
+                      isActive = props.row.isActive;
+                    }
+                  "
+                >
+                  <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div v-if="col.name == 'isActive'">
+                  <q-icon
+                    v-if="col.value == false"
+                    name="mdi-close"
+                    color="red"
+                    class="text-h5"
+                  />
+                  <q-icon
+                    v-else
+                    name="mdi-check"
+                    color="positive"
+                    class="text-h5"
+                  />
+                </div>
+                <div v-else>
+                  {{ col.value }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </div>
+    </q-card-section>
+  </q-card>
+
+  <q-dialog v-model="dialog" class="dialog" persistent>
+    <q-card style="max-width: 350px">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <dialog-header
+          :tittle="dialogStatus === 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+          :close="closeDialog"
+        />
+
+        <q-separator />
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                ref="nameRef"
+                outlined
+                v-model="name"
+                label="ลำดับชั้นเครื่องราชฯ"
+                dense
+                lazy-rules
+                borderless
+                :rules="[
+                  (val:string) => val.length > 0 || 'กรุณากรอกลำดับชั้นเครื่องราชฯ',
+                ]"
+                hide-bottom-space
+                class="inputgreen"
+              />
+            </div>
+
+            <div class="col-12">
+              <div class="row items-center justify-between">
+                <p class="q-ma-none">สถานะการใช้งาน</p>
+                <label>
+                  <q-checkbox v-model="isActive" color="primary" />
+                  <span class="control"></span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn id="onSubmit" type="submit" label="บันทึก" color="public">
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped></style>