filter ==> ข้อมูลตำแหน่งลูกจ้างประจำ

src/modules/01_metadata/components/position-employee/01_PositionMain.vue

@@ -360,10 +360,11 @@ onMounted(async () => {
 
       <div class="col-xs-12 col-md-1">
         <q-btn
+          outline
           color="primary"
           icon="search"
           label="ค้นหา"
-          class="full-width"
+          class="full-width full-height"
           @click="fetchData()"
         />
       </div>

src/modules/01_metadata/components/position-employee/02_GroupMain.vue

@@ -24,10 +24,12 @@ const {
   showLoader,
   hideLoader,
   date2Thai,
+  onSearchDataTable,
 } = useCounterMixin();
 
 //Table
 const rows = ref<ResGroup[]>([]); //รายการกลุ่มงาน
+const rowsMain = ref<ResGroup[]>([]); //รายการกลุ่มงาน
 const filterKeyword = ref<string>(""); //คำค้นหา
 const columns = ref<QTableProps["columns"]>([
   {
@@ -114,7 +116,6 @@ const dialogStatus = ref<string>("");
 
 /**
  * ฟังก์ชันดึงข้อมูลรายการกลุ่มงาน API
- *
  * เก็บข้อมูลรรายการกลุ่มงานไว้ใน rows.value
  */
 async function fetchData() {
@@ -123,6 +124,7 @@ async function fetchData() {
     .get(config.API.orgEmployeeType)
     .then(async (res) => {
       rows.value = await res.data.result;
+      rowsMain.value = await res.data.result;
     })
     .catch((err) => {
       messageError($q, err);
@@ -135,9 +137,7 @@ async function fetchData() {
 /**
  * ฟังก์ชันเปิด popup แก้ไขข้อมูลกลุ่มงาน
  * @param data ข้อมูลกลุ่มงานที่จะแก้ไข
- *
  * กำหนด  dialogStatus เป็น edit และกำหนดให้ ฟอร์มข้อมูลกลุ่มงาน เป็น ข้อมูลที่จะแก่ไข
- *
  */
 function onClickOpenDialogEdit(data: ResGroup) {
   dialogStatus.value = "edit";
@@ -150,7 +150,6 @@ function onClickOpenDialogEdit(data: ResGroup) {
 
 /**
  * ยืนยันการบันทึกข้อมูลรายการกลุ่มงาน
- *
  * ุ ถ้า dialogStatus เป็น 'create' จะทำการเพิ่มข้อมูลรายการกลุ่มงาน ถ้าไม่จะทำการแก้ไขข้อมูล
  * เมื่อบันทึกข้อมูลเสร็จจะเรียก function fetchData() เพื่อดึงข้อมูลรายการกลุ่มงานใหม่
  *
@@ -193,7 +192,6 @@ function onClickDetail(id: string) {
 
 /**
  * ฟังก์ชันปืด popup แก้ไขหรื่อเพิ่มข้อมูลกลุ่มงาน
- *
  * และกำหนดให้ ฟอร์มข้อมูลกลุ่มงาน เป็นค่าว่าง
  */
 function closeDialog() {
@@ -203,6 +201,14 @@ function closeDialog() {
   formDataGroup.posTypeRank = null;
 }
 
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**
  * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
  */
@@ -232,12 +238,11 @@ onMounted(async () => {
       <q-input
         dense
         outlined
-        clearable
         v-model="filterKeyword"
         placeholder="ค้นหา"
-        @clear="filterKeyword = ''"
+        @keydown.enter.pervent="serchDataTable"
       >
-        <template v-slot:append v-if="filterKeyword === ''">
+        <template v-slot:append>
           <q-icon name="search" />
         </template>
       </q-input>
@@ -261,7 +266,6 @@ onMounted(async () => {
     ref="table"
     :columns="columns"
     :rows="rows"
-    :filter="filterKeyword"
     row-key="name"
     flat
     bordered

src/modules/01_metadata/components/position-employee/GroupDetail.vue

@@ -30,10 +30,12 @@ const {
   messageError,
   success,
   date2Thai,
+  onSearchDataTable,
 } = useCounterMixin();
 
 // Table
 const rows = ref<DataGroup[]>([]); // รายการกลุ่มงาน
+const rowsMain = ref<DataGroup[]>([]); // รายการกลุ่มงาน
 const filter = ref<string>(""); // คำค้นหา
 const columns = ref<QTableProps["columns"]>([
   {
@@ -138,16 +140,20 @@ const formDataLevel = reactive<FormDataLevel>({
  * เก็บข้อมูลรรายการระดับชั้นงานไว้ใน rows.value
  */
 async function fetchData() {
+  rows.value = [];
+  rowsMain.value = [];
   showLoader();
   await http
     .get(config.API.orgEmployeeTypeById(posTypeId.value))
     .then(async (res) => {
       titleName.value = res.data.result.posTypeName ?? null;
       formDataLevel.posTypeName = res.data.result.posTypeName;
-      rows.value = await res.data.result.posLevels.map((x: ResLevel) => ({
+      const lists = await res.data.result.posLevels.map((x: ResLevel) => ({
         ...x,
         posTypeName: res.data.result.posTypeName,
       }));
+      rows.value = lists;
+      rowsMain.value = lists;
     })
     .catch((err) => {
       messageError($q, err);
@@ -160,9 +166,7 @@ async function fetchData() {
 /**
  * ฟังก์ชันเปิด popup แก้ไขข้อมูลระดับชั้นงาน
  * @param data ข้อมูลระดับชั้นงานที่จะแก้ไข
- *
  * กำหนด  isStatusEdit เป็น true และกำหนดให้ ฟอร์มข้อมูลระดับชั้นงาน เป็น ข้อมูลที่จะแก่ไข
- *
  */
 function onClickOpenDialog(
   statusEdit: boolean = false,
@@ -183,7 +187,6 @@ function onClickOpenDialog(
 
 /**
  * ฟังก์ชันปืด popup แก้ไขหรื่อเพิ่มข้อมูลระดับชั้นงาน
- *
  * และกำหนดให้ ฟอร์มข้อมูลระดับชั้นงาน เป็นค่าว่าง
  */
 function onClickCloseDialog() {
@@ -195,7 +198,6 @@ function onClickCloseDialog() {
 
 /**
  * ยืนยันการบันทึกข้อมูลรายการระดับชั้นงาน
- *
  * ุ ถ้า dialogStatus เป็น 'false' จะทำการเพิ่มข้อมูลรายการระดับชั้นงาน ถ้าไม่จะทำการแก้ไขข้อมูล
  * เมื่อบันทึกข้อมูลเสร็จจะเรียก function fetchData() เพื่อดึงข้อมูลรายการระดับชั้นงานใหม่
  *
@@ -239,9 +241,16 @@ function convertPosLevelAuthority(val: string) {
   return result?.label;
 }
 
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**
  * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
- *
  * ถ่ามี posTypeId จะดึงข้อมูลรายการระดับชั้นงาน
  */
 onMounted(() => {
@@ -281,12 +290,11 @@ onMounted(() => {
           <q-input
             dense
             outlined
-            clearable
             v-model="filter"
             placeholder="ค้นหา"
-            @clear="filter = ''"
+            @keydown.enter.pervent="serchDataTable"
           >
-            <template v-slot:append v-if="filter === ''">
+            <template v-slot:append>
               <q-icon name="search" />
             </template>
           </q-input>
@@ -310,7 +318,6 @@ onMounted(() => {
         ref="table"
         :columns="columns"
         :rows="rows"
-        :filter="filter"
         row-key="name"
         flat
         bordered