From 66f3edb7355a093010172ad01e0f6e11ff442849 Mon Sep 17 00:00:00 2001
From: TheAsel <a.osele@proton.me>
Date: Wed, 2 Oct 2024 16:34:07 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20select=20lazy=20loading,?=
 =?UTF-8?q?=20breaking=20filtering?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  2 +-
 src/components/Encounter/CreaturesTable.vue   | 96 ++++++++++---------
 src/components/Shop/ShopTable.vue             | 86 +++++++++--------
 src/components/Shop/ShopTable/ShopBuilder.vue | 14 +--
 4 files changed, 106 insertions(+), 92 deletions(-)

diff --git a/package.json b/package.json
index 6dcc200..39e0ef3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bybe-frontend",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Beyond Your Bestiary Explorer (BYBE) is a one-stop shop for the most useful tools for Pathfinder Second Edition GMs",
   "productName": "BYBE - Pathfinder 2e GM Tools",
   "author": "TheAsel",
diff --git a/src/components/Encounter/CreaturesTable.vue b/src/components/Encounter/CreaturesTable.vue
index f93f1fe..69f5fe4 100644
--- a/src/components/Encounter/CreaturesTable.vue
+++ b/src/components/Encounter/CreaturesTable.vue
@@ -494,21 +494,23 @@ const filterFamiliesFn = (val, update) => {
             class="row no-wrap items-center tw-border-r tw-border-gray-200 dark:tw-border-gray-700"
           >
             <div class="col-grow">
-              <q-select
-                v-model="filterSource"
-                multiple
-                dense
-                outlined
-                clearable
-                options-dense
-                :options="Object.freeze(filters.getCreatureFilters.sources)"
-                use-input
-                input-debounce="0"
-                :label="columns[0].label"
-                :style="columns[0].style"
-                virtual-scroll-item-size="32"
-                @filter="filterSourcesFn"
-              />
+              <KeepAlive>
+                <q-select
+                  v-model="filterSource"
+                  multiple
+                  dense
+                  outlined
+                  clearable
+                  options-dense
+                  :options="Object.freeze(filters.getCreatureFilters.sources)"
+                  use-input
+                  input-debounce="0"
+                  :label="columns[0].label"
+                  :style="columns[0].style"
+                  virtual-scroll-item-size="32"
+                  @filter="filterSourcesFn"
+                />
+              </KeepAlive>
             </div>
             <div class="col-shrink tw-mx-2"></div>
           </div>
@@ -641,21 +643,23 @@ const filterFamiliesFn = (val, update) => {
             class="row no-wrap items-center tw-border-r tw-border-gray-200 dark:tw-border-gray-700"
           >
             <div class="col-grow">
-              <q-select
-                v-model="filterTraits"
-                multiple
-                dense
-                outlined
-                clearable
-                options-dense
-                :options="Object.freeze(filters.getCreatureFilters.traits)"
-                use-input
-                input-debounce="0"
-                :label="columns[4].label"
-                :style="columns[4].style"
-                virtual-scroll-item-size="32"
-                @filter="filterTraitsFn"
-              />
+              <KeepAlive>
+                <q-select
+                  v-model="filterTraits"
+                  multiple
+                  dense
+                  outlined
+                  clearable
+                  options-dense
+                  :options="Object.freeze(filters.getCreatureFilters.traits)"
+                  use-input
+                  input-debounce="0"
+                  :label="columns[4].label"
+                  :style="columns[4].style"
+                  virtual-scroll-item-size="32"
+                  @filter="filterTraitsFn"
+                />
+              </KeepAlive>
             </div>
             <div class="col-shrink tw-mx-2">
               <q-btn
@@ -777,21 +781,23 @@ const filterFamiliesFn = (val, update) => {
             class="row no-wrap items-center tw-border-r tw-border-gray-200 dark:tw-border-gray-700"
           >
             <div class="col-grow">
-              <q-select
-                v-model="filterFamily"
-                multiple
-                dense
-                outlined
-                clearable
-                options-dense
-                :options="Object.freeze(filters.getCreatureFilters.families)"
-                use-input
-                input-debounce="0"
-                :label="columns[8].label"
-                :style="columns[8].style"
-                virtual-scroll-item-size="32"
-                @filter="filterFamiliesFn"
-              />
+              <KeepAlive>
+                <q-select
+                  v-model="filterFamily"
+                  multiple
+                  dense
+                  outlined
+                  clearable
+                  options-dense
+                  :options="Object.freeze(filters.getCreatureFilters.families)"
+                  use-input
+                  input-debounce="0"
+                  :label="columns[8].label"
+                  :style="columns[8].style"
+                  virtual-scroll-item-size="32"
+                  @filter="filterFamiliesFn"
+                />
+              </KeepAlive>
             </div>
             <div class="col-shrink tw-mx-2">
               <q-btn
diff --git a/src/components/Shop/ShopTable.vue b/src/components/Shop/ShopTable.vue
index c639121..295a0a4 100644
--- a/src/components/Shop/ShopTable.vue
+++ b/src/components/Shop/ShopTable.vue
@@ -52,8 +52,6 @@ const pagination = ref({
   rowsPerPage: 100,
   rowsNumber: 0
 });
-const sources = ref<string[]>(filterStore.getItemFilters.sources);
-const traits = ref<{ label: string; value: string }[]>([]);
 const filters = ref<{
   name_filter: string;
   level_filter: { min: number; max: number };
@@ -75,8 +73,9 @@ const filters = ref<{
 });
 const fullscreen = ref(false);
 const tableHeight = ref('height: calc(100vh - 122px)');
-const sourcesOptions = ref(['']);
-const traitsOptions = ref<{ label: string; value: string }[]>([]);
+
+const sourceFilter = ref<string[]>(filterStore.getItemFilters.sources);
+const traitFilter = ref<{ label: string; value: string }[]>(filterStore.getItemFilters.traits);
 
 const columns: {
   name: item_columns;
@@ -141,7 +140,6 @@ const columns: {
     sortable: true,
     style: 'min-width: 100px; max-width: 180px;'
   },
-
   {
     name: 'id',
     label: 'Shop',
@@ -397,14 +395,14 @@ try {
   const sourcesRequest = await requestFilters('sources');
   if (sourcesRequest) {
     filterStore.updateItemSources(sourcesRequest);
-    sourcesOptions.value = filterStore.getItemFilters.sources;
+    sourceFilter.value = filterStore.getItemFilters.sources;
   } else {
     throw new Error('Error fetching sources');
   }
   const traitsRequest = await requestFilters('traits');
   if (traitsRequest) {
     filterStore.updateItemTraits(traitsRequest);
-    traitsOptions.value = filterStore.getItemFilters.traits;
+    traitFilter.value = filterStore.getItemFilters.traits;
   } else {
     throw new Error('Error fetching traits');
   }
@@ -430,14 +428,18 @@ const toggleFullscreen = () => {
 const filterSourcesFn = (val, update) => {
   update(() => {
     const filter = val.toLowerCase();
-    sources.value = sourcesOptions.value.filter((v) => v.toLowerCase().indexOf(filter) > -1);
+    filterStore.getItemFilters.sources = sourceFilter.value.filter(
+      (v) => v.toLowerCase().indexOf(filter) > -1
+    );
   });
 };
 
 const filterTraitsFn = (val, update) => {
   update(() => {
     const filter = val.toLowerCase();
-    traits.value = traitsOptions.value.filter((v) => v.value.toLowerCase().indexOf(filter) > -1);
+    filterStore.getItemFilters.traits = traitFilter.value.filter(
+      (v) => v.label.toLowerCase().indexOf(filter) > -1
+    );
   });
 };
 </script>
@@ -595,21 +597,23 @@ const filterTraitsFn = (val, update) => {
             class="row no-wrap items-center tw-border-r tw-border-gray-200 dark:tw-border-gray-700"
           >
             <div class="col-grow">
-              <q-select
-                v-model="filters.source_filter"
-                multiple
-                dense
-                outlined
-                clearable
-                options-dense
-                :options="Object.freeze(sources)"
-                :label="columns[0].label"
-                :style="columns[0].style"
-                use-input
-                input-debounce="0"
-                virtual-scroll-item-size="32"
-                @filter="filterSourcesFn"
-              />
+              <KeepAlive>
+                <q-select
+                  v-model="filters.source_filter"
+                  multiple
+                  dense
+                  outlined
+                  clearable
+                  options-dense
+                  :options="Object.freeze(filterStore.getItemFilters.sources)"
+                  :label="columns[0].label"
+                  :style="columns[0].style"
+                  use-input
+                  input-debounce="0"
+                  virtual-scroll-item-size="32"
+                  @filter="filterSourcesFn"
+                />
+              </KeepAlive>
             </div>
             <div class="col-shrink tw-mx-2"></div>
           </div>
@@ -698,21 +702,25 @@ const filterTraitsFn = (val, update) => {
             class="row no-wrap items-center tw-border-r tw-border-gray-200 dark:tw-border-gray-700"
           >
             <div class="col-grow">
-              <q-select
-                v-model="filters.trait_filter"
-                multiple
-                dense
-                outlined
-                clearable
-                options-dense
-                :options="traits"
-                :label="columns[3].label"
-                :style="columns[3].style"
-                use-input
-                input-debounce="0"
-                virtual-scroll-item-size="32"
-                @filter="filterTraitsFn"
-              />
+              <KeepAlive>
+                <q-select
+                  v-model="filters.trait_filter"
+                  multiple
+                  dense
+                  outlined
+                  clearable
+                  options-dense
+                  :options="filterStore.getItemFilters.traits"
+                  :label="columns[3].label"
+                  :style="columns[3].style"
+                  map-options
+                  emit-value
+                  use-input
+                  input-debounce="0"
+                  virtual-scroll-item-size="32"
+                  @filter="filterTraitsFn"
+                />
+              </KeepAlive>
             </div>
             <div class="col-shrink tw-mx-2">
               <q-btn
diff --git a/src/components/Shop/ShopTable/ShopBuilder.vue b/src/components/Shop/ShopTable/ShopBuilder.vue
index 1d20cdf..15cad6a 100644
--- a/src/components/Shop/ShopTable/ShopBuilder.vue
+++ b/src/components/Shop/ShopTable/ShopBuilder.vue
@@ -30,7 +30,7 @@ const dialog = ref(false);
 const tab = ref('General');
 
 const selectedTraits = ref<{ label: string; value: string; state: boolean | null }[]>([]);
-const traitsOptions = ref<{ label: string; value: string; state: boolean | null }[]>(
+const traitOptions = ref<{ label: string; value: string; state: boolean | null }[]>(
   filters.getItemFilters.traits.map((trait) => ({
     label: trait.label,
     value: trait.value,
@@ -39,7 +39,7 @@ const traitsOptions = ref<{ label: string; value: string; state: boolean | null
 );
 
 const sourceFilter = filters.getItemFilters.sources;
-const traitFilter = traitsOptions.value;
+const traitFilter = traitOptions.value;
 
 const newTemplateDialog = ref(false);
 const newNameInput = ref();
@@ -497,7 +497,7 @@ const filterTraitsFn = (val, update) => {
   const filter = val.toLowerCase();
   const filtered = traitFilter.filter((v) => v.label.toLowerCase().indexOf(filter) > -1);
   update(() => {
-    traitsOptions.value = filtered;
+    traitOptions.value = filtered;
   });
 };
 
@@ -761,14 +761,14 @@ defineExpose({ generateShop });
                         dense
                         outlined
                         options-dense
-                        :options="traitsOptions"
+                        :options="traitOptions"
                         map-options
                         emit-value
                         use-input
                         input-debounce="0"
                         label="Traits"
                         style="max-width: 235px"
-                        :virtual-scroll-slice-size="traitsOptions.length"
+                        :virtual-scroll-slice-size="traitOptions.length"
                         @filter="filterTraitsFn"
                       >
                         <template #selected-item="scope">
@@ -1193,14 +1193,14 @@ defineExpose({ generateShop });
                         dense
                         outlined
                         options-dense
-                        :options="traitsOptions"
+                        :options="traitOptions"
                         map-options
                         emit-value
                         use-input
                         input-debounce="0"
                         label="Traits"
                         style="max-width: 235px"
-                        :virtual-scroll-slice-size="traitsOptions.length"
+                        :virtual-scroll-slice-size="traitOptions.length"
                         @filter="filterTraitsFn"
                       >
                         <template #selected-item="scope">