From fabc55134c82489180260ef633c6c3cc63265ddd Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Thu, 7 Dec 2023 13:18:42 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=99=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B8=AA=E0=B8=B7?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=AA=E0=B8=A7=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2_InvestigateFacts/CalandarDialog.vue     | 227 ++++-------
 .../2_InvestigateFacts/EditPage.vue           |   7 +-
 .../components/2_InvestigateFacts/Form.vue    | 373 ++++++++++--------
 .../CalandarDialog.vue                        |   5 +-
 .../interface/request/investigateFact.ts      |  49 ++-
 .../11_discipline/interface/response/Main.ts  |  10 +-
 6 files changed, 348 insertions(+), 323 deletions(-)

diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/CalandarDialog.vue b/src/modules/11_discipline/components/2_InvestigateFacts/CalandarDialog.vue
index f704aca14..d11c1ceb2 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/CalandarDialog.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/CalandarDialog.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
-import config from "@/app.config";
-import http from "@/plugins/http";
+import { ref, watch, type PropType } from "vue";
+// import config from "@/app.config";
+// import http from "@/plugins/http";
 import { useQuasar } from "quasar";
 import FullCalendar from "@fullcalendar/vue3";
 import dayGridPlugin from "@fullcalendar/daygrid";
@@ -12,7 +12,7 @@ import allLocales from "@fullcalendar/core/locales-all";
 import listPlugin from "@fullcalendar/list";
 
 import type { DataDateMonthObject } from "@/modules/09_leave/interface/response/leave";
-import type { CaledarInvestigatefacts } from "@/modules/11_discipline/interface/response/Main";
+import type { ExtendHistoryObject } from "@/modules/11_discipline/interface/response/Main";
 
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -23,6 +23,10 @@ const { monthYear2Thai, showLoader, hideLoader, messageError, dateToISO } =
 const $q = useQuasar();
 
 const props = defineProps({
+  lists: {
+    type: Array as PropType<ExtendHistoryObject[]>,
+    default: [],
+  },
   modal: {
     type: Boolean,
     default: false,
@@ -57,8 +61,8 @@ const calendarOptions = ref<CalendarOptions>({
   expandRows: true,
   nowIndicator: true,
   height: "100%",
-  eventColor: "#02A998",
-  eventTextColor: "#fff",
+  eventColor: "#E3FDDA",
+  eventTextColor: "#000000",
   eventBorderColor: "#50a5fc",
   displayEventTime: false,
   editable: true,
@@ -73,53 +77,86 @@ 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;
+  return (
+    "hsl(" +
+    360 * Math.random() +
+    "," +
+    (25 + 70 * Math.random()) +
+    "%," +
+    (85 + 10 * Math.random()) +
+    "%)"
+  );
 }
 
 async function fetchCalendar() {
   showLoader();
-  await http
-    .post(config.API.investigateCalendar(), {
-      year: dateMonth.value.year,
-      month: dateMonth.value.month,
-    })
-    .then((res) => {
-      const data = res.data.result;
-      const defaultColor = "#02A998";
-      const gradientColors = generateGradientColors(data.length);
+  const defaultColor = "#E3FDDA";
+  const gradientColors = generateGradientColors(props.lists.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,
-      }));
+  const events = await props.lists.map(
+    (e: ExtendHistoryObject, index: number) => ({
+      id: index.toString(),
+      title: e.name,
+      start: e.dateStart,
+      end: e.dateEnd,
+      allDay: false,
+      color:
+        props.lists.length > 1 && index > 0
+          ? gradientColors[index]
+          : defaultColor,
+    })
+  );
+  calendarOptions.value.events = events;
 
-      calendarOptions.value.events = events;
-    })
-    .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);
-    });
+  setTimeout(() => {
+    if (fullCalendar !== undefined) {
+      const calen = fullCalendar.value.getApi();
+      const date = new Date(dateMonth.value.year, dateMonth.value.month);
+      calen.gotoDate(date);
+    }
+    hideLoader();
+  }, 1000);
 }
 
