From 015c292bdd13812ca808b63ead80aeb7b77f86b5 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Wed, 20 Sep 2023 22:18:29 +0200
Subject: [PATCH] Made user search results scrollable - Added ScrollPanel
 around search results.

---
 src/components/UserSearch/UserSearchComponent.vue | 8 ++++++--
 src/main.ts                                       | 3 ++-
 src/stores/pos.store.ts                           | 2 +-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/UserSearch/UserSearchComponent.vue b/src/components/UserSearch/UserSearchComponent.vue
index b0c312e..4bc7793 100644
--- a/src/components/UserSearch/UserSearchComponent.vue
+++ b/src/components/UserSearch/UserSearchComponent.vue
@@ -13,7 +13,10 @@
       </div>
     </div>
     <div class="flex-column gap-sm-3">
-      <UserSearchRowComponent v-for="user in sortedUsers" :user="user" :key="user.id" @click="selectUser(user)"/>
+      <ScrollPanel style="width: 100%; height: 20rem;">
+        <UserSearchRowComponent v-for="user in sortedUsers" :user="user" :key="user.id"
+                                @click="selectUser(user)"/>
+      </ScrollPanel>
     </div>
   </div>
 </template>
@@ -29,6 +32,7 @@ import { useAuthStore } from "@sudosos/sudosos-frontend-common";
 import { debounce } from 'lodash';
 import type { AxiosResponse } from 'axios';
 import { useSettingStore } from "@/stores/settings.store";
+import ScrollPanel from "primevue/scrollpanel";
 
 const searchQuery = ref<string>('');
 
@@ -73,7 +77,7 @@ const sortedUsers = computed(() => {
   const sortedOnId = filteredUsers.sort((a, b) => b.id - a.id);
   const validUsers = sortedOnId.filter(user => user.active && user.acceptedToS !== "NOT_ACCEPTED");
   const invalidUsers = sortedOnId.filter(user => !user.active || user.acceptedToS === "NOT_ACCEPTED");
-  return [...validUsers, ...invalidUsers].slice(0, 10);
+  return [...validUsers, ...invalidUsers];
 });
 
 const searchInput = ref<null | HTMLInputElement>(null);
diff --git a/src/main.ts b/src/main.ts
index 54140bb..2a5fc8f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -21,6 +21,7 @@ import Dropdown from "primevue/dropdown";
 
 import router from './router';
 import App from './App.vue';
+import ScrollPanel from "primevue/scrollpanel";
 
 const app = createApp(App);
 
@@ -41,6 +42,6 @@ app.component('OverlayPanel', OverlayPanel);
 // eslint-disable-next-line
 app.component('Dropdown', Dropdown);
 app.component('font-awesome-icon', FontAwesomeIcon);
-
+app.component('ScrollPanel', ScrollPanel);
 app.use(createPinia());
 app.mount('#app');
diff --git a/src/stores/pos.store.ts b/src/stores/pos.store.ts
index 7c11e1b..4b668dd 100644
--- a/src/stores/pos.store.ts
+++ b/src/stores/pos.store.ts
@@ -51,7 +51,7 @@ export const usePointOfSaleStore = defineStore('pointOfSale', {
     },
     async fetchUserPointOfSale(id: number): Promise<void> {
       this.usersPointOfSales = await fetchAllPages<PointOfSaleResponse>(0, 100,  (take, skip) =>
-          // @ts-ignore
+        // @ts-ignore
           apiService.user.getUsersPointsOfSale(id, take, skip)
       );
     },