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

This commit is contained in:
Konstantinos Triantafyllou 2023-11-02 16:39:14 +02:00
parent 6492211dc3
commit ba6dcf3b1c
3 changed files with 58 additions and 34 deletions

View File

@ -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">

View File

@ -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 {
public properties: EnvProperties;
export class ManageStakeholdersComponent extends BaseComponent implements OnInit, OnDestroy {
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,
private title: Title,
protected _route: ActivatedRoute,
protected _title: Title,
private fb: UntypedFormBuilder) {
super();
}
ngOnInit(): void {
this.buildFilters();
this.properties = properties;
this.title.setTitle('Manage profiles');
this.title = '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'),

View File

@ -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() {
const url = properties.domain + properties.baseLink + this._router.url;
this.seoService.createLinkForCanonicalURL(url, false);
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);
this.subscriptions.push(this._piwikService.trackView(properties, this.title).subscribe());
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'");
}
}
if (this._piwikService) {
this.subscriptions.push(this._piwikService.trackView(properties, this.title).subscribe());
}
}
}