diff --git a/frontend/src/components/Details/Info/GameInfo.vue b/frontend/src/components/Details/Info/GameInfo.vue
index 7d5cd613f..d7d58355e 100644
--- a/frontend/src/components/Details/Info/GameInfo.vue
+++ b/frontend/src/components/Details/Info/GameInfo.vue
@@ -1,19 +1,29 @@
-
+
({
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) {
diff --git a/frontend/src/views/Gallery/Collection.vue b/frontend/src/views/Gallery/Collection.vue
index 4632be5d9..c5a7986b7 100644
--- a/frontend/src/views/Gallery/Collection.vue
+++ b/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))
diff --git a/frontend/src/views/Gallery/Platform.vue b/frontend/src/views/Gallery/Platform.vue
index 175dea7ad..99d92d47d 100644
--- a/frontend/src/views/Gallery/Platform.vue
+++ b/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 = {
+ 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);
}