update user page

src/pages/nguoi-dung/User.ts

@@ -3,7 +3,7 @@ import { API_PATHS, config } from 'src/assets/configurations';
 import { PaginationResponse, UserObject } from 'src/assets/type';
 import { api, BaseResponseBody } from 'src/boot/axios';
 import { i18n } from 'src/boot/i18n';
-import { defineComponent, onMounted, Ref, ref } from 'vue';
+import { computed, defineComponent, onMounted, Ref, ref } from 'vue';
 
 export default defineComponent({
   setup() {
@@ -69,6 +69,7 @@ export default defineComponent({
       },
     ];
     const userTableRows: Ref<UserObject[]> = ref([]);
+    const keyword = ref('');
 
     const getListUsers = async () => {
       try {
@@ -88,6 +89,12 @@ export default defineComponent({
       } catch (error) {}
     };
 
+    const filterListUser: Ref<UserObject[]> = computed(() => {
+      return userTableRows.value.filter((user) =>
+        user.userName.includes(keyword.value)
+      );
+    });
+
     onMounted(() => {
       void getListUsers();
     });
@@ -97,6 +104,8 @@ export default defineComponent({
       totalPage,
       pageIndex,
       pageSize,
+      keyword,
+      filterListUser,
     };
   },
 });

src/pages/nguoi-dung/index.vue

@@ -2,16 +2,28 @@
   <div class="row q-col-gutter-sm">
     <div class="col-12">
       <q-table
-        :rows="rows"
+        :rows="filterListUser"
         :columns="userTableColumns"
         row-key="name"
         separator="cell"
         hide-pagination
       >
         <template v-slot:top>
-          <q-th class="row">
-            <div class="col-2 text-h6 text-weight-regular">
-              {{ $t('userPage.title') }}
+          <q-th class="full-width">
+            <div class="row">
+              <div
+                class="col-auto text-h6 text-weight-regular flex flex-center q-mr-md"
+              >
+                {{ $t('userPage.title') }}
+              </div>
+              <q-separator vertical spaced />
+              <div class="col-5 q-ml-md">
+                <q-input v-model="keyword" placeholder="Tìm kiếm"></q-input>
+              </div>
+              <q-space></q-space>
+              <div class="col-auto flex flex-center">
+                <q-btn color="primary" :label="$t('crudActions.add')"></q-btn>
+              </div>
             </div>
           </q-th>
         </template>