ผูก API รายการลา (user) *รอ ข้อมูล

src/api/leave/api.leave.ts

@@ -1,13 +1,22 @@
-import env from "../index"
+import env from "../index";
 
-const retirementResign = `${env.API_URI}/retirement`
+const retirementResign = `${env.API_URI}/retirement`;
+const leave = `${env.API_URI}/leave`;
 
 export default {
-	listUser: () => `${retirementResign}/resign/user`,
+  listUser: () => `${retirementResign}/resign/user`,
-	listResign: () => `${retirementResign}/resign`,
+  listResign: () => `${retirementResign}/resign`,
-	resingByid: (id: string) => `${retirementResign}/resign/${id}`,
+  resingByid: (id: string) => `${retirementResign}/resign/${id}`,
-	questionnaireByid: (id: string) => `${retirementResign}/resign/questionnaire/${id}`,
+  questionnaireByid: (id: string) =>
-	listquestionnaire: () => `${retirementResign}/resign/questionnaire`,
+    `${retirementResign}/resign/questionnaire/${id}`,
-	// คำถาม
+  listquestionnaire: () => `${retirementResign}/resign/questionnaire`,
-	questionList: () => `${retirementResign}/resign/questionnaire/question`
+  // คำถาม
-}
+  questionList: () => `${retirementResign}/resign/questionnaire/question`,
+
+  /**รายการลา */
+  leaveType: () => `${leave}/type`,
+  leaveCalendar: () => `${leave}/user/calendar`,
+  leaveTableList: () => `${leave}/user/table`,
+  leaveCanceById: (id: string) => `${leave}/user/delete/${id}`,
+  leaveStats: () => `${leave}/user/summary`,
+};

src/modules/05_leave/componenst/Calendar.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import { ref, watch, onMounted } from "vue";
+import { ref,  onMounted } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/**import calendar*/
 import FullCalendar from "@fullcalendar/vue3";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import type { CalendarOptions } from "@fullcalendar/core";
@@ -7,9 +12,49 @@ import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import allLocales from "@fullcalendar/core/locales-all";
 import listPlugin from "@fullcalendar/list";
+
 import { useCounterMixin } from "@/stores/mixin";
 import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts";
 
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } =
+  mixin;
+
+const $q = useQuasar();
+
+/**
+ * ตัวแปรทั้งหมด
+ */
+const modalCancel = ref(false);
+const title = ref("");
+const location = ref("บ้าน");
+const subject = ref("ลาป่วย");
+const dateStart = ref("20 ส.ค. 2566");
+const dateEnd = ref("21 ส.ค. 2566");
+const numDate = ref("20");
+const place = ref("บ้าน");
+const phone = ref("000-00000000");
+const reason = ref("ยกเลิกการลา");
+const model = ref(null);
+const modeCancel = ref(true);
+
+const dateYear = ref<number>(new Date().getFullYear());
+
+async function fetchDataCalendar() {
+  showLoader;
+  await http
+    .post(config.API.leaveCalendar(), { year: dateYear.value })
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /**
  * Option ของปฏิทิน
  */
@@ -78,41 +123,23 @@ const calendarOptions = ref<CalendarOptions>({
   ],
 });
 
-/**
- * ตัวแปรทั้งหมด
- */
-const modalCancel = ref(false);
-const title = ref("");
-const location = ref("บ้าน");
-const subject = ref("ลาป่วย");
-const dateStart = ref("20 ส.ค. 2566");
-const dateEnd = ref("21 ส.ค. 2566");
-const numDate = ref("20");
-const place = ref("บ้าน");
-const phone = ref("000-00000000");
-const reason = ref("ยกเลิกการลา");
-const model = ref(null);
-const modeCancel = ref(true);
-
 const dateMonth = ref<DataDateMonthObject>({
   month: new Date().getMonth(),
   year: new Date().getFullYear(),
 });
 
-const dateYear = ref<number>(new Date().getFullYear());
 const emit = defineEmits(["update:dateYear"]);
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+
-const { monthYear2Thai } = mixin;
 /**
  * แปลง ปีและเดือนเป็นภาษาไทย
  * @param val datepicker แบบเลือกปีและเดือน
  */
-const monthYearThai = (val: DataDateMonthObject) => {
+function monthYearThai(val: DataDateMonthObject) {
   if (val == null) return "";
   else return monthYear2Thai(val.month, val.year);
-};
+}
 
