From 954732b49c61925639c47f3c566c20d837a1082d Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 4 Apr 2024 16:27:17 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20toolbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/14_KPI/views/indicatorByPlan.vue  | 128 +++++------
 src/modules/14_KPI/views/indicatorByRole.vue  |   7 +-
 src/modules/15_development/views/MainPage.vue | 144 +++++++------
 .../15_development/views/Scholarship.vue      | 199 +++++++++---------
 4 files changed, 258 insertions(+), 220 deletions(-)

diff --git a/src/modules/14_KPI/views/indicatorByPlan.vue b/src/modules/14_KPI/views/indicatorByPlan.vue
index ed1a3cf9b..3e30b7bdb 100644
--- a/src/modules/14_KPI/views/indicatorByPlan.vue
+++ b/src/modules/14_KPI/views/indicatorByPlan.vue
@@ -111,31 +111,36 @@ onMounted(() => {
     ตามแผนปฏิบัติราชการประจำปี
   </div>
   <q-card flat bordered class="q-pa-md">
-    <q-toolbar style="padding: 0px">
-      <div class="row q-gutter-sm">
-        <q-select
-          dense
-          outlined
-          v-model="formFilter.org"
-          :options="orgOp"
-          label="หน่วยงาน/ส่วนราชการ"
-          option-label="name"
-          option-value="id"
-          emit-value
-          map-options
-        />
-
-        <q-select
-          dense
-          outlined
-          v-model="formFilter.round"
-          :options="roundOp"
-          label="รอบการประเมิน"
-          option-label="name"
-          option-value="id"
-          emit-value
-          map-options
-        />
+    <q-toolbar class="q-pa-none">
+      <div class="row q-gutter-x-sm">
+        <div>
+          <q-select
+            dense
+            outlined
+            v-model="formFilter.org"
+            :options="orgOp"
+            label="หน่วยงาน/ส่วนราชการ"
+            option-label="name"
+            option-value="id"
+            emit-value
+            map-options
+          />
+        </div>
+        <div>
+          <q-select
+            dense
+            outlined
+            v-model="formFilter.round"
+            :options="roundOp"
+            label="รอบการประเมิน"
+            option-label="name"
+            option-value="id"
+            emit-value
+            map-options
+          />
+        </div>
+      </div>
+      <q-toolbar-title>
         <q-btn
           flat
           round
@@ -146,44 +151,47 @@ onMounted(() => {
         >
           <q-tooltip>เพิ่ม</q-tooltip>
         </q-btn>
-      </div>
+      </q-toolbar-title>
 
       <q-space />
       <div class="row q-gutter-sm">
-        <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-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>
+        </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>
 
diff --git a/src/modules/14_KPI/views/indicatorByRole.vue b/src/modules/14_KPI/views/indicatorByRole.vue
index e5631962f..5e1b03dbb 100644
--- a/src/modules/14_KPI/views/indicatorByRole.vue
+++ b/src/modules/14_KPI/views/indicatorByRole.vue
@@ -111,7 +111,7 @@ 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">
         <q-select
           dense
@@ -124,7 +124,6 @@ onMounted(() => {
           emit-value
           map-options
         />
-
         <q-select
           dense
           outlined
@@ -136,6 +135,8 @@ onMounted(() => {
           emit-value
           map-options
         />
+      </div>
+      <q-toolbar-title>
         <q-btn
           flat
           round
@@ -146,7 +147,7 @@ onMounted(() => {
         >
           <q-tooltip>เพิ่ม</q-tooltip>
         </q-btn>
-      </div>
+      </q-toolbar-title>
 
       <q-space />
       <div class="row q-gutter-sm">
diff --git a/src/modules/15_development/views/MainPage.vue b/src/modules/15_development/views/MainPage.vue
index 1c39bc2d8..8b3fafceb 100644
--- a/src/modules/15_development/views/MainPage.vue
+++ b/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
diff --git a/src/modules/15_development/views/Scholarship.vue b/src/modules/15_development/views/Scholarship.vue
index 5a1c9e11e..00c680c87 100644
--- a/src/modules/15_development/views/Scholarship.vue
+++ b/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>