diff --git a/ts/components/ReviewSiteColumnDetail.vue b/ts/components/ReviewSiteColumnDetail.vue index a70d53fd..0bead80c 100644 --- a/ts/components/ReviewSiteColumnDetail.vue +++ b/ts/components/ReviewSiteColumnDetail.vue @@ -47,6 +47,7 @@ + Leads
diff --git a/ts/composable/use-query-param.ts b/ts/composable/use-query-param.ts new file mode 100644 index 00000000..4167ef62 --- /dev/null +++ b/ts/composable/use-query-param.ts @@ -0,0 +1,43 @@ +import { computed, ComputedRef } from "vue"; +import { useRoute, useRouter, LocationQueryValue } from "vue-router"; + +export function useQueryParam(paramName: string) { + const route = useRoute(); + const router = useRouter(); + + // Returns string | null for easier handling + const value = computed(() => { + const param = route.query[paramName]; + + // Handle arrays by taking first value, or return null + if (Array.isArray(param)) { + return param[0] ?? null; + } + + return param ?? null; + }); + + const setValue = (newValue: string | number) => { + router.replace({ + name: route.name, + query: { + ...route.query, + [paramName]: String(newValue), + }, + }); + }; + + const removeValue = () => { + const { [paramName]: _, ...rest } = route.query; + router.replace({ + name: route.name, + query: rest, + }); + }; + + return { + value, + setValue, + removeValue, + }; +} diff --git a/ts/view/review/Site.vue b/ts/view/review/Site.vue index 76ff7263..5761e113 100644 --- a/ts/view/review/Site.vue +++ b/ts/view/review/Site.vue @@ -53,15 +53,18 @@ body {