Merge branch 'nice_dev' into develop

src/modules/13_salary/components/SalaryRound/DialogForm.vue

@@ -1,44 +1,36 @@
 <script setup lang="ts">
-import { ref, defineModel, defineProps, watch } from "vue";
-import Header from "@/components/DialogHeader.vue";
-import { useCounterMixin } from "@/stores/mixin";
-import type {
-  ObjectRef,
-  DataOption,
-} from "@/modules/13_salary/interface/response/Main";
+import { ref, defineModel, watch } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
-
 import config from "@/app.config";
 
+/** importType*/
+import type { DataOption } from "@/modules/13_salary/interface/response/Main";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/**use*/
 const $q = useQuasar();
-const isActive = ref<boolean>(false);
-const period = ref<string>("");
+const {
+  dialogConfirm,
+  date2Thai,
+  messageError,
+  success,
+  showLoader,
+  hideLoader,
+} = useCounterMixin();
+
+/** props*/
 const modal = defineModel<boolean>("modal", { required: true });
 const effective = defineModel<Date | null | string>("effective", {
   required: true,
 });
 const isRead = defineModel<boolean>("isRead", { required: true });
 const year = defineModel<number | null | string>("year");
-const mixin = useCounterMixin();
-const { dialogConfirm, date2Thai, messageError,success } = mixin;
-const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
-const effectiveDate = ref<Date | null>(null);
-/** ตัวแปร validate */
-const periodRef = ref<Object | null>(null);
-const effectiveDateRef = ref<Object | null>(null);
-const yearRef = ref<Object | null>(null);
-const typeOptions = ref<DataOption[]>([
-  { id: "SPECIAL", name: "รอบพิเศษ" },
-  { id: "APR", name: "รอบเมษายน" },
-  { id: "OCT", name: "รอบตุลาคม" },
-]);
-const objectForm: ObjectRef = {
-  period: periodRef,
-  effectiveDate: effectiveDateRef,
-  year: yearRef,
-};
-
 const props = defineProps({
   getData: Function,
   edit: Boolean,
@@ -48,29 +40,18 @@ const props = defineProps({
   isActive: Boolean,
   isRead: Boolean,
 });
-/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
-function validateForm() {
-  const hasError = [];
-  for (const key in objectForm) {
-    if (Object.prototype.hasOwnProperty.call(objectForm, key)) {
-      const property = objectForm[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
 
-  if (hasError.every((result) => result === true)) {
-    if (props.edit == true) {
-      editSummit();
-    } else {
-      onSubmit();
-    }
-  }
-}
+const period = ref<string>("");
+const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
+const isActive = ref<boolean>(false);
+const effectiveDate = ref<Date | null>(null);
+const typeOptions = ref<DataOption[]>([
+  { id: "SPECIAL", name: "รอบพิเศษ" },
+  { id: "APR", name: "รอบเมษายน" },
+  { id: "OCT", name: "รอบตุลาคม" },
+]);
 
-function saveData() {}
+/** function เคลียข้อมูล form*/
 function clearForm() {
   isActive.value = false;
   period.value = "";
@@ -79,54 +60,36 @@ function clearForm() {
   isRead.value = false;
 }
 
+/** function ปืด Dialog*/
 function close() {
   modal.value = false;
   clearForm();
 }
 
-function editSummit() {
-  dialogConfirm($q, () => {
-    const body = {
-      period: period.value,
-      isActive: isActive.value,
-      effectiveDate: effective.value,
-      year: year.value,
-    };
-    http
-      .put(config.API.salaryPeriod() + `/${props.idRound}`, body)
-      .then((res) => {
-        modal.value = false;
-        clearForm();
-        props.getData?.();
-        success($q,'บันทึกข้อมูลสำเร็จ')
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {});
-  });
-}
-
+/** function บัยทึกข้อมูลรอบการขึ้นเงินเดือน*/
 function onSubmit() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
+    showLoader();
     const body = {
       period: period.value,
       isActive: isActive.value,
       effectiveDate: effective.value,
       year: year.value,
     };
-    http
-      .post(config.API.salaryPeriod(), body)
-      .then((res) => {
-        modal.value = false;
-        clearForm();
-        success($q,'บันทึกข้อมูลสำเร็จ')
-        props.getData?.();
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {});
+    try {
+      const url = !props.edit
+        ? config.API.salaryPeriod()
+        : config.API.salaryPeriod() + `/${props.idRound}`;
+      await http[!props.edit ? "post" : "put"](url, body);
+      modal.value = false;
+      props.getData?.();
+      clearForm();
+      success($q, "บันทีกข้อมูลสำเร็จ");
+    } catch (err) {
+      messageError($q, err);
+    } finally {
+      hideLoader();
+    }
   });
 }
 
@@ -137,10 +100,10 @@ function inputEdit(val: boolean) {
   };
 }
 
+/** callbackFunction ทำการ fetch ข้อมูลไฟล์เมื่อเปิด Dialog*/
 watch(
   () => modal.value,
   () => {
-    console.log(props.edit);
     if (props.edit == true) {
       period.value = props.period ? props.period : "";
       effectiveDate.value = props.effectiveDate ? props.effectiveDate : null;
@@ -158,139 +121,145 @@ watch(
 <template>
   <q-dialog v-model="modal" persistent>
     <q-card class="col-12" style="width: 30%">
-      <Header
-        :tittle="`${ isRead == true ? `ข้อมูลรอบการขึ้นเงินเดือน`: props.edit ? `แก้ไขรอบการขึ้นเงินเดือน` : `เพิ่มรอบการขึ้นเงินเดือน` }`"
-        :close="close"
-      />
-      <q-separator />
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <Header
+          :tittle="`${
+            isRead == true
+              ? `ข้อมูลรอบการขึ้นเงินเดือน`
+              : props.edit
+              ? `แก้ไขรอบการขึ้นเงินเดือน`
+              : `เพิ่มรอบการขึ้นเงินเดือน`
+          }`"
+          :close="close"
+        />
+        <q-separator />
+        <q-card-section class="scroll" style="max-height: 70vh">
+          <div class="q-gutter-y-sm">
+            <datepicker
+              :readonly="isRead"
+              menu-class-name="modalfix"
+              v-model="year"
+              class="col-2"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  :readonly="isRead"
+                  ref="yearRef"
+                  dense
+                  :class="inputEdit(isReadonly)"
+                  hide-bottom-space
+                  outlined
+                  :model-value="year === 0 ? null : Number(year) + 543"
+                  :label="`${'ปีงบประมาณ'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกเลือกปีงบประมาณ'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
 
-      <q-card-section class="scroll" style="max-height: 70vh">
-        <div class="q-gutter-y-sm">
-          <datepicker
-            :readonly="isRead"
-            menu-class-name="modalfix"
-            v-model="year"
-            class="col-2"
-            :locale="'th'"
-            autoApply
-            year-picker
-            :enableTimePicker="false"
-          >
-            <template #year="{ year }">{{ year + 543 }}</template>
-            <template #year-overlay-value="{ value }">{{
-              parseInt(value + 543)
-            }}</template>
-            <template #trigger>
-              <q-input
-                :readonly="isRead"
-                ref="yearRef"
-                dense
-                :class="inputEdit(isReadonly)"
-                hide-bottom-space
-                outlined
-                :model-value="year === 0 ? null : Number(year) + 543"
-                :label="`${'ปีงบประมาณ'}`"
-                :rules="[(val) => !!val || `${'กรุณาเลือกเลือกปีงบประมาณ'}`]"
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-
-          <q-select
-          :readonly="isRead"
-            ref="periodRef"
-            :class="inputEdit(isReadonly)"
-            v-model="period"
-            label="รอบการขึ้นเงินเดือน"
-            dense
-            outlined
-            emit-value
-            map-options
-            option-label="name"
-            option-value="id"
-            :options="typeOptions"
-            lazy-rules
-            :rules="[(val) => !!val || `${'กรุณาเลือกรอบการขึ้นเงินเดือน'}`]"
-            hide-bottom-space
-          />
-          <datepicker
-          :readonly="isRead"
-            menu-class-name="modalfix"
-            v-model="effective"
-            :locale="'th'"
-            autoApply
-            borderless
-            :enableTimePicker="false"
-            week-start="0"
-          >
-            <template #year="{ year }">
-              {{ year + 543 }}
-            </template>
-            <template #year-overlay-value="{ value }">
-              {{ parseInt(value + 543) }}
-            </template>
-            <template #trigger>
-              <q-input
-                for="effectiveDate"
-                ref="effectiveDateRef"
-                outlined
-                dense
-                :class="inputEdit(isReadonly)"
-                :readonly="isRead"
-                hide-bottom-space
-                :model-value="
-                  effective != null ? date2Thai(effective as Date) : null
-                "
-                label="วันที่มีผลบังคับใช้งาน"
-                :rules="[
-                  (val) => !!val || `${'กรุณาเลือกวันที่มีผลบังคับใช้งาน'}`,
-                ]"
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
-                  </q-icon>
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-          <div class="col 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="isRead == true ? 'toggle-control noClick':'toggle-control'">
-                <input type="checkbox" v-model="isActive" :readonly="isRead"/>
-                <span class="control"></span>
-              </label>
+            <q-select
+              :readonly="isRead"
+              ref="periodRef"
+              :class="inputEdit(isReadonly)"
+              v-model="period"
+              label="รอบการขึ้นเงินเดือน"
+              dense
+              outlined
+              emit-value
+              map-options
+              option-label="name"
+              option-value="id"
+              :options="typeOptions"
+              lazy-rules
+              :rules="[(val) => !!val || `${'กรุณาเลือกรอบการขึ้นเงินเดือน'}`]"
+              hide-bottom-space
+            />
+            <datepicker
+              :readonly="isRead"
+              menu-class-name="modalfix"
+              v-model="effective"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  for="effectiveDate"
+                  ref="effectiveDateRef"
+                  outlined
+                  dense
+                  :class="inputEdit(isReadonly)"
+                  :readonly="isRead"
+                  hide-bottom-space
+                  :model-value="
+                    effective != null ? date2Thai(effective as Date) : null
+                  "
+                  label="วันที่มีผลบังคับใช้งาน"
+                  :rules="[
+                    (val) => !!val || `${'กรุณาเลือกวันที่มีผลบังคับใช้งาน'}`,
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <div class="col 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="
+                    isRead == true ? 'toggle-control noClick' : 'toggle-control'
+                  "
+                >
+                  <input
+                    type="checkbox"
+                    v-model="isActive"
+                    :readonly="isRead"
+                  />
+                  <span class="control"></span>
+                </label>
+              </div>
             </div>
           </div>
-        </div>
-      </q-card-section>
-      <q-separator v-if="!isRead"/>
-      <form @submit.prevent="validateForm" v-if="!isRead">
-        <q-card-actions align="right" class="bg-white text-teal">
-          <!-- <q-btn flat label="OK" v-close-popup /> -->
-          <q-btn
-            type="submit"
-            for="#submitForm"
-            unelevated
-            dense
-            class="q-px-md items-center"
-            color="light-blue-10"
-            label="บันทึก"
-          />
+        </q-card-section>
+        <q-separator v-if="!isRead" />
+        <q-card-actions align="right" class="bg-white text-teal" v-if="!isRead">
+          <q-btn label="บันทึก" type="submit" color="secondary">
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
@@ -365,6 +334,6 @@ $toggle-control-size: $toggle-height - ($toggle-gutter * 2);
   }
 }
 .noClick {
-   pointer-events: none;
+  pointer-events: none;
 }
 </style>

src/modules/13_salary/interface/response/Main.ts

@@ -42,13 +42,13 @@ interface SalaryPosLevel {
 
 interface RowList {
   id: string;
-  period: string|null;
-  isActive: boolean|null;
-  isClose: boolean|null;
-  effectiveDate: Date|null|string;
-  year: number|null;
-  status: string|null;
-  revisionId: string|null;
+  period: string | null;
+  isActive: boolean | null;
+  isClose: boolean | null;
+  effectiveDate: Date | null | string;
+  year: number | null;
+  status: string | null;
+  revisionId: string | null;
 }
 
 interface Row {
@@ -56,11 +56,12 @@ interface Row {
   total: number;
 }
 
-interface ObjectRef {
-  period: object | null;
-  effectiveDate: object | null;
-  year: object | null;
-  [key: string]: any;
-}
-
-export type { Salary, SalaryRate, SalaryPosType, SalaryPosLevel,RowList,Row,ObjectRef,DataOption };
+export type {
+  Salary,
+  SalaryRate,
+  SalaryPosType,
+  SalaryPosLevel,
+  RowList,
+  Row,
+  DataOption,
+};

src/modules/13_salary/views/salaryRound.vue

@@ -2,31 +2,36 @@
 import { ref, watch, onMounted } from "vue";
 import { useSalaryDataStore } from "@/modules/13_salary/store/SalaryStore";
 import { useCounterMixin } from "@/stores/mixin";
-import type { QTableProps } from "quasar";
-import type { RowList, Row } from "@/modules/13_salary/interface/response/Main";
-import Dialog from "@/modules/13_salary/components/SalaryRound/DialogForm.vue";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { NewPagination } from "@/modules/13_salary/interface/index/Main";
+import type { RowList } from "@/modules/13_salary/interface/response/Main";
+
+/** importComponents*/
+import Dialog from "@/modules/13_salary/components/SalaryRound/DialogForm.vue";
+
+/** importStore*/
 import { useQuasar } from "quasar";
 
-const idRound = ref<string>("");
+/** use*/
 const $q = useQuasar();
-const mixin = useCounterMixin();
+const dataStore = useSalaryDataStore();
 const {
   dialogRemove,
   showLoader,
   hideLoader,
   messageError,
   date2Thai,
-  dateToISO,
   dialogConfirm,
   success,
-} = mixin;
-const dataStore = useSalaryDataStore();
+} = useCounterMixin();
+
+const idRound = ref<string>("");
 const year = ref<number>(0);
 const filterKeyword = ref<string>("");
-const rowsPerPage = ref<number>(10);
 const editCheck = ref<boolean>(false);
 const dialog = ref<boolean>(false);
 const period = ref<string>("");
@@ -39,23 +44,9 @@ const maxPage = ref<number>(1);
 const totalList = ref<number>(0);
 const currentPage = ref<number>(1);
 const page = ref<number>(1);
+const rowsPerPage = ref<number>(10);
 
-const pagination = ref({
-  descending: false,
-  page: page.value,
-  rowsPerPage: rowsPerPage.value,
-});
-
-const visibleColumns = ref<string[]>([
-  "no",
-  "period",
-  "year",
-  "effectiveDate",
-  "isActive",
-  "isClose",
-]);
-
-// หัวตาราง
+/** Table*/
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -112,11 +103,26 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+const visibleColumns = ref<string[]>([
+  "no",
+  "period",
+  "year",
+  "effectiveDate",
+  "isActive",
+  "isClose",
+]);
+const pagination = ref({
+  descending: false,
+  page: page.value,
+  rowsPerPage: rowsPerPage.value,
+});
 
+/** function เปืด Dialog เพิ่มรอบการขึ้นเงินเดือน */
 function clickAdd() {
   dialog.value = true;
   editCheck.value = false;
 }
+
 /** ดึงข้อมูลเริ่มต้น */
 function getData() {
   showLoader();
@@ -137,7 +143,9 @@ function getData() {
       hideLoader();
     });
 }
-function dataUpdate() {
+
+/** function เลือกปีงบประมาณ*/
+function updateYear() {
   page.value = 1;
   getData();
 }
@@ -147,33 +155,33 @@ function yearAll() {
   getData();
 }
 
-/** ฟังชั่น เคลียฟิลเตอร์ */
-function resetFilter() {
-  filterKeyword.value = "";
-  getData();
-}
-
-// /** ดึงข้อมูลเมื่อ กด enter */
-// function filterFn() {
-//   getData();
-// }
-
+/**
+ * function ลบรายการรอบการขึ้นเงินเดือน
+ * @param id รอบการขึ้นเงินเดือน
+ */
 function deleteData(id: string) {
-  showLoader();
-  http
-    .delete(config.API.salaryPeriod() + `/${id}`)
-    .then((res) => {
-      getData();
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.salaryPeriod() + `/${id}`)
+      .then(() => {
+        getData();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
+/**
+ * function เปืด Dialog ข้อมูลรอบการขึ้นเงินเดือน
+ * @param data ข้อมูลรอบการขึ้นเงินเดือน
+ * @param status สะถานะการแก่้ไข
+ */
 function editPopup(data: RowList, status: string) {
   if (status == "read") {
     isRead.value = true;
@@ -186,7 +194,11 @@ function editPopup(data: RowList, status: string) {
   effectiveDate.value = data.effectiveDate as Date;
   isActive.value = data.isActive ? data.isActive : false;
 }
-/** ปิดรอบ */
+
+/**
+ * function ปิดรอการขึ้นเงินเดือน
+ * @param id รอบการขึ้นเงินเดือน
+ */
 function dialogClose(id: string) {
   dialogConfirm(
     $q,
@@ -206,6 +218,24 @@ function dialogClose(id: string) {
   );
 }
 
+/**
+ * function อัปเดท แถวต่อหน้า
+ * @param newPagination
+ */
+function updatePageSize(newPagination: NewPagination) {
+  page.value = 1;
+  rowsPerPage.value = newPagination.rowsPerPage;
+}
+
+/** callbackFunction ทำเมื่อมีการอัปเดท แถวต่อหน้า แล้ว fetch รายการรอบการขึ้นเงินเดือน*/
+watch(
+  () => rowsPerPage.value,
+  () => {
+    getData();
+  }
+);
+
+/** Hooklifecycle*/
 onMounted(async () => {
   year.value = new Date().getFullYear();
   getData();
@@ -213,18 +243,6 @@ onMounted(async () => {
   dataStore.visibleColumns = visibleColumns.value;
   dataStore.columns = columns.value;
 });
-
-function updatePageSize(newPagination: any) {
-  page.value = 1;
-  rowsPerPage.value = newPagination.rowsPerPage;
-}
-
-watch(
-  () => rowsPerPage.value,
-  () => {
-    getData();
-  }
-);
 </script>
 
 <template>
@@ -244,7 +262,7 @@ watch(
           autoApply
           year-picker
           :enableTimePicker="false"
-          @update:model-value="dataUpdate"
+          @update:model-value="updateYear"
         >
           <template #year="{ year }">{{ year + 543 }}</template>
           <template #year-overlay-value="{ value }">{{
@@ -290,26 +308,6 @@ watch(
         >
       </div>
       <q-space />
-      <!-- <q-input
-        for="#search"
-        class="col-xs-12 col-sm-3 col-md-2"
-        standout
-        dense
-        v-model="filterKeyword"
-        ref="filterRef"
-        outlined
-        placeholder="ค้นหา"
-        @keydown.enter.prevent="filterFn"
-      >
-        <template v-slot:append>
-          <q-icon
-            v-if="filterKeyword !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="resetFilter"
-          />
-        </template>
-      </q-input> -->
 
       <q-select
         id="visibleColumns"
@@ -477,12 +475,7 @@ watch(
                       v-if="props.row.revisionId == null"
                       clickable
                       v-close-popup
-                      @click.stop="
-                        dialogRemove(
-                          $q,
-                          async () => await deleteData(props.row.id)
-                        )
-                      "
+                      @click.stop="deleteData(props.row.id)"
                     >
                       <q-item-section>
                         <div class="row items-center">