[angular-16-irish-monitor | WIP]: Add route params resolver in base component. Change metadata in manage stakeholders.

monitor-admin/manageStakeholders/manageStakeholders.component.html

@@ -55,7 +55,6 @@
     </div>
   </div>
 </div>
-
 <ng-template #stakeholderBox let-stakeholder="stakeholder">
   <div *ngIf="stakeholder">
     <div class="uk-card uk-card-default uk-card-body uk-position-relative" [ngClass]="stakeholder.type">

monitor-admin/manageStakeholders/manageStakeholders.component.ts

@@ -15,6 +15,7 @@ import {properties} from "src/environments/environment";
 import {ActivatedRoute} from "@angular/router";
 import {CacheIndicatorsService} from "../utils/cache-indicators/cache-indicators.service";
 import {NotificationHandler} from "../../utils/notification-handler";
+import {BaseComponent} from "../../sharedComponents/base/base.component";
 
 type Tab = 'all' | 'templates'| 'profiles';
 
@@ -25,9 +26,7 @@ declare var UIkit;
   templateUrl: "./manageStakeholders.component.html",
   styleUrls: ["./manageStakeholders.component.less"]
 })
-export class ManageStakeholdersComponent implements OnInit, OnDestroy {
+export class ManageStakeholdersComponent extends BaseComponent implements OnInit, OnDestroy {
-  
-  public properties: EnvProperties;
   public loading: boolean = true;
 	public deleteLoading: boolean = false;
   public stakeholderUtils: StakeholderUtils = new StakeholderUtils();
@@ -57,7 +56,6 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
   /**
    * Grid or List View
    */
-  private subscriptions: any[] = [];
   @ViewChild('editStakeholderModal', { static: true }) editStakeholderModal: AlertModal;
   @ViewChild('deleteStakeholderModal', { static: true }) deleteStakeholderModal: AlertModal;
   @ViewChild('editStakeholderComponent', { static: true }) editStakeholderComponent: EditStakeholderComponent;
@@ -65,15 +63,16 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
   constructor(private stakeholderService: StakeholderService,
               private cacheIndicatorsService: CacheIndicatorsService,
               private userManagementService: UserManagementService,
-              private route: ActivatedRoute,
+              protected _route: ActivatedRoute,
-              private title: Title,
+              protected _title: Title,
               private fb: UntypedFormBuilder) {
+    super();
   }
   
   ngOnInit(): void {
     this.buildFilters();
-    this.properties = properties;
+    this.title = 'Manage Profiles';
-    this.title.setTitle('Manage profiles');
+    this.setMetadata();
     this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
       this.user = user;
     }));
@@ -94,21 +93,10 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
     }));
   }
   
-  ngOnDestroy(): void {
-    this.subscriptions.forEach(value => {
-      if (value instanceof Subscriber) {
-        value.unsubscribe();
-      } else if (value instanceof Function) {
-        value();
-      }
-    });
-  }
-  
   hide(element: any) {
     UIkit.dropdown(element).hide();
   }
   
-  
   private buildFilters() {
     this.filters = this.fb.group({
       status: this.fb.control('all'),

sharedComponents/base/base.component.ts

@@ -1,19 +1,24 @@
 import {Directive, OnDestroy} from "@angular/core";
-import {Subscriber} from "rxjs";
+import {BehaviorSubject, Subscriber} from "rxjs";
 import {EnvProperties} from "../../utils/properties/env-properties";
 import {properties} from "src/environments/environment";
 import {PiwikService} from "../../utils/piwik/piwik.service";
 import {Meta, Title} from "@angular/platform-browser";
 import {SEOService} from "../SEO/SEO.service";
-import {Router} from "@angular/router";
+import {ActivatedRoute, Data, NavigationEnd, Params, Router} from "@angular/router";
 
 @Directive()
 export abstract class BaseComponent implements OnDestroy {
   public properties: EnvProperties = properties;
+  /** Router params */
+  protected paramsResolved: boolean = false;
+  protected params: BehaviorSubject<Params>;
+  protected data: BehaviorSubject<Data>;
   protected subscriptions: any[] = [];
   /** Metadata */
   public title: string;
   public description: string;
+  protected _route: ActivatedRoute;
   protected _piwikService: PiwikService;
   protected _meta: Meta;
   protected seoService: SEOService;
@@ -25,26 +30,58 @@ export abstract class BaseComponent implements OnDestroy {
 
   ngOnDestroy() {
     this.subscriptions.forEach(subscription => {
-      if(subscription instanceof Subscriber) {
+      if (subscription instanceof Subscriber) {
         subscription.unsubscribe()
-      } else if(subscription instanceof Function) {
+      } else if (subscription instanceof Function) {
         subscription();
-      } else if(typeof IntersectionObserver !== 'undefined' && subscription instanceof IntersectionObserver) {
+      } else if (typeof IntersectionObserver !== 'undefined' && subscription instanceof IntersectionObserver) {
         subscription.disconnect();
-      } else if(typeof ResizeObserver !== 'undefined' && subscription instanceof ResizeObserver) {
+      } else if (typeof ResizeObserver !== 'undefined' && subscription instanceof ResizeObserver) {
         subscription.disconnect();
       }
     });
   }
 
+  /**
+   * Initialize router params and data (should be called in the constructor)
+   * */
+  initRouterParams(route: ActivatedRoute = null) {
+    if (route) {
+      this.params = new BehaviorSubject<Params>(null);
+      this.data = new BehaviorSubject<Data>(null);
+      this.subscriptions.push(this._router.events.subscribe(event => {
+        if (event instanceof NavigationEnd) {
+          let r = route;
+          while (r.firstChild) {
+            r = r.firstChild;
+          }
+          this.paramsResolved = true;
+          this.params.next(r.snapshot.params);
+          this.data.next(r.snapshot.data);
+        }
+      }));
+    }
+  }
+
   public setMetadata() {
+    if (this._title && this.title) {
+      this.title = (this._route?.snapshot.data?.title ? this._route.snapshot.data?.title : '') + this.title;
+      this._title.setTitle(this.title);
+    }
+    if (this._router) {
       const url = properties.domain + properties.baseLink + this._router.url;
+      if (this.seoService) {
         this.seoService.createLinkForCanonicalURL(url, false);
+      }
+      if (this._meta) {
         this._meta.updateTag({content: url}, "property='og:url'");
         this._meta.updateTag({content: this.description}, "name='description'");
         this._meta.updateTag({content: this.description}, "property='og:description'");
         this._meta.updateTag({content: this.title}, "property='og:title'");
-    this._title.setTitle(this.title);
+      }
+    }
+    if (this._piwikService) {
       this.subscriptions.push(this._piwikService.trackView(properties, this.title).subscribe());
     }
+  }
 }