@provoly/dashboard 1.4.48 → 1.4.50

package/fesm2022/provoly-dashboard.mjs

@@ -2705,13 +2705,25 @@ class PrySnackbarComponent {
         this._data = message;
         this.cdRef.detectChanges();
     }
-    constructor(cdRef) {
+    set listIndex(listIndex) {
+        if (!!listIndex || listIndex === 0) {
+            this._listIndex = listIndex;
+        }
+        this.getStyle();
+    }
+    get listIndex() {
+        return this._listIndex;
+    }
+    constructor(cdRef, snackService, router) {
         this.cdRef = cdRef;
+        this.snackService = snackService;
+        this.router = router;
         this._data = { message: '', action: undefined, type: 'info', timeout: 3000 };
-        this.listIndex = 0;
         this.transformOptions = 'translate3d(-50%, 100%, 0px)';
         this.transitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
         this.hiddenFromAction = false;
+        this._listIndex = 0;
+        this.snackStyle = { top: '' };
     }
     get data() {
         return this._data;
@@ -2719,12 +2731,25 @@ class PrySnackbarComponent {
     get typeClass() {
         return { ['-' + this.data.type]: true };
     }
+    getStyle() {
+        if (this.data.type === 'notif') {
+            this.snackStyle = {
+                top: (this.listIndex === 0 ? 60 : this.listIndex * 60 + 60) + 'px'
+            };
+        }
+        else {
+            this.snackStyle = {
+                bottom: this.listIndex * 60 + 'px'
+            };
+        }
+    }
     get icon() {
         const iconsDefs = {
             info: 'information-point',
             success: 'check',
             warning: 'warning',
-            error: 'close'
+            error: 'close',
+            notif: 'information-point'
         };
         return iconsDefs[this.data.type];
     }
@@ -2734,8 +2759,17 @@ class PrySnackbarComponent {
     hide() {
         this.hiddenFromAction = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySnackbarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PrySnackbarComponent, selector: "pry-snackbar", inputs: { data: "data", listIndex: "listIndex", actionClicked: "actionClicked" }, ngImport: i0, template: "@if (!hiddenFromAction) {\n  <div\n    class=\"m-snackbar -bottom\"\n    [ngClass]=\"typeClass\"\n    [@panelState]=\"{ value: 'visible', params: { transform: transformOptions, transition: transitionOptions } }\"\n    [style.bottom.px]=\"listIndex * 60\"\n    >\n    <div class=\"m-snackbar__content\">\n      <pry-icon [iconSvg]=\"icon\"></pry-icon>\n      <p class=\"a-p\">{{ data.message }}</p>\n      @if (!!data.action) {\n        <button class=\"m-snackbar__action\" (click)=\"actionClick()\">{{ data.action }}</button>\n      }\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }], animations: [
+    openEvenement(data) {
+        this.router.navigate([]).then(() => {
+            const url = this.router.serializeUrl(this.router.createUrlTree(['/', 'journal', data.message.padStart(6, '0')]));
+            window.open(url, '_blank');
+        });
+    }
+    closeNotif(data) {
+        this.snackService.closeNotif(data);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PrySnackbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: PrySnackbarService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PrySnackbarComponent, selector: "pry-snackbar", inputs: { data: "data", actionClicked: "actionClicked", listIndex: "listIndex" }, ngImport: i0, template: "@if (!hiddenFromAction) {\n  @if (data.type === 'notif') {\n    <div\n      (click)=\"openEvenement(data)\"\n      class=\"m-snackbar m-snackbar-notif\"\n      [@panelState]=\"{ value: 'visible', params: { transform: transformOptions, transition: transitionOptions } }\"\n      [style]=\"snackStyle\"\n    >\n      <div class=\"m-snackbar__content\">\n        <p class=\"a-p\">{{ data.message }}</p>\n        <pry-icon (click)=\"closeNotif(data)\" class=\"notif-erase\" iconSvg=\"close\" [width]=\"18\" [height]=\"18\"> </pry-icon>\n      </div>\n    </div>\n  } @else {\n    <div\n      class=\"m-snackbar -bottom\"\n      [ngClass]=\"typeClass\"\n      [@panelState]=\"{ value: 'visible', params: { transform: transformOptions, transition: transitionOptions } }\"\n      [style]=\"snackStyle\"\n    >\n      <div class=\"m-snackbar__content\">\n        <pry-icon [iconSvg]=\"icon\"></pry-icon>\n        <p class=\"a-p\">{{ data.message }}</p>\n        @if (!!data.action) {\n          <button class=\"m-snackbar__action\" (click)=\"actionClick()\">{{ data.action }}</button>\n        }\n      </div>\n    </div>\n  }\n}\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PryIconComponent, selector: "pry-icon", inputs: ["color", "iconSvg", "animation", "iconImage", "alt", "width", "height", "classes"] }], animations: [
             trigger('panelState', [
                 transition('void => visible', [useAnimation(showAnimation)]),
                 transition('visible => void', [useAnimation(hideAnimation)])
@@ -2749,13 +2783,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                             transition('void => visible', [useAnimation(showAnimation)]),
                             transition('visible => void', [useAnimation(hideAnimation)])
                         ])
-                    ], template: "@if (!hiddenFromAction) {\n  <div\n    class=\"m-snackbar -bottom\"\n    [ngClass]=\"typeClass\"\n    [@panelState]=\"{ value: 'visible', params: { transform: transformOptions, transition: transitionOptions } }\"\n    [style.bottom.px]=\"listIndex * 60\"\n    >\n    <div class=\"m-snackbar__content\">\n      <pry-icon [iconSvg]=\"icon\"></pry-icon>\n      <p class=\"a-p\">{{ data.message }}</p>\n      @if (!!data.action) {\n        <button class=\"m-snackbar__action\" (click)=\"actionClick()\">{{ data.action }}</button>\n      }\n    </div>\n  </div>\n}\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { data: [{
-                type: Input
-            }], listIndex: [{
+                    ], template: "@if (!hiddenFromAction) {\n  @if (data.type === 'notif') {\n    <div\n      (click)=\"openEvenement(data)\"\n      class=\"m-snackbar m-snackbar-notif\"\n      [@panelState]=\"{ value: 'visible', params: { transform: transformOptions, transition: transitionOptions } }\"\n      [style]=\"snackStyle\"\n    >\n      <div class=\"m-snackbar__content\">\n        <p class=\"a-p\">{{ data.message }}</p>\n        <pry-icon (click)=\"closeNotif(data)\" class=\"notif-erase\" iconSvg=\"close\" [width]=\"18\" [height]=\"18\"> </pry-icon>\n      </div>\n    </div>\n  } @else {\n    <div\n      class=\"m-snackbar -bottom\"\n      [ngClass]=\"typeClass\"\n      [@panelState]=\"{ value: 'visible', params: { transform: transformOptions, transition: transitionOptions } }\"\n      [style]=\"snackStyle\"\n    >\n      <div class=\"m-snackbar__content\">\n        <pry-icon [iconSvg]=\"icon\"></pry-icon>\n        <p class=\"a-p\">{{ data.message }}</p>\n        @if (!!data.action) {\n          <button class=\"m-snackbar__action\" (click)=\"actionClick()\">{{ data.action }}</button>\n        }\n      </div>\n    </div>\n  }\n}\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: PrySnackbarService }, { type: i2.Router }], propDecorators: { data: [{
                 type: Input
             }], actionClicked: [{
                 type: Input
+            }], listIndex: [{
+                type: Input
             }] } });
 
 const DEFAULT_MSG_TIMEOUT = 3000;
