ทะเบียนประวัติ: ประวัติการศึกษา interface

src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { ref, reactive, watch, onMounted } from "vue";
-import moment from "moment";
 import dialogHeader from "@/components/DialogHeader.vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute } from "vue-router";
+import type { RequestItemsObject } from "@/modules/04_registryNew/interface/request/Education";
+import type { ResponseObject } from "@/modules/04_registryNew/interface/response/Education";
 import { QForm, useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -192,8 +193,8 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-const rows = ref<any>([]);
+const rows = ref<ResponseObject[]>([]);
-const historyRows = ref<any>([]);
+const historyRows = ref<ResponseObject[]>([]);
 const editId = ref<string>("");
 const route = useRoute();
 const id = ref<string>(route.params.id.toString());
@@ -205,25 +206,7 @@ const educationOption = ref([
 ]);
 
 const historyDialog = ref<boolean>(false);
-const educationData = reactive<{
+const educationData = reactive<RequestItemsObject>({
-  educationLevel: string;
-  institute: string;
-  startYear: number;
-  endYear: number;
-  finishDate: Date;
-  startDate: Date;
-  endDate: Date;
-  isEducation: boolean | null;
-  degree: string;
-  field: string;
-  fundName: string;
-  gpa: string;
-  country: string;
-  other: string;
-  duration: string;
-  durationYear: number | null;
-  note: string;
-}>({
   educationLevel: "",
   institute: "",
   startYear: new Date().getFullYear(),
@@ -360,6 +343,7 @@ async function fetchData(id: string) {
       hideLoader();
     });
 }
+
 async function fetchHistoryData(id: string) {
   showLoader();
   await http
@@ -628,35 +612,7 @@ onMounted(async () => {
     </template>
     <template v-slot:body="props" v-if="mode === 'table'">
       <q-tr :props="props" class="cursor-pointer">
-        <q-td
+        <q-td v-for="col in props.cols" :key="col.id">
-          v-for="col in props.cols"
-          :key="col.id"
-          @click="
-            () => {
-              dialogStatus = 'edit';
-              editId = props.row.id;
-              isDate = props.row.isDate ? 'true' : 'false';
-              educationData.educationLevel = props.row.educationLevel;
-              educationData.institute = props.row.institute;
-              educationData.finishDate = props.row.finishDate;
-              educationData.startDate = props.row.startDate;
-              educationData.endDate = props.row.endDate;
-              educationData.isEducation = props.row.isEducation;
-              educationData.degree = props.row.degree;
-              educationData.field = props.row.field;
-              educationData.fundName = props.row.fundName;
-              educationData.gpa = props.row.gpa;
-              educationData.country = props.row.country;
-              educationData.other = props.row.other;
-              educationData.duration = props.row.duration;
-              educationData.durationYear = props.row.durationYear;
-              educationData.note = props.row.note;
-              educationData.startYear = +props.row.startDate.slice(0, 4);
-              educationData.endYear = +props.row.endDate.slice(0, 4);
-              dialog = true;
-            }
-          "
-        >
           <div v-if="col.name === 'startDate' || col.name === 'endDate'">
             <div v-if="props.row.isDate">{{ date2Thai(col.value) }}</div>
             <div v-else>
@@ -674,6 +630,43 @@ onMounted(async () => {
           </div>
         </q-td>
         <q-td auto-width>
+          <q-btn
+            color="edit"
+            flat
+            dense
+            round
+            class="q-mr-xs"
+            size="14px"
+            icon="edit"
+            clickable
+            @click="
+              () => {
+                dialogStatus = 'edit';
+                editId = props.row.id;
+                isDate = props.row.isDate ? 'true' : 'false';
+                educationData.educationLevel = props.row.educationLevel;
+                educationData.institute = props.row.institute;
+                educationData.finishDate = props.row.finishDate;
+                educationData.startDate = props.row.startDate;
+                educationData.endDate = props.row.endDate;
+                educationData.isEducation = props.row.isEducation;
+                educationData.degree = props.row.degree;
+                educationData.field = props.row.field;
+                educationData.fundName = props.row.fundName;
+                educationData.gpa = props.row.gpa;
+                educationData.country = props.row.country;
+                educationData.other = props.row.other;
+                educationData.duration = props.row.duration;
+                educationData.durationYear = props.row.durationYear;
+                educationData.note = props.row.note;
+                educationData.startYear = +props.row.startDate.slice(0, 4);
+                educationData.endYear = +props.row.endDate.slice(0, 4);
+                dialog = true;
+              }
+            "
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
           <q-btn
             color="info"
             flat
@@ -692,7 +685,7 @@ onMounted(async () => {
             flat
             dense
             round
-            size="12px"
+            size="14px"
             icon="mdi-delete"
             clickable
             @click.stop="
@@ -747,7 +740,9 @@ onMounted(async () => {
               round
               color="blue"
               icon="history"
-              @click="historyDialog = true"
+              @click="
+                () => (fetchHistoryData(props.row.id), (historyDialog = true))
+              "
             >
               <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
             </q-btn>
@@ -1280,7 +1275,7 @@ onMounted(async () => {
                 <q-th auto-width />
               </q-tr>
             </template>
-            <template v-slot:body="props" v-if="mode === 'table'">
+            <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
                 <q-td v-for="col in props.cols" :key="col.id">
                   <div

src/modules/04_registryNew/interface/request/Education.ts

@@ -0,0 +1,22 @@
+interface RequestItemsObject {
+    educationLevel: string;
+    institute: string;
+    startYear: number;
+    endYear: number;
+    finishDate: Date;
+    startDate: Date;
+    endDate: Date;
+    isEducation: boolean | null;
+    degree: string;
+    field: string;
+    fundName: string;
+    gpa: string;
+    country: string;
+    other: string;
+    duration: string;
+    durationYear: number | null;
+    note: string;
+  }
+  
+  export type { RequestItemsObject };
+

src/modules/04_registryNew/interface/response/Education.ts

@@ -0,0 +1,34 @@
+//ข้อมูล
+interface ResponseObject {
+    createdAt: Date 
+    createdFullName: string
+    createdUserId: string
+    educationLevel: string;
+    institute: string;
+    startYear: number;
+    endYear: number;
+    finishDate: Date;
+    startDate: Date;
+    endDate: Date;
+    isEducation: boolean | null;
+    degree: string;
+    field: string;
+    fundName: string;
+    gpa: string;
+    country: string;
+    other: string;
+    duration: string;
+    durationYear: number | null;
+    note: string;
+    isActive: boolean
+    isDate: boolean
+    positionPath: string
+    positionPathId : string
+    profileId: string
+    lastUpdateFullName: string
+    lastUpdateUserID: string
+    lastUpdatedAt: Date
+  }
+  
+  export type { ResponseObject };
+