From fe5bc8090a08166c9b7dbbacdd07097257dfe792 Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Sun, 27 Sep 2020 19:17:50 +0200 Subject: [PATCH] Preventing refresh on filter addition --- src/app/app-routing.module.ts | 6 +- .../items-grid/items-grid.component.ts | 65 +++++++++++-------- src/app/misc/custom-route-reuse-strategy.ts | 35 ++++++++++ 3 files changed, 77 insertions(+), 29 deletions(-) create mode 100644 src/app/misc/custom-route-reuse-strategy.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index d33a99fb..b4df29ee 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,6 +1,7 @@ import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; +import { RouteReuseStrategy, RouterModule, Routes } from "@angular/router"; import { ItemsGridComponent } from './components/items-grid/items-grid.component'; +import { CustomRouteReuseStrategy } from "./misc/custom-route-reuse-strategy"; import { NotFoundComponent } from './pages/not-found/not-found.component'; import { PageResolver } from './services/page-resolver.service'; import { ShowDetailsComponent } from './pages/show-details/show-details.component'; @@ -96,7 +97,7 @@ const routes: Routes = [ @NgModule({ imports: [RouterModule.forRoot(routes, { - scrollPositionRestoration: "enabled", + scrollPositionRestoration: "enabled" })], exports: [RouterModule], providers: [ @@ -108,6 +109,7 @@ const routes: Routes = [ EpisodeService, PageResolver.resolvers, ItemResolver.resolvers, + {provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy} ] }) export class AppRoutingModule { } diff --git a/src/app/components/items-grid/items-grid.component.ts b/src/app/components/items-grid/items-grid.component.ts index 195f8df9..a70e7b4b 100644 --- a/src/app/components/items-grid/items-grid.component.ts +++ b/src/app/components/items-grid/items-grid.component.ts @@ -1,5 +1,5 @@ import { Component, Input } from "@angular/core"; -import { ActivatedRoute, ActivatedRouteSnapshot, Router } from "@angular/router"; +import { ActivatedRoute, ActivatedRouteSnapshot, Params, Router } from "@angular/router"; import { DomSanitizer } from '@angular/platform-browser'; import { Genre } from "../../../models/resources/genre"; import { LibraryItem } from "../../../models/resources/library-item"; @@ -44,41 +44,54 @@ export class ItemsGridComponent { this.page = data.items; }); + this.route.queryParams.subscribe((data) => + { + this.updateGenresFilterFromQuery(data); + this.updateStudioFilterFromQuery(data); + }); this.loader.load("/api/genres?limit=0").subscribe(data => { this.genres = data; - - let selectedGenres: string[] = []; - if (this.route.snapshot.queryParams.genres?.startsWith("ctn:")) - selectedGenres = this.route.snapshot.queryParams.genres.substr(4).split(','); - else if (this.route.snapshot.queryParams.genres != null) - selectedGenres = this.route.snapshot.queryParams.genres.split(','); - if (this.router.url.startsWith("/genre")) - selectedGenres.push(this.route.snapshot.params.slug); - - this.filters.genres = this.genres.filter(x => selectedGenres.includes(x.slug)); + this.updateGenresFilterFromQuery(this.route.snapshot.queryParams); }); this.loader.load("/api/studios?limit=0").subscribe(data => { this.studios = data; - this.filters.studio = this.studios.find(x => x.slug == this.route.snapshot.queryParams.studio - || x.slug == this.route.snapshot.params.slug); + this.updateStudioFilterFromQuery(this.route.snapshot.queryParams); }); } - // TODO disable page refresh when swiching from /browse to /studio to /genre. + updateGenresFilterFromQuery(query: Params) + { + let selectedGenres: string[] = []; + if (query.genres?.startsWith("ctn:")) + selectedGenres = query.genres.substr(4).split(','); + else if (query.genres != null) + selectedGenres = query.genres.split(','); + if (this.router.url.startsWith("/genre")) + selectedGenres.push(query.slug); + + this.filters.genres = this.genres.filter(x => selectedGenres.includes(x.slug)); + } + + updateStudioFilterFromQuery(query: Params) + { + this.filters.studio = this.studios.find(x => x.slug == query.studio + || x.slug == this.route.snapshot.params.slug); + } + // TODO /collection & /people does not get refreshed data from the provider when using a new filter/sort. // TODO add /people to the switch list. /* - * /browse -> /api/items | /api/shows - * /browse/:library -> /api/library/:slug/items | /api/library/:slug/shows - * /genre/:slug -> /api/shows - * /studio/:slug -> /api/shows - * - * /collection/:slug -> /api/collection/:slug/shows |> AS @Input - * /people/:slug -> /api/people/:slug/roles |> AS @Input - */ + * /browse -> /api/items | /api/shows + * /browse/:library -> /api/library/:slug/items | /api/library/:slug/shows + * /genre/:slug -> /api/shows + * /studio/:slug -> /api/shows + * + * /collection/:slug -> /api/collection/:slug/shows |> AS @Input + * /people/:slug -> /api/people/:slug/roles |> AS @Input + */ static routeMapper(route: ActivatedRouteSnapshot, endpoint: string, query: [string, string][]): string { @@ -135,8 +148,7 @@ export class ItemsGridComponent { this.router.navigate(["genre", this.filters.genres[0].slug], { replaceUrl: true, - queryParams: {[category]: null}, - queryParamsHandling: "merge" + queryParams: {sortBy: this.route.snapshot.queryParams.sortBy} }); return; } @@ -144,15 +156,14 @@ export class ItemsGridComponent { this.router.navigate(["studio", this.filters.studio.slug], { replaceUrl: true, - queryParams: {[category]: null}, - queryParamsHandling: "merge" + queryParams: {sortBy: this.route.snapshot.queryParams.sortBy} }); return; } if (this.getFilterCount() == 0 || this.router.url != "/browse") { let params = {[category]: param} - if (this.router.url.startsWith("/studio")) + if (this.router.url.startsWith("/studio") && category != "studio") params.studio = this.route.snapshot.params.slug; if (this.router.url.startsWith("/genre") && category != "genres") params.genres = `${this.route.snapshot.params.slug}`; diff --git a/src/app/misc/custom-route-reuse-strategy.ts b/src/app/misc/custom-route-reuse-strategy.ts new file mode 100644 index 00000000..e665a461 --- /dev/null +++ b/src/app/misc/custom-route-reuse-strategy.ts @@ -0,0 +1,35 @@ +import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from "@angular/router"; + +export class CustomRouteReuseStrategy extends RouteReuseStrategy +{ + shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean + { + if (curr.routeConfig?.path == "browse" + || curr.routeConfig?.path == "genre/:slug" + || curr.routeConfig?.path == "studio/:slug") + { + console.log(`${curr.routeConfig?.path} - ${future.routeConfig?.path}`) + return future.routeConfig.path == "browse" + || future.routeConfig.path == "genre/:slug" + || future.routeConfig.path == "studio/:slug"; + } + return future.routeConfig === curr.routeConfig; + } + + shouldAttach(route: ActivatedRouteSnapshot): boolean + { + return false; + } + + shouldDetach(route: ActivatedRouteSnapshot): boolean + { + return false; + } + + store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {} + + retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null + { + return null; + } +}