Skip to content

Commit

Permalink
🐛 Fix select lazy loading, breaking filtering
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheAsel
TheAsel committed Oct 2, 2024
1 parent a5b2122 commit df478f5
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 92 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
96 changes: 51 additions & 45 deletions src/components/Encounter/CreaturesTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
86 changes: 47 additions & 39 deletions src/components/Shop/ShopTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
Expand All @@ -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;
Expand Down Expand Up @@ -141,7 +140,6 @@ const columns: {
sortable: true,
style: 'min-width: 100px; max-width: 180px;'
},
{
name: 'id',
label: 'Shop',
Expand Down Expand Up @@ -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');
}
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand Down
14 changes: 7 additions & 7 deletions src/components/Shop/ShopTable/ShopBuilder.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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();
Expand Down Expand Up @@ -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;
});
};
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down

0 comments on commit df478f5

Please sign in to comment.