ทะเบียนประวัติลูกจ้างชั่วคราว

src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { onMounted, watch, ref, reactive } from "vue";
+import { onMounted, ref, reactive } from "vue";
 import { checkPermission } from "@/utils/permissions";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type { QTableColumn } from "quasar";
 import type { FormEmployee } from "@/modules/04_registryPerson/interface/request/Employee";
 import type {
   EmployeeHistory,
@@ -13,8 +14,7 @@ import type {
 } from "@/modules/04_registryPerson/interface/response/Employee";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-
-import type { QTableColumn } from "quasar";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -145,9 +145,6 @@ function onSubmit() {
 
 /** ประวัติข้อมูลลูกจ้างชั่วคราว */
 const modalHistory = ref<boolean>(false);
-const filter = ref<string>("");
-const rows = ref<EmployeeHistory[]>([]);
-const rowsMain = ref<EmployeeHistory[]>([]);
 const columns = ref<QTableColumn[]>([
   {
     name: "positionEmployeeGroupId",
@@ -307,7 +304,7 @@ const columns = ref<QTableColumn[]>([
         .localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const visibleColumns = ref<String[]>([
+const visibleColumns = ref<string[]>([
   "positionEmployeeGroupId",
   "positionEmployeeLineId",
   "positionEmployeePositionId",
@@ -321,38 +318,23 @@ const visibleColumns = ref<String[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
 
 function onClickHistory() {
-  showLoader();
   modalHistory.value = true;
-  http
-    .get(config.API.informationHistoryEmployee(profileId.value))
-    .then((res) => {
-      const data = res.data.result;
-      rows.value = data.sort(
-        (a: any, b: any) =>
-          new Date(b.lastUpdatedAt).getTime() -
-          new Date(a.lastUpdatedAt).getTime()
-      );
-      rowsMain.value = rows.value;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
 }
 
-function serchDataTable() {
-  rows.value = onSearchDataTable(
-    filter.value,
-    rowsMain.value,
-    columns.value ? columns.value : []
-  );
+async function fetchDataHistory() {
+  showLoader();
+  try {
+    const res = await http.get(
+      config.API.informationHistoryEmployee(profileId.value)
+    );
+    return res.data.result;
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
 }
 
 onMounted(() => {
@@ -635,80 +617,13 @@ onMounted(() => {
   </q-dialog>
 
   <!-- Dialog ประวัติการแก้ไขข้อมูลลูกจ้างชั่วคราว -->
-  <q-dialog v-model="modalHistory" persistent>
-    <q-card style="min-width: 80%">
-      <DialogHeader
-        tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
-        :close="() => ((modalHistory = false), (filter = ''), (rows = []))"
-      />
-      <q-separator />
-
-      <q-card-section style="max-height: 50vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            standout
-            dense
-            v-model="filter"
-            ref="filterRef"
-            outlined
-            placeholder="ค้นหา"
-            @keydown.enter.pervent="serchDataTable"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </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"
-            style="min-width: 140px"
-          />
-        </div>
-
-        <d-table
-          ref="table"
-          flat
-          bordered
-          dense
-          :columns="columns"
-          :rows="rows"
-          :visible-columns="visibleColumns"
-          v-model:pagination="pagination"
-        >
-          >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <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">
-              <q-td v-for="col in props.cols" :key="col.id">
-                <div>
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-
-      <q-separator />
-
-      <q-card-actions align="right"> </q-card-actions>
-    </q-card>
-  </q-dialog>
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :visible-columns="visibleColumns"
+    :title="`ประวัติแก้ไขข้อมูลส่วนตัว`"
+    :columns="columns"
+    :fetch-data="fetchDataHistory"
+  />
 </template>
 
 <style scoped></style>