ย้าย ปฏิทิน เข้าใน ฟอร์ม

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

@@ -57,7 +57,7 @@ const calendarOptions = ref<CalendarOptions>({
   expandRows: true,
   nowIndicator: true,
   height: "100%",
-  eventColor: "#50a5fc",
+  eventColor: "#02A998",
   eventTextColor: "#fff",
   eventBorderColor: "#50a5fc",
   displayEventTime: false,
@@ -72,23 +72,38 @@ const dateMonth = ref<DataDateMonthObject>({
 });
 
 /** function เรียกข่อมูล calendar*/
+function getRandomColor() {
+  const letters = "0123456789ABCDEF";
+  let color = "#";
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}
+
 async function fetchCalendar() {
   showLoader();
   await http
     .post(config.API.investigateCalendar(), {
       year: dateMonth.value.year,
-      mounth: dateMonth.value.month,
+      month: dateMonth.value.month,
     })
     .then((res) => {
       const data = res.data.result;
-      const event = data.map((e: CaledarInvestigatefacts) => ({
+      const defaultColor = "#02A998";
+      const gradientColors = generateGradientColors(data.length);
+
+      const events = data.map((e: CaledarInvestigatefacts, index: number) => ({
         id: e.id,
         title: e.title,
         start: e.investigationDateStart,
         end: e.investigationDateEnd,
         allDay: true,
+        color:
+          data.length > 1 && index > 0 ? gradientColors[index] : defaultColor,
       }));
-      calendarOptions.value.events = event;
+
+      calendarOptions.value.events = events;
     })
     .catch((err) => {
       messageError($q, err);
@@ -105,6 +120,14 @@ async function fetchCalendar() {
     });
 }
 
+function generateGradientColors(length: number) {
+  const colors = [];
+  for (let i = 0; i < length; i++) {
+    colors.push(getRandomColor());
+  }
+  return colors;
+}
+
 /** function เปลี่ยนปฎิทิน*/
 function changCalendar() {
   fetchCalendar();
@@ -151,6 +174,26 @@ const phone = ref("000-00000000");
 const reason = ref("ยกเลิกการลา");
 const model = ref(null);
 const modeCancel = ref(true);
+
+function gotoPrevMonth() {
+  const calen = fullCalendar.value.getApi();
+  calen.prev();
+  console.log("b", calen.getDate());
+  updateDateMonth(calen.getDate());
+}
+
+function gotoNextMonth() {
+  const calen = fullCalendar.value.getApi();
+  calen.next();
+  console.log("n", calen.getDate());
+  updateDateMonth(calen.getDate());
+}
+
+function updateDateMonth(date: Date) {
+  dateMonth.value.year = date.getFullYear();
+  dateMonth.value.month = date.getMonth();
+  fetchCalendar();
+}
 </script>
 <template>
   <q-dialog v-model="props.modal">
@@ -175,8 +218,8 @@ const modeCancel = ref(true);
           <div class="row q-gutter-sm">
             <div class="col-12">
               <div class="row q-gutter-sm q-pb-sm main-content">
-                <div class="demo-app-main">
+                <div class="demo-app-main q-mb-xl">
-                  <div class="row col-12 q-mb-sm">
+                  <!-- <div class="row col-12 q-mb-sm">
                     <div class="col-xs-12 col-sm-3 col-md-2">
                       <datepicker
                         v-model="dateMonth"
@@ -209,6 +252,33 @@ const modeCancel = ref(true);
                         </template>
                       </datepicker>
                     </div>
+                  </div> -->
+                  <div class="row q-mb-sm justify-between">
+
+                      <q-btn
+                        size="12px"
+                        dense
+                        icon="mdi-chevron-left"
+                        class="self-center items-center"
+                        color="primary"
+                        @click="gotoPrevMonth"
+                      ></q-btn>
+       
+
+                      <p class="q-ma-none text-center">
+                        {{ monthYearThai(dateMonth) }}
+                      </p>
+     
+  
+                      <q-btn
+                        size="12px"
+                        dense
+                        icon="mdi-chevron-right"
+                        class="self-center items-center"
+                        color="primary"
+                        @click="gotoNextMonth"
+                      ></q-btn>
+
                   </div>
                   <FullCalendar
                     ref="fullCalendar"
@@ -239,17 +309,6 @@ const modeCancel = ref(true);
                       </div>
                     </template>
                   </FullCalendar>
-                  <div class="row q-col-gutter-lg justify-end q-pb-lg">
-                    <div class="items-center row">
-                      <q-icon
-                        size="10px"
-                        color="light-blue-14"
-                        name="mdi-circle"
-                        class="q-mr-sm"
-                      />
-                      <span class="text-caption text-grey-8">สืบสวน</span>
-                    </div>
-                  </div>
                 </div>
               </div>
             </div>
@@ -352,6 +411,7 @@ const modeCancel = ref(true);
 
 .demo-app-main {
   flex-grow: 1;
+
   /* padding: 3em; */
 }
 

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

@@ -10,6 +10,8 @@ import { useInvestigateDisStore } from "@/modules/11_discipline/store/Investigat
 import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
 
+import CalandarDialog from "@/modules/11_discipline/components/2_InvestigateFacts/CalandarDialog.vue";
+
 import type {
   FormData,
   MyObjectInvestigateRef,
@@ -139,6 +141,9 @@ const initialPagination = ref<any>({
   rowsPerPage: 0,
 });
 
+const calendarModal = ref<boolean>(false);
+const calendarModalclose = () =>(calendarModal.value = !calendarModal.value)
+
 /*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
 function validateForm() {
   const hasError = [];
@@ -452,6 +457,10 @@ function changeFormData() {
   isSave.value = true;
 }
 
+function calendarOpen() {
+  calendarModal.value = true;
+}
+
 onMounted(async () => {
   mainStore.rowsAdd = [];
   getOc();
@@ -717,27 +726,46 @@ onMounted(async () => {
                   style="border: 1px solid #d6dee1"
                 >
                   <div
-                    class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+                    class="row col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
                   >
-                    วันที่สืบสวน
+                    <div>
-                    <q-checkbox
+                      วันที่สืบสวน
-                      v-if="
+
-                        formData.investigationDateStart != null &&
+                      <q-checkbox
-                        formData.investigationDateEnd != null &&
+                        v-if="
-                        ((isReadonly && formData.investigationExtendStatus) ||
+                          formData.investigationDateStart != null &&
-                          !isReadonly)
+                          formData.investigationDateEnd != null &&
-                      "
+                          ((isReadonly && formData.investigationExtendStatus) ||
-                      :disable="isReadonly"
+                            !isReadonly)
-                      for="#extendStatus"
+                        "
-                      size="md"
+                        :disable="isReadonly"
-                      v-model="formData.investigationExtendStatus"
+                        for="#extendStatus"
-                      label="ขยายเวลา"
+                        size="md"
-                      color="primary"
+                        v-model="formData.investigationExtendStatus"
-                      dense
+                        label="ขยายเวลา"
-                      class="text-weight-medium q-ml-sm"
+                        color="primary"
-                      keep-color
+                        dense
-                      @update:model-value="changeFormData()"
+                        class="text-weight-medium q-ml-sm"
-                    />
+                        keep-color
+                        @update:model-value="changeFormData()"
+                      />
+                    </div>
+                    <q-space style="height: 1px;"/>
+                    <div>
+                      <q-btn
+                        name="calendar"
+                        round
+                        size="12px"
+                        flat
+                        dense
+                        icon="mdi-calendar-month"
+                        class="self-center items-center"
+                        color="primary"
+                        @click="calendarOpen"
+                      >
+                        <q-tooltip>ปฏิทิน</q-tooltip>
+                      </q-btn>
+                    </div>
                   </div>
                   <div class="col-12"><q-separator /></div>
                   <div class="q-pa-sm">
@@ -765,7 +793,11 @@ onMounted(async () => {
                               for="#date"
                               class="full-width cursor-pointer"
                               ref="dateRef"
-                              :input-style="isReadonly ? { color: 'black' }:{color:'teal'}"
+                              :input-style="
+                                isReadonly
+                                  ? { color: 'black' }
+                                  : { color: 'teal' }
+                              "
                               :readonly="isReadonly"
                               outlined
                               dense
@@ -852,7 +884,11 @@ onMounted(async () => {
                           <template #trigger>
                             <q-input
                               for="#dateEnd"
-                              :input-style="isReadonly ? { color: 'black' }:{color:'teal'}"
+                              :input-style="
+                                isReadonly
+                                  ? { color: 'black' }
+                                  : { color: 'teal' }
+                              "
                               ref="dateEndRef"
                               class="full-width cursor-pointer"
                               :readonly="isReadonly"
@@ -1330,6 +1366,11 @@ onMounted(async () => {
     @update:pagination="updatePagingProp"
     @returnDirector="returnDirector"
   />
+
+  <CalandarDialog 
+  :modal="calendarModal"
+  :close="calendarModalclose"
+  />
 </template>
 
 <style scoped>

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

@@ -7,7 +7,7 @@ import { useCounterMixin } from "@/stores/mixin";
 
 import config from "@/app.config";
 import http from "@/plugins/http";
-import CalandarDialog from "@/modules/11_discipline/components/2_InvestigateFacts/CalandarDialog.vue";
+
 import { useInvestigateFactStore } from "@/modules/11_discipline/store/InvestigateFactStore";
 const dataInvestigate = useInvestigateFactStore();
 const mixin = useCounterMixin();
@@ -29,8 +29,7 @@ const currentPage = ref<number>(1);
 const maxPage = ref<number>(1);
 const page = ref<number>(1);
 const rowsPerPage = ref<number>(10);
-const calendarModal = ref<boolean>(false);
+
-const calendarModalclose = () =>(calendarModal.value = !calendarModal.value)
 /**
  *pagination ของตาราง
  */
@@ -95,10 +94,6 @@ async function editPage(id: string) {
   router.push(`/discipline/investigatefacts/${id}`);
 }
 
-function calendarOpen() {
-  calendarModal.value = true;
-}
-
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
@@ -112,21 +107,6 @@ onMounted(async () => {
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
-      <div>
-        <q-btn
-          name="calendar"
-          round
-          size="12px"
-          flat
-          icon="mdi-calendar-month"
-          class="q-mr-sm"
-          color="primary"
-          @click="calendarOpen"
-        >
-          <q-tooltip>ปฏิทิน</q-tooltip>
-        </q-btn>
-      </div>
-
       <q-space />
 
       <q-input
@@ -237,9 +217,4 @@ onMounted(async () => {
       </d-table>
     </div>
   </q-card>
-
-  <CalandarDialog 
-  :modal="calendarModal"
-  :close="calendarModalclose"
-  />
 </template>

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

@@ -72,24 +72,38 @@ const dateMonth = ref<DataDateMonthObject>({
 });
 
 /** function เรียกข่อมูล calendar*/
+function getRandomColor() {
+  const letters = "0123456789ABCDEF";
+  let color = "#";
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}
+
 async function fetchCalendar() {
   showLoader();
   await http
     .post(config.API.disciplinaryCalendar(), {
       year: dateMonth.value.year,
-      mounth: dateMonth.value.month,
+      month: dateMonth.value.month,
     })
     .then((res) => {
       const data = res.data.result;
-      const event = data.map((e: CaledarDisciplinary) => ({
+      const defaultColor = "#02A998";
+      const gradientColors = generateGradientColors(data.length);
+
+      const events = data.map((e: CaledarDisciplinary, index: number) => ({
         id: e.id,
         title: e.title,
-        start: e.disciplinaryDateStart,
+        start: e.disciplinaryDateEnd,
-        end: e.disciplinaryDateEnd,
+        end: e.disciplinaryDateStart,
         allDay: true,
+        color:
+          data.length > 1 && index > 0 ? gradientColors[index] : defaultColor,
       }));
 
-      calendarOptions.value.events = event;
+      calendarOptions.value.events = events;
     })
     .catch((err) => {
       messageError($q, err);
@@ -97,15 +111,23 @@ async function fetchCalendar() {
     .finally(() => {
       setTimeout(() => {
         if (fullCalendar !== undefined) {
-        const calen = fullCalendar.value.getApi();
+          const calen = fullCalendar.value.getApi();
-        const date = new Date(dateMonth.value.year, dateMonth.value.month);
+          const date = new Date(dateMonth.value.year, dateMonth.value.month);
-        calen.gotoDate(date);
+          calen.gotoDate(date);
         }
         hideLoader();
       }, 1000);
     });
 }
 
+function generateGradientColors(length: number) {
+  const colors = [];
+  for (let i = 0; i < length; i++) {
+    colors.push(getRandomColor());
+  }
+  return colors;
+}
+
 /** function เปลี่ยนปฎิทิน*/
 function changCalendar() {
   fetchCalendar();
@@ -148,6 +170,26 @@ const phone = ref("000-00000000");
 const reason = ref("ยกเลิกการลา");
 const model = ref(null);
 const modeCancel = ref(true);
+
+function gotoPrevMonth() {
+  const calen = fullCalendar.value.getApi();
+  calen.prev();
+  console.log("b", calen.getDate());
+  updateDateMonth(calen.getDate());
+}
+
+function gotoNextMonth() {
+  const calen = fullCalendar.value.getApi();
+  calen.next();
+  console.log("n", calen.getDate());
+  updateDateMonth(calen.getDate());
+}
+
+function updateDateMonth(date: Date) {
+  dateMonth.value.year = date.getFullYear();
+  dateMonth.value.month = date.getMonth();
+  fetchCalendar();
+}
 </script>
 <template>
   <q-dialog v-model="props.modal">
@@ -173,7 +215,7 @@ const modeCancel = ref(true);
             <div class="col-12">
               <div class="row q-gutter-sm q-pb-sm main-content">
                 <div class="demo-app-main">
-                  <div class="row col-12 q-mb-sm">
+                  <!-- <div class="row col-12 q-mb-sm">
                     <div class="col-xs-12 col-sm-3 col-md-2">
                       <datepicker
                         v-model="dateMonth"
@@ -206,6 +248,29 @@ const modeCancel = ref(true);
                         </template>
                       </datepicker>
                     </div>
+                  </div> -->
+                  <div class="row q-mb-sm justify-between">
+                    <q-btn
+                      size="12px"
+                      dense
+                      icon="mdi-chevron-left"
+                      class="self-center items-center"
+                      color="primary"
+                      @click="gotoPrevMonth"
+                    ></q-btn>
+
+                    <p class="q-ma-none text-center">
+                      {{ monthYearThai(dateMonth) }}
+                    </p>
+
+                    <q-btn
+                      size="12px"
+                      dense
+                      icon="mdi-chevron-right"
+                      class="self-center items-center"
+                      color="primary"
+                      @click="gotoNextMonth"
+                    ></q-btn>
                   </div>
                   <FullCalendar
                     ref="fullCalendar"

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

@@ -4,7 +4,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
-
+import CalandarDialog from "@/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue";
 /**import type*/
 import type { QTableProps } from "quasar";
 import type {
@@ -32,6 +32,9 @@ import { useComplainstDataStore } from "@/modules/11_discipline/store/Complaints
 import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
 
+const calendarModal = ref<boolean>(false);
+const calendarModalclose = () => (calendarModal.value = !calendarModal.value);
+
 const complainstStore = useComplainstDataStore();
 const investigateDis = useInvestigateDisStore();
 const mainStore = useDisciplineMainStore();
@@ -432,6 +435,10 @@ function changeFormData() {
   isSave.value = true;
 }
 
+function calendarOpen() {
+  calendarModal.value = true;
+}
+
 /** Hook */
 onMounted(async () => {
   mainStore.rowsAdd = [];
@@ -779,7 +786,7 @@ onMounted(async () => {
                     style="border: 1px solid #d6dee1"
                   >
                     <div
-                      class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+                      class="row col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
                     >
                       วันที่สอบสวน
 
@@ -800,6 +807,22 @@ onMounted(async () => {
                         keep-color
                         @update:model-value="changeFormData()"
                       />
+                      <q-space style="height: 1px" />
+                      <div>
+                        <q-btn
+                          name="calendar"
+                          round
+                          size="12px"
+                          flat
+                          dense
+                          icon="mdi-calendar-month"
+                          class="self-center items-center"
+                          color="primary"
+                          @click="calendarOpen"
+                        >
+                          <q-tooltip>ปฏิทิน</q-tooltip>
+                        </q-btn>
+                      </div>
                     </div>
                     <div class="col-12"><q-separator /></div>
                     <div class="q-pa-sm">
@@ -1482,4 +1505,6 @@ onMounted(async () => {
     @update:pagination="updatePaging"
     @returnDirector="returnDirector"
   />
+
+  <CalandarDialog :modal="calendarModal" :close="calendarModalclose" />
 </template>

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

@@ -1,10 +1,7 @@
 <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/3_InvestigateDisciplinary/CalandarDialog.vue";
 
-const calendarModal = ref<boolean>(false);
-const calendarModalclose = () => (calendarModal.value = !calendarModal.value);
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
 const attrs = ref<any>(useAttrs());
@@ -46,10 +43,6 @@ const emit = defineEmits([
   "update:editvisible",
 ]);
 
-function calendarOpen() {
-  calendarModal.value = true;
-}
-
 function paginationLabel(start: string, end: string, total: string) {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
@@ -72,20 +65,6 @@ function resetFilter() {
 
 <template>
   <div class="q-pb-sm row q-col-gutter-sm">
-    <div>
-      <q-btn
-        name="calendar"
-        round
-        size="12px"
-        flat
-        icon="mdi-calendar-month"
-        class="q-mr-sm"
-        color="primary"
-        @click="calendarOpen"
-      >
-        <q-tooltip>ปฏิทิน</q-tooltip>
-      </q-btn>
-    </div>
     <q-space />
     <!-- ค้นหาข้อความใน table -->
     <q-input
@@ -148,7 +127,6 @@ function resetFilter() {
       <slot v-bind="props" name="columns"></slot>
     </template>
   </d-table>
-  <CalandarDialog :modal="calendarModal" :close="calendarModalclose" />
 </template>
 
 <style lang="scss">