From ada296aedf06302b473d2939a7510d7b3b940d9e Mon Sep 17 00:00:00 2001
From: tobinio <Tobias.frischmann1@gmail.com>
Date: Sun, 6 Oct 2024 14:53:30 +0200
Subject: [PATCH] feat: improve filter header behavior

---
 app/components/navigation/FilterItem.vue |  2 +-
 app/composables/useFilterItem.ts         | 15 ++++++++++++---
 app/pages/charts.vue                     | 16 ++++++++++------
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/app/components/navigation/FilterItem.vue b/app/components/navigation/FilterItem.vue
index 220c9d3..4eee360 100644
--- a/app/components/navigation/FilterItem.vue
+++ b/app/components/navigation/FilterItem.vue
@@ -13,7 +13,7 @@ const { canClear = false } = defineProps<{
   <div id="main">
     <abbr :title="explanation" id="title">{{ title }}</abbr>
     <select v-model="model">
-      <option v-if="canClear">
+      <option v-if="canClear" :value="undefined">
       </option>
       <option v-for="option in options" :value="option">
         {{ option }}
diff --git a/app/composables/useFilterItem.ts b/app/composables/useFilterItem.ts
index 92ebaee..e816f36 100644
--- a/app/composables/useFilterItem.ts
+++ b/app/composables/useFilterItem.ts
@@ -1,16 +1,25 @@
-export function useFilterItem(key: string, defaultValue: string | undefined) {
+export function useFilterItem(
+	key: string,
+	defaultValue: string | undefined | Ref<string | undefined>,
+) {
 	const route = useRoute();
 	const router = useRouter();
 
+	const defaultValueRef = toRef(defaultValue);
+
 	const item = ref(
-		(route.query[key] ? route.query[key] : defaultValue) as string,
+		(route.query[key] ? route.query[key] : defaultValueRef.value) as string,
 	);
 
+	watch(defaultValueRef, () => {
+		item.value = defaultValueRef.value as string;
+	});
+
 	watch(item, async () => {
 		await router.replace({
 			query: {
 				...route.query,
-				[key]: item.value,
+				[key]: item.value === defaultValueRef.value ? undefined : item.value,
 			},
 		});
 	});
diff --git a/app/pages/charts.vue b/app/pages/charts.vue
index e17a012..1f2133d 100644
--- a/app/pages/charts.vue
+++ b/app/pages/charts.vue
@@ -18,14 +18,18 @@ const exclusive = useFilterItem("exclusive", "yes");
 const exclusiveBool = computed(() => exclusive.value === "yes");
 
 const versionFrom = useFilterItem("versionFrom", undefined);
-const versionTo = useFilterItem("versionFrom", undefined);
-const { to, from } = await useVersionRange(versionGroup, versionTo, versionFrom);
+const versionTo = useFilterItem("versionTo", undefined);
+const { to, from } = await useVersionRange(
+	versionGroup,
+	versionTo,
+	versionFrom,
+);
 
 const gameVersions = await useGameVersions(versionGroup);
-const version = useFilterItem(
-	"version",
-	gameVersions.value[gameVersions.value.length - 1],
-);
+const defaultVersion = computed(() => {
+	return gameVersions.value[gameVersions.value.length - 1] as string;
+});
+const version = useFilterItem("version", defaultVersion);
 
 const url = computed(() => {
 	return time.value === "current" ? "/api/stats" : "/api/statsTime";
-- 
2.51.2