ปรับแก้ไข เปลี่ยนแปลงรอบ

src/modules/09_leave/components/4_ChangeRound/DialogForm.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, watch, onMounted } from "vue";
-import { useQuasar } from "quasar";
+import { date, useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute } from "vue-router";
@@ -29,23 +29,31 @@ const {
 
 const route = useRoute();
 const $q = useQuasar();
-const profileId = ref<string>(
-  route.params.id ? route.params.id.toString() : ""
-);
-const roundRef = ref<Object | null>(null);
-const resonRef = ref<Object | null>(null);
-const effectiveDateRef = ref<Object | null>(null);
-
 const roundOp = ref<any>([]);
-const objectRoundChange: MyObjectRoundChangeRef = {
-  round: roundRef,
-  effectiveDate: effectiveDateRef,
-};
 
+/**Hook */
 onMounted(async () => {
   await fetchDataOption();
 });
 
+/**FormData */
+const formData = reactive<changeRoundEdit>({
+  round: "",
+  date: "",
+  reson: "",
+  effectiveDate: null,
+});
+
+/**Validate ข้อมูล */
+const roundRef = ref<Object | null>(null);
+const resonRef = ref<Object | null>(null);
+const effectiveDateRef = ref<Object | null>(null);
+const objectRoundChange: MyObjectRoundChangeRef = {
+  round: roundRef,
+  effectiveDate: effectiveDateRef,
+  reson: resonRef,
+};
+
 /** Function validateForm */
 function validateForm() {
   const hasError = [];
@@ -64,13 +72,7 @@ function validateForm() {
     console.log(hasError);
   }
 }
-
-const formData = reactive<changeRoundEdit>({
-  round: "",
-  date: "",
-  reson: "",
-  effectiveDate: null,
-});
+const dataToday = ref<Date>(new Date());
 
 /** Function ยืนยันการบันทึกข้อมูล */
 function onSubmit() {
@@ -133,6 +135,45 @@ async function fetchDataOption() {
     });
 }
 
+// paging
+const page = ref<number>(1);
+const pageSize = ref<number>(10);
+const filter = ref<string>(""); //search data table
+/**
+ * ฟังก์ชั่น api เปลี่ยนหน้า
+ * @param pageVal page
+ * @param pageSizeVal pagesize
+ */
+
+// Pagination - initial pagination
+const initialPagination = ref<any>({
+  sortBy: null,
+  descending: false,
+  page: 1,
+  rowsPerPage: pageSize, // set ตาม page หลักส่งมา
+});
+
+// Pagination - page & change page & get new data
+const currentPage = ref<number>(1);
+watch(
+  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
+  () => {
+    emit(
+      "update:change-page",
+      currentPage.value,
+      initialPagination.value.rowsPerPage,
+      true
+    );
+  }
+);
+const emit = defineEmits(["update:change-page"]);
+// Pagination - update rowsPerPage
+async function updatePagination(newPagination: any) {
+  initialPagination.value = newPagination;
+  currentPage.value = 1; // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
+}
+
+/**Props */
 const props = defineProps({
   modal: Boolean,
   closeDialog: Function,
@@ -141,6 +182,7 @@ const props = defineProps({
   personId: String,
 });
 
+/**ฟังก์ชั่น ปิดไดอาล็อก */
 function close() {
   if (props.closeDialog) {
     props.closeDialog();
@@ -228,6 +270,11 @@ watch(
                   borderless
                   :enableTimePicker="false"
                   week-start="0"
+                  :min-date="
+                    dataToday
+                      ? new Date(dataToday.getTime() + 24 * 60 * 60 * 1000)
+                      : null
+                  "
                 >
                   <template #year="{ year }">
                     {{ year + 543 }}
@@ -270,10 +317,12 @@ watch(
                 class="col-12 bg-white"
                 outlined
                 stack-label
+                ref="resonRef"
                 v-model="formData.reson"
                 label="เหตุผล"
                 hide-bottom-space
                 type="textarea"
+                :rules="[(val) => !!val || `กรุณากรอกเหตุผล`]"
               ></q-input>
             </div>
           </q-card-section>
@@ -306,8 +355,23 @@ watch(
             dense
             class="custom-header-table"
             :visible-columns="dataStore.visibleColumnsHistory"
-            :rows-per-page-options="[10, 25, 50, 100]"
+            :rows-per-page-options="[5, 10, 25, 50, 100]"
+            :pagination="initialPagination"
+            @update:pagination="updatePagination"
           >
+            <template v-slot:pagination="scope">
+              ทั้งหมด {{ dataStore.total }} รายการ
+              <q-pagination
+                v-model="currentPage"
+                active-color="primary"
+                color="dark"
+                :max-pages="5"
+                size="sm"
+                boundary-links
+                direction-links
+                :max="Number(dataStore.maxPage)"
+              ></q-pagination>
+            </template>
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th