+// async function fetchCalendar() {
+//   showLoader();
+//   await http
+//     .post(config.API.investigateCalendar(), {
+//       year: dateMonth.value.year,
+//       month: dateMonth.value.month,
+//     })
+//     .then((res) => {
+//       const data = res.data.result;
+//       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 = events;
+//     })
+//     .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);
+//     });
+// }
+
 function generateGradientColors(length: number) {
   const colors = [];
   for (let i = 0; i < length; i++) {
@@ -128,11 +165,6 @@ function generateGradientColors(length: number) {
   return colors;
 }
 
-/** function เปลี่ยนปฎิทิน*/
-function changCalendar() {
-  fetchCalendar();
-}
-
 /**
  * function convert เดือนปี
  * @param val เดือนปี
@@ -164,15 +196,6 @@ watch(
  */
 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);
 
 function gotoPrevMonth() {
@@ -195,13 +218,14 @@ function updateDateMonth(date: Date) {
   fetchCalendar();
 }
 </script>
+
 <template>
   <q-dialog v-model="props.modal">
     <q-card style="min-width: 60vw">
       <q-toolbar>
-        <q-toolbar-title class="text-subtitle2 text-bold"
-          >ปฎิทิน</q-toolbar-title
-        >
+        <q-toolbar-title class="text-subtitle2 text-bold">
+          ปฎิทินแสดงวันที่สืบสวน
+        </q-toolbar-title>
         <q-btn
           icon="close"
           unelevated
@@ -213,6 +237,7 @@ function updateDateMonth(date: Date) {
       </q-toolbar>
 
       <q-separator />
+
       <q-card-section class="q-pa-md bg-grey-1 scroll">
         <div class="q-ma-sm">
           <div class="row q-gutter-sm">
@@ -317,84 +342,6 @@ function updateDateMonth(date: Date) {
       </q-card-section>
     </q-card>
   </q-dialog>
-
-  <!-- modal ขอยกเลิก/ดูรายละเอียด -->
-  <q-dialog v-model="modalCancel" persistent>
-    <q-card :style="modeCancel == true ? 'min-width: 50%;' : 'min-width:30%'">
-      <q-card-section class="row items-center q-pa-sm">
-        <div v-if="modeCancel == false" class="text-bold q-pl-sm">
-          รายละเอียดของ{{ title }}
-        </div>
-        <div v-else class="text-bold q-pl-sm">ขอยกเลิก{{ title }}</div>
-        <q-space />
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          v-close-popup
-          style="color: #ff8080; background-color: #ffdede"
-        />
-      </q-card-section>
-      <q-separator />
-      <q-card-section class="q-p-md row q-gutter-y-md">
-        <div flat :class="modeCancel == true ? 'col-xs-6 col-sm-6' : 'col-12'">
-          <div class="col-12 q-col-gutter-sm row items-center">
-            <div class="col-6 text-grey-7">เขียนที่</div>
-            <div class="col-6 text-black">{{ location }}</div>
-            <div class="col-6 text-grey-7">เรื่องและเหตุผลการลา</div>
-            <div class="col-6 text-black">{{ subject }}</div>
-            <div class="col-6 text-grey-7">วัน เดือน ปีเริ่มต้น</div>
-            <div class="col-6 text-black">{{ dateStart }}</div>
-            <div class="col-6 text-grey-7">วัน เดือน ปีสิ้นสุด</div>
-            <div class="col-6 text-black">{{ dateEnd }}</div>
-            <div class="col-6 text-grey-7">จำนวนวันที่ลา</div>
-            <div class="col-6 text-black">{{ numDate }}</div>
-            <div class="col-6 text-grey-7">สถานที่ติดต่อขณะลา</div>
-            <div class="col-6 text-black">{{ place }}</div>
-            <div class="col-6 text-grey-7">หมายเลขโทรศัพท์</div>
-            <div class="col-6 text-black">{{ phone }}</div>
-          </div>
-        </div>
-        <div flat class="col-xs-6 col-sm-6" v-if="modeCancel == true">
-          <q-input
-            v-model="reason"
-            type="textarea"
-            label="กรอกเหตุผล"
-            outlined
-            dense
-          />
-          <q-file
-            outlined
-            v-model="model"
-            label="เลือกไฟล์เอกสารหลักฐาน"
-            class="q-mt-md"
-            use-chips
-            dense
-          >
-            <template v-slot:prepend>
-              <q-icon name="attach_file" />
-            </template>
-          </q-file>
-        </div>
-      </q-card-section>
-      <q-separator />
-      <q-card-section
-        class="row items-center q-pa-sm"
-        v-if="modeCancel == true"
-      >
-        <q-space />
-        <q-btn
-          label="ยืนยัน"
-          unelevated
-          color="secondary"
-          dense
-          class="q-px-md"
-          v-close-popup
-        />
-      </q-card-section>
-    </q-card>
-  </q-dialog>
 </template>
 <style scope lang="scss">
 .main-content {
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue b/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
index 964d3274d..02b4f6390 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/EditPage.vue
@@ -56,6 +56,7 @@ const data = reactive<FormData>({
   respondentType: "",
   organizationId: "",
   persons: [],
+  investigationExtendHistory: [],
 });
 
 /** ข้อมูล v-model ของฟอร์มเรื่องร้องเรียน */
@@ -139,7 +140,7 @@ function getData() {
     .get(config.API.investigateById(id.value))
     .then((res) => {
       const dataList = res.data.result;
-      console.log(dataList);
+      // console.log(dataList);
       data.id = dataList.id;
       data.idComplaint = dataList.idComplaint;
       data.respondentType = dataList.respondentType;
@@ -160,7 +161,8 @@ function getData() {
       data.investigationStatusResult = dataList.investigationStatusResult;
       data.investigationExtendStatus = dataList.investigationExtendStatus;
       data.investigationDaysExtend = dataList.investigationDaysExtend;
-      console.log(dataList);
+      data.investigationExtendHistory = dataList.investigationExtendHistory ?? [];
+      // console.log(dataList);
     })
     .catch((e) => {
       messageError($q, e);
@@ -176,7 +178,6 @@ function getData() {
  */
 async function onSubmit(data: any) {
   // put
-  console.log("edit", data);
   showLoader();
   http
     .put(config.API.investigateById(id.value), data)
diff --git a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
index 3a384f1ff..46d79d675 100644
--- a/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
+++ b/src/modules/11_discipline/components/2_InvestigateFacts/Form.vue
@@ -64,6 +64,7 @@ const daysExtendRef = ref<Object | null>(null);
 const investigationStatusResultRef = ref<Object | null>(null);
 const investigationCauseTextRef = ref<Object | null>(null);
 const resultRef = ref<Object | null>(null);
+const investigationExtendStatus = ref<boolean>(false);
 
 const isSave = ref<boolean>(false); // มีการแก้ไขรอบันทึก
 const isReadonly = ref<boolean>(false); // อ่านได้อย่างเดียว
@@ -114,6 +115,7 @@ const formData = reactive<FormData>({
   respondentType: "",
   organizationId: "",
   persons: [],
+  investigationExtendHistory: [],
 });
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
@@ -142,7 +144,7 @@ const initialPagination = ref<any>({
 });
 
 const calendarModal = ref<boolean>(false);
-const calendarModalclose = () =>(calendarModal.value = !calendarModal.value)
+const calendarModalclose = () => (calendarModal.value = !calendarModal.value);
 
 /*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
 function validateForm() {
@@ -161,7 +163,7 @@ function validateForm() {
     onSubmit();
   } else {
     console.log("ไม่ผ่าน ");
-    console.log(hasError);
+    // console.log(hasError);
   }
 }
 
@@ -179,6 +181,7 @@ function onSubmit() {
       }
       props.onSubmit(formData);
       isSave.value = false;
+      investigationExtendStatus.value = false;
     },
     "ยืนยันการบันทึกข้อมูล",
     "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
@@ -189,15 +192,19 @@ function onSubmit() {
  * ฟังชั้นคำนวณเวลาวันที่สิ้นสุดจาก วันที่สิ้นสุดการสืบสวน
  * @param val จำนวนวันที่ต้องการขยาย
  */
-function calEndDate(val: string) {
+async function calEndDate(val: string) {
   changeFormData();
-  const date = new Date(props.data.investigationDateEnd);
-  const dateNew = new Date();
-  formData.investigationDateEnd = new Date(
-    dateNew.setDate(date.getDate() + Number(val))
+  const date = await new Date(props.data.investigationDateEnd);
+  formData.investigationDateEnd = await new Date(
+    date.setDate(date.getDate() + Number(val))
   );
 }
 
+function resetExtend() {
+  formData.investigationDateEnd = props.data.investigationDateEnd;
+  formData.investigationDaysExtend = 0;
+}
+
 const modal = ref<boolean>(false);
 const filterKeyword2 = ref<string>("");
 const type = ref<string>("");
@@ -243,6 +250,7 @@ watch(props.data, async () => {
     formData.disciplineInvestigateRelevantDocs =
       props.data.disciplineInvestigateRelevantDocs;
     formData.status = props.data.status;
+    formData.investigationExtendHistory = props.data.investigationExtendHistory;
 
     mainStore.rowsAdd = props.data.persons;
 
@@ -730,27 +738,27 @@ onMounted(async () => {
                   >
                     <div>
                       วันที่สืบสวน
-
                       <q-checkbox
                         v-if="
-                          formData.investigationDateStart != null &&
-                          formData.investigationDateEnd != null &&
-                          ((isReadonly && formData.investigationExtendStatus) ||
-                            !isReadonly)
+                          props.data.investigationExtendHistory.length > 0 &&
+                          !isReadonly
                         "
                         :disable="isReadonly"
                         for="#extendStatus"
                         size="md"
-                        v-model="formData.investigationExtendStatus"
+                        v-model="investigationExtendStatus"
                         label="ขยายเวลา"
                         color="primary"
                         dense
                         class="text-weight-medium q-ml-sm"
                         keep-color
-                        @update:model-value="changeFormData()"
+                        @update:model-value="
+                          changeFormData();
+                          resetExtend();
+                        "
                       />
                     </div>
-                    <q-space style="height: 1px;"/>
+                    <q-space style="height: 1px" />
                     <div>
                       <q-btn
                         name="calendar"
@@ -769,157 +777,204 @@ onMounted(async () => {
                   </div>
                   <div class="col-12"><q-separator /></div>
                   <div class="q-pa-sm">
-                    <div class="q-col-gutter-sm row">
-                      <div
-                        class="col-3"
-                        v-if="!formData.investigationExtendStatus"
-                      >
-                        <datepicker
-                          menu-class-name="modalfix"
-                          :readonly="isReadonly"
-                          v-model="formData.investigationDateStart"
-                          :locale="'th'"
-                          autoApply
-                          :enableTimePicker="false"
-                          week-start="0"
-                          @update:model-value="changeFormData()"
-                        >
-                          <template #year="{ year }">{{ year + 543 }}</template>
-                          <template #year-overlay-value="{ value }">{{
-                            parseInt(value + 543)
-                          }}</template>
-                          <template #trigger>
-                            <q-input
-                              for="#date"
-                              class="full-width cursor-pointer"
-                              ref="dateRef"
-                              :input-style="
-                                isReadonly
-                                  ? { color: 'black' }
-                                  : { color: 'teal' }
-                              "
+                    <div class="q-col-gutter-sm row col-12">
+                      <div class="col-12">
+                        <div class="row q-col-gutter-sm">
+                          <div v-if="investigationExtendStatus" class="col-3">
+                            <q-select
                               :readonly="isReadonly"
+                              for="#daysExtend"
                               outlined
                               dense
                               lazy-rules
-                              borderless
+                              ref="daysExtendRef"
+                              v-model="formData.investigationDaysExtend"
+                              :options="investigateFactStore.daysExtendOp"
+                              label="จำนวนวันที่ต้องการขยาย"
+                              emit-value
                               hide-bottom-space
-                              :model-value="
-                                formData.investigationDateStart
-                                  ? date2Thai(formData.investigationDateStart)
-                                  : null
-                              "
+                              map-options
                               :rules="[
                                 (val) =>
-                                  !!val ||
-                                  `${'กรุณาเลือกวันที่เริ่มการสืบสวน'}`,
+                                  formData.investigationExtendStatus
+                                    ? !!val ||
+                                      'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
+                                    : true,
                               ]"
-                              :label="`${'วันที่เริ่มการสืบสวน'}`"
-                            >
-                              <template v-slot:prepend>
-                                <q-icon
-                                  name="event"
-                                  class="cursor-pointer"
-                                  color="primary"
-                                >
-                                </q-icon>
+                              option-label="name"
+                              option-value="id"
+                              use-input
+                              @update:model-value="calEndDate"
+                              ><template v-slot:no-option>
+                                <q-item>
+                                  <q-item-section class="text-grey">
+                                    ไม่มีข้อมูล
+                                  </q-item-section>
+                                </q-item>
                               </template>
-                            </q-input>
-                          </template>
-                        </datepicker>
+                            </q-select>
+                          </div>
+
+                          <div v-if="!investigationExtendStatus" class="col-3">
+                            <datepicker
+                              menu-class-name="modalfix"
+                              :readonly="
+                                isReadonly ||
+                                formData.investigationExtendHistory.length > 0
+                              "
+                              v-model="formData.investigationDateStart"
+                              :locale="'th'"
+                              autoApply
+                              :enableTimePicker="false"
+                              week-start="0"
+                              @update:model-value="changeFormData()"
+                            >
+                              <template #year="{ year }">{{
+                                year + 543
+                              }}</template>
+                              <template #year-overlay-value="{ value }">{{
+                                parseInt(value + 543)
+                              }}</template>
+                              <template #trigger>
+                                <q-input
+                                  for="#date"
+                                  class="full-width cursor-pointer"
+                                  ref="dateRef"
+                                  :input-style="
+                                    isReadonly ||
+                                    formData.investigationExtendHistory.length >
+                                      0
+                                      ? { color: 'black' }
+                                      : { color: 'teal' }
+                                  "
+                                  :readonly="
+                                    isReadonly ||
+                                    formData.investigationExtendHistory.length >
+                                      0
+                                  "
+                                  outlined
+                                  dense
+                                  lazy-rules
+                                  borderless
+                                  hide-bottom-space
+                                  :model-value="
+                                    formData.investigationDateStart
+                                      ? date2Thai(
+                                          formData.investigationDateStart
+                                        )
+                                      : null
+                                  "
+                                  :rules="[
+                                    (val) =>
+                                      !!val ||
+                                      `${'กรุณาเลือกวันที่เริ่มการสืบสวน'}`,
+                                  ]"
+                                  :label="`${'วันที่เริ่มการสืบสวน'}`"
+                                >
+                                  <template v-slot:prepend>
+                                    <q-icon
+                                      name="event"
+                                      class="cursor-pointer"
+                                      color="primary"
+                                    >
+                                    </q-icon>
+                                  </template>
+                                </q-input>
+                              </template>
+                            </datepicker>
+                          </div>
+                          <div class="col-3">
+                            <datepicker
+                              menu-class-name="modalfix"
+                              v-model="formData.investigationDateEnd"
+                              :readonly="
+                                isReadonly ||
+                                formData.investigationExtendHistory.length > 0
+                              "
+                              :locale="'th'"
+                              autoApply
+                              :enableTimePicker="false"
+                              week-start="0"
+                              @update:model-value="changeFormData()"
+                            >
+                              <template #year="{ year }">{{
+                                year + 543
+                              }}</template>
+                              <template #year-overlay-value="{ value }">{{
+                                parseInt(value + 543)
+                              }}</template>
+                              <template #trigger>
+                                <q-input
+                                  for="#dateEnd"
+                                  :input-style="
+                                    isReadonly ||
+                                    formData.investigationExtendHistory.length >
+                                      0
+                                      ? { color: 'black' }
+                                      : { color: 'teal' }
+                                  "
+                                  ref="dateEndRef"
+                                  class="full-width cursor-pointer"
+                                  :readonly="
+                                    isReadonly ||
+                                    formData.investigationExtendHistory.length >
+                                      0
+                                  "
+                                  outlined
+                                  dense
+                                  lazy-rules
+                                  hide-bottom-space
+                                  borderless
+                                  :model-value="
+                                    formData.investigationDateEnd
+                                      ? date2Thai(formData.investigationDateEnd)
+                                      : null
+                                  "
+                                  :rules="[
+                                    (val) =>
+                                      !!val ||
+                                      `${'กรุณาเลือกวันที่สิ้นสุดการสืบสวน'}`,
+                                  ]"
+                                  :label="`${'วันที่สิ้นสุดการสืบสวน'}`"
+                                >
+                                  <template v-slot:prepend>
+                                    <q-icon
+                                      name="event"
+                                      class="cursor-pointer"
+                                      color="primary"
+                                    >
+                                    </q-icon>
+                                  </template>
+                                </q-input>
+                              </template>
+                            </datepicker>
+                          </div>
+                        </div>
                       </div>
 
+                      <!-- วันที่สืบสวน (List Log) -->
                       <div
-                        class="col-3"
-                        v-if="formData.investigationExtendStatus"
+                        v-if="
+                          formData.investigationExtendHistory !== null &&
+                          formData.investigationExtendHistory.length > 1
+                        "
+                        class="col-12 fixed-height-history"
                       >
-                        <q-select
-                          :readonly="isReadonly"
-                          for="#daysExtend"
-                          outlined
-                          dense
-                          lazy-rules
-                          ref="daysExtendRef"
-                          v-model="formData.investigationDaysExtend"
-                          :options="investigateFactStore.daysExtendOp"
-                          label="จำนวนวันที่ต้องการขยาย"
-                          emit-value
-                          hide-bottom-space
-                          map-options
-                          :rules="[
-                            (val) =>
-                              formData.investigationExtendStatus
-                                ? !!val || 'กรุณาเลือกจำนวนวันที่ต้องการขยาย'
-                                : true,
-                          ]"
-                          option-label="name"
-                          option-value="id"
-                          use-input
-                          @update:model-value="calEndDate"
-                          ><template v-slot:no-option>
-                            <q-item>
-                              <q-item-section class="text-grey">
-                                ไม่มีข้อมูล
-                              </q-item-section>
-                            </q-item>
-                          </template>
-                        </q-select>
-                      </div>
-
-                      <div class="col-3">
-                        <datepicker
-                          menu-class-name="modalfix"
-                          v-model="formData.investigationDateEnd"
-                          :readonly="isReadonly"
-                          :locale="'th'"
-                          autoApply
-                          :enableTimePicker="false"
-                          week-start="0"
-                          @update:model-value="changeFormData()"
-                        >
-                          <template #year="{ year }">{{ year + 543 }}</template>
-                          <template #year-overlay-value="{ value }">{{
-                            parseInt(value + 543)
-                          }}</template>
-                          <template #trigger>
-                            <q-input
-                              for="#dateEnd"
-                              :input-style="
-                                isReadonly
-                                  ? { color: 'black' }
-                                  : { color: 'teal' }
-                              "
-                              ref="dateEndRef"
-                              class="full-width cursor-pointer"
-                              :readonly="isReadonly"
-                              outlined
-                              dense
-                              lazy-rules
-                              hide-bottom-space
-                              borderless
-                              :model-value="
-                                formData.investigationDateEnd
-                                  ? date2Thai(formData.investigationDateEnd)
-                                  : null
-                              "
-                              :rules="[
-                                (val) =>
-                                  !!val ||
-                                  `${'กรุณาเลือกวันที่สิ้นสุดการสืบสวน'}`,
-                              ]"
-                              :label="`${'วันที่สิ้นสุดการสืบสวน'}`"
-                            >
-                              <template v-slot:prepend>
-                                <q-icon
-                                  name="event"
-                                  class="cursor-pointer"
-                                  color="primary"
-                                >
-                                </q-icon>
-                              </template>
-                            </q-input>
-                          </template>
-                        </datepicker>
+                        <q-list bordered separator>
+                          <q-item
+                            v-for="(
+                              e, key
+                            ) in formData.investigationExtendHistory.slice(1)"
+                          >
+                            <q-item-section :key="key">
+                              {{ e.name }} ({{ e.daysExtend }} วัน)
+                              <p class="q-mb-none">
+                                {{ date2Thai(e.dateStart) }} -
+                                {{ date2Thai(e.dateEnd) }}
+                              </p>
+                            </q-item-section>
+                          </q-item>
+                        </q-list>
                       </div>
                     </div>
                   </div>
@@ -1367,9 +1422,10 @@ onMounted(async () => {
     @returnDirector="returnDirector"
   />
 
-  <CalandarDialog 
-  :modal="calendarModal"
-  :close="calendarModalclose"
+  <CalandarDialog
+    :modal="calendarModal"
+    :close="calendarModalclose"
+    :lists="props.data.investigationExtendHistory"
   />
 </template>
 
@@ -1377,5 +1433,8 @@ onMounted(async () => {
 .q-banner {
   min-height: 25px;
 }
+.fixed-height-history {
+  overflow-y: auto;
+  height: 150px;
+}
 </style>
-@/modules/11_discipline/store/store
diff --git a/src/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue b/src/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue
index a3feed25d..0abc68764 100644
--- a/src/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue
+++ b/src/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue
@@ -96,14 +96,15 @@ async function fetchCalendar() {
       const events = data.map((e: CaledarDisciplinary, index: number) => ({
         id: e.id,
         title: e.title,
-        start: e.disciplinaryDateEnd,
-        end: e.disciplinaryDateStart,
+        start: e.disciplinaryDateStart,
+        end: e.disciplinaryDateEnd,
         allDay: true,
         color:
           data.length > 1 && index > 0 ? gradientColors[index] : defaultColor,
       }));
 
       calendarOptions.value.events = events;
+      console.log("events===>",events)
     })
     .catch((err) => {
       messageError($q, err);
diff --git a/src/modules/11_discipline/interface/request/investigateFact.ts b/src/modules/11_discipline/interface/request/investigateFact.ts
index 93309b343..02aafc9fb 100644
--- a/src/modules/11_discipline/interface/request/investigateFact.ts
+++ b/src/modules/11_discipline/interface/request/investigateFact.ts
@@ -1,6 +1,6 @@
 interface FormData {
-  id:string
-  idComplaint:string
+  id: string;
+  idComplaint: string;
   investigationDetail: string;
   complaint: string;
   complaintdetail: string;
@@ -11,27 +11,37 @@ interface FormData {
   fileComplaint: File | null;
   investigationExtendStatus: boolean | null;
   investigationDateStart: Date | null;
-  investigationDateEnd: Date|null;
+  investigationDateEnd: Date | null;
   investigationDaysExtend: number | null;
   investigationStatusResult: string;
   investigationCauseText: string;
-  complaintStatus:string
-  result: string
-  directors:object|null
-  status:string
-  disciplineInvestigateDocs:any
-  disciplineInvestigateRelevantDocs:any
-  documentFile:any|null
-  respondentType:string
-  organizationId:string
-  persons:object|null
+  complaintStatus: string;
+  result: string;
+  directors: object | null;
+  status: string;
+  disciplineInvestigateDocs: any;
+  disciplineInvestigateRelevantDocs: any;
+  documentFile: any | null;
+  respondentType: string;
+  organizationId: string;
+  persons: object | null;
+  investigationExtendHistory: ExtendHistoryObject[];
 }
-interface ArrayPerson{
-  id:string
-  name:string
-  position:string
-  email:string
-  phone:string
+
+interface ExtendHistoryObject {
+  name: string;
+  num: number;
+  daysExtend: number | null;
+  dateStart: Date;
+  dateEnd: Date;
+}
+
+interface ArrayPerson {
+  id: string;
+  name: string;
+  position: string;
+  email: string;
+  phone: string;
 }
 interface MyObjectInvestigateRef {
   complaint: object | null;
@@ -49,5 +59,4 @@ interface MyObjectInvestigateRef {
   [key: string]: any;
 }
 
-
 export type { FormData, MyObjectInvestigateRef };
diff --git a/src/modules/11_discipline/interface/response/Main.ts b/src/modules/11_discipline/interface/response/Main.ts
index 37ebe3441..30f3fa71b 100644
--- a/src/modules/11_discipline/interface/response/Main.ts
+++ b/src/modules/11_discipline/interface/response/Main.ts
@@ -2,12 +2,14 @@ interface DataOptionRes {
   organizationId: string;
   organizationName: string;
 }
+
 interface CaledarInvestigatefacts {
   id: string;
   title: string;
   investigationDateStart: Date;
   investigationDateEnd: Date;
 }
+
 interface CaledarDisciplinary {
   id: string;
   title: string;
@@ -15,4 +17,10 @@ interface CaledarDisciplinary {
   disciplinaryDateStart: Date;
 }
 
-export type { DataOptionRes, CaledarInvestigatefacts, CaledarDisciplinary };
+interface ExtendHistoryObject {
+  name: string;
+  dateStart: Date;
+  dateEnd: Date;
+}
+
+export type { DataOptionRes, CaledarInvestigatefacts, CaledarDisciplinary, ExtendHistoryObject };