filter ==> จัดการผู้ใช้งาน

src/modules/02_users/components/Permissions/DialogAdd.vue

@@ -23,6 +23,7 @@ const {
   messageError,
   success,
   dialogMessageNotify,
+  onSearchDataTable,
 } = useCounterMixin();
 
 /**  props*/
@@ -41,6 +42,8 @@ const props = defineProps({
 });
 
 const rows = ref<Roles[]>([]);
+const rowsMain = ref<Roles[]>([]);
+const keyword = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
   {
     name: "roleName",
@@ -63,12 +66,12 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 const visibleColumns = ref<string[]>(["roleName", "roleDescription"]);
 
-const keyword = ref<string>("");
 const selected = ref<Roles[]>([]);
 
 function closeDialog() {
   modal.value = false;
   selected.value = [];
+  keyword.value = "";
 }
 
 function fetchListRoles() {
@@ -78,6 +81,7 @@ function fetchListRoles() {
     .then((res) => {
       const data = res.data.result;
       rows.value = data;
+      rowsMain.value = data;
       const findRole = data.find(
         (e: Roles) => e.id === props.dataPosMaster.authRoleId
       );
@@ -124,6 +128,14 @@ function onSubmit() {
   }
 }
 
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 watch(
   () => modal.value,
   () => {
@@ -140,9 +152,15 @@ watch(
       <q-card-section>
         <div class="row q-col-gutter-sm">
           <div class="col-12">
-            <q-input outlined dense v-model="keyword" label="ค้นหา">
+            <q-input
+              outlined
+              dense
+              v-model="keyword"
+              label="ค้นหา"
+              @keydown.enter.pervent="serchDataTable"
+            >
               <template v-slot:append>
-                <q-icon name="search" color="grey-5" />
+                <q-icon name="search" />
               </template>
             </q-input>
           </div>
@@ -151,7 +169,6 @@ watch(
               ref="table"
               :columns="columns"
               :rows="rows"
-              :filter="keyword"
               row-key="id"
               flat
               bordered
@@ -162,15 +179,6 @@ watch(
               selection="single"
               v-model:selected="selected"
             >
-              <!-- <template v-slot:header-selection="scope">
-                  <q-checkbox
-                    keep-color
-                    color="primary"
-                    dense
-                    v-model="scope.selected"
-                  />
-                </template> -->
-
               <template v-slot:body="props">
                 <q-tr :props="props" class="cursor-pointer">
                   <q-td>

src/modules/02_users/components/RoleOrganization/DialogAddPerson.vue

@@ -208,15 +208,18 @@ watch(
                 dense
                 v-model="qurey.searchKeyword"
                 label="คำค้น"
-                clearable
+                
               >
-                <template v-slot:append v-if="!qurey.searchKeyword">
+                <!-- <template v-slot:append>
-                  <q-icon name="search" color="grey-5" />
+                  <q-icon name="search" />
-                </template>
+                </template> -->
               </q-input>
             </q-toolbar-title>
 
             <q-btn
+              outline
+              icon="search"
+              class="full-height"
               label="ค้นหา"
               color="primary"
               @click="onSearchListPerson(true)"

src/modules/02_users/views/01_user.vue

@@ -220,7 +220,6 @@ function onClickAction(type: string, data: Users) {
 
 /**
  * ฟังก์ชันเปิด popup สำหรับเพิ่มข้อมูลผู้ใช้งาน
- *
  * กำหนดสถานะการแก้ไขเป็น false และ id ผู้ใช้งานที่ต้องการแก้ไขเป็นค่าว่าง
  */
 function openDialog() {
@@ -232,7 +231,6 @@ function openDialog() {
 /**
  * function ยืนยันการลบข้อมูลรายการผู้ใช้งาน
  * @param id รายการผู้ใช้งาน
- *
  * ลบข้อมูลรายชื่อเสร็จแล้วทำการดึงข้อมูลรายชื่อผู้ใช้งานใหม่
  */
 function onDeleteUser(id: string) {
@@ -257,7 +255,6 @@ function onDeleteUser(id: string) {
  * ฟังก์ชันระงับการใช้งานผู้ใช้งาน
  * @param id ผู้ใช้งาน
  * @param type  เปิดใช้งาน,ระงับการใช้งาน
- *
  * เสร็จแล้วทำการดึงข้อมูลรายชื่อผู้ใช้งานใหม่
  */
 function onLockUser(id: string, type: boolean) {
@@ -286,7 +283,6 @@ function onLockUser(id: string, type: boolean) {
 /**
  * function อัปเดท paging
  * @param initialPagination ข้อมูล pagination
- *
  * กำหนดหน้าไปยังหน้าแรก
  */
 function updatePagination(initialPagination: Pagination) {
@@ -314,7 +310,6 @@ function filterFnOptions(val: string, update: Function, type: string) {
 
 /**
  * ดูการเปลี่ยนแปลงของจำนวนข้อมูลต่อหน้า
- *
  * ดึงข้อมูลรายชื่อผู้ใช้งานตามจำนวนข้อมูลต่อหน้า
  */
 watch(
@@ -326,7 +321,6 @@ watch(
 
 /**
  * hook ทำงานเมื่อมีการเรียกใช้งาน Components
- *
  * ดึงข้อมูลรายชื่อผู้ใช้งาน
  */
 onMounted(async () => {
@@ -385,12 +379,10 @@ onMounted(async () => {
         dense
         outlined
         v-model="keyword"
-        clearable
-        @clear="keyword = ''"
         placeholder="ค้นหา"
         @keydown.enter.prevent="(currentPage = 1), fetchListUsers()"
       >
-        <template v-slot:append v-if="keyword === ''">
+        <template v-slot:append>
           <q-icon name="search" />
         </template>
       </q-input>

src/modules/02_users/views/02_rolesAndPermissions.vue

@@ -18,11 +18,18 @@ import DialogAddRole from "@/modules/02_users/components/Roles/DialogAddRole.vue
 /** use*/
 const $q = useQuasar();
 const router = useRouter();
-const { dialogRemove, messageError, showLoader, hideLoader, success } =
+const {
-  useCounterMixin();
+  dialogRemove,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  onSearchDataTable,
+} = useCounterMixin();
 
 /** Table*/
 const rows = ref<Roles[]>([]); // รายการบทบาท
+const rowsMain = ref<Roles[]>([]); // รายการบทบาท
 const keyword = ref<string>(""); // คำค้นหา
 const columns = ref<QTableProps["columns"]>([
   {
@@ -75,7 +82,6 @@ const itemMenu = ref<ItemsMenu[]>([
 
 /**
  * function fetch รายการบทบาท
- *
  * และบันทึกใน rows
  */
 async function fetchListRole() {
@@ -85,6 +91,7 @@ async function fetchListRole() {
     .then(async (res) => {
       const data = await res.data.result;
       rows.value = data;
+      rowsMain.value = data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -110,9 +117,7 @@ function onClickAction(type: string, data: Roles) {
   }
 }
 
-/**
+/** เปิด  popup เพิ่มบทบาท*/
- * เปิด  popup เพิ่มบทบาท
- */
 function openDialog() {
   modalDialogAdd.value = true;
 }
@@ -139,9 +144,16 @@ function onDeleteRole(id: string) {
   });
 }
 
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    keyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**
  * hook ทำงานเมื่อมีการเรียกใช้งาน Components
- *
  * ดึงข้อมูลบทบาท
  */
 onMounted(() => {
@@ -166,14 +178,12 @@ onMounted(() => {
       <q-input
         borderless
         dense
-        debounce="300"
         outlined
         v-model="keyword"
         placeholder="ค้นหา"
-        clearable
+        @keydown.enter.pervent="serchDataTable"
-        @clear="keyword = ''"
       >
-        <template v-slot:append v-if="keyword===''">
+        <template v-slot:append>
           <q-icon name="search" />
         </template>
       </q-input>
@@ -198,7 +208,6 @@ onMounted(() => {
         :columns="columns"
         :rows="rows"
         row-key="id"
-        :filter="keyword"
         flat
         bordered
         :paging="true"

src/modules/02_users/views/03_permissionsView.vue

@@ -22,9 +22,7 @@ import type {
 import DialogAdd from "@/modules/02_users/components/Permissions/DialogAdd.vue";
 import PopupPersonal from "@/modules/02_users/components/RoleOrganization/DialogPersonal.vue";
 
-/**
+/** use*/
- * use
- */
 const $q = useQuasar();
 const store = usePermissionsStore();
 const { showLoader, hideLoader, messageError, success, dialogRemove } =
@@ -254,9 +252,7 @@ const pagination = ref<Pagination>({
 
 const modalDialogAdd = ref<boolean>(false); // popup จัดการสิทธิ์
 
-/**
+/**  function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง */
- *  function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง
- */
 async function fetchOrganizationActive() {
   showLoader();
   await http
@@ -545,13 +541,7 @@ onMounted(() => {
                     <div class="col-12">
                       <q-input dense outlined v-model="filter" label="ค้นหา">
                         <template v-slot:append>
-                          <q-icon
+                          <q-icon name="search" />
-                            v-if="filter !== ''"
-                            name="clear"
-                            class="cursor-pointer"
-                            @click="filter = ''"
-                          />
-                          <q-icon name="search" color="grey-5" v-else />
                         </template>
                       </q-input>
                     </div>
@@ -659,8 +649,6 @@ onMounted(() => {
                       dense
                       v-model="reqMaster.keyword"
                       label="ค้นหา"
-                      clearable
-                      @clear="reqMaster.keyword = ''"
                       @keydown.enter.prevent="
                         (reqMaster.page = 1),
                           fetchDataTable(
@@ -670,8 +658,8 @@ onMounted(() => {
                           )
                       "
                     >
-                      <template v-slot:append v-if="reqMaster.keyword === ''">
+                      <template v-slot:append>
-                        <q-icon name="search" color="grey-5" />
+                        <q-icon name="search" />
                       </template>
                     </q-input>
                   </div>

src/modules/02_users/views/04_roleOrganization.vue

@@ -241,13 +241,7 @@ onMounted(async () => {
         <div>
           <q-input dense outlined v-model="filter" label="ค้นหา">
             <template v-slot:append>
-              <q-icon
+              <q-icon name="search" />
-                v-if="filter !== ''"
-                name="clear"
-                class="cursor-pointer"
-                @click="filter = ''"
-              />
-              <q-icon v-else name="search" color="grey-5" />
             </template>
           </q-input>
         </div>
@@ -258,7 +252,7 @@ onMounted(async () => {
             :nodes="nodeTree"
             node-key="orgRootName"
             label-key="labelName"
-            :filter="filter"
+            :filter="filter?.trim()"
             no-results-label="ไม่พบข้อมูลที่ค้นหา"
             no-nodes-label="ไม่มีข้อมูล"
             v-model:expanded="expanded"
@@ -349,22 +343,15 @@ onMounted(async () => {
                       label="คำค้น"
                       hide-bottom-space
                     >
-                      <template v-slot:append>
-                        <q-icon
-                          v-if="qureyBody.searchKeyword"
-                          name="cancel"
-                          @click="qureyBody.searchKeyword = ''"
-                          class="cursor-pointer"
-                        ></q-icon>
-                      </template>
                     </q-input>
                   </div>
                   <div>
                     <q-btn
+                      outline
                       color="primary"
                       icon="search"
                       label="ค้นหา"
-                      class="full-width"
+                      class="full-width full-height"
                       @click="fetchListPerson(true)"
                     />
                   </div>

src/modules/02_users/views/05_responsIbilities.vue

@@ -441,13 +441,7 @@ onMounted(() => {
                     <div class="col-12">
                       <q-input dense outlined v-model="filter" label="ค้นหา">
                         <template v-slot:append>
-                          <q-icon
+                          <q-icon name="search" />
-                            v-if="filter !== ''"
-                            name="clear"
-                            class="cursor-pointer"
-                            @click="filter = ''"
-                          />
-                          <q-icon v-else name="search" color="grey-5" />
                         </template>
                       </q-input>
                     </div>
@@ -460,7 +454,7 @@ onMounted(() => {
                       :nodes="lazy"
                       node-key="orgTreeId"
                       label-key="labelName"
-                      :filter="filter"
+                      :filter="filter?.trim()"
                       no-results-label="ไม่พบข้อมูลที่ค้นหา"
                       no-nodes-label="ไม่มีข้อมูล"
                       v-model:expanded="expanded"
@@ -555,8 +549,6 @@ onMounted(() => {
                       dense
                       v-model="reqMaster.keyword"
                       label="ค้นหา"
-                      clearable
-                      @clear="reqMaster.keyword = ''"
                       @keydown.enter.prevent="
                         (reqMaster.page = 1),
                           fetchDataTable(
@@ -566,8 +558,8 @@ onMounted(() => {
                           )
                       "
                     >
-                      <template v-slot:append v-if="reqMaster.keyword === ''">
+                      <template v-slot:append>
-                        <q-icon name="search" color="grey-5" />
+                        <q-icon name="search" />
                       </template>
                     </q-input>
                   </div>
@@ -709,7 +701,9 @@ onMounted(() => {
                               <q-item-section avatar>
                                 <q-icon color="red" name="delete" />
                               </q-item-section>
-                              <q-item-section> ลบหน้าที่ความรับผิดชอบทั้งหมด</q-item-section>
+                              <q-item-section>
+                                ลบหน้าที่ความรับผิดชอบทั้งหมด</q-item-section
+                              >
                             </q-item>
                           </q-list>
                         </q-menu>