From a52ab890e0bd8eb73cc6e9a118cff5c04042a944 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Wed, 3 May 2023 14:04:40 +0200
Subject: [PATCH] add filter to search user

---
 src/pages/BalanceAdminPage.vue | 160 ++++++++++++++++++---------------
 src/store.ts                   |   8 +-
 2 files changed, 94 insertions(+), 74 deletions(-)

diff --git a/src/pages/BalanceAdminPage.vue b/src/pages/BalanceAdminPage.vue
index 7497000..156ec31 100644
--- a/src/pages/BalanceAdminPage.vue
+++ b/src/pages/BalanceAdminPage.vue
@@ -1,76 +1,86 @@
 <template>
-  <div>
-    <q-page padding>
-      <q-table v-model:pagination="pagination" :rows="rows" row-key="userid" :columns="columns" @request="onRequest">
-        <template #top-right>
-          <div class="full-width row q-gutter-sm">
-            <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>
-        </template>
-        <template #body="props">
-          <q-tr :props="props">
-            <q-td key="firstname" :props="props">
-              {{ getFirstname(props.row.userid) }}
-            </q-td>
-            <q-td key="lastname" :props="props">
-              {{ getLastname(props.row.userid) }}
-            </q-td>
-            <q-td key="limit" :props="props">
-              {{ getLimit(props.row.userid) || 'Kein Limit' }}
-              <q-popup-edit
-                v-slot="scope"
-                v-model="limit"
-                buttons
-                label-cancel="Abbrechen"
-                label-set="Speichern"
-                @save="setLimit(props.row.userid)"
-                @cancel="limit = undefined"
-              >
-                <q-input v-model.number="scope.value" label="Limit" type="number" step="0.01" suffix="€" filled dense />
-              </q-popup-edit>
-            </q-td>
-            <q-td key="balance" :props="props">
-              {{ getBalance(props.row.debit, props.row.credit) }}€
-              <q-menu anchor="bottom middle" self="top middle" :persistent="$q.platform.is.mobile">
-                <q-card>
-                  <q-card-section>
-                    <q-tab-panels v-model="tab" animated>
-                      <q-tab-panel name="add" class="fit column q-gutter-sm">
-                        <balance-add-body
-                          :user="props.row.userid"
-                          :can-add-shortcut="false"
-                          @change-balance="updateBalance"
-                        />
-                      </q-tab-panel>
-                      <q-tab-panel name="transfer" class="fit column q-gutter-sm">
-                        <balance-transfer-body :user="props.row.userid" @change-balance="updateBalances" />
-                      </q-tab-panel>
-                    </q-tab-panels>
-                  </q-card-section>
-                  <div v-if="$q.platform.is.mobile" class="full-width row justify-center">
-                    <q-btn v-close-popup label="Abbrechen" flat color="primary" />
-                  </div>
-                  <q-tabs
-                    v-model="tab"
-                    dense
-                    class="text-grey"
-                    active-color="primary"
-                    indicator-color="primary"
-                    align="justify"
-                    narrow-indicator
-                  >
-                    <q-tab name="add" label="Anschreiben" />
-                    <q-tab name="transfer" label="Übertragen" />
-                  </q-tabs>
-                </q-card>
-              </q-menu>
-            </q-td>
-          </q-tr>
-        </template>
-      </q-table>
-    </q-page>
-  </div>
+  <q-page padding>
+    <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>
+      </template>
+      <template #body="props">
+        <q-tr :props="props">
+          <q-td key="firstname" :props="props">
+            {{ getFirstname(props.row.userid) }}
+          </q-td>
+          <q-td key="lastname" :props="props">
+            {{ getLastname(props.row.userid) }}
+          </q-td>
+          <q-td key="limit" :props="props">
+            {{ getLimit(props.row.userid) || 'Kein Limit' }}
+            <q-popup-edit
+              v-slot="scope"
+              v-model="limit"
+              buttons
+              label-cancel="Abbrechen"
+              label-set="Speichern"
+              @save="setLimit(props.row.userid)"
+              @cancel="limit = undefined"
+            >
+              <q-input v-model.number="scope.value" label="Limit" type="number" step="0.01" suffix="€" filled dense />
+            </q-popup-edit>
+          </q-td>
+          <q-td key="balance" :props="props">
+            {{ getBalance(props.row.debit, props.row.credit) }}€
+            <q-menu anchor="bottom middle" self="top middle" :persistent="$q.platform.is.mobile">
+              <q-card>
+                <q-card-section>
+                  <q-tab-panels v-model="tab" animated>
+                    <q-tab-panel name="add" class="fit column q-gutter-sm">
+                      <balance-add-body
+                        :user="props.row.userid"
+                        :can-add-shortcut="false"
+                        @change-balance="updateBalance"
+                      />
+                    </q-tab-panel>
+                    <q-tab-panel name="transfer" class="fit column q-gutter-sm">
+                      <balance-transfer-body :user="props.row.userid" @change-balance="updateBalances" />
+                    </q-tab-panel>
+                  </q-tab-panels>
+                </q-card-section>
+                <div v-if="$q.platform.is.mobile" class="full-width row justify-center">
+                  <q-btn v-close-popup label="Abbrechen" flat color="primary" />
+                </div>
+                <q-tabs
+                  v-model="tab"
+                  dense
+                  class="text-grey"
+                  active-color="primary"
+                  indicator-color="primary"
+                  align="justify"
+                  narrow-indicator
+                >
+                  <q-tab name="add" label="Anschreiben" />
+                  <q-tab name="transfer" label="Übertragen" />
+                </q-tabs>
+              </q-card>
+            </q-menu>
+          </q-td>
+        </q-tr>
+      </template>
+    </q-table>
+  </q-page>
 </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,
     };
   },
 });
diff --git a/src/store.ts b/src/store.ts
index 6f1dde1..4acce56 100644
--- a/src/store.ts
+++ b/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,
       });