From 5de68aebbe76cdeab7f85601e50ce292a6f6647e Mon Sep 17 00:00:00 2001 From: "Kyle J. Kemp" Date: Sun, 6 Oct 2024 15:31:39 -0500 Subject: [PATCH] add url deep linking for editor tables --- src/app/home/home.component.ts | 71 ++++++------------- src/app/services/query.service.ts | 2 + src/app/services/url.service.ts | 18 +++++ .../editor-base-table.component.ts | 30 ++++++++ 4 files changed, 71 insertions(+), 50 deletions(-) create mode 100644 src/app/services/url.service.ts diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 8610c97..9f99218 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -7,7 +7,7 @@ import { signal, viewChild, } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; +import { ActivatedRoute } from '@angular/router'; import { SwalComponent } from '@sweetalert2/ngx-sweetalert2'; import { isUndefined } from 'lodash'; import { LocalStorageService } from 'ngx-webstorage'; @@ -18,6 +18,7 @@ import { ElectronService } from '../services/electron.service'; import { ModService } from '../services/mod.service'; import { PinpointService } from '../services/pinpoint.service'; import { QueryService } from '../services/query.service'; +import { URLService } from '../services/url.service'; import { ValidationService } from '../services/validation.service'; @Component({ @@ -26,8 +27,8 @@ import { ValidationService } from '../services/validation.service'; styleUrls: ['./home.component.scss'], }) export class HomeComponent implements OnInit { - private router = inject(Router); private route = inject(ActivatedRoute); + private urlService = inject(URLService); private localStorage = inject(LocalStorageService); public pinpointService = inject(PinpointService); @@ -148,13 +149,9 @@ export class HomeComponent implements OnInit { this.localStorage.store('lasttab', newTab); - void this.router.navigate([], { - relativeTo: this.route, - queryParamsHandling: 'merge', - queryParams: { - tab: newTab, - sub: '', - }, + this.urlService.trackURLChanges({ + tab: newTab, + sub: '', }); } @@ -198,12 +195,8 @@ export class HomeComponent implements OnInit { this.analysisService.toggleAnalyzing(false); this.queryService.toggleQuerying(false); - void this.router.navigate([], { - relativeTo: this.route, - queryParamsHandling: 'merge', - queryParams: { - sub: 'dependencies', - }, + this.urlService.trackURLChanges({ + sub: 'dependencies', }); } @@ -214,12 +207,8 @@ export class HomeComponent implements OnInit { this.analysisService.toggleAnalyzing(false); this.queryService.toggleQuerying(false); - void this.router.navigate([], { - relativeTo: this.route, - queryParamsHandling: 'merge', - queryParams: { - sub: 'validate', - }, + this.urlService.trackURLChanges({ + sub: 'validate', }); } @@ -230,12 +219,8 @@ export class HomeComponent implements OnInit { this.analysisService.toggleAnalyzing(false); this.queryService.toggleQuerying(false); - void this.router.navigate([], { - relativeTo: this.route, - queryParamsHandling: 'merge', - queryParams: { - sub: 'pinpoint', - }, + this.urlService.trackURLChanges({ + sub: 'pinpoint', }); } @@ -246,12 +231,8 @@ export class HomeComponent implements OnInit { this.pinpointService.togglePinpointing(false); this.queryService.toggleQuerying(false); - void this.router.navigate([], { - relativeTo: this.route, - queryParamsHandling: 'merge', - queryParams: { - sub: 'analyze', - }, + this.urlService.trackURLChanges({ + sub: 'analyze', }); } @@ -262,12 +243,8 @@ export class HomeComponent implements OnInit { this.pinpointService.togglePinpointing(false); this.analysisService.toggleAnalyzing(false); - void this.router.navigate([], { - relativeTo: this.route, - queryParamsHandling: 'merge', - queryParams: { - sub: 'query', - }, + this.urlService.trackURLChanges({ + sub: 'query', }); } @@ -291,21 +268,15 @@ export class HomeComponent implements OnInit { updateSubURLProp(prop: string, value: string | number | undefined) { if (isUndefined(value)) return; - void this.router.navigate([], { - relativeTo: this.route, - queryParamsHandling: 'merge', - queryParams: { - [prop]: value, - }, + this.urlService.trackURLChanges({ + [prop]: value, }); } resetSub() { - void this.router.navigate([], { - relativeTo: this.route, - queryParams: { - tab: this.activeTab(), - }, + this.urlService.trackURLChanges({ + tab: this.activeTab(), + sub: '', }); } } diff --git a/src/app/services/query.service.ts b/src/app/services/query.service.ts index 59cd262..cdd1956 100644 --- a/src/app/services/query.service.ts +++ b/src/app/services/query.service.ts @@ -26,6 +26,8 @@ export class QueryService { ...mod.spawners.map((c) => ({ type: 'spawner', data: c })), ...mod.stems.map((c) => ({ type: 'stem', data: c })), ...mod.traitTrees.map((c) => ({ type: 'traitTree', data: c })), + ...mod.achievements.map((c) => ({ type: 'achievement', data: c })), + ...mod.events.map((c) => ({ type: 'event', data: c })), ]; }); diff --git a/src/app/services/url.service.ts b/src/app/services/url.service.ts new file mode 100644 index 0000000..a18a300 --- /dev/null +++ b/src/app/services/url.service.ts @@ -0,0 +1,18 @@ +import { inject, Injectable } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; + +@Injectable({ + providedIn: 'root', +}) +export class URLService { + private route = inject(ActivatedRoute); + private router = inject(Router); + + public trackURLChanges(params: any) { + void this.router.navigate([], { + relativeTo: this.route, + queryParamsHandling: 'merge', + queryParams: params, + }); + } +} diff --git a/src/app/shared/components/editor-base-table/editor-base-table.component.ts b/src/app/shared/components/editor-base-table/editor-base-table.component.ts index 84f138c..bd651ed 100644 --- a/src/app/shared/components/editor-base-table/editor-base-table.component.ts +++ b/src/app/shared/components/editor-base-table/editor-base-table.component.ts @@ -1,9 +1,11 @@ import { Component, inject, OnInit, signal } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; import { FilterChangedEvent, FilterModel } from 'ag-grid-community'; import { merge } from 'lodash'; import { LocalStorageService } from 'ngx-webstorage'; import { HasIdentification, IModKit } from '../../../../interfaces'; import { ModService } from '../../../services/mod.service'; +import { URLService } from '../../../services/url.service'; @Component({ selector: 'app-editor-base-table', @@ -13,6 +15,9 @@ import { ModService } from '../../../services/mod.service'; export class EditorBaseTableComponent implements OnInit { + private route = inject(ActivatedRoute); + private urlService = inject(URLService); + private localStorage = inject(LocalStorageService); protected modService = inject(ModService); @@ -30,9 +35,27 @@ export class EditorBaseTableComponent const state = this.localStorage.retrieve( `${this.dataKey}-tablefilters` ) as FilterModel; + if (state) { this.tableFilterState.set(state); } + + const loadItemId = this.getURLSubProp('id'); + if (loadItemId) { + const potentialItems: T[] = this.modService.mod()[ + this.dataKey + ] as unknown as T[]; + + const item = potentialItems.find((i) => i._id === loadItemId); + + if (item) { + this.editExisting(item); + } + } + } + + getURLSubProp(prop: string): string | null { + return this.route.snapshot.queryParamMap.get(prop); } public createNew() { @@ -49,11 +72,18 @@ export class EditorBaseTableComponent const finalItem = merge(defaultContent, clonedContent); this.editingData.set(finalItem); + this.urlService.trackURLChanges({ + id: data._id, + }); } public cancelEditing() { this.isEditing.set(false); this.oldData.set(undefined); + + this.urlService.trackURLChanges({ + id: '', + }); } public saveNewData(data: T) {