ทะเบียนประวัติ: ความสามารถพิเศษ clean code

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

@@ -234,7 +234,6 @@ const educationData = reactive<RequestItemsObject>({
   educationLevelId: "",
   positionPath: "",
   positionPathId: "",
-  isActive: true,
 });
 
 const keyword = ref<string>("");
@@ -770,7 +769,7 @@ onMounted(async () => {
                   year-picker
                   :enableTimePicker="false"
                   @update:modelValue="
-                    (v) =>
+                    (v:number) =>
                       (educationData.startDate = new Date(
                         `${v}-01-01T00:00:02.010+07:00`
                       ))
@@ -813,7 +812,7 @@ onMounted(async () => {
                   year-picker
                   :enableTimePicker="false"
                   @update:modelValue="
-                    (v) =>
+                    (v:number) =>
                       (educationData.endDate = new Date(
                         `${v}-01-01T00:00:02.010+07:00`
                       ))
@@ -858,7 +857,7 @@ onMounted(async () => {
                   :enableTimePicker="false"
                   week-start="0"
                   @update:modelValue="
-                    (v) =>
+                    (v: Date) =>
                       (educationData.startYear = parseInt(
                         v.toString().slice(11, 15)
                       ))
@@ -901,7 +900,7 @@ onMounted(async () => {
                   :enableTimePicker="false"
                   week-start="0"
                   @update:modelValue="
-                    (v) =>
+                    (v: Date)  =>
                       (educationData.endYear = parseInt(
                         v.toString().slice(11, 15)
                       ))

src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue

@@ -76,34 +76,22 @@ const historyRows = ref<ResponseObject[]>([]);
 const route = useRoute();
 const id = ref<string>(route.params.id.toString());
 const editId = ref<string>("");
-
-const formFilter = reactive({
-  page: 1,
-  pageSize: 10,
-  keyword: "",
-});
+const keyword = ref<string>("");
+const historyKeyword = ref<string>("");
 
 const specialSkill = reactive<RequestItemsObject>({
   field: "",
   detail: "",
   remark: "",
   reference: "",
+  profileId: id.value,
+  dateStart: null,
+  dateEnd: null,
 });
 
 const pagination = ref({
-  page: formFilter.page,
-  rowsPerPage: formFilter.pageSize,
-});
-
-const historyFormFilter = reactive({
   page: 1,
-  pageSize: 10,
-  keyword: "",
-});
-
-const historyPagination = ref({
-  page: historyFormFilter.page,
-  rowsPerPage: historyFormFilter.pageSize,
+  rowsPerPage: 10,
 });
 
 const visibleColumns = ref<string[]>([
@@ -127,10 +115,6 @@ function closeHistoryDialog() {
   historyDialog.value = false;
 }
 
-function validateForm() {
-  onSubmit();
-}
-
 async function onSubmit() {
   dialogConfirm(
     $q,
@@ -166,7 +150,6 @@ async function fetchData(id: string) {
     .get(config.API.profileNewAbilityByProfileId(id))
     .then(async (res) => {
       rows.value = res.data.result;
-      console.log(rows.value);
     })
     .catch((err) => {
       messageError($q, err);
@@ -194,12 +177,7 @@ async function fetchHistoryData(id: string) {
 async function addData() {
   await http
     .post(config.API.profileNewAbility, {
-      profileId: id.value,
-      isActive: true,
-      remark: specialSkill.remark,
-      field: specialSkill.field,
-      reference: specialSkill.reference,
-      detail: specialSkill.detail,
+      ...specialSkill,
       dateStart: null,
       dateEnd: null,
     })
@@ -218,13 +196,10 @@ async function addData() {
 async function editData(idData: string) {
   await http
     .patch(config.API.profileNewAbilityByAbilityId(idData), {
-      isActive: true,
-      remark: specialSkill.remark,
-      field: specialSkill.field,
-      reference: specialSkill.reference,
-      detail: specialSkill.detail,
+      ...specialSkill,
       dateStart: null,
       dateEnd: null,
+      profileId: undefined,
     })
     .then(() => {
       fetchData(id.value);
@@ -239,17 +214,20 @@ async function editData(idData: string) {
 }
 
 async function deleteData(idData: string) {
-  await http
-    .delete(config.API.profileNewAbilityByAbilityId(idData))
-    .then(() => {
-      fetchData(id.value);
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+  dialogRemove($q, () =>
+    http
+      .delete(config.API.profileNewAbilityByAbilityId(idData))
+      .then(() => {
+        fetchData(id.value);
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      })
+  );
 }
 
 onMounted(async () => {
@@ -268,13 +246,7 @@ onMounted(async () => {
       <q-tooltip>เพิ่ม</q-tooltip>
     </q-btn>
     <q-space />
-    <q-input
-      dense
-      outlined
-      v-model="formFilter.keyword"
-      label="ค้นหา"
-      class="q-mr-sm"
-    >
+    <q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm">
       <template v-slot:append>
         <q-icon name="search" />
       </template>
@@ -338,7 +310,7 @@ onMounted(async () => {
     :columns="columns"
     :rows="rows"
     :paging="true"
-    :filter="formFilter.keyword"
+    :filter="keyword"
     v-model:pagination="pagination"
     :rows-per-page-options="[20, 50, 100]"
     :visible-columns="visibleColumns"
@@ -396,9 +368,7 @@ onMounted(async () => {
             size="14px"
             icon="mdi-delete"
             clickable
-            @click.stop="
-              dialogRemove($q, async () => await deleteData(props.row.id))
-            "
+            @click.stop="deleteData(props.row.id)"
             v-close-popup
           >
             <q-tooltip>ลบข้อมูล</q-tooltip>
@@ -461,9 +431,12 @@ onMounted(async () => {
 
   <q-dialog v-model="dialog" class="dialog" persistent>
     <q-card style="min-width: 40%" class="bg-white">
-      <q-form @submit.prevent greedy @validation-success="validateForm">
+      <q-form @submit.prevent greedy @validation-success="onSubmit()">
         <q-card-section class="flex justify-between" style="padding: 0">
-          <dialog-header tittle="เพิ่มความสามารถพิเศษ" :close="closeDialog" />
+          <dialog-header
+            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+            :close="closeDialog"
+          />
         </q-card-section>
         <q-separator color="grey-4" />
         <q-card-section class="col q-gutter-sm q-pr-md">
@@ -527,80 +500,78 @@ onMounted(async () => {
 
   <q-dialog v-model="historyDialog" class="dialog" persistent>
     <q-card style="min-width: 70%" class="bg-white">
-      <q-form @submit.prevent greedy @validation-success="validateForm">
-        <q-card-section class="flex justify-between" style="padding: 0">
-          <dialog-header
-            tittle="ประวัติแก้ไขความสามารถพิเศษ"
-            :close="closeHistoryDialog"
-          />
-        </q-card-section>
-        <q-separator color="grey-4" />
-        <q-card-section>
-          <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
-            <q-space />
-            <q-input
-              dense
-              outlined
-              bg-color="white"
-              v-model="historyFormFilter.keyword"
-              label="ค้นหา"
-              class="q-mr-sm"
-            >
-              <template v-slot:append>
-                <q-icon name="search" />
-              </template>
-            </q-input>
-
-            <q-select
-              v-model="historyVisibleColumns"
-              multiple
-              outlined
-              dense
-              bg-color="white"
-              options-dense
-              :display-value="$q.lang.table.columns"
-              emit-value
-              map-options
-              :options="columns"
-              option-value="name"
-              options-cover
-              style="min-width: 150px"
-            />
-          </q-toolbar>
-          <d-table
-            ref="table"
-            :columns="columns"
-            :rows="historyRows"
-            row-key="name"
-            flat
-            bordered
-            :paging="true"
+      <q-card-section class="flex justify-between" style="padding: 0">
+        <dialog-header
+          tittle="ประวัติแก้ไขความสามารถพิเศษ"
+          :close="closeHistoryDialog"
+        />
+      </q-card-section>
+      <q-separator color="grey-4" />
+      <q-card-section>
+        <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
+          <q-space />
+          <q-input
             dense
-            :filter="historyFormFilter.keyword"
-            v-model:pagination="historyPagination"
-            :rows-per-page-options="[20, 50, 100]"
-            class="custom-header-table"
-            :visible-columns="historyVisibleColumns"
+            outlined
+            bg-color="white"
+            v-model="historyKeyword"
+            label="ค้นหา"
+            class="q-mr-sm"
           >
-            <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-th auto-width />
-              </q-tr>
+            <template v-slot:append>
+              <q-icon name="search" />
             </template>
-            <template v-slot:body="props" v-if="mode === 'table'">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td v-for="col in props.cols" :key="col.id">
-                  <div>{{ col.value ? col.value : "-" }}</div>
-                </q-td>
-                <q-td auto-width> </q-td>
-              </q-tr>
-            </template>
-          </d-table>
-        </q-card-section>
-      </q-form>
+          </q-input>
+
+          <q-select
+            v-model="historyVisibleColumns"
+            multiple
+            outlined
+            dense
+            bg-color="white"
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </q-toolbar>
+        <d-table
+          ref="table"
+          :columns="columns"
+          :rows="historyRows"
+          row-key="name"
+          flat
+          bordered
+          :paging="true"
+          dense
+          :filter="historyKeyword"
+          v-model:pagination="pagination"
+          :rows-per-page-options="[20, 50, 100]"
+          class="custom-header-table"
+          :visible-columns="historyVisibleColumns"
+        >
+          <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-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props" v-if="mode === 'table'">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div>{{ col.value ? col.value : "-" }}</div>
+              </q-td>
+              <q-td auto-width> </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
     </q-card>
   </q-dialog>
 </template>

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

@@ -20,7 +20,6 @@ interface RequestItemsObject {
     educationLevelId: string,
     positionPath: string,
     positionPathId: string,
-    isActive: boolean,
     isDate: boolean
   }
   

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

@@ -3,6 +3,9 @@ interface RequestItemsObject {
     detail: string;
     remark: string;
     reference: string;
+    dateStart: Date | null,
+    dateEnd: Date | null ,
+    profileId: string,
   }
   
   export type { RequestItemsObject };