intelica-library-ui 0.1.231 → 0.1.232

package/fesm2022/intelica-library-ui.mjs

@@ -6656,7 +6656,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
 class Shared {
     http = inject(HttpClient);
     configService = inject(ConfigService);
+    sweetAlertService = inject(SweetAlertService);
+    termPipe = inject(TermPipe);
+    globalTermService = inject(GlobalTermService);
     path = `${this.configService.environment?.sharedPath}`;
+    sessionTimer;
+    scheduleSessionExpiry(expiresInMinutes) {
+        this.clearSessionTimer();
+        this.sessionTimer = setTimeout(() => this.handleSessionExpired(), Math.max((expiresInMinutes - 1) * 60_000, 30_000));
+    }
+    clearSessionTimer() {
+        clearTimeout(this.sessionTimer);
+    }
+    async handleSessionExpired() {
+        const result = await this.sweetAlertService.confirmBox(this.termPipe.transform('QUICKSIGHT_SESSION_EXPIRED_MESSAGE', this.globalTermService.languageCode), this.termPipe.transform('QUICKSIGHT_SESSION_EXPIRED_CONFIRM', this.globalTermService.languageCode), this.termPipe.transform('CANCEL', this.globalTermService.languageCode), this.termPipe.transform('QUICKSIGHT_SESSION_EXPIRED_TITLE', this.globalTermService.languageCode));
+        if (result.isConfirmed)
+            window.location.reload();
+    }
     getEmbedUrl(command) {
         return this.http.post(`${this.path}/quicksight-embed-url`, command);
     }
@@ -6679,16 +6695,18 @@ class Shared {
     }
     async embedDashboard(command, container, options) {
         container.replaceChildren();
-        const embedUrl = await firstValueFrom(this.getEmbedUrl(command));
-        await this.createEmbedContext(embedUrl, container, options);
+        const dashResponse = await firstValueFrom(this.getEmbedUrl(command));
+        this.scheduleSessionExpiry(dashResponse.expiresInMinutes);
+        await this.createEmbedContext(dashResponse.embedUrl, container, options);
     }
     async embedDashboardInteractive(command, container, options) {
         container.replaceChildren();
-        const embedUrl = await firstValueFrom(this.getEmbedUrl({ ...command, parameters: undefined }));
+        const dashResponse = await firstValueFrom(this.getEmbedUrl({ ...command, parameters: undefined }));
+        this.scheduleSessionExpiry(dashResponse.expiresInMinutes);
         const embeddingContext = await createEmbeddingContext();
         const sdkParameters = command.parameters ? Object.entries(command.parameters).map(([Name, Values]) => ({ Name, Values })) : undefined;
         return await embeddingContext.embedDashboard({
-            url: embedUrl,
+            url: dashResponse.embedUrl,
             container,
             ...(options?.height && { height: options.height }),
             ...(options?.width && { width: options.width }),
@@ -6786,11 +6804,7 @@ function dispatchQuicksightEvent(event, outputs) {
 
 class DashboardQsComponent {
     sharedService = inject(Shared);
-    sweetAlertService = inject(SweetAlertService);
-    termPipe = inject(TermPipe);
-    GlobalTermService = inject(GlobalTermService);
     route = inject(ActivatedRoute);
-    sessionExpiredShown = false;
     containers;
     dashboardIdInput = input(undefined, { alias: 'dashboardId' });
     parametersInput = input(undefined, { alias: 'parameters' });
@@ -6834,7 +6848,7 @@ class DashboardQsComponent {
                     if (event.eventName === QuicksightEventName.CONTENT_LOADED || event.eventName === QuicksightEventName.ERROR_OCCURRED)
                         this.isLoading.set(false);
                     if (isQuicksightSessionExpiredEvent(event))
-                        this.handleSessionExpired();
+                        this.sharedService.handleSessionExpired();
                 },
             });
         }
@@ -6843,15 +6857,8 @@ class DashboardQsComponent {
             this.isLoading.set(false);
         }
     }
-    async handleSessionExpired() {
-        if (this.sessionExpiredShown)
-            return;
-        this.sessionExpiredShown = true;
-        const result = await this.sweetAlertService.confirmBox(this.termPipe.transform('QUICKSIGHT_SESSION_EXPIRED_MESSAGE', this.GlobalTermService.languageCode), this.termPipe.transform('QUICKSIGHT_SESSION_EXPIRED_CONFIRM', this.GlobalTermService.languageCode), this.termPipe.transform('CANCEL', this.GlobalTermService.languageCode), this.termPipe.transform('QUICKSIGHT_SESSION_EXPIRED_TITLE', this.GlobalTermService.languageCode));
-        if (result.isConfirmed)
-            window.location.reload();
-        else
-            this.sessionExpiredShown = false;
+    ngOnDestroy() {
+        this.sharedService.clearSessionTimer();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DashboardQsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: DashboardQsComponent, isStandalone: true, selector: "intelica-dashboard-qs", inputs: { dashboardIdInput: { classPropertyName: "dashboardIdInput", publicName: "dashboardId", isSignal: true, isRequired: false, transformFunction: null }, parametersInput: { classPropertyName: "parametersInput", publicName: "parameters", isSignal: true, isRequired: false, transformFunction: null }, heightInput: { classPropertyName: "heightInput", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isLoadingChange: "isLoadingChange", sdkEvent: "sdkEvent", contentLoaded: "contentLoaded", errorOccurred: "errorOccurred", sessionExpired: "sessionExpired" }, viewQueries: [{ propertyName: "containers", predicate: ["visualContainer"], descendants: true }], ngImport: i0, template: "@if (isLoading()) {\r\n<div class=\"u-display-flex u-flex-column u-gap-sm\">\r\n    <div class=\"u-display-flex u-background-white u-px-1 u-pt-1\">\r\n        <div class=\"u-display-flex u-flex-column u-px-1\" style=\"height: 33px\">\r\n            <p-skeleton class=\"prSkeleton u-m-auto\" [width]=\"'61px'\" [height]=\"'14px'\" />\r\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'2px'\" />\r\n        </div>\r\n        <div class=\"u-display-flex u-flex-column u-px-1\" style=\"height: 33px\">\r\n            <p-skeleton class=\"prSkeleton u-m-auto\" [width]=\"'61px'\" [height]=\"'14px'\" />\r\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'2px'\" />\r\n        </div>\r\n    </div>\r\n    <div class=\"u-display-flex u-flex-column u-gap-sm\">\r\n        <p-panel class=\"prPanel u-flex-grow-1 u-flex-basis-0 u-shadow-none\" showHeader=\"false\">\r\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\" [style]=\"{ 'aspect-ratio': '1061.57 / 93.02' }\" />\r\n        </p-panel>\r\n    </div>\r\n    <div class=\"u-display-flex u-flex-row u-gap-sm\">\r\n        @for (_ of [].constructor(4); track $index) {\r\n        <p-panel class=\"prPanel u-flex-grow-1 u-flex-basis-0 u-shadow-none\" showHeader=\"false\">\r\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\" [style]=\"{ 'aspect-ratio': '244.87 / 123.12' }\" />\r\n        </p-panel>\r\n        }\r\n    </div>\r\n    <div class=\"u-display-flex u-flex-column u-gap-sm\">\r\n        <p-panel class=\"prPanel u-flex-grow-1 u-flex-basis-0 u-shadow-none\" showHeader=\"false\">\r\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\" [style]=\"{ 'aspect-ratio': '1061.57 / 303.7' }\" />\r\n        </p-panel>\r\n    </div>\r\n    <div class=\"u-display-flex u-flex-row u-gap-sm\">\r\n        @for (_ of [].constructor(2); track $index) {\r\n        <p-panel class=\"prPanel u-flex-grow-1 u-flex-basis-0 u-shadow-none\" showHeader=\"false\">\r\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\" [style]=\"{ 'aspect-ratio': '517.1 / 123.12' }\" />\r\n        </p-panel>\r\n        }\r\n    </div>\r\n</div>\r\n}\r\n<div #visualContainer [style.height]=\"height()\" [hidden]=\"isLoading()\"></div>", dependencies: [{ kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2$3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i2$4.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }] });
@@ -6866,11 +6873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
 
 class DashboardQsInteractiveComponent {
     sharedService = inject(Shared);
-    sweetAlertService = inject(SweetAlertService);
-    termPipe = inject(TermPipe);
-    GlobalTermService = inject(GlobalTermService);
     route = inject(ActivatedRoute);
-    sessionExpiredShown = false;
     containers;
     dashboardIdInput = input(undefined, { alias: 'dashboardId' });
     parametersInput = input(undefined, { alias: 'parameters' });
@@ -6926,7 +6929,7 @@ class DashboardQsInteractiveComponent {
                     if (event.eventName === QuicksightEventName.CONTENT_LOADED || event.eventName === QuicksightEventName.ERROR_OCCURRED || event.eventName === QuicksightEventName.PARAMETERS_CHANGED)
                         this.isLoading.set(false);
                     if (isQuicksightSessionExpiredEvent(event))
-                        this.handleSessionExpired();
+                        this.sharedService.handleSessionExpired();
                 },
             });
         }
@@ -6935,15 +6938,8 @@ class DashboardQsInteractiveComponent {
             this.isLoading.set(false);
         }
     }
