ปรับ popup history

src/modules/02_organizationalNew/components/DialogHistory.vue

@@ -3,7 +3,14 @@ import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
+import type { HistoryType } from "@/modules/02_organizationalNew/interface/index/Main";
+
 import DialogHeader from "@/components/DialogHeader.vue";
+import Modal from "@/modules/05_placement/components/AppointEmployee/Modal.vue";
+import { getDateMeta } from "@fullcalendar/core/internal";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const props = defineProps({
   modal: Boolean,
@@ -12,10 +19,8 @@ const props = defineProps({
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dialogConfirm } = mixin;
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
-
+const rows = ref<HistoryType[]>([]);
-const rows = ref<any[]>([]);
-
 
 const columns = ref<QTableProps["columns"]>([
   {
@@ -28,11 +33,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-      name: "name",
+    name: "orgRevisionName",
     align: "left",
-      label: "ชื่อ",
+    label: "ชื่อโครงสร้าง",
     sortable: true,
-      field: "name",
+    field: "orgRevisionName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -45,14 +50,91 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-
+  {
+    name: "orgRevisionIsCurrent",
+    align: "center",
+    label: "โครงสร้างที่ใช้อยู่",
+    sortable: false,
+    field: "orgRevisionIsCurrent",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "orgRevisionIsDraft",
+    align: "center",
+    label: "โครงสร้างแบบร่าง",
+    sortable: false,
+    field: "orgRevisionIsDraft",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "orgRevisionCreatedAt",
+    align: "left",
+    label: "วันเริ่มใช้โครงสร้าง",
+    sortable: true,
+    field: "orgRevisionCreatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 ]);
 const visibleColumns = ref<string[]>([
   "no",
-    "name",
+  "orgRevisionName",
-    "lastUpdatedAt",
+  "orgRevisionIsCurrent",
+  "orgRevisionIsDraft",
+  "orgRevisionCreatedAt",
 ]);
 
+function getDate() {
+  const dataDraft: HistoryType[] = [
+    {
+      orgRevisionId: "00000000-0000-0000-0000-000000000000",
+      orgRevisionName: "xxxx",
+      orgRevisionIsCurrent: true,
+      orgRevisionIsDraft: false,
+      orgRevisionCreatedAt: date2Thai(new Date(),false,true),
+    },
+    {
+      orgRevisionId: "00000000-0000-0000-0000-000000000001",
+      orgRevisionName: "xxx1",
+      orgRevisionIsCurrent: false,
+      orgRevisionIsDraft: true,
+      orgRevisionCreatedAt: date2Thai(new Date(),false,true),
+    },
+  ];
+  rows.value = dataDraft;
+  // รอ API
+  // showLoader()
+  // http
+  // .get(config.API.organizationHistoryNew)
+  // .then((res)=>{
+  //     const dataList = res.data.result
+  //     dataList.map((item:HistoryType)=>(
+  //       {
+  //         orgRevisionId:item.orgRevisionId ? item.orgRevisionId:'-',
+  //         orgRevisionName:item.orgRevisionName ? item.orgRevisionName:'-',
+  //         orgRevisionIsCurrent:item.orgRevisionIsCurrent ? item.orgRevisionIsCurrent:'-',
+  //         orgRevisionIsDraft:item.orgRevisionIsDraft ? item.orgRevisionIsDraft:'-',
+  //         orgRevisionCreatedAt:item.orgRevisionCreatedAt ? date2Thai(item.orgRevisionCreatedAt):'-',
+  //       }
+  //     ))
+  //     rows.value = dataList
+  // }).catch((e)=>{
+  //   messageError($q,e)
+  // })
+  // .finally(()=>{
+  //   hideLoader()
+  // })
+}
+watch(
+  () => props.modal,
+  () => {
+    if (props.modal == true) {
+      getDate();
+    }
+  }
+);
 </script>
 <template>
   <template>
@@ -98,6 +180,22 @@ const columns = ref<QTableProps["columns"]>([
                       <div v-if="col.name == 'no'">
                         {{ props.rowIndex + 1 }}
                       </div>
+
+                      <div v-else-if="col.name == 'orgRevisionIsCurrent'">
+                        <q-icon
+                          :name="props.row.orgRevisionIsCurrent == true ? 'mdi-check':'mdi-close'"
+                          :color="props.row.orgRevisionIsCurrent == true ? 'positive':'red'"
+                          class="text-h5"
+                        />
+                      </div>
+                      <div v-else-if="col.name == 'orgRevisionIsDraft'">
+                        <q-icon
+                          :name="props.row.orgRevisionIsDraft == true ? 'mdi-check':'mdi-close'"
+                          :color="props.row.orgRevisionIsDraft == true ? 'positive':'red'"
+                          class="text-h5"
+                        />
+                      </div>
+
                       <div v-else>
                         {{ col.value }}
                       </div>

src/modules/02_organizationalNew/interface/index/Main.ts

@@ -40,18 +40,40 @@ interface FormAgencyRef {
   tel: object | null;
   [key: string]: any;
 }
+
 interface FormPositionRef {
   prefixNo: object | null;
   positionNo: object | null;
   [key: string]: any;
 }
+
 interface FormDateTimeRef {
   dateTime: object | null;
   [key: string]: any;
 }
+
 interface FormNewStructureRef {
   orgRevisionName: object | null;
   type: object | null;
   [key: string]: any;
 }
-export type { Pagination, DataOption, FormDataAgency, FormDataPosition, FormAgencyRef, FormPositionRef, FormDateTimeRef,FormDataNewStructure,FormNewStructureRef };
+
+interface HistoryType {
+  orgRevisionId: string
+  orgRevisionName: string
+  orgRevisionIsCurrent: boolean
+  orgRevisionIsDraft: boolean
+  orgRevisionCreatedAt: any
+}
+export type { 
+  Pagination, 
+  DataOption, 
+  FormDataAgency, 
+  FormDataPosition, 
+  FormAgencyRef, 
+  FormPositionRef, 
+  FormDateTimeRef, 
+  FormDataNewStructure, 
+  FormNewStructureRef, 
+  HistoryType 
+};