-const updateMonth = async (e: DataDateMonthObject) => {
+function updateMonth(e: DataDateMonthObject) {
   // console.log(dateMonth.value);
   if (e != null) {
     dateYear.value = e.year;
@@ -121,26 +148,26 @@ const updateMonth = async (e: DataDateMonthObject) => {
     const date = new Date(dateMonth.value.year, dateMonth.value.month);
     calen.gotoDate(date);
   }
-};
+}
 
 /**
  * ฟังก์ชั่นยกเลิก model
  * @param text
  */
-const cancel = async (text: string) => {
+async function cancel(text: string) {
   title.value = text;
   modalCancel.value = true;
   modeCancel.value = true;
-};
+}
 /**
  * ฟังก์ชั่นเปิด model
  * @param text
  */
-const view = async (text: string) => {
+async function view(text: string) {
   title.value = text;
   modalCancel.value = true;
   modeCancel.value = false;
-};
+}
 
 // filter calendar left
 const filterLists = ref<any[]>([
@@ -161,6 +188,12 @@ const filterLists = ref<any[]>([
   },
 ]);
 const filterVal = ref(["x1"]);
+
+onMounted(async () => {
+  console.log("calandar");
+
+  await fetchDataCalendar();
+});
 </script>
 
 <template>

src/modules/05_leave/componenst/ListCalendar.vue

@@ -1,13 +1,50 @@
 <script setup lang="ts">
-import type { QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 import Table from "@/modules/05_leave/componenst/Table.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
 
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } =
+  mixin;
 const LeaveData = useLeaveStore();
-const { fecthList, searchFilterTable } = LeaveData;
+const { fecthList } = LeaveData;
+
+const $q = useQuasar();
+
+const year = ref<number>(new Date().getFullYear());
+const type = ref<string>("00000000-0000-0000-0000-000000000000");
+const status = ref<string>("ALL");
 const filter = ref<string>("");
 
+async function fetchDataTable() {
+  showLoader();
+  const body = {
+    year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
+    type: type.value, //*Id ประเภทการลา
+    status: status.value, //*สถานะการของลา
+    page: "1", //*หน้า
+    pageSize: "10", //*จำนวนแถวต่อหน้า
+    keyword: filter.value, //keyword ค้นหา
+  };
+  await http
+    .post(config.API.leaveTableList(), body)
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /**
  * ตั้งค่า pagination
  */
@@ -52,16 +89,21 @@ const view = async (text: string) => {
   modeCancel.value = false;
 };
 
+async function updateFilterTable(y: number, t: string, s: string, k: string) {
+  if (t && s) {
+    year.value = await y;
+    type.value = await t;
+    status.value = await s;
+    filter.value = await k;
+    await fetchDataTable();
+  }
+}
+
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-  searchFilterTable();
+  await fetchDataTable();
-  fecthList([
-    { no: "1", date: "2023-09-20", type: "1", status: "4", year: "2023" },
-    { no: "2", date: "2023-09-19", type: "1", status: "2", year: "2023" },
-    { no: "3", date: "2023-09-10", type: "2", status: "3", year: "2023" },
-  ]);
 });
 </script>
 <template>
@@ -69,13 +111,13 @@ onMounted(async () => {
     :style="$q.screen.gt.xs ? 'height: 58.5vh' : ''"
     :rows="LeaveData.rows"
     :columns="LeaveData.columns"
-    :filter="filter"
     :visible-columns="LeaveData.visibleColumns"
     v-model:inputfilter="filter"
     v-model:inputvisible="LeaveData.visibleColumns"
     :pagination="initialPagination"
     :inputShow="true"
     :grid="$q.screen.gt.xs ? false : true"
+    @update:filter="updateFilterTable"
   >
     <template #columns="props">
       <q-tr :props="props" class="cursor-pointer">
@@ -107,7 +149,7 @@ onMounted(async () => {
                 class="q-mr-sm"
               />
               <q-icon
-                v-else-if="props.row.status == 'อยู่ระหว่างดำเนินการ'"
+                v-else-if="props.row.status == 'กำลังดำเนินการ'"
                 size="10px"
                 color="light-blue-14"
                 name="mdi-circle"

src/modules/05_leave/componenst/Table.vue

@@ -1,10 +1,20 @@
 <script setup lang="ts">
-import { ref, useAttrs, reactive, onMounted } from "vue";
+import { ref, useAttrs, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useCounterMixin } from "@/stores/mixin";
 import { useLeaveStore } from "@/modules/05_leave/store";
 
+const mixin = useCounterMixin();
 const leaveStore = useLeaveStore();
-const { filterSelector, searchFilterTable } = leaveStore;
+const { messageError } = mixin;
+const { fetchLeaveType, filterOption } = leaveStore;
 const attrs = ref<any>(useAttrs());
+
+const $q = useQuasar();
+
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
 
@@ -26,7 +36,7 @@ const props = defineProps({
   count: Number,
   pass: Number,
   notpass: Number,
-  inputfilter: String,
+
   name: String,
   icon: String,
   inputvisible: Array,
@@ -39,25 +49,40 @@ const props = defineProps({
  *  ฟังก์ชั่น emit ค่าที่กำหนด
  */
 const emit = defineEmits([
-  "update:inputfilter",
+  "update:filter",
   "update:inputvisible",
   "update:editvisible",
 ]);
-const updateInput = (value: string | number | null) => {
+
-  emit("update:inputfilter", value);
-};
 const updateVisible = (value: []) => {
   emit("update:inputvisible", value);
 };
 
-/**
+/** filter */
- * reset ค่าที่ค้นหา
+const year = ref<number>(new Date().getFullYear());
- */
+const type = ref<string>("00000000-0000-0000-0000-000000000000");
-const resetFilter = () => {
+const status = ref<string>("ALL");
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+const filter = ref<string>("");
-  emit("update:inputfilter", "");
+
-  filterRef.value.focus();
+function filterTable() {
-};
+  emit("update:filter", year.value, type.value, status.value, filter.value);
+}
+
+async function fectOptionType() {
+  await http
+    .get(config.API.leaveType())
+    .then(async (res) => {
+      const data = res.data.result;
+      await fetchLeaveType(data);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+onMounted(async () => {
+  await fectOptionType();
+});
 </script>
 <template>
   <div class="q-py-sm row">
@@ -66,13 +91,13 @@ const resetFilter = () => {
         <datepicker
           v-if="leaveStore.tabValue === 'list'"
           menu-class-name="modalfix"
-          v-model="leaveStore.fiscalYearyear"
+          v-model="year"
           class="col-2"
           :locale="'th'"
           autoApply
           year-picker
           :enableTimePicker="false"
-          @update:modelValue="searchFilterTable"
+          @update:modelValue="filterTable"
         >
           <template #year="{ year }">{{ year + 543 }}</template>
           <template #year-overlay-value="{ value }">{{
@@ -83,7 +108,7 @@ const resetFilter = () => {
               dense
               lazy-rules
               outlined
-              :model-value="Number(leaveStore.fiscalYearyear) + 543"
+              :model-value="Number(year) + 543"
               :label="`${'ปีงบประมาณ'}`"
             >
               <template v-slot:prepend>
@@ -97,33 +122,11 @@ const resetFilter = () => {
             </q-input>
           </template>
         </datepicker>
-        <!-- <q-select
-                  v-if="leaveStore.tabValue === 'list'"
-                  outlined
-                  dense
-                  lazy-rules
-                  v-model="leaveStore.fiscalYearyear"
-                  :label="`${'ปี พ.ศ.'}`"
-                  emit-value
-                  map-options
-                  option-label="name"
-                  :options="leaveStore.fiscalyearOP"
-                  option-value="id"
-                  hide-bottom-space
-                  style="min-width: 150px"
-                  class="col-xs-12 col-sm-auto"
-                  @update:model-value="searchFilterTable"
-                  @filter="(inputValue:any,
-                    doneFn:Function) => filterSelector(inputValue, doneFn,'fiscalyearOP'
-                    ) "
-                /> -->
         <!-- ค้นหาข้อความใน table -->
         <q-select
           outlined
           dense
-          lazy-rules
+          v-model="type"
-          v-model="leaveStore.LeaveType"
-          :rules="[(val) => !!val || `${'กรุณาเลือกประเภทใบลา'}`]"
           :label="`${'ประเภทใบลา'}`"
           emit-value
           map-options
@@ -133,17 +136,22 @@ const resetFilter = () => {
           hide-bottom-space
           style="min-width: 150px"
           class="col-xs-12 col-sm-auto"
-          @update:model-value="searchFilterTable"
+          use-input
+          @update:model-value="filterTable"
           @filter="(inputValue:any,
-                    doneFn:Function) => filterSelector(inputValue, doneFn,'LeaveTypeOption'
+                    doneFn:Function) => filterOption(inputValue, doneFn,'LeaveTypeOption'
                     ) "
-        />
+        >
+          <template v-slot:no-option>
+            <q-item>
+              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+            </q-item>
+          </template></q-select
+        >
         <q-select
           outlined
           dense
-          lazy-rules
+          v-model="status"
-          v-model="leaveStore.LeaveStatus"
-          :rules="[(val) => !!val || `${'กรุณาเลือกสถานะ'}`]"
           :label="`${'สถานะ'}`"
           emit-value
           map-options
@@ -153,18 +161,25 @@ const resetFilter = () => {
           hide-bottom-space
           style="min-width: 150px"
           class="col-xs-12 col-sm-auto"
-          @update:model-value="searchFilterTable"
+          use-input
+          @update:model-value="filterTable"
           @filter="(inputValue:any,
-                    doneFn:Function) => filterSelector(inputValue, doneFn,'LeaveStatusOption'
+                    doneFn:Function) => filterOption(inputValue, doneFn,'LeaveStatusOption'
                     ) "
-        />
+        >
+          <template v-slot:no-option>
+            <q-item>
+              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+            </q-item>
+          </template></q-select
+        >
         <q-space />
         <q-input
           standout
           dense
-          :model-value="inputfilter"
+          v-model="filter"
           ref="filterRef"
-          @update:model-value="updateInput"
+          @keydown.enter.prevent="filterTable"
           outlined
           debounce="300"
           placeholder="ค้นหา"
@@ -172,12 +187,12 @@ const resetFilter = () => {
           style="max-width: 150px"
         >
           <template v-slot:append>
-            <q-icon v-if="inputfilter == ''" name="search" />
+            <q-icon v-if="filter == ''" name="search" />
             <q-icon
-              v-if="inputfilter !== ''"
+              v-if="filter !== ''"
               name="clear"
               class="cursor-pointer"
-              @click="resetFilter"
+              @click="filter = ''"
             />
           </template>
         </q-input>

src/modules/05_leave/interface/index/main.ts

@@ -1,27 +1,40 @@
-import type { S } from "@fullcalendar/core/internal-common"
+import type { S } from "@fullcalendar/core/internal-common";
 
 interface OptionData {
-	id: string | undefined
+  id: string | undefined;
-	name: string | undefined
+  name: string | undefined;
 }
 
 interface FormLeavetMainData {
-	type: string
+  type: string;
-	numDate: string
+  numDate: string;
-	extend: string
+  extend: string;
-	use: string
+  use: string;
-	numAll: string
+  numAll: string;
-	numDone: string
+  numDone: string;
-	numNot: string
+  numNot: string;
-	numCancel: string
+  numCancel: string;
 }
 
 interface formListLeaveData {
-	no: string
+  no: string;
-	date: string | null
+  date: string | null;
-	type: string
+  type: string;
-	status: string
+  status: string;
-	year: string
+  year: string;
 }
 
-export type { OptionData, FormLeavetMainData, formListLeaveData }
+interface TypeLeave {
+  code: string;
+  createdAt: Date;
+  createdFullName: string;
+  createdUserId: string;
+  id: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: Date | null;
+  limit: number;
+  name: string;
+}
+
+export type { OptionData, FormLeavetMainData, formListLeaveData, TypeLeave };

src/modules/05_leave/store.ts

@@ -5,6 +5,7 @@ import type {
   FormLeavetMainData,
   OptionData,
   formListLeaveData,
+  TypeLeave,
 } from "@/modules/05_leave/interface/index/main";
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -19,6 +20,32 @@ export const useLeaveStore = defineStore("Leave", () => {
   const rows = ref<formListLeaveData[]>([]);
   const DataMainOrig = ref<formListLeaveData[]>([]); // ข้อมูลหลักดั้งเดิม
 
+  /** ประเภทการลา */
+  const typeOptions = ref<OptionData[]>([]);
+  const typeOptionsMain = ref<OptionData[]>([]);
+  async function fetchLeaveType(data: TypeLeave[]) {
+    typeOptionsMain.value = [
+      { id: "00000000-0000-0000-0000-000000000000", name: "ทั้งหมด" },
+    ];
+    const optionType = data.map((e: TypeLeave) => ({
+      id: e.id,
+      name: e.name,
+    }));
+    typeOptionsMain.value.push(...optionType);
+    typeOptions.value = typeOptionsMain.value;
+  }
+
+  /** สถานะของการลา */
+  const statusOptionsMain = ref<OptionData[]>([
+    { id: "ALL", name: "ทั้งหมด" },
+    { id: "NEW ", name: "ใหม่" },
+    { id: "PENDING ", name: "กำลังดำเนินการ" },
+    { id: "APPROVE ", name: "อนุมัติ " },
+    { id: "REJECT ", name: "ไม่อนุมัติ" },
+    { id: "DELETE  ", name: "ยกเลิก" },
+  ]);
+  const statusOptions = ref<OptionData[]>(statusOptionsMain.value);
+
   async function fecthList(data: formListLeaveData[]) {
     let datalist: formListLeaveData[] = data.map((e: any) => ({
       no: e.no,
@@ -102,72 +129,24 @@ export const useLeaveStore = defineStore("Leave", () => {
     }
   };
 
-  //--------------|ฟิลเตอร์|--------------------------------------//
-  const searchFilterTable = async () => {
-    console.log("test");
-
-    rows.value = [];
-
-    if (LeaveType.value !== undefined && LeaveType.value !== null) {
-      await DataUpdate(
-        LeaveType.value === "0" ? "all" : LeaveType.value!,
-        LeaveStatus.value === "0" ? "all" : LeaveStatus.value!,
-        fiscalYearyear.value === 0 ? "all" : fiscalYearyear.value?.toString()!
-      );
-      let filteredData = DataMainOrig.value;
-
-      if (LeaveType.value !== "0") {
-        filteredData = filteredData.filter(
-          (item: formListLeaveData) => item.type === LeaveType.value
-        );
-      }
-      if (LeaveStatus.value !== "0") {
-        filteredData = filteredData.filter(
-          (item: formListLeaveData) => item.status === LeaveStatus.value
-        );
-      }
-      if (fiscalYearyear.value !== 0) {
-        filteredData = filteredData.filter(
-          (item: formListLeaveData) =>
-            item.year === fiscalYearyear.value?.toString()
-        );
-      }
-      const dataArr: formListLeaveData[] = filteredData.map((e: any) => ({
-        no: e.no,
-        type: convertType(e.type) || "",
-        status: convertStatus(e.status) || "",
-        date: date2Thai(new Date(e.date)),
-        year: e.year !== undefined ? e.year : "",
-      }));
-      rows.value = dataArr;
-    }
-  };
-
   /**
    *ฟังก์ชั่นเลือก selector ที่ใช่ในการฟิลเตอร์
    * @param val ค่าที่ต้องการฟิลเตอร์
    * @param update  อัพเดทค่า
    * @param refData ดาต้าที่ต้องการฟิลเตอร์
    */
-  const filterSelector = (val: any, update: Function, refData: string) => {
+  const filterOption = (val: any, update: Function, refData: string) => {
     switch (refData) {
-      case "fiscalyearOP":
-        update(() => {
-          fiscalyearOP.value = fiscalyearOP.value.filter(
-            (v: any) => v.name.indexOf(val) > -1
-          );
-        });
-        break;
       case "LeaveTypeOption":
         update(() => {
-          typeOptions.value = typeOptions.value.filter(
+          typeOptions.value = typeOptionsMain.value.filter(
             (v: any) => v.name.indexOf(val) > -1
           );
         });
         break;
       case "LeaveStatusOption":
         update(() => {
-          statusOptions.value = statusOptions.value.filter(
+          statusOptions.value = statusOptionsMain.value.filter(
             (v: any) => v.name.indexOf(val) > -1
           );
         });
@@ -224,21 +203,6 @@ export const useLeaveStore = defineStore("Leave", () => {
     { id: "11", name: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" },
   ]);
 
-  /** filter ประเภทการลา */
-  const typeOptions = ref<OptionData[]>([
-    { id: "0", name: "ทั้งหมด" },
-    ...options.value,
-  ]);
-
-  /** สถานะของการลา */
-  const statusOptions = ref<OptionData[]>([
-    { id: "0", name: "ทั้งหมด" },
-    { id: "1", name: "อนุมัติ" },
-    { id: "2", name: "ไม่อนุมัติ" },
-    { id: "3", name: "อยู่ระหว่างดำเนินการ" },
-    { id: "4", name: "ใหม่" },
-  ]);
-
   /**
    *ฟังก์ชั่นค้นหาแสดง option ของสถานะ
    * @param val ค่าที่เเสดง
@@ -348,13 +312,15 @@ export const useLeaveStore = defineStore("Leave", () => {
     LeaveType,
     LeaveStatus,
     fecthList,
-    filterSelector,
+
-    searchFilterTable,
     fiscalyearOP,
     fiscalYearyear,
     options,
     optionsOrdination,
     typeConvert,
     typeLeave,
+
+    fetchLeaveType,
+    filterOption,
   };
 });

tsconfig.app.json

@@ -7,6 +7,8 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "target": "es2018",
+    "lib": ["dom", "es2015", "es2018", "es2018.promise"]
   }
 }