vbatts/homebox
1
0
Fork 0
forked from mirrors/homebox
Code Pull requests Activity

resolve search state problems

Browse source
This commit is contained in:
Hayden 2022-12-31 12:46:58 -09:00
parent 412977ea6c
commit b5b65af6b4
No known key found for this signature in database
GPG key ID: 17CF79474E257545
4 changed files with 97 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
frontend/composables/use-route-params.ts
View file

@ -1,3 +1,5 @@
import { useRouteQuery as useRouteQueryBase } from "@vueuse/router";
/* eslint no-redeclare: 0 */
import { WritableComputedRef } from "vue";
@ -10,12 +12,24 @@ export function useRouteQuery(q: string, def: any): WritableComputedRef<any> {
const route = useRoute();
const router = useRouter();
const v = useRouteQueryBase(q, def);
const first = computed<string>(() => {
const qv = route.query[q];
if (Array.isArray(qv)) {
return qv[0]?.toString() || def;
}
return qv?.toString() || def;
});
onMounted(() => {
if (route.query[q] === undefined) {
v.value = def;
}
});
switch (typeof def) {
case "string":
if (route.query[q] === undefined) {
router.push({ query: { ...route.query, [q]: def } });
}
return computed({
get: () => {
const qv = route.query[q];
@ -46,11 +60,7 @@ export function useRouteQuery(q: string, def: any): WritableComputedRef<any> {
case "boolean":
return computed({
get: () => {
const qv = route.query[q];
if (Array.isArray(qv)) {
return qv[0] === "true";
}
return qv === "true";
return first.value === "true";
},
set: v => {
const query = { ...route.query, [q]: `${v}` };
@ -59,16 +69,9 @@ export function useRouteQuery(q: string, def: any): WritableComputedRef<any> {
});
case "number":
return computed({
get: () => {
const qv = route.query[q];
if (Array.isArray(qv) && qv.length > 0) {
return parseInt(qv[0] as string, 10);
}
return parseInt(qv as string, 10) || def;
},
set: v => {
const query = { ...route.query, [q]: `${v}` };
router.push({ query });
get: () => parseInt(first.value, 10),
set: nv => {
v.value = nv.toString();
},
});
}

4
frontend/package.json
View file

@ -35,6 +35,7 @@
"@tailwindcss/forms": "^0.5.2",
"@tailwindcss/typography": "^0.5.4",
"@vueuse/nuxt": "^9.1.1",
"@vueuse/router": "^9.9.0",
"autoprefixer": "^10.4.8",
"chart.js": "^4.0.1",
"daisyui": "^2.24.0",
@ -44,6 +45,7 @@
"postcss": "^8.4.16",
"tailwindcss": "^3.1.8",
"vue": "^3.2.38",
"vue-chartjs": "^4.1.2"
"vue-chartjs": "^4.1.2",
"vue-router": "4"
}
}

67
frontend/pages/items.vue
View file

@ -13,6 +13,8 @@
});
const searchLocked = ref(false);
const queryParamsInitialized = ref(false);
const initialSearch = ref(true);
const api = useUserApi();
const loading = useMinLoader(2000);
@ -20,21 +22,21 @@
const total = ref(0);
const page = useRouteQuery("page", 1);
const perPage = useRouteQuery("perPage", 24);
const pageSize = useRouteQuery("pageSize", 21);
const query = useRouteQuery("q", "");
const advanced = useRouteQuery("advanced", false);
const includeArchived = useRouteQuery("archived", false);
const hasNext = computed(() => {
return page.value * perPage.value < total.value;
return page.value * pageSize.value < total.value;
});
const totalPages = computed(() => {
return Math.ceil(total.value / perPage.value);
return Math.ceil(total.value / pageSize.value);
});
function next() {
page.value = Math.min(Math.ceil(total.value / perPage.value), page.value + 1);
page.value = Math.min(Math.ceil(total.value / pageSize.value), page.value + 1);
}
const hasPrev = computed(() => {
@ -46,7 +48,14 @@
}
async function resetPageSearch() {
page.value = 1;
if (searchLocked.value) {
return;
}
if (!initialSearch.value) {
page.value = 1;
}
items.value = [];
await search();
}
@ -67,29 +76,30 @@
labels,
includeArchived: includeArchived.value,
page: page.value,
pageSize: perPage.value,
pageSize: pageSize.value,
});
if (error) {
page.value--;
page.value = Math.max(1, page.value - 1);
loading.value = false;
return;
}
if (!data.items || data.items.length === 0) {
page.value--;
page.value = Math.max(1, page.value - 1);
loading.value = false;
return;
}
total.value = data.total;
items.value = data.items;
loading.value = false;
initialSearch.value = false;
}
const route = useRoute();
const router = useRouter();
const queryParamsInitialized = ref(false);
onMounted(async () => {
loading.value = true;
// Wait until locations and labels are loaded
@ -166,8 +176,10 @@
}
});
watchDebounced([selectedLocations, selectedLabels, query, page, perPage], search, { debounce: 250, maxWait: 1000 });
watch(includeArchived, search);
watchDebounced([selectedLocations, selectedLabels, query], resetPageSearch, { debounce: 250, maxWait: 1000 });
watch(includeArchived, resetPageSearch);
watchDebounced([page, pageSize], search, { debounce: 250, maxWait: 1000 });
</script>
<template>
@ -199,19 +211,32 @@
</BaseCard>
<section class="mt-10">
<BaseSectionHeader> Items </BaseSectionHeader>
<span class="text-base font-medium"> {{ total }} Results </span>
<p class="text-base font-medium flex items-center">
{{ total }} Results
<span class="text-base ml-auto"> Page {{ page }} of {{ totalPages }}</span>
</p>
<div ref="cardgrid" class="grid mt-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<TransitionGroup appear name="list">
<ItemCard v-for="item in items" :key="item.id" :item="item" />
</TransitionGroup>
<ItemCard v-for="item in items" :key="item.id" :item="item" />
<div class="hidden first:inline text-xl">No Items Found</div>
</div>
<div v-if="items.length > 0" class="flex">
<div class="btn-group mx-auto mt-10">
<button :disabled="!hasPrev" class="btn" @click="prev">«</button>
<button class="btn">Page {{ page }} of {{ totalPages }}</button>
<button :disabled="!hasNext" class="btn" @click="next">»</button>
<div v-if="items.length > 0" class="mt-10 flex gap-2 flex-col items-center">
<div class="flex">
<div class="btn-group">
<button :disabled="!hasPrev" class="btn text-no-transform" @click="prev">
<Icon class="mr-1 h-6 w-6" name="mdi-chevron-left" />
Prev
</button>
<button v-if="hasPrev" class="btn text-no-transform" @click="page = 1">First</button>
<button v-if="hasNext" class="btn text-no-transform" @click="page = totalPages">Last</button>
<button :disabled="!hasNext" class="btn text-no-transform" @click="next">
Next
<Icon class="ml-1 h-6 w-6" name="mdi-chevron-right" />
</button>
</div>
</div>
<p class="text-sm font-bold">Page {{ page }} of {{ totalPages }}</p>
</div>
</section>
</BaseContainer>

26
frontend/pnpm-lock.yaml
View file

@ -12,6 +12,7 @@ specifiers:
'@typescript-eslint/eslint-plugin': ^5.36.2
'@typescript-eslint/parser': ^5.36.2
'@vueuse/nuxt': ^9.1.1
'@vueuse/router': ^9.9.0
autoprefixer: ^10.4.8
chart.js: ^4.0.1
daisyui: ^2.24.0
@ -32,6 +33,7 @@ specifiers:
vitest: ^0.22.1
vue: ^3.2.38
vue-chartjs: ^4.1.2
vue-router: '4'
dependencies:
'@iconify/vue': 3.2.1_vue@3.2.45
@ -41,6 +43,7 @@ dependencies:
'@tailwindcss/forms': 0.5.3_tailwindcss@3.2.4
'@tailwindcss/typography': 0.5.8_tailwindcss@3.2.4
'@vueuse/nuxt': 9.6.0_nuxt@3.0.0+vue@3.2.45
'@vueuse/router': 9.9.0_xsxatmlnmmg5bcuv3xdnj6fj7y
autoprefixer: 10.4.13_postcss@8.4.19
chart.js: 4.0.1
daisyui: 2.43.0_2lwn2upnx27dqeg6hqdu7sq75m
@ -51,6 +54,7 @@ dependencies:
tailwindcss: 3.2.4_postcss@8.4.19
vue: 3.2.45
vue-chartjs: 4.1.2_chart.js@4.0.1+vue@3.2.45
vue-router: 4.1.6_vue@3.2.45
devDependencies:
'@faker-js/faker': 7.6.0
@ -1339,6 +1343,19 @@ packages:
- vue
dev: false
/@vueuse/router/9.9.0_xsxatmlnmmg5bcuv3xdnj6fj7y:
resolution: {integrity: sha512-C6w3HZrU3aLde8t3cjcMfFVnw722Is9FtBNJH2wwUPUv7Fc0bKsqcOEq1yFM0f6K5QktHxlp2vcuV4/nA3xPQw==}
peerDependencies:
vue-router: '>=4.0.0-rc.1'
dependencies:
'@vueuse/shared': 9.9.0_vue@3.2.45
vue-demi: 0.13.11_vue@3.2.45
vue-router: 4.1.6_vue@3.2.45
transitivePeerDependencies:
- '@vue/composition-api'
- vue
dev: false
/@vueuse/shared/9.6.0_vue@3.2.45:
resolution: {integrity: sha512-/eDchxYYhkHnFyrb00t90UfjCx94kRHxc7J1GtBCqCG4HyPMX+krV9XJgVtWIsAMaxKVU4fC8NSUviG1JkwhUQ==}
dependencies:
@ -1348,6 +1365,15 @@ packages:
- vue
dev: false
/@vueuse/shared/9.9.0_vue@3.2.45:
resolution: {integrity: sha512-+D0XFwHG0T+uaIbCSlROBwm1wzs71B7n3KyDOxnvfEMMHDOzl09rYKwaE2AENmYwYPXfHPbSBRDD2gBVHbvTcg==}
dependencies:
vue-demi: 0.13.11_vue@3.2.45
transitivePeerDependencies:
- '@vue/composition-api'
- vue
dev: false
/@zhead/schema/1.0.7:
resolution: {integrity: sha512-jN2ipkz39YrHd8uulgw/Y7x8iOxvR/cTkin/E9zRQVP5JBIrrJMiGyFFj6JBW4Q029xJ5dKtpwy/3RZWpz+dkQ==}