Merge branch 'develop' into devTee

src/modules/15_development/components/Other.vue

@@ -13,8 +13,13 @@ import { useDevelopmentDataStore } from "@/modules/15_development/store/developm
 
 const $q = useQuasar();
 const store = useDevelopmentDataStore();
-const { showLoader, hideLoader, dialogConfirm, date2Thai, messageError } =
-  useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  calculateDurationYmd,
+  date2Thai,
+  messageError,
+} = useCounterMixin();
 
 const provinceOp = ref<DataOption[]>([]);
 const provinceOpMain = ref<DataOption[]>([]);
@@ -63,10 +68,46 @@ function changeDateStart() {
     const endDate = new Date(store.formAddProject.dateEnd);
     if (startDate > endDate) {
       store.formAddProject.dateEnd = null;
+      store.formAddProject.totalDate = null;
+    } else {
+      daysBetweenDates(
+        store.formAddProject.dateStart,
+        store.formAddProject.dateEnd
+      );
     }
   }
 }
 
+function changeDateEnd() {
+  daysBetweenDates(
+    store.formAddProject.dateStart,
+    store.formAddProject.dateEnd
+  );
+}
+
+async function daysBetweenDates(date1: any, date2: any) {
+  const newStartDate = resetTimeToMidnight(new Date(date1));
+  const newEndDate = resetTimeToMidnight(new Date(date2));
+
+  const differenceInMilliseconds =
+    newEndDate.getTime() - newStartDate.getTime();
+
+  const differenceInDays = Math.floor(
+    differenceInMilliseconds / (1000 * 60 * 60 * 24)
+  );
+
+  store.formAddProject.totalDate = differenceInDays + 1;
+}
+
+function resetTimeToMidnight(date: Date): Date {
+  const newDate = new Date(date);
+  newDate.setHours(0);
+  newDate.setMinutes(0);
+  newDate.setSeconds(0);
+  newDate.setMilliseconds(0);
+  return newDate;
+}
+
 /**
  * Fuction Filter จังหวัด
  * @param val ค่าตัวพิมพ์ค้นหา
@@ -136,6 +177,7 @@ onMounted(() => {
         :enableTimePicker="false"
         week-start="0"
         :min-date="store.formAddProject.dateStart"
+        @update:model-value="changeDateEnd()"
       >
         <template #year="{ year }">{{ year + 543 }}</template>
         <template #year-overlay-value="{ value }">{{

src/modules/15_development/views/MainPage.vue

@@ -144,7 +144,7 @@ onMounted(() => {
     รายการโครงการ/หลักสูตรการฝึกอบรมที่หน่วยงานของกรุงเทพมหานครเป็นผู้จัด
   </div>
   <q-card flat bordered class="q-pa-md">
-    <q-toolbar style="padding: 0px">
+    <q-toolbar style="padding: 0">
       <datepicker
         menu-class-name="modalfix"
         v-model="formQuery.year"
@@ -177,75 +177,95 @@ onMounted(() => {
           </q-input>
         </template>
       </datepicker>
-      <q-btn
-        flat
-        round
-        dense
-        icon="add"
-        color="primary"
-        @click="onClickAddOrView()"
-      >
-        <q-tooltip>เพิ่ม</q-tooltip>
-      </q-btn>
-      <q-space />
-      <div class="row q-gutter-sm">
+      <q-toolbar-title>
         <q-btn
           flat
           round
-          color="blue"
-          icon="mdi-arrow-down-bold-circle-outline"
+          dense
+          icon="add"
+          color="primary"
+          @click="onClickAddOrView()"
         >
-          <q-menu>
-            <q-list style="min-width: 100px" dense>
-              <q-item clickable v-close-popup v-for="items in itemDownload">
-                <q-item-section avatar>
-                  <q-icon :color="items.color" :name="items.icon" />
-                </q-item-section>
-                <q-item-section :class="`text-${items.color}`">{{
-                  items.label
-                }}</q-item-section>
-              </q-item>
-            </q-list>
-          </q-menu>
-          <q-tooltip>ดาวน์โหลด</q-tooltip>
+          <q-tooltip>เพิ่ม</q-tooltip>
         </q-btn>
+      </q-toolbar-title>
 
-        <q-input
-          standout
-          dense
-          v-model="formQuery.keyword"
-          ref="filterRef"
-          outlined
-          placeholder="ค้นหา"
-          @keyup.enter="fetchListProject"
-        >
-          <template v-slot:append>
-            <q-icon v-if="formQuery.keyword == ''" name="search" />
-            <q-icon
-              v-if="formQuery.keyword !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="(formQuery.keyword = ''), fetchListProject()"
-            />
-          </template>
-        </q-input>
-
-        <q-select
-          v-model="visibleColumns"
-          multiple
-          outlined
-          dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
-          :options="columns"
-          option-value="name"
-          options-cover
-          style="min-width: 150px"
-        />
+      <q-space />
+      <div class="row q-gutter-sm">
+        <div>
+          <q-btn
+            flat
+            round
+            color="blue"
+            icon="mdi-arrow-down-bold-circle-outline"
+          >
+            <q-menu>
+              <q-list style="min-width: 100px" dense>
+                <q-item clickable v-close-popup v-for="items in itemDownload">
+                  <q-item-section avatar>
+                    <q-icon :color="items.color" :name="items.icon" />
+                  </q-item-section>
+                  <q-item-section :class="`text-${items.color}`">{{
+                    items.label
+                  }}</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+          </q-btn>
+        </div>
+        <div>
+          <q-input
+            standout
+            dense
+            v-model="formQuery.keyword"
+            ref="filterRef"
+            outlined
+            placeholder="ค้นหา"
+            @keyup.enter="fetchListProject"
+          >
+            <template v-slot:append>
+              <q-icon v-if="formQuery.keyword == ''" name="search" />
+              <q-icon
+                v-if="formQuery.keyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="(formQuery.keyword = ''), fetchListProject()"
+              />
+            </template>
+          </q-input>
+        </div>
+        <div>
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
       </div>
     </q-toolbar>
+    <!-- <q-toolbar class="q-gutter-x-sm" style="padding: 0px">
+      <div>
+      
+      </div>
+
+      <q-space />
+
+      <div class="row q-gutter-md">
+       
+       
+       
+      </div>
+    </q-toolbar> -->
 
     <div class="col-12">
       <d-table

src/modules/15_development/views/Scholarship.vue

@@ -158,46 +158,52 @@ onMounted(() => {
     รายการข้าราชการฯที่ได้รับทุนการศึกษา/ฝึกอบรม
   </div>
   <q-card flat bordered class="q-pa-md">
-    <q-toolbar style="padding: 0px">
+    <q-toolbar class="q-pa-none">
       <div class="row q-gutter-sm">
-        <datepicker
-          menu-class-name="modalfix"
-          v-model="formFilter.year"
-          :locale="'th'"
-          autoApply
-          year-picker
-          :enableTimePicker="false"
-        >
-          <template #year="{ year }">{{ year + 543 }}</template>
-          <template #year-overlay-value="{ value }">{{
-            parseInt(value + 543)
-          }}</template>
-          <template #trigger>
-            <q-input
-              dense
-              lazy-rules
-              outlined
-              :model-value="Number(formFilter.year) + 543"
-              :label="`${'ปีงบประมาณ'}`"
-            >
-              <template v-slot:prepend>
-                <q-icon
-                  name="event"
-                  class="cursor-pointer"
-                  style="color: var(--q-primary)"
-                >
-                </q-icon>
-              </template>
-            </q-input>
-          </template>
-        </datepicker>
-        <q-select
-          dense
-          outlined
-          v-model="formFilter.type"
-          :options="options"
-          label="เลือกประเภททุน"
-        />
+        <div>
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="formFilter.year"
+            :locale="'th'"
+            autoApply
+            year-picker
+            :enableTimePicker="false"
+          >
+            <template #year="{ year }">{{ year + 543 }}</template>
+            <template #year-overlay-value="{ value }">{{
+              parseInt(value + 543)
+            }}</template>
+            <template #trigger>
+              <q-input
+                dense
+                lazy-rules
+                outlined
+                :model-value="Number(formFilter.year) + 543"
+                :label="`${'ปีงบประมาณ'}`"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+        <div>
+          <q-select
+            dense
+            outlined
+            v-model="formFilter.type"
+            :options="options"
+            label="เลือกประเภททุน"
+          />
+        </div>
+      </div>
+      <q-toolbar-title>
         <q-btn
           flat
           round
@@ -208,65 +214,68 @@ onMounted(() => {
         >
           <q-tooltip>เพิ่ม</q-tooltip>
         </q-btn>
-      </div>
+      </q-toolbar-title>
 
       <q-space />
       <div class="row q-gutter-sm">
-        <q-btn
-          flat
-          round
-          color="blue"
-          icon="mdi-arrow-down-bold-circle-outline"
-        >
-          <q-menu>
-            <q-list style="min-width: 100px" dense>
-              <q-item clickable v-close-popup v-for="items in itemDownload">
-                <q-item-section avatar>
-                  <q-icon :color="items.color" :name="items.icon" />
-                </q-item-section>
-                <q-item-section :class="`text-${items.color}`">{{
-                  items.label
-                }}</q-item-section>
-              </q-item>
-            </q-list>
-          </q-menu>
-          <q-tooltip>ดาวน์โหลด</q-tooltip>
-        </q-btn>
-
-        <q-input
-          standout
-          dense
-          v-model="formFilter.keyword"
-          ref="filterRef"
-          outlined
-          debounce="300"
-          placeholder="ค้นหา"
-        >
-          <template v-slot:append>
-            <q-icon v-if="formFilter.keyword == ''" name="search" />
-            <q-icon
-              v-if="formFilter.keyword !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="formFilter.keyword = ''"
-            />
-          </template>
-        </q-input>
-
-        <q-select
-          v-model="visibleColumns"
-          multiple
-          outlined
-          dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
-          :options="columns"
-          option-value="name"
-          options-cover
-          style="min-width: 150px"
-        />
+        <div>
+          <q-btn
+            flat
+            round
+            color="blue"
+            icon="mdi-arrow-down-bold-circle-outline"
+          >
+            <q-menu>
+              <q-list style="min-width: 100px" dense>
+                <q-item clickable v-close-popup v-for="items in itemDownload">
+                  <q-item-section avatar>
+                    <q-icon :color="items.color" :name="items.icon" />
+                  </q-item-section>
+                  <q-item-section :class="`text-${items.color}`">{{
+                    items.label
+                  }}</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+          </q-btn>
+        </div>
+        <div>
+          <q-input
+            standout
+            dense
+            v-model="formFilter.keyword"
+            ref="filterRef"
+            outlined
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="formFilter.keyword == ''" name="search" />
+              <q-icon
+                v-if="formFilter.keyword !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="formFilter.keyword = ''"
+              />
+            </template>
+          </q-input>
+        </div>
+        <div>
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
       </div>
     </q-toolbar>