From 8d1901e2b88e539d618d2ee0f951912bd62a6117 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 2 Feb 2024 16:56:20 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=82=E0=B9=89?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=95=E0=B8=B3=E0=B9=81?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/position/01ListPosition.vue    | 159 ++++++++++--------
 .../components/position/04ListExecutive.vue   |   3 -
 2 files changed, 90 insertions(+), 72 deletions(-)

diff --git a/src/modules/01_metadataNew/components/position/01ListPosition.vue b/src/modules/01_metadataNew/components/position/01ListPosition.vue
index ebb40820c..f5e247e6f 100644
--- a/src/modules/01_metadataNew/components/position/01ListPosition.vue
+++ b/src/modules/01_metadataNew/components/position/01ListPosition.vue
@@ -4,12 +4,15 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useQuasar } from "quasar";
-import type { DataOption,FormPositionSelect,ListMenu,RowDetailPositions } from "@/modules/01_metadataNew/interface/request/position/index";
+import type {
+  DataOption,
+  FormPositionSelect,
+  ListMenu,
+  RowDetailPositions,
+} from "@/modules/01_metadataNew/interface/request/position/index";
 import type { QTableProps } from "quasar";
 import DialogAddPosition from "@/modules/01_metadataNew/components/position/DialogAddPosition.vue";
 
-
-
 const modalAddPosition = ref<boolean>(false);
 const levelOpsMain = ref<DataOption[]>([]);
 const dataLevel = ref<any>();
@@ -168,11 +171,9 @@ function copyDetiail(data: RowDetailPositions) {
   formPositionSelect.positionExecutive = data.posExecutiveId;
   formPositionSelect.positionExecutiveField = data.positionExecutiveField;
   formPositionSelect.positionArea = data.positionArea;
-  modalAddPosition.value = true
-
+  modalAddPosition.value = true;
 }
 
-
 /**
  * ส่งค่า css ออกไปตามเงื่อนไข
  * @param val true/false
@@ -185,24 +186,20 @@ function inputEdit(val: boolean) {
 }
 
 async function searchInput() {
-  searchRef.value.validate();
-  if (!searchRef.value.hasError) {
-    showLoader();
-    await http
-      .get(
-        config.API.orgPosPosition +
-          `?keyword=${search.value}&type=${type.value}`
-      )
-      .then((res) => {
-        rowsPositionSelect.value = res.data.result;
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  }
+  showLoader();
+  await http
+    .get(
+      config.API.orgPosPosition + `?keyword=${search.value}&type=${type.value}`
+    )
+    .then((res) => {
+      rowsPositionSelect.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
 function addPosition(data: RowDetailPositions) {
@@ -234,10 +231,30 @@ function deletePos(id: string) {
 function popupAdd() {
   modalAddPosition.value = true;
 }
+
+async function fetchData() {
+  search.value = "";
+  showLoader();
+  await http
+    .get(config.API.orgPosPosition + `?keyword=&type=ALL`)
+    .then((res) => {
+      rowsPositionSelect.value = res.data.result;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  fetchData();
+});
 </script>
 <template>
   <div class="row col-12 q-mb-sm">
-    <div class="col-12 col-md-5">
+    <div class="col-md-2">
       <q-btn
         id="addComplaints"
         for="addComplaints"
@@ -250,50 +267,55 @@ function popupAdd() {
         ><q-tooltip>เพิ่มตำเเหน่ง </q-tooltip></q-btn
       >
     </div>
-    <q-space />
-    <div class="row col-12 col-md-7 q-col-gutter-sm justify-start">
-    <div class="col-12 col-sm-6 col-md-4">
-      <q-select
-        label="ค้นหาจาก"
-        v-model="type"
-        :options="optionFilter"
-        emit-value
-        dense
-        map-options
-        outlined
-        option-label="name"
-        option-value="id"
-      />
-    </div>
 
-    <div class="col-12 col-sm-6 col-md-4">
-      <q-input
-        ref="searchRef"
-        :class="inputEdit(isReadonly)"
-        v-model="search"
-        outlined
-        clearable
-        dense
-        lazy-rules
-        label="คำค้น"
-        hide-bottom-space
-        :rules="[(val) => !!val || `กรุณากรอกคำค้น`]"
-      />
-    </div>
+    <div class="row col-md-10 q-col-gutter-sm">
+      <div class="col-md-4">
+        <q-select
+          label="ค้นหาจาก"
+          v-model="type"
+          :options="optionFilter"
+          emit-value
+          dense
+          map-options
+          outlined
+          option-label="name"
+          option-value="id"
+        />
+      </div>
 
-    <div class="col-12 col-sm-6 col-md-4">
-      <q-btn
-        color="primary"
-        icon="search"
-        label="ค้นหา"
-        class="full-width q-pa-sm"
-        @click="searchInput()"
-      >
-      </q-btn>
+      <div class="col-md-6">
+        <q-input
+          ref="searchRef"
+          :class="inputEdit(isReadonly)"
+          v-model="search"
+          outlined
+          dense
+          lazy-rules
+          label="คำค้น"
+          hide-bottom-space
+        >
+          <template v-slot:append>
+            <q-icon
+              v-if="search"
+              name="cancel"
+              @click="fetchData()"
+              class="cursor-pointer"
+            ></q-icon>
+          </template>
+        </q-input>
+      </div>
+
+      <div class="row col-md-2">
+        <q-btn
+          color="primary"
+          icon="search"
+          label="ค้นหา"
+          class="full-width"
+          @click="searchInput()"
+        />
+      </div>
     </div>
   </div>
-  </div>
-
 
   <div class="full-width q-mt-sm">
     <d-table
@@ -368,9 +390,8 @@ function popupAdd() {
       </template>
     </d-table>
   </div>
-  <DialogAddPosition 
-  v-model:add-position="modalAddPosition" 
-  v-model:form-data="formPositionSelect" 
-  
+  <DialogAddPosition
+    v-model:add-position="modalAddPosition"
+    v-model:form-data="formPositionSelect"
   />
 </template>
diff --git a/src/modules/01_metadataNew/components/position/04ListExecutive.vue b/src/modules/01_metadataNew/components/position/04ListExecutive.vue
index 0d0816169..d04831bc5 100644
--- a/src/modules/01_metadataNew/components/position/04ListExecutive.vue
+++ b/src/modules/01_metadataNew/components/position/04ListExecutive.vue
@@ -130,9 +130,6 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
-    รายการตำแหน่งทางการบริหาร
-  </div>
   <div class="row col-12 q-col-gutter-x-sm">
     <div class="col-2">
       <q-btn