feat: new-card-design (#196)

* card option 1

* UI updates for item card

* fix test error

* fix pagination issues on backend

* add integer support

* remove date from cards

* implement pagination for search page

* resolve search state problems

* other fixes

* fix broken datetime

* attempt to fix scroll behavior
This commit is contained in:
Hayden 2023-01-01 13:50:48 -08:00 committed by GitHub
parent 58d6f9a28c
commit 891d41b75f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 393 additions and 142 deletions

View file

@ -1,20 +1,35 @@
import { useRouteQuery as useRouteQueryBase } from "@vueuse/router";
/* eslint no-redeclare: 0 */
import { WritableComputedRef } from "vue";
export function useRouteQuery(q: string, def: string[]): WritableComputedRef<string[]>;
export function useRouteQuery(q: string, def: string): WritableComputedRef<string>;
export function useRouteQuery(q: string, def: boolean): WritableComputedRef<boolean>;
export function useRouteQuery(q: string, def: number): WritableComputedRef<number>;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
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];
@ -45,16 +60,21 @@ 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}` };
router.push({ query });
},
});
case "number":
return computed({
get: () => parseInt(first.value, 10),
set: nv => {
v.value = nv.toString();
},
});
}
throw new Error("Invalid type");
}