[ROMM-1019] Clickable filter buttons on details view

frontend/src/components/Details/Info/GameInfo.vue

@@ -1,19 +1,29 @@
 <script setup lang="ts">
-import storeGalleryFilter from "@/stores/galleryFilter";
+import storeGalleryFilter, { type FilterType } from "@/stores/galleryFilter";
 import type { DetailedRom } from "@/stores/roms";
 import { ref } from "vue";
 import { useDisplay } from "vuetify";
+import { useRouter } from "vue-router";
 
-defineProps<{ rom: DetailedRom }>();
+const props = defineProps<{ rom: DetailedRom }>();
 const { xs } = useDisplay();
-const galleryFilter = storeGalleryFilter();
+const galleryFilterStore = storeGalleryFilter();
 const show = ref(false);
+const router = useRouter();
+
+function onFilterClick(filter: FilterType, value: string) {
+  router.push({
+    name: "platform",
+    params: { platform: props.rom.platform_id },
+    query: { filter, value },
+  });
+}
 </script>
 <template>
   <v-row no-gutters>
     <v-col>
       <v-divider class="mx-2 my-4" />
-      <template v-for="filter in galleryFilter.filters" :key="filter">
+      <template v-for="filter in galleryFilterStore.filters" :key="filter">
         <v-row
           v-if="rom[filter].length > 0"
           class="align-center my-3"
@@ -26,6 +36,7 @@ const show = ref(false);
             <v-chip
               v-for="value in rom[filter]"
               :key="value"
+              @click="onFilterClick(filter, value)"
               size="small"
               variant="outlined"
               class="my-1 mr-2"

frontend/src/stores/galleryFilter.ts

@@ -1,11 +1,15 @@
 import { normalizeString } from "@/utils";
 import { defineStore } from "pinia";
 
+const filters = ["genres", "franchises", "collections", "companies"] as const;
+
+export type FilterType = (typeof filters)[number];
+
 export default defineStore("galleryFilter", {
   state: () => ({
     activeFilterDrawer: false,
     filterSearch: "",
-    filters: ["genres", "franchises", "collections", "companies"] as const,
+    filters: filters,
     filterGenres: [] as string[],
     filterFranchises: [] as string[],
     filterCollections: [] as string[],
@@ -25,19 +29,19 @@ export default defineStore("galleryFilter", {
     setFilterSearch(filterSearch: string) {
       this.filterSearch = normalizeString(filterSearch);
     },
-    setFilterGenre(genres: string[]) {
+    setFilterGenres(genres: string[]) {
       this.filterGenres = genres;
     },
-    setFilterFranchise(franchises: string[]) {
+    setFilterFranchises(franchises: string[]) {
       this.filterFranchises = franchises;
     },
-    setFilterCollection(collections: string[]) {
+    setFilterCollections(collections: string[]) {
       this.filterCollections = collections;
     },
-    setFilterCompany(companies: string[]) {
+    setFilterCompanies(companies: string[]) {
       this.filterCompanies = companies;
     },
-    setSelectedGenre(genre: string) {
+    setSelectedFilterGenre(genre: string) {
       this.selectedGenre = genre;
     },
     setSelectedFilterFranchise(franchise: string) {

frontend/src/views/Gallery/Collection.vue

@@ -83,28 +83,28 @@ async function fetchRoms() {
 }
 
 function setFilters() {
-  galleryFilterStore.setFilterGenre([
+  galleryFilterStore.setFilterGenres([
     ...new Set(
       romsStore.filteredRoms
         .flatMap((rom) => rom.genres.map((genre) => genre))
         .sort()
     ),
   ]);
-  galleryFilterStore.setFilterFranchise([
+  galleryFilterStore.setFilterFranchises([
     ...new Set(
       romsStore.filteredRoms
         .flatMap((rom) => rom.franchises.map((franchise) => franchise))
         .sort()
     ),
   ]);
-  galleryFilterStore.setFilterCompany([
+  galleryFilterStore.setFilterCompanies([
     ...new Set(
       romsStore.filteredRoms
         .flatMap((rom) => rom.companies.map((company) => company))
         .sort()
     ),
   ]);
-  galleryFilterStore.setFilterCollection([
+  galleryFilterStore.setFilterCollections([
     ...new Set(
       romsStore.filteredRoms
         .flatMap((rom) => rom.collections.map((collection) => collection))

frontend/src/views/Gallery/Platform.vue

@@ -7,7 +7,7 @@ import GameCard from "@/components/common/Game/Card/Base.vue";
 import GameDataTable from "@/components/common/Game/Table.vue";
 import platformApi from "@/services/api/platform";
 import romApi from "@/services/api/rom";
-import storeGalleryFilter from "@/stores/galleryFilter";
+import storeGalleryFilter, { type FilterType } from "@/stores/galleryFilter";
 import storeGalleryView from "@/stores/galleryView";
 import storePlatforms from "@/stores/platforms";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
@@ -83,28 +83,28 @@ async function fetchRoms() {
 }
 
 function setFilters() {
-  galleryFilterStore.setFilterGenre([
+  galleryFilterStore.setFilterGenres([
     ...new Set(
       romsStore.filteredRoms
         .flatMap((rom) => rom.genres.map((genre) => genre))
         .sort()
     ),
   ]);
-  galleryFilterStore.setFilterFranchise([
+  galleryFilterStore.setFilterFranchises([
     ...new Set(
       romsStore.filteredRoms
         .flatMap((rom) => rom.franchises.map((franchise) => franchise))
         .sort()
     ),
   ]);
-  galleryFilterStore.setFilterCompany([
+  galleryFilterStore.setFilterCompanies([
     ...new Set(
       romsStore.filteredRoms
         .flatMap((rom) => rom.companies.map((company) => company))
         .sort()
     ),
   ]);
-  galleryFilterStore.setFilterCollection([
+  galleryFilterStore.setFilterCollections([
     ...new Set(
       romsStore.filteredRoms
         .flatMap((rom) => rom.collections.map((collection) => collection))
@@ -196,6 +196,13 @@ function resetGallery() {
   itemsShown.value = itemsPerBatch.value;
 }
 
+const filterToSetFilter: Record<FilterType, Function> = {
+  genres: galleryFilterStore.setSelectedFilterGenre,
+  franchises: galleryFilterStore.setSelectedFilterFranchise,
+  collections: galleryFilterStore.setSelectedFilterCollection,
+  companies: galleryFilterStore.setSelectedFilterCompany,
+};
+
 onMounted(async () => {
   const routePlatformId = Number(route.params.platform);
   const routePlatform = platforms.get(routePlatformId);
@@ -219,6 +226,16 @@ onMounted(async () => {
     resetGallery();
     await fetchRoms();
     setFilters();
+
+    // Check if there are query params to set filters
+    if (route.query.filter && route.query.value) {
+      const filter = route.query.filter as FilterType;
+      const value = route.query.value as string;
+      filterToSetFilter[filter](value);
+      onFilterChange(); // Update the UI
+      router.replace({ query: {} }); // Clear query params
+    }
+
     window.addEventListener("wheel", onScroll);
     window.addEventListener("scroll", onScroll);
   }