@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
116 lines (112 loc) • 4.59 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, Injectable } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { filter, tap } from 'rxjs/operators';
import { BsModalService } from 'ngx-bootstrap/modal';
/**
* Service to manage the display of modals based on URL query parameter.
*
* This service listens for specific query parameters in the URL and opens corresponding modals when detected.
* It automatically cleans up the query parameters from the URL when the modal is closed or query parameter value passed as 'false'.
*/
class QueryParamModalHandlerService {
constructor() {
this.activatedRoute = inject(ActivatedRoute);
this.bsModalService = inject(BsModalService);
this.router = inject(Router);
/**
* Subscription to track modal close events.
*/
this.modalCloseSubscription = null;
}
/**
* Handles the display of a modal based on a specific query parameter.
*
* @param config - Configuration object specifying the query parameter, component, and optional modal settings.
* @returns An observable that listens for changes in the query parameter.
*/
handleQueryParamModal(config) {
return this.activatedRoute.queryParamMap.pipe(filter(params => params.has(config.queryParam)), tap(params => {
const paramValue = this.parseQueryParam(params.get(config.queryParam));
if (paramValue) {
this.showModal(config.component, config.modalConfig);
this.modalCloseSubscription = this.bsModalService.onHidden.subscribe(() => {
this.removeQueryParam(config.queryParam);
this.cleanup();
});
}
else {
this.removeQueryParam(config.queryParam);
}
}));
}
/**
* Removes the specified query parameter from the URL.
*
* @param paramKey - The key of the query parameter to remove.
*/
removeQueryParam(paramKey) {
const queryParams = {
[paramKey]: null
};
this.router.navigate([], {
relativeTo: this.activatedRoute,
queryParams,
queryParamsHandling: 'merge'
});
}
/**
* Displays a modal with the specified component and configuration.
*
* @param component - The component to display in the modal.
* @param modalConfig - Optional settings for the modal appearance and behavior.
*/
showModal(component, modalConfig) {
this.bsModalService.show(component, modalConfig);
}
/**
* Cleans up subscriptions related to modal events.
* Ensures no memory leaks by unsubscribing from modal close events.
*/
cleanup() {
if (this.modalCloseSubscription) {
this.modalCloseSubscription.unsubscribe();
this.modalCloseSubscription = null;
}
}
/**
* Parses a string representation of a query parameter into a boolean or null.
*
* Converts the provided `queryParam` string into a boolean value or null based on its content:
* - Returns `true` if `queryParam` is 'true'.
* - Returns `false` if `queryParam` is 'false'.
* - Returns `null` if `queryParam` is neither 'true' nor 'false'.
*
* @param queryParam - The string representation of the query parameter.
* @returns A boolean value corresponding to the parsed state, or null if the input is not 'true' or 'false'.
*/
parseQueryParam(queryParam) {
if (queryParam === 'false') {
return false;
}
else if (queryParam === 'true') {
return true;
}
else {
return null;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QueryParamModalHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QueryParamModalHandlerService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QueryParamModalHandlerService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { QueryParamModalHandlerService };
//# sourceMappingURL=c8y-ngx-components-query-param-modal-handler.mjs.map