add filter to search user

src/pages/BalanceAdminPage.vue

@@ -1,9 +1,20 @@
 <template>
-  <div>
   <q-page padding>
-      <q-table v-model:pagination="pagination" :rows="rows" row-key="userid" :columns="columns" @request="onRequest">
+    <q-table
+      v-model:pagination="pagination"
+      :rows="rows"
+      row-key="userid"
+      :columns="columns"
+      @request="onRequest"
+      :filter="filter"
+    >
       <template #top-right>
         <div class="full-width row q-gutter-sm">
+          <q-input v-model="filter" label="Filter" filled dense debounce="300">
+            <template v-slot:append>
+              <q-icon name="mdi-magnify" />
+            </template>
+          </q-input>
           <q-input v-model.number="limit" label="Limit" type="number" step="0.01" suffix="€" filled dense />
           <q-btn label="Limits Setzen" color="primary" dense @click="setLimits(limit)" />
         </div>
@@ -70,7 +81,6 @@
       </template>
     </q-table>
   </q-page>
-  </div>
 </template>
 
 <script lang="ts">
@@ -92,11 +102,12 @@ export default defineComponent({
     onBeforeMount(() => {
       void userStore.getUsers();
       void store.getLimits();
-      void onRequest({ pagination: pagination.value, filter: undefined });
+      void onRequest({ pagination: pagination.value, filter: filter.value });
     });
 
     const rows = computed(() => store.balances);
     const limit = ref<number>();
+    const filter = ref<string>();
 
     const columns = [
       {
@@ -151,6 +162,7 @@ export default defineComponent({
 
     async function onRequest(props: { pagination: PaginationInterface; filter?: string }) {
       const { page, rowsPerPage, sortBy, descending } = props.pagination;
+      const filter = props.filter;
       loading.value = true;
       const fetchCount = rowsPerPage === 0 ? pagination.value.rowsNumber : rowsPerPage;
       const startRow = (page - 1) * rowsPerPage;
@@ -161,6 +173,7 @@ export default defineComponent({
           offset: startRow,
           descending: descending ? true : undefined,
           sortBy,
+          filter,
         });
         pagination.value.page = page;
         pagination.value.rowsPerPage = rowsPerPage;
@@ -231,6 +244,7 @@ export default defineComponent({
       onRequest,
       getFirstname,
       getLastname,
+      filter,
     };
   },
 });

src/store.ts

@@ -77,7 +77,13 @@ export const useBalanceStore = defineStore({
       return data;
     },
 
-    async getBalances(filter?: { limit?: number; offset?: number; sortBy?: string; descending?: boolean }) {
+    async getBalances(filter?: {
+      limit?: number;
+      offset?: number;
+      sortBy?: string;
+      descending?: boolean;
+      filter?: string;
+    }) {
       const { data } = await api.get<{ balances: BalancesResponse[]; count: number }>('/balance', {
         params: filter,
       });