no message

src/api/11_discipline/api.discipline.ts

@@ -16,8 +16,9 @@ export default {
   /**ลบ ช่องทางการร้องเรียน
    * @param id type
    */
-  complaintListOp:()=>`${disciplineMain}/complaint_Channel`,
+  complaintListOp: () => `${disciplineMain}/complaint_Channel`,
-  complaintChannelbyId: (id: string) => `${disciplineMain}/complaint_Channel/${id}`,
+  complaintChannelbyId: (id: string) =>
+    `${disciplineMain}/complaint_Channel/${id}`,
   complaintAdd: () => `${disciplineMain}/complaint`,
   complaintbyId: (id: string) => `${disciplineMain}/complaint/${id}`,
   complaintReject: (id: string) => `${disciplineMain}/complaint/reject/${id}`,
@@ -46,7 +47,7 @@ export default {
   investigateReject: (id: string) => `${investigate}/reject/${id}`,
   investigateResume: (id: string) => `${investigate}/resume/${id}`,
   investigateApprove: (id: string) => `${investigate}/approve/${id}`,
-
+  investigateCalendar: () => `${investigate}/calendar`,
 
   /** ระบบวินัยเรื่องสอบสวน */
   disciplineDisciplinary: () => `${discipline}`,
@@ -62,16 +63,18 @@ export default {
   disciplinaryResume: (id: string) => `${discipline}/resume/${id}`,
   disciplinaryApprove: (id: string) => `${discipline}/approve/${id}`,
   disciplinarySuspend: (id: string) => `${discipline}/suspend/${id}`,
+  disciplinaryCalendar: () => `${discipline}/calendar`,
 
   /** รายการผลการพิจารณาทางวินัย*/
   listResult: () => `${disciplineMain}/result`,
   listResultById: (id: string) => `${disciplineMain}/result/${id}`,
 
   /** ผู้ถูกพักราชการ */
-  suspendMain:(page: number, pageSize: number, keyword: string) => `${suspend}?page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
+  suspendMain: (page: number, pageSize: number, keyword: string) =>
+    `${suspend}?page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
   suspendById: (id: string) => `${suspend}/${id}`,
 
   suspendReport: () => `${suspend}/report`,
 
-  reportresult:(id:string)=>`${disciplineMain}/result/report/${id}`,
+  reportresult: (id: string) => `${disciplineMain}/result/report/${id}`,
 };

src/modules/11_discipline/components/2_InvestigateFacts/CalandarDialog.vue

@@ -14,7 +14,7 @@ const props = defineProps({
 });
 </script>
 <template>
-  <q-dialog v-model="props.modal" persistent>
+  <q-dialog v-model="props.modal">
     <q-card style="min-width: 60vw">
       <q-toolbar>
         <q-toolbar-title class="text-subtitle2 text-bold"
@@ -29,26 +29,11 @@ const props = defineProps({
           style="color: #ff8080; background-color: #ffdede"
         />
       </q-toolbar>
+
       <q-separator />
-      <q-card-section class="q-pa-md bg-grey-1">
+      <q-card-section class="q-pa-md bg-grey-1 scroll">
         <Calendar />
       </q-card-section>
-      <!-- <q-separator /> -->
-
-      <!-- <div class="row justify-end q-px-md q-py-sm items-center">
-          <q-btn
-            dense
-            color="public"
-            id="onSubmit"
-            class="q-px-md q-py-xs"
-            @click="savePost"
-          >
-
-            <div>{{ props.btnTitle }}</div>
-
-            <q-tooltip>{{ props.btnTitle }}</q-tooltip>
-          </q-btn>
-        </div> -->
     </q-card>
   </q-dialog>
 </template>

src/modules/11_discipline/components/2_InvestigateFacts/Calendar.vue

@@ -7,14 +7,18 @@ import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import allLocales from "@fullcalendar/core/locales-all";
 import listPlugin from "@fullcalendar/list";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+import type { DataDateMonthObject } from "@/modules/09_leave/interface/response/leave";
 
 import { useCounterMixin } from "@/stores/mixin";
 
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { monthYear2Thai, showLoader, hideLoader } = mixin;
+const { monthYear2Thai, showLoader, hideLoader, messageError } = mixin;
-
-import type { DataDateMonthObject } from "@/modules/09_leave/interface/response/leave";
 
+const $q = useQuasar();
 /**
  * Option ของปฏิทิน
  */
@@ -48,64 +52,7 @@ const calendarOptions = ref<CalendarOptions>({
   eventBorderColor: "#50a5fc",
   displayEventTime: false,
   editable: true,
-  events: [
+  events: [],
-    {
-      groupId: "3",
-      title: "ลากิจส่วนตัว",
-      start: "2023-10-10",
-      allDay: true,
-      status: "done",
-      color: "#E3FDDA",
-    },
-    {
-      groupId: "3",
-      title: "ลากิจส่วนตัว",
-      start: "2023-11-10",
-      allDay: true,
-      status: "done",
-      color: "#E3FDDA",
-    },
-    {
-      groupId: "3",
-      title: "ลากิจส่วนตัว",
-      start: "2023-10-11",
-      allDay: true,
-      status: "done",
-      color: "#E3FDDA",
-    },
-    {
-      groupId: "3",
-      title: "ลากิจส่วนตัว",
-      start: "2023-10-12",
-      allDay: true,
-      status: "done",
-      color: "#E3FDDA",
-    },
-    {
-      groupId: "3",
-      title: "ลากิจส่วนตัว",
-      start: "2023-10-13",
-      allDay: true,
-      status: "done",
-      color: "#E3FDDA",
-    },
-    {
-      groupId: "2",
-      title: "ลาป่วย",
-      start: "2023-10-19",
-      allDay: true,
-      status: "proceed",
-      color: "#e4f3ff",
-    },
-    {
-      groupId: "1",
-      title: "ลาป่วย",
-      start: "2023-10-20",
-      allDay: true,
-      status: "new",
-      color: "#FFF1CC",
-    },
-  ],
 });
 
 /**
@@ -124,26 +71,53 @@ const reason = ref("ยกเลิกการลา");
 const model = ref(null);
 const modeCancel = ref(true);
 
+async function fetchCalendar() {
+  showLoader();
+  await http
+    .post(config.API.investigateCalendar(), {
+      year: dateMonth.value.year,
+      mounth: dateMonth.value.month,
+    })
+    .then((res) => {
+      console.log(res);
+      const data = [
+        {
+          groupId: "2",
+          title: "ลากิจส่วนตัว",
+          start: "2023-12-12",
+          end: "2024-01-02",
+          allDay: true,
+          status: "done",
+          color: "#E3FDDA",
+        },
+      ];
+      calendarOptions.value.events = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        if (fullCalendar !== undefined) {
+          const calen = fullCalendar.value.getApi();
+          const date = new Date(dateMonth.value.year, dateMonth.value.month);
+          calen.gotoDate(date);
+        }
+        hideLoader();
+      }, 1000);
+    });
+}
+
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-  showLoader();
+  fetchCalendar();
-  setTimeout(() => {
-    if (fullCalendar !== undefined) {
-      const calen = fullCalendar.value.getApi();
-      const date = new Date(dateMonth.value.year, dateMonth.value.month);
-      calen.gotoDate(date);
-    }
-    hideLoader();
-  }, 1000);
 });
 
 /** function เปลี่ยนปฎิทิน*/
 function changCalendar() {
-  const calen = fullCalendar.value.getApi();
+  fetchCalendar();
-  const date = new Date(dateMonth.value.year, dateMonth.value.month);
-  calen.gotoDate(date);
 }
 
 /**
@@ -238,7 +212,7 @@ const monthYearThai = (val: DataDateMonthObject) => {
                   <div class="textHover col-10" @click="view(arg.event.title)">
                     {{ arg.event.title }}
                   </div>
-                  <q-btn
+                  <!-- <q-btn
                     dense
                     v-if="arg.event.groupId == 1"
                     icon="mdi-close"
@@ -246,12 +220,12 @@ const monthYearThai = (val: DataDateMonthObject) => {
                     round
                     size="8px"
                     @click="cancel(arg.event.title)"
-                  />
+                  /> -->
                 </div>
               </template>
             </FullCalendar>
             <div class="row q-col-gutter-lg justify-end q-pb-lg">
-              <div class="items-center row">
+              <!-- <div class="items-center row">
                 <q-icon
                   size="10px"
                   color="light-green"
@@ -259,8 +233,8 @@ const monthYearThai = (val: DataDateMonthObject) => {
                   class="q-mr-sm"
                 />
                 <span class="text-caption text-grey-8">สถานะอนุมัติ</span>
-              </div>
+              </div> -->
-              <div class="items-center row">
+              <!-- <div class="items-center row">
                 <q-icon
                   size="10px"
                   color="red-6"
@@ -268,7 +242,7 @@ const monthYearThai = (val: DataDateMonthObject) => {
                   class="q-mr-sm"
                 />
                 <span class="text-caption text-grey-8">สถานะไม่อนุมัติ</span>
-              </div>
+              </div> -->
               <div class="items-center row">
                 <q-icon
                   size="10px"
@@ -276,11 +250,9 @@ const monthYearThai = (val: DataDateMonthObject) => {
                   name="mdi-circle"
                   class="q-mr-sm"
                 />
-                <span class="text-caption text-grey-8"
+                <span class="text-caption text-grey-8">สืบสวน</span>
-                  >สถานะอยู่ระหว่างดำเนินการ</span
-                >
               </div>
-              <div class="items-center row">
+              <!-- <div class="items-center row">
                 <q-icon
                   size="10px"
                   color="orange"
@@ -288,7 +260,7 @@ const monthYearThai = (val: DataDateMonthObject) => {
                   class="q-mr-sm"
                 />
                 <span class="text-caption text-grey-8">สถานะใหม่</span>
-              </div>
+              </div> -->
             </div>
           </div>
         </div>

src/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, defineProps } from "vue";
-import Calendar from "@/modules/11_discipline/components/2_InvestigateFacts/Calendar.vue";
+import Calendar from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Calendar.vue";
 
 const props = defineProps({
   modal: {
@@ -14,26 +14,28 @@ const props = defineProps({
 });
 </script>
 <template>
-    <q-dialog v-model="props.modal" persistent>
+  <q-dialog v-model="props.modal" persistent>
-      <q-card style="min-width: 60vw">
+    <q-card style="min-width: 60vw">
-        <q-toolbar>
+      <q-toolbar>
-          <q-toolbar-title class="text-subtitle2 text-bold">ปฎิทิน</q-toolbar-title>
+        <q-toolbar-title class="text-subtitle2 text-bold"
-          <q-btn
+          >ปฎิทิน</q-toolbar-title
-            icon="close"
+        >
-            unelevated
+        <q-btn
-            round
+          icon="close"
-            dense
+          unelevated
-            @click="props.close"
+          round
-            style="color: #ff8080; background-color: #ffdede"
+          dense
-          />
+          @click="props.close"
-        </q-toolbar>
+          style="color: #ff8080; background-color: #ffdede"
-        <q-separator />
+        />
-        <q-card-section class="q-pa-md bg-grey-1">
+      </q-toolbar>
-         <Calendar/>
+      <q-separator />
-        </q-card-section>
+      <q-card-section class="q-pa-md bg-grey-1 scroll">
-        <!-- <q-separator /> -->
+        <Calendar />
-  
+      </q-card-section>
-        <!-- <div class="row justify-end q-px-md q-py-sm items-center">
+      <!-- <q-separator /> -->
+
+      <!-- <div class="row justify-end q-px-md q-py-sm items-center">
           <q-btn
             dense
             color="public"
@@ -47,6 +49,6 @@ const props = defineProps({
             <q-tooltip>{{ props.btnTitle }}</q-tooltip>
           </q-btn>
         </div> -->
-      </q-card>
+    </q-card>
-    </q-dialog>
+  </q-dialog>
-  </template>
+</template>

src/modules/11_discipline/components/3_InvestigateDisciplinary/Calendar.vue

@@ -7,13 +7,18 @@ import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import allLocales from "@fullcalendar/core/locales-all";
 import listPlugin from "@fullcalendar/list";
+import { useQuasar } from "quasar";
+import config from "@/app.config";
+import http from "@/plugins/http";
+
+import type { DataDateMonthObject } from "@/modules/09_leave/interface/response/leave";
 
 import { useCounterMixin } from "@/stores/mixin";
 
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
-const { monthYear2Thai } = mixin;
+const { monthYear2Thai, showLoader, hideLoader, messageError } = mixin;
 
-import type { DataDateMonthObject } from "@/modules/09_leave/interface/response/leave";
+const $q = useQuasar();
 
 /**
  * Option ของปฏิทิน
@@ -123,21 +128,48 @@ const reason = ref("ยกเลิกการลา");
 const model = ref(null);
 const modeCancel = ref(true);
 
+async function fetchCalendar() {
+  showLoader();
+  await http
+    .post(config.API.disciplinaryCalendar(), {
+      year: dateMonth.value.year,
+      mouth: dateMonth.value.month,
+    })
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((err) => {
+      messageError($q);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        if (fullCalendar !== undefined) {
+          const calen = fullCalendar.value.getApi();
+          const date = new Date(dateMonth.value.year, dateMonth.value.month);
+          calen.gotoDate(date);
+        }
+        hideLoader();
+      }, 1000);
+    });
+}
+
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-  if (fullCalendar !== undefined) {
+  fetchCalendar();
-    const calen = fullCalendar.value.getApi();
+  // if (fullCalendar !== undefined) {
-    const date = new Date(dateMonth.value.year, dateMonth.value.month);
+  //   const calen = fullCalendar.value.getApi();
-    calen.gotoDate(date);
+  //   const date = new Date(dateMonth.value.year, dateMonth.value.month);
-  }
+  //   calen.gotoDate(date);
+  // }
 });
 
 function changCalendar() {
-  const calen = fullCalendar.value.getApi();
+  fetchCalendar();
-  const date = new Date(dateMonth.value.year, dateMonth.value.month);
+  // const calen = fullCalendar.value.getApi();
-  calen.gotoDate(date);
+  // const date = new Date(dateMonth.value.year, dateMonth.value.month);
+  // calen.gotoDate(date);
 }
 
 /**
@@ -274,7 +306,7 @@ const monthYearThai = (val: DataDateMonthObject) => {
               </template>
             </FullCalendar>
             <div class="row q-col-gutter-lg justify-end q-pb-lg">
-              <div class="items-center row">
+              <!-- <div class="items-center row">
                 <q-icon
                   size="10px"
                   color="light-green"
@@ -282,8 +314,8 @@ const monthYearThai = (val: DataDateMonthObject) => {
                   class="q-mr-sm"
                 />
                 <span class="text-caption text-grey-8">สถานะอนุมัติ</span>
-              </div>
+              </div> -->
-              <div class="items-center row">
+              <!-- <div class="items-center row">
                 <q-icon
                   size="10px"
                   color="red-6"
@@ -291,7 +323,7 @@ const monthYearThai = (val: DataDateMonthObject) => {
                   class="q-mr-sm"
                 />
                 <span class="text-caption text-grey-8">สถานะไม่อนุมัติ</span>
-              </div>
+              </div> -->
               <div class="items-center row">
                 <q-icon
                   size="10px"
@@ -299,11 +331,9 @@ const monthYearThai = (val: DataDateMonthObject) => {
                   name="mdi-circle"
                   class="q-mr-sm"
                 />
-                <span class="text-caption text-grey-8"
+                <span class="text-caption text-grey-8">สอบสวน</span>
-                  >สถานะอยู่ระหว่างดำเนินการ</span
-                >
               </div>
-              <div class="items-center row">
+              <!-- <div class="items-center row">
                 <q-icon
                   size="10px"
                   color="orange"
@@ -311,7 +341,7 @@ const monthYearThai = (val: DataDateMonthObject) => {
                   class="q-mr-sm"
                 />
                 <span class="text-caption text-grey-8">สถานะใหม่</span>
-              </div>
+              </div> -->
             </div>
           </div>
         </div>

src/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
 import type { Pagination } from "@/modules/04_registry/interface/index/Main";
-import CalandarDialog from "@/modules/11_discipline/components/2_InvestigateFacts/CalandarDialog.vue";
+import CalandarDialog from "@/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue";
 
 const calendarModal = ref<boolean>(false);
-const calendarModalclose = () =>(calendarModal.value = !calendarModal.value)
+const calendarModalclose = () => (calendarModal.value = !calendarModal.value);
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
 const attrs = ref<any>(useAttrs());
@@ -73,19 +73,19 @@ function resetFilter() {
 <template>
   <div class="q-pb-sm row q-col-gutter-sm">
     <div>
-        <q-btn
+      <q-btn
-          name="calendar"
+        name="calendar"
-          round
+        round
-          size="12px"
+        size="12px"
-          flat
+        flat
-          icon="mdi-calendar-month"
+        icon="mdi-calendar-month"
-          class="q-mr-sm"
+        class="q-mr-sm"
-          color="primary"
+        color="primary"
-          @click="calendarOpen"
+        @click="calendarOpen"
-        >
+      >
-          <q-tooltip>ปฏิทิน</q-tooltip>
+        <q-tooltip>ปฏิทิน</q-tooltip>
-        </q-btn>
+      </q-btn>
-      </div>
+    </div>
     <q-space />
     <!-- ค้นหาข้อความใน table -->
     <q-input
@@ -148,10 +148,7 @@ function resetFilter() {
       <slot v-bind="props" name="columns"></slot>
     </template>
   </d-table>
-  <CalandarDialog 
+  <CalandarDialog :modal="calendarModal" :close="calendarModalclose" />
-  :modal="calendarModal"
-  :close="calendarModalclose"
-  />
 </template>
 
 <style lang="scss">