-    async handleSessionExpired() {
-        if (this.sessionExpiredShown)
-            return;
-        this.sessionExpiredShown = true;
-        const result = await this.sweetAlertService.confirmBox(this.termPipe.transform('QUICKSIGHT_SESSION_EXPIRED_MESSAGE', this.GlobalTermService.languageCode), this.termPipe.transform('QUICKSIGHT_SESSION_EXPIRED_CONFIRM', this.GlobalTermService.languageCode), this.termPipe.transform('CANCEL', this.GlobalTermService.languageCode), this.termPipe.transform('QUICKSIGHT_SESSION_EXPIRED_TITLE', this.GlobalTermService.languageCode));
-        if (result.isConfirmed)
-            window.location.reload();
-        else
-            this.sessionExpiredShown = false;
+    ngOnDestroy() {
+        this.sharedService.clearSessionTimer();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DashboardQsInteractiveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: DashboardQsInteractiveComponent, isStandalone: true, selector: "intelica-dashboard-qs-interactive", inputs: { dashboardIdInput: { classPropertyName: "dashboardIdInput", publicName: "dashboardId", isSignal: true, isRequired: false, transformFunction: null }, parametersInput: { classPropertyName: "parametersInput", publicName: "parameters", isSignal: true, isRequired: false, transformFunction: null }, heightInput: { classPropertyName: "heightInput", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isLoadingChange: "isLoadingChange", sdkEvent: "sdkEvent", contentLoaded: "contentLoaded", errorOccurred: "errorOccurred", sessionExpired: "sessionExpired" }, viewQueries: [{ propertyName: "containers", predicate: ["visualContainer"], descendants: true }], ngImport: i0, template: "@if (isLoading()) {\r\n<div class=\"u-display-flex u-flex-column u-gap-sm\">\r\n    <div class=\"u-display-flex u-background-white u-px-1 u-pt-1\">\r\n        <div class=\"u-display-flex u-flex-column u-px-1\" style=\"height: 33px\">\r\n            <p-skeleton class=\"prSkeleton u-m-auto\" [width]=\"'61px'\" [height]=\"'14px'\" />\r\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'2px'\" />\r\n        </div>\r\n        <div class=\"u-display-flex u-flex-column u-px-1\" style=\"height: 33px\">\r\n            <p-skeleton class=\"prSkeleton u-m-auto\" [width]=\"'61px'\" [height]=\"'14px'\" />\r\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'2px'\" />\r\n        </div>\r\n    </div>\r\n    <div class=\"u-display-flex u-flex-column u-gap-sm\">\r\n        <p-panel class=\"prPanel u-flex-grow-1 u-flex-basis-0 u-shadow-none\" showHeader=\"false\">\r\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\" [style]=\"{ 'aspect-ratio': '1061.57 / 93.02' }\" />\r\n        </p-panel>\r\n    </div>\r\n    <div class=\"u-display-flex u-flex-row u-gap-sm\">\r\n        @for (_ of [].constructor(4); track $index) {\r\n        <p-panel class=\"prPanel u-flex-grow-1 u-flex-basis-0 u-shadow-none\" showHeader=\"false\">\r\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\" [style]=\"{ 'aspect-ratio': '244.87 / 123.12' }\" />\r\n        </p-panel>\r\n        }\r\n    </div>\r\n    <div class=\"u-display-flex u-flex-column u-gap-sm\">\r\n        <p-panel class=\"prPanel u-flex-grow-1 u-flex-basis-0 u-shadow-none\" showHeader=\"false\">\r\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\" [style]=\"{ 'aspect-ratio': '1061.57 / 303.7' }\" />\r\n        </p-panel>\r\n    </div>\r\n    <div class=\"u-display-flex u-flex-row u-gap-sm\">\r\n        @for (_ of [].constructor(2); track $index) {\r\n        <p-panel class=\"prPanel u-flex-grow-1 u-flex-basis-0 u-shadow-none\" showHeader=\"false\">\r\n            <p-skeleton class=\"prSkeleton\" [width]=\"'100%'\" [height]=\"'100%'\" [style]=\"{ 'aspect-ratio': '517.1 / 123.12' }\" />\r\n        </p-panel>\r\n        }\r\n    </div>\r\n</div>\r\n}\r\n<div #visualContainer [style.height]=\"height()\" [hidden]=\"isLoading()\"></div>", dependencies: [{ kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2$3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i2$4.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }] });