add url deep linking for editor tables

LandOfTheRair · Oct 6, 2024 · 5de68ae · 5de68ae
1 parent a5d16b7
commit 5de68ae
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 50 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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<T extends HasIdentification>
   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<T extends HasIdentification>
     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<T extends HasIdentification>
 
     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) {