@seniorsistemas/exclusion-process-component 0.2.1 → 0.3.0

package/bundles/seniorsistemas-exclusion-process-component.umd.js

@@ -377,18 +377,36 @@
         return LogicalDeleteService;
     }());
 
+    var EXCLUSION_PROCESS_STATUS_BADGE = [
+        {
+            enumValue: EnumExclusionProcessStatus.ERROR,
+            color: angularComponents.EnumBadgeColors.RED
+        },
+        {
+            enumValue: EnumExclusionProcessStatus.PENDING,
+            color: angularComponents.EnumBadgeColors.YELLOW
+        },
+        {
+            enumValue: EnumExclusionProcessStatus.PROCESSING,
+            color: angularComponents.EnumBadgeColors.BLUE
+        },
+        {
+            enumValue: EnumExclusionProcessStatus.SUCCESS,
+            color: angularComponents.EnumBadgeColors.GREEN
+        }
+    ];
     var ExclusionDetailsComponent = /** @class */ (function () {
-        function ExclusionDetailsComponent(router, route, translate, logicalDeleteService, projectConfigs) {
-            this.router = router;
+        function ExclusionDetailsComponent(route, translate, logicalDeleteService, projectConfigs) {
             this.route = route;
             this.translate = translate;
             this.logicalDeleteService = logicalDeleteService;
             this.projectConfigs = projectConfigs;
-            this._entityName = "";
+            this.expandedRows = {};
             this._isVisible = false;
             this._isLoading = false;
-            this._processSummaryData = [];
-            this._processSummaryColumns = [];
+            this._processGroupData = [];
+            this._processGroupColumns = [];
+            this._processStepColumns = [];
             this.ngUnsubscribe = new rxjs.Subject();
         }
         Object.defineProperty(ExclusionDetailsComponent.prototype, "isVisible", {
@@ -405,16 +423,23 @@
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(ExclusionDetailsComponent.prototype, "processSummaryData", {
+        Object.defineProperty(ExclusionDetailsComponent.prototype, "processGroupData", {
             get: function () {
-                return this._processSummaryData;
+                return this._processGroupData;
             },
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(ExclusionDetailsComponent.prototype, "processSummaryColumns", {
+        Object.defineProperty(ExclusionDetailsComponent.prototype, "processGroupColumns", {
             get: function () {
-                return this._processSummaryColumns;
+                return this._processGroupColumns;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(ExclusionDetailsComponent.prototype, "processStepColumns", {
+            get: function () {
+                return this._processStepColumns;
             },
             enumerable: true,
             configurable: true
@@ -426,7 +451,8 @@
                 .subscribe(function (data) {
                 _this.locale = data.localeConfig;
             });
-            this._processSummaryColumns = this.getSummaryColumns();
+            this._processGroupColumns = this.getGroupColumns();
+            this._processStepColumns = this.getStepColumns();
         };
         ExclusionDetailsComponent.prototype.ngOnDestroy = function () {
             this.ngUnsubscribe.next();
@@ -435,9 +461,8 @@
         };
         ExclusionDetailsComponent.prototype.showDetails = function (details) {
             this._exclusionDetails = details;
-            this._entityName = details.entityName;
             this._isVisible = true;
-            this._processSummaryData = [];
+            this._processGroupData = [];
             this.processDetails = null;
             this.entityDescription = details.entityDescription;
             this.loadProcessDetails(details);
@@ -449,17 +474,9 @@
         ExclusionDetailsComponent.prototype.closeDetails = function () {
             this._isVisible = false;
             this._exclusionDetails = null;
-            this._processSummaryData = [];
+            this._processGroupData = [];
             this.disconnectWebSocket();
         };
-        ExclusionDetailsComponent.prototype.openExclusions = function () {
-            this.closeDetails();
-            this.router.navigate(["exclusions-list", this._entityName], {
-                queryParams: {
-                    entityDescription: this.entityDescription
-                }
-            });
-        };
         ExclusionDetailsComponent.prototype.getRecordDescription = function () {
             var _a;
             if (!((_a = this.processDetails) === null || _a === void 0 ? void 0 : _a.description)) {
@@ -509,15 +526,15 @@
         ExclusionDetailsComponent.prototype.getEmptyStateDescription = function () {
             return this.translate.instant(this.projectConfigs.getTranslationPrefix() + ".logical_delete_empty_state_description");
         };
-        ExclusionDetailsComponent.prototype.getSummaryColumns = function () {
+        ExclusionDetailsComponent.prototype.getGroupColumns = function () {
             return [
                 {
                     field: "description",
                     attributes: ["description"],
-                    header: this.translate.instant(this.projectConfigs.getTranslationPrefix() + ".logical_delete_description"),
+                    header: this.translate.instant(this.projectConfigs.getTranslationPrefix() + ".logical_delete_group"),
                     type: angularComponents.EnumColumnFieldType.STRING,
                     style: {
-                        width: "300px"
+                        width: "340px"
                     }
                 },
                 {
@@ -530,24 +547,32 @@
                         width: "100px"
                     },
                     tooltip: this.getColumnStatusTooltip,
-                    badgeConfigs: [
-                        {
-                            enumValue: EnumExclusionProcessStatus.ERROR,
-                            color: angularComponents.EnumBadgeColors.RED
-                        },
-                        {
-                            enumValue: EnumExclusionProcessStatus.PENDING,
-                            color: angularComponents.EnumBadgeColors.YELLOW
-                        },
-                        {
-                            enumValue: EnumExclusionProcessStatus.PROCESSING,
-                            color: angularComponents.EnumBadgeColors.BLUE
-                        },
-                        {
-                            enumValue: EnumExclusionProcessStatus.SUCCESS,
-                            color: angularComponents.EnumBadgeColors.GREEN
-                        }
-                    ]
+                    badgeConfigs: EXCLUSION_PROCESS_STATUS_BADGE
+                }
+            ];
+        };
+        ExclusionDetailsComponent.prototype.getStepColumns = function () {
+            return [
+                {
+                    field: "description",
+                    attributes: ["description"],
+                    header: this.translate.instant(this.projectConfigs.getTranslationPrefix() + ".logical_delete_step"),
+                    type: angularComponents.EnumColumnFieldType.STRING,
+                    style: {
+                        width: "340px"
+                    }
+                },
+                {
+                    field: "status",
+                    attributes: ["status"],
+                    header: this.translate.instant(this.projectConfigs.getTranslationPrefix() + ".logical_delete_status"),
+                    type: angularComponents.EnumColumnFieldType.ENUM,
+                    enumPrefix: this.projectConfigs.getTranslationPrefix() + ".logical_delete_enum_exclusion_process_status_",
+                    style: {
+                        width: "100px"
+                    },
+                    tooltip: this.getColumnStatusTooltip,
+                    badgeConfigs: EXCLUSION_PROCESS_STATUS_BADGE
                 }
             ];
         };
@@ -571,7 +596,14 @@
                     return;
                 }
                 _this.processDetails = process;
-                _this.loadProcessSummary(process);
+                _this._processGroupData = _this.sortGroupsByStartDate(process.groups)
+                    .map(function (p) { return (__assign(__assign({}, p), { steps: _this.sortStepsByStartDate(p.steps) })); });
+                _this.expandedRows = {};
+                _this._processGroupData
+                    .filter(function (p) { return p.status !== EnumExclusionProcessStatus.SUCCESS; })
+                    .forEach(function (p) {
+                    _this.expandedRows[p.id] = true;
+                });
             });
         };
         ExclusionDetailsComponent.prototype.sortByDate = function (startDate, finishDate) {
@@ -591,21 +623,6 @@
             var _this = this;
             return steps.sort(function (a, b) { return _this.sortByDate(a.startDate, b.finishDate); });
         };
-        ExclusionDetailsComponent.prototype.loadProcessSummary = function (process) {
-            var _this = this;
-            var stepLogs = [];
-            this.sortGroupsByStartDate(process.groups)
-                .forEach(function (group) {
-                var steps = _this.sortStepsByStartDate(group.steps)
-                    .map(function (step) { return ({
-                    description: step.description,
-                    status: step.status,
-                    errorMessage: step.errorMessage
-                }); });
-                stepLogs.push.apply(stepLogs, __spread(steps));
-            });
-            this._processSummaryData = stepLogs;
-        };
         ExclusionDetailsComponent.prototype.disconnectWebSocket = function () {
             if (this._exclusionProcessStatusChangedSubscribe) {
                 this._exclusionProcessStatusChangedSubscribe.unsubscribe();
@@ -656,7 +673,6 @@
             });
         };
         ExclusionDetailsComponent.ctorParameters = function () { return [
-            { type: router.Router },
             { type: router.ActivatedRoute },
             { type: core$1.TranslateService },
             { type: LogicalDeleteService },
@@ -670,20 +686,26 @@
         ], ExclusionDetailsComponent.prototype, "isLoading", null);
         __decorate([
             core.Output()
-        ], ExclusionDetailsComponent.prototype, "processSummaryData", null);
+        ], ExclusionDetailsComponent.prototype, "processGroupData", null);
+        __decorate([
+            core.Output()
+        ], ExclusionDetailsComponent.prototype, "processGroupColumns", null);
         __decorate([
             core.Output()
-        ], ExclusionDetailsComponent.prototype, "processSummaryColumns", null);
+        ], ExclusionDetailsComponent.prototype, "processStepColumns", null);
         __decorate([
             core.Output()
         ], ExclusionDetailsComponent.prototype, "processDetails", void 0);
         __decorate([
             core.Output()
         ], ExclusionDetailsComponent.prototype, "entityDescription", void 0);
+        __decorate([
+            core.Output()
+        ], ExclusionDetailsComponent.prototype, "expandedRows", void 0);
         ExclusionDetailsComponent = __decorate([
             core.Component({
                 selector: "s-exclusion-details",
-                template: "<s-sidebar [visible]=\"isVisible\" (visibleChange)=\"onVisibilityChanged($event)\" [header]=\"getSidebarTitle()\">\n    <s-loading-state [loading]=\"isLoading\">\n        <p-panel [showHeader]=\"false\" styleClass=\"s-exclusion-details-record-details-panel\">\n            <div class=\"s-exclusion-details-record-details-container\">\n                <div class=\"s-exclusion-details-record-icon-background\">\n                    <em class=\"far fa-file-alt s-exclusion-details-record-icon\"></em>\n                </div>\n\n                <div class=\"s-exclusion-details-record-details-recordinfo\">\n                    <span class=\"s-exclusion-details-record-details-type\">\n                        {{entityDescription}}\n                    </span>\n                    <span>\n                        {{getRecordDescription()}}\n                    </span>\n                </div>\n\n                <div class=\"s-exclusion-details-record-details-dateinfo\">\n                    <span>\n                        {{getStartDateLabel()}}: {{getInicialDate()}}\n                    </span>\n                    <span *ngIf=\"isFinished()\">\n                        {{getFinishDateLabel()}}: {{getFinishDate()}}\n                    </span>\n                </div>\n            </div>\n        </p-panel>\n\n        <p-panel>\n            <p-header>\n                {{getSummaryLabel()}}\n            </p-header>\n\n            <s-empty-state\n                *ngIf=\"processSummaryData && !processSummaryData.length\"\n                [title]=\"getEmptyStateTitle()\"\n                [description]=\"getEmptyStateDescription()\">\n                [showPrimaryAction]=\"false\"\n            </s-empty-state>\n\n            <p-table\n                [value]=\"processSummaryData\"\n                [columns]=\"processSummaryColumns\"\n                dataKey=\"id\"\n                [lazy]=\"false\"\n                [scrollable]=\"false\"\n                [paginator]=\"false\"\n                *ngIf=\"processSummaryData && processSummaryData.length\">\n\n                <ng-template pTemplate=\"colgroup\" let-columns>\n                    <colgroup>\n                        <col *ngFor=\"let col of columns\"\n                            [style.width]=\"col.width\"\n                        />\n                    </colgroup>\n                </ng-template>\n\n                <ng-template pTemplate=\"header\" let-columns>\n                    <tr>\n                        <th *ngFor=\"let col of columns\"\n                            [id]=\"col.field\"\n                            [ngStyle]=\"col.style\"\n                            [pSortableColumn]=\"col.field\">\n                            <div class=\"senior-header\">\n                                <span class=\"senior-header-title\">{{ col.header }}</span>\n                                <p-sortIcon [field]=\"col.field\" ></p-sortIcon>\n                            </div>\n                        </th>\n                    </tr>\n                </ng-template>\n\n                <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\">\n                    <tr>\n                        <s-table-columns\n                            [columns]=\"columns\"\n                            [rowValue]=\"rowData\"\n                            [locale]=\"locale\">\n                        </s-table-columns>\n                    </tr>\n                </ng-template>\n            </p-table>\n        </p-panel>\n    </s-loading-state>\n\n    <s-footer>\n        <div class=\"ui-fluid\">\n            <div class=\"ui-g\">\n                <s-button [label]=\"getShowExclusionsButtonLabel()\" (onClick)=\"openExclusions()\"></s-button>\n                <s-button [label]=\"getCloseButtonLabel()\" priority=\"link\" (onClick)=\"closeDetails()\"></s-button>\n            </div>\n        </div>\n    </s-footer>\n</s-sidebar>\n",
+                template: "<s-sidebar [visible]=\"isVisible\" (visibleChange)=\"onVisibilityChanged($event)\" [header]=\"getSidebarTitle()\">\n    <s-loading-state [loading]=\"isLoading\">\n        <p-panel [showHeader]=\"false\" styleClass=\"s-exclusion-details-record-details-panel\">\n            <div class=\"s-exclusion-details-record-details-container\">\n                <div class=\"s-exclusion-details-record-icon-background\">\n                    <em class=\"far fa-file-alt s-exclusion-details-record-icon\"></em>\n                </div>\n\n                <div class=\"s-exclusion-details-record-details-recordinfo\">\n                    <span class=\"s-exclusion-details-record-details-type\">\n                        {{entityDescription}}\n                    </span>\n                    <span>\n                        {{getRecordDescription()}}\n                    </span>\n                </div>\n\n                <div class=\"s-exclusion-details-record-details-dateinfo\">\n                    <span>\n                        {{getStartDateLabel()}}: {{getInicialDate()}}\n                    </span>\n                    <span *ngIf=\"isFinished()\">\n                        {{getFinishDateLabel()}}: {{getFinishDate()}}\n                    </span>\n                </div>\n            </div>\n        </p-panel>\n\n        <p-panel>\n            <p-header>\n                {{getSummaryLabel()}}\n            </p-header>\n\n            <s-empty-state\n                *ngIf=\"processGroupData && !processGroupData.length\"\n                [title]=\"getEmptyStateTitle()\"\n                [description]=\"getEmptyStateDescription()\">\n                [showPrimaryAction]=\"false\"\n            </s-empty-state>\n\n            <p-table\n                [value]=\"processGroupData\"\n                [columns]=\"processGroupColumns\"\n                dataKey=\"id\"\n                [lazy]=\"false\"\n                [scrollable]=\"false\"\n                [paginator]=\"false\"\n                *ngIf=\"processGroupData && processGroupData.length\"\n                [expandedRowKeys]=\"expandedRows\">\n\n                <ng-template pTemplate=\"header\" let-columns>\n                    <tr>\n                        <th id=\"expend-column\" style=\"width: 40px;\"></th>\n                        <th *ngFor=\"let col of columns\"\n                            [id]=\"col.field\"\n                            [ngStyle]=\"col.style\"\n                            [pSortableColumn]=\"col.field\">\n                            <div class=\"senior-header\">\n                                <span class=\"senior-header-title\">{{ col.header }}</span>\n                                <p-sortIcon [field]=\"col.field\" ></p-sortIcon>\n                            </div>\n                        </th>\n                    </tr>\n                </ng-template>\n\n                <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\" let-expanded=\"expanded\">\n                    <tr sNavigation [sRowToggler]=\"rowData\">\n                        <td style=\"width: 40px;\" tabindex=\"0\">\n                            <em class=\"fa fa-{{ expanded ? 'minus' : 'plus' }}\"></em>\n                        </td>\n                        <s-table-columns\n                            [columns]=\"columns\"\n                            [rowValue]=\"rowData\"\n                            [locale]=\"locale\">\n                        </s-table-columns>\n                    </tr>\n                </ng-template>\n\n                <ng-template pTemplate=\"rowexpansion\" let-rowData let-columns=\"columns\">\n                    <tr class=\"sds-expanded-row\">\n                        <td [attr.colspan]=\"columns.length + 1\">\n                            <p-table \n                                [value]=\"rowData.steps\"\n                                [columns]=\"processStepColumns\"\n                                dataKey=\"id\"\n                                [paginator]=\"false\"\n                                [responsive]=\"true\"\n                                [scrollable]=\"false\"\n                                [lazy]=\"false\">\n\n                                <ng-template pTemplate=\"header\" let-columns>\n                                    <tr>\n                                        <th *ngFor=\"let col of columns\"\n                                            [id]=\"col.field\"\n                                            [ngStyle]=\"col.style\"\n                                            [pSortableColumn]=\"col.field\">\n                                            <div class=\"senior-header\">\n                                                <span class=\"senior-header-title\">{{ col.header }}</span>\n                                                <p-sortIcon [field]=\"col.field\" ></p-sortIcon>\n                                            </div>\n                                        </th>\n                                    </tr>\n                                </ng-template>\n    \n                                <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\">\n                                    <tr>\n                                        <s-table-columns\n                                            [columns]=\"columns\"\n                                            [rowValue]=\"rowData\"\n                                            [locale]=\"locale\">\n                                        </s-table-columns>\n                                    </tr>\n                                </ng-template>\n                            </p-table>\n                        </td>\n                    </tr>\n                </ng-template>\n            </p-table>\n        </p-panel>\n    </s-loading-state>\n\n    <s-footer>\n        <div class=\"ui-fluid\">\n            <div class=\"ui-g\">\n                <s-button [label]=\"getCloseButtonLabel()\" priority=\"link\" (onClick)=\"closeDetails()\"></s-button>\n            </div>\n        </div>\n    </s-footer>\n</s-sidebar>\n",
                 encapsulation: core.ViewEncapsulation.None,
                 styles: [".s-exclusion-details-record-details-panel{margin-bottom:10px}.s-exclusion-details-record-details-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}.s-exclusion-details-record-details-recordinfo{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-left:10px;-ms-flex:1;flex:1}.s-exclusion-details-record-details-dateinfo{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin-left:10px;-ms-flex-align:end;align-items:flex-end;font-size:12px}.s-exclusion-details-record-details-type{color:#999}.s-exclusion-details-record-icon{font-size:22pt;color:#7e8d95}.s-exclusion-details-record-icon-background{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:16px;background-color:#c1cad1;border-radius:50%;height:60px;width:60px}"]
             })
@@ -823,7 +845,8 @@
     var HTTP_CODE_SERVER_ERROR_START = 500;
     var HTTP_CODE_SERVER_ERROR_END = 600;
     var ExclusionsListComponent = /** @class */ (function () {
-        function ExclusionsListComponent(route, translate, formBuilder, changeDetectorRef, logicalDeleteService, filterService, projectConfigs) {
+        function ExclusionsListComponent(router, route, translate, formBuilder, changeDetectorRef, logicalDeleteService, filterService, projectConfigs, cdr) {
+            this.router = router;
             this.route = route;
             this.translate = translate;
             this.formBuilder = formBuilder;
@@ -831,6 +854,7 @@
             this.logicalDeleteService = logicalDeleteService;
             this.filterService = filterService;
             this.projectConfigs = projectConfigs;
+            this.cdr = cdr;
             this.currentListParams = { page: 0, size: 10, sort: [], filterData: {} };
             this.showLoader = false;
             this.totalRecords = 0;
@@ -850,30 +874,32 @@
                 .subscribe(function (data) {
                 _this.locale = data.localeConfig;
             });
-            this.route.params
-                .pipe(operators.takeUntil(this.ngUnsubscribe))
-                .subscribe(function (params) {
-                _this.entityName = params.entityName;
-                _this.showBasedOnRoute();
-            });
             this.route.queryParams
                 .pipe(operators.takeUntil(this.ngUnsubscribe))
                 .subscribe(function (queryParams) {
+                _this.entityName = queryParams.entityName;
                 _this.entityDescription = queryParams.entityDescription;
                 _this.processId = queryParams.processId;
-                _this.showBasedOnRoute();
             });
         };
-        ExclusionsListComponent.prototype.showBasedOnRoute = function () {
+        ExclusionsListComponent.prototype.ngAfterViewInit = function () {
             if (this.entityName && this.entityDescription && this.processId) {
                 this.exclusionDetailsComponent.showDetails({
                     processId: this.processId,
                     entityDescription: this.entityDescription,
                     entityName: this.entityName
                 });
+                this.cdr.detectChanges();
             }
         };
         ExclusionsListComponent.prototype.ngOnDestroy = function () {
+            var _a;
+            var params = __assign({}, (_a = this.route.snapshot) === null || _a === void 0 ? void 0 : _a.queryParams);
+            if (params) {
+                delete params.entityName;
+                delete params.entityDescription;
+                this.router.navigate([], { queryParams: params });
+            }
             this.ngUnsubscribe.next();
             this.ngUnsubscribe.complete();
         };
@@ -881,8 +907,8 @@
             return this.formBuilder.group({
                 description: [undefined, forms.Validators.compose([])],
                 status: [undefined, forms.Validators.compose([])],
-                startDate: [{ value: undefined, disabled: false }, forms.Validators.compose([])],
-                endDate: [{ value: undefined, disabled: false }, forms.Validators.compose([])]
+                startDate: [{ value: null, disabled: false }, forms.Validators.compose([])],
+                endDate: [{ value: null, disabled: false }, forms.Validators.compose([])]
             });
         };
         ExclusionsListComponent.prototype.getGridColumns = function () {
@@ -1155,13 +1181,15 @@
         var ExclusionsListComponent_1;
         ExclusionsListComponent.DATE_FORMAT = "YYYY-MM-DD";
         ExclusionsListComponent.ctorParameters = function () { return [
+            { type: router.Router },
             { type: router.ActivatedRoute },
             { type: core$1.TranslateService },
             { type: forms.FormBuilder },
             { type: core.ChangeDetectorRef },
             { type: LogicalDeleteService },
             { type: FilterService },
-            { type: LogicalDeleteConfigService }
+            { type: LogicalDeleteConfigService },
+            { type: core.ChangeDetectorRef }
         ]; };
         __decorate([
             core.ViewChild("exclusionsTable")
@@ -1260,7 +1288,7 @@
             },
             children: [
                 {
-                    path: ":entityName",
+                    path: "",
                     component: ExclusionsListComponent
                 }
             ]