@@ -2767,6 +2801,7 @@ class PrySnackbarService {
         this.overlay = overlay;
         this.translate = translate;
         this.messageEvents$ = new Subject();
+        this.notifRef = [];
         // Allows to access snackbar from javascript, for example to manage Vega errors
         document.addEventListener(PRY_CUSTOMEVENT_TYPE, (e) => {
             const pryMessage = e.detail;
@@ -2784,26 +2819,63 @@ class PrySnackbarService {
     dispatchOpenEvent(message) {
         document.dispatchEvent(new CustomEvent(PRY_CUSTOMEVENT_TYPE, { detail: message }));
     }
+    closeNotif(message) {
+        const notifIndex = this.notifRef.findIndex((notif) => notif.componentRef.instance.data.id === message.id);
+        const elementToRemove = this.notifRef.splice(notifIndex, 1).shift();
+        elementToRemove.componentRef.instance.hiddenFromAction = true;
+        elementToRemove.componentRef.instance.actionClicked.complete();
+        elementToRemove.overlayRef.dispose();
+        elementToRemove.componentRef.destroy();
+        this.notifRef.forEach((notifRef, index) => {
+            notifRef.componentRef.instance.listIndex = index;
+        });
+    }
     notMitigatedOpen(message) {
-        this.overlayRef = this.overlay.create(new OverlayConfig({
+        const overlayRef = this.overlay.create(new OverlayConfig({
             hasBackdrop: false
         }));
         const componentPortal = new ComponentPortal(PrySnackbarComponent, this.rootViewContainer);
-        const component = this.overlayRef.attach(componentPortal);
+        const component = overlayRef.attach(componentPortal);
         component.instance.data = message;
-        component.instance.listIndex = PrySnackbarService.count++;
         component.instance.actionClicked = new Subject();
-        setTimeout(() => {
-            /* First hide component so it uses animation */
-            component.instance.hiddenFromAction = true;
-            PrySnackbarService.count--;
+        if (message.type === 'notif') {
+            if (this.notifRef.length < 5) {
+                this.notifRef.unshift({ componentRef: component, overlayRef });
+                this.notifRef.forEach((notifRef, index) => {
+                    notifRef.componentRef.instance.listIndex = index;
+                });
+            }
+            else if (this.notifRef.length === 5) {
+                const olderComponent = this.notifRef.pop();
+                olderComponent.componentRef.instance.hiddenFromAction = true;
+                olderComponent.componentRef.instance.actionClicked.complete();
+                olderComponent.overlayRef.dispose();
+                olderComponent.componentRef.destroy();
+                this.notifRef.unshift({ componentRef: component, overlayRef });
+                this.notifRef.forEach((notifRef, index) => {
+                    notifRef.componentRef.instance.listIndex = index;
+                });
+            }
             setTimeout(() => {
-                /* then clean by removing it */
                 component.instance.actionClicked.complete();
-                this.overlayRef?.dispose();
+                overlayRef?.dispose();
                 component.destroy();
-            }, DELAY_FOR_HIDE);
-        }, message.timeout ?? DEFAULT_MSG_TIMEOUT);
+            }, 10000);
+        }
+        else {
+            component.instance.listIndex = PrySnackbarService.count++;
+            setTimeout(() => {
+                /* First hide component so it uses animation */
+                component.instance.hiddenFromAction = true;
+                PrySnackbarService.count--;
+                setTimeout(() => {
+                    /* then clean by removing it */
+                    component.instance.actionClicked.complete();
+                    overlayRef?.dispose();
+                    component.destroy();
+                }, DELAY_FOR_HIDE);
+            }, message.timeout ?? DEFAULT_MSG_TIMEOUT);
+        }
         return component.instance.actionClicked;
     }
     open(message) {