@seniorsistemas/exclusion-process-component 0.1.0 → 0.2.1-534b2cd2-c9f9-432d-af2e-5630b05ee46f

package/fesm5/seniorsistemas-exclusion-process-component.js

@@ -1,4 +1,4 @@
-import { __decorate, __param, __spread, __assign } from 'tslib';
+import { __decorate, __param, __assign, __spread } from 'tslib';
 import { CommonModule } from '@angular/common';
 import { InjectionToken, Inject, Injectable, Output, Component, ViewEncapsulation, NgModule, ChangeDetectorRef, ViewChild } from '@angular/core';
 import { PanelModule } from 'primeng/panel';
@@ -6,10 +6,11 @@ import { TableModule } from 'primeng/table';
 import { EnumColumnFieldType, EnumBadgeColors, SidebarModule, ButtonModule, TableModule as TableModule$1, LoadingStateModule, LocaleModule, EmptyStateModule, FieldType, FormField, LocaleService, ControlErrorsModule, InfoSignModule, DynamicFormModule, TokenListModule } from '@seniorsistemas/angular-components';
 import * as moment from 'moment';
 import { Router, ActivatedRoute, RouterModule } from '@angular/router';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { throwError, Subject } from 'rxjs';
 import { catchError, map, takeUntil, finalize } from 'rxjs/operators';
+import { WebsocketService } from '@senior-gestao-empresarial/angular-components';
 import { HttpParams, HttpClient } from '@angular/common/http';
-import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { MessageService } from 'primeng/api';
 import { Validators, FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { DialogModule } from 'primeng/dialog';
@@ -63,7 +64,6 @@ var LogicalDeleteService = /** @class */ (function () {
         this.projectConfigs = projectConfigs;
         var entityUrl = projectConfigs.getDomain() + "/" + projectConfigs.getService();
         this.exclusionProcessUrl = entityUrl + "/entities/exclusionProcess";
-        this.listExclusionsUrl = entityUrl + "/entities/exclusionProcess";
         this.defaultCatch = this.defaultCatch.bind(this);
     }
     LogicalDeleteService.prototype.defaultCatch = function () {
@@ -126,6 +126,7 @@ var LogicalDeleteService = /** @class */ (function () {
         });
     };
     LogicalDeleteService.prototype.doGetProcessDetails = function (filterParams) {
+        var _this = this;
         return this.http.get(this.exclusionProcessUrl, { params: filterParams })
             .pipe(this.defaultCatch())
             .pipe(map(function (value) {
@@ -133,10 +134,18 @@ var LogicalDeleteService = /** @class */ (function () {
             if (!((_a = value.contents) === null || _a === void 0 ? void 0 : _a.length)) {
                 return null;
             }
-            return value.contents[0];
+            return _this.mapExclusionsDates(value.contents[0]);
         }));
     };
+    LogicalDeleteService.prototype.mapExclusionsDates = function (exclusionProcess) {
+        var _a;
+        return __assign(__assign({}, exclusionProcess), { startDate: exclusionProcess.startDate ? moment(exclusionProcess.startDate).toDate() : null, finishDate: exclusionProcess.finishDate ? moment(exclusionProcess.finishDate).toDate() : null, groups: (_a = exclusionProcess.groups) === null || _a === void 0 ? void 0 : _a.map(function (group) {
+                var _a;
+                return (__assign(__assign({}, group), { startDate: group.startDate ? moment(group.startDate).toDate() : null, finishDate: group.finishDate ? moment(group.finishDate).toDate() : null, steps: (_a = group.steps) === null || _a === void 0 ? void 0 : _a.map(function (step) { return (__assign(__assign({}, step), { startDate: step.startDate ? moment(step.startDate).toDate() : null, finishDate: step.finishDate ? moment(step.finishDate).toDate() : null })); }) }));
+            }) });
+    };
     LogicalDeleteService.prototype.listExclusions = function (entityName, params) {
+        var _this = this;
         if (params === void 0) { params = {}; }
         if (params.filterQuery) {
             params.filterQuery += " and lower(entityName) eq lower('" + entityName + "')";
@@ -147,14 +156,7 @@ var LogicalDeleteService = /** @class */ (function () {
         return this.http.get(this.exclusionProcessUrl, { params: this.getListQueryParams(params) })
             .pipe(this.defaultCatch())
             .pipe(map(function (value) {
-            value.contents.forEach(function (p) {
-                if (p.startDate) {
-                    p.startDate = moment(p.startDate).toDate();
-                }
-                if (p.finishDate) {
-                    p.finishDate = moment(p.finishDate).toDate();
-                }
-            });
+            value.contents = value.contents.map(_this.mapExclusionsDates);
             return value;
         }));
     };
@@ -224,17 +226,26 @@ var ExclusionDetailsComponent = /** @class */ (function () {
     ExclusionDetailsComponent.prototype.ngOnDestroy = function () {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
+        this.disconnectWebSocket();
     };
     ExclusionDetailsComponent.prototype.showDetails = function (details) {
-        this.processDetails = null;
+        this._exclusionDetails = details;
         this._entityName = details.entityName;
         this._isVisible = true;
         this._processSummaryData = [];
+        this.processDetails = null;
         this.entityDescription = details.entityDescription;
         this.loadProcessDetails(details);
+        this.connectWebSocket();
+    };
+    ExclusionDetailsComponent.prototype.onVisibilityChanged = function (event) {
+        this.closeDetails();
     };
     ExclusionDetailsComponent.prototype.closeDetails = function () {
         this._isVisible = false;
+        this._exclusionDetails = null;
+        this._processSummaryData = [];
+        this.disconnectWebSocket();
     };
     ExclusionDetailsComponent.prototype.openExclusions = function () {
         this.closeDetails();
@@ -256,14 +267,14 @@ var ExclusionDetailsComponent = /** @class */ (function () {
         if (!((_a = this.processDetails) === null || _a === void 0 ? void 0 : _a.startDate)) {
             return "";
         }
-        return moment(this.processDetails.startDate).format("DD/MM/YYYY HH:mm");
+        return moment(this.processDetails.startDate).format("DD/MM/YYYY HH:mm:ss");
     };
     ExclusionDetailsComponent.prototype.getFinishDate = function () {
         var _a;
         if (!((_a = this.processDetails) === null || _a === void 0 ? void 0 : _a.finishDate)) {
             return "";
         }
-        return moment(this.processDetails.finishDate).format("DD/MM/YYYY HH:mm");
+        return moment(this.processDetails.finishDate).format("DD/MM/YYYY HH:mm:ss");
     };
     ExclusionDetailsComponent.prototype.isFinished = function () {
         var _a;
@@ -351,14 +362,37 @@ var ExclusionDetailsComponent = /** @class */ (function () {
             .pipe(takeUntil(this.ngUnsubscribe))
             .pipe(finalize(function () { return _this._isLoading = false; }))
             .subscribe(function (process) {
+            if (!process) {
+                return;
+            }
             _this.processDetails = process;
             _this.loadProcessSummary(process);
         });
     };
+    ExclusionDetailsComponent.prototype.sortByDate = function (startDate, finishDate) {
+        if (startDate.getTime() > finishDate.getTime()) {
+            return 1;
+        }
+        if (startDate.getTime() < finishDate.getTime()) {
+            return -1;
+        }
+        return 0;
+    };
+    ExclusionDetailsComponent.prototype.sortGroupsByStartDate = function (groups) {
+        var _this = this;
+        return groups.sort(function (a, b) { return _this.sortByDate(a.startDate, b.finishDate); });
+    };
+    ExclusionDetailsComponent.prototype.sortStepsByStartDate = function (steps) {
+        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 = [];
-        process.groups.forEach(function (group) {
-            var steps = group.steps.map(function (step) { return ({
+        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
@@ -367,6 +401,55 @@ var ExclusionDetailsComponent = /** @class */ (function () {
         });
         this._processSummaryData = stepLogs;
     };
+    ExclusionDetailsComponent.prototype.disconnectWebSocket = function () {
+        if (this._exclusionProcessStatusChangedSubscribe) {
+            this._exclusionProcessStatusChangedSubscribe.unsubscribe();
+            this._exclusionProcessStatusChangedSubscribe = null;
+        }
+        if (this._websocketService) {
+            this._websocketService.disconnect();
+            this._websocketService = null;
+        }
+    };
+    ExclusionDetailsComponent.prototype.connectWebSocket = function () {
+        var _this = this;
+        if (this._websocketService) {
+            this.disconnectWebSocket();
+        }
+        this._websocketService = new WebsocketService();
+        this._websocketService
+            .onConnect()
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(function () {
+            _this.startListeningWebhookEvents();
+        });
+    };
+    ExclusionDetailsComponent.prototype.startListeningWebhookEvents = function () {
+        var _this = this;
+        this._websocketService
+            .onError()
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(function (data) {
+            console.error('onError', data);
+        });
+        this._exclusionProcessStatusChangedSubscribe = this._websocketService
+            .onEvent({
+            domain: this.projectConfigs.getDomain(),
+            service: this.projectConfigs.getService(),
+            primitive: "exclusionProcessStatusChanged"
+        })
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(function (event) {
+            var data = event.data;
+            if (_this._exclusionDetails.processId && data.pid === _this._exclusionDetails.processId) {
+                _this.loadProcessDetails(_this._exclusionDetails);
+                return;
+            }
+            if (_this._exclusionDetails.recordId && data.recordId === _this._exclusionDetails.recordId) {
+                _this.loadProcessDetails(_this._exclusionDetails);
+            }
+        });
+    };
     ExclusionDetailsComponent.ctorParameters = function () { return [
         { type: Router },
         { type: ActivatedRoute },
@@ -395,7 +478,7 @@ var ExclusionDetailsComponent = /** @class */ (function () {
     ExclusionDetailsComponent = __decorate([
         Component({
             selector: "s-exclusion-details",
-            template: "<s-sidebar [visible]=\"isVisible\" (visibleChange)=\"closeDetails()\" [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=\"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",
             encapsulation: 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}"]
         })
@@ -535,7 +618,7 @@ var FilterService = /** @class */ (function () {
 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(route, translate, formBuilder, changeDetectorRef, logicalDeleteService, filterService, projectConfigs, cdr) {
         this.route = route;
         this.translate = translate;
         this.formBuilder = formBuilder;
@@ -543,6 +626,7 @@ var ExclusionsListComponent = /** @class */ (function () {
         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;
@@ -562,27 +646,22 @@ var ExclusionsListComponent = /** @class */ (function () {
             .subscribe(function (data) {
             _this.locale = data.localeConfig;
         });
-        this.route.params
-            .pipe(takeUntil(this.ngUnsubscribe))
-            .subscribe(function (params) {
-            _this.entityName = params.entityName;
-            _this.showBasedOnRoute();
-        });
         this.route.queryParams
             .pipe(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 () {
@@ -617,6 +696,7 @@ var ExclusionsListComponent = /** @class */ (function () {
                 style: {
                     width: "100px"
                 },
+                tooltip: this.getColumnStatusTooltip,
                 badgeConfigs: [
                     {
                         enumValue: EnumExclusionProcessStatus.ERROR,
@@ -641,7 +721,7 @@ var ExclusionsListComponent = /** @class */ (function () {
                 attributes: ["startDate"],
                 header: this.translate.instant(this.projectConfigs.getTranslationPrefix() + ".logical_delete_start"),
                 type: EnumColumnFieldType.DATE,
-                dateFormat: "DD/MM/YYYY HH:mm",
+                dateFormat: "DD/MM/YYYY HH:mm:ss",
                 style: {
                     width: "100px"
                 }
@@ -651,13 +731,19 @@ var ExclusionsListComponent = /** @class */ (function () {
                 attributes: ["finishDate"],
                 header: this.translate.instant(this.projectConfigs.getTranslationPrefix() + ".logical_delete_finish"),
                 type: EnumColumnFieldType.DATE,
-                dateFormat: "DD/MM/YYYY HH:mm",
+                dateFormat: "DD/MM/YYYY HH:mm:ss",
                 style: {
                     width: "100px"
                 }
             }
         ];
     };
+    ExclusionsListComponent.prototype.getColumnStatusTooltip = function (rowValue) {
+        if (rowValue.errorMessage) {
+            return rowValue.errorMessage;
+        }
+        return null;
+    };
     ExclusionsListComponent.prototype.getFilterFields = function () {
         var translationPrefix = this.projectConfigs.getTranslationPrefix();
         return [
@@ -811,8 +897,12 @@ var ExclusionsListComponent = /** @class */ (function () {
         this.searchTokens = this.getFilterTokens();
         var filterQuery = this.getFilterQuery();
         var displayFields = __spread([
-            "recordId"
+            "recordId",
+            "errorMessage"
         ], this.gridColumns.map(function (column) { return column.field; }));
+        if (!sort.length) {
+            sort.push({ field: 'startDate', order: -1 });
+        }
         this.listExclusions({ page: page, size: size, sort: sort, filterQuery: filterQuery, displayFields: displayFields });
     };
     ExclusionsListComponent.prototype.listExclusions = function (params) {
@@ -862,7 +952,8 @@ var ExclusionsListComponent = /** @class */ (function () {
         { type: ChangeDetectorRef },
         { type: LogicalDeleteService },
         { type: FilterService },
-        { type: LogicalDeleteConfigService }
+        { type: LogicalDeleteConfigService },
+        { type: ChangeDetectorRef }
     ]; };
     __decorate([
         ViewChild("exclusionsTable")
@@ -872,7 +963,7 @@ var ExclusionsListComponent = /** @class */ (function () {
     ], ExclusionsListComponent.prototype, "exclusionDetailsComponent", void 0);
     ExclusionsListComponent = ExclusionsListComponent_1 = __decorate([
         Component({
-            template: "<div>\n    <form [formGroup]=\"filterFormGroup\" autocomplete=\"off\">\n        <p-panel\n            *sLoadingState=\"showLoader\"\n            styleClass=\"form-group\"\n            [toggleable]=\"true\"\n            [(collapsed)]=\"filtersPanelCollapsed\"\n            (onAfterToggle)=\"focusInput('description')\"\n        >\n            <p-header>\n                {{ getFiltersTitle() }}\n                <s-token-list\n                    [tokens]=\"searchTokens\"\n                    (tokenRemoved)=\"onRemoveToken($event)\"\n                    [removableTokens]=\"true\"\n                ></s-token-list>\n            </p-header>\n            <div>\n                <s-dynamic-form\n                    [fields]=\"filterFields\"\n                    [form]=\"filterFormGroup\"\n                    [errorMessages]=\"{ pattern: getErrorInvalid() }\"\n                ></s-dynamic-form>\n            </div>\n            <p-footer>\n                <div class=\"ui-g\">\n                    <div class=\"ui-g-12\">\n                        <button\n                            id=\"filter-button\"\n                            class=\"ui-button\"\n                            type=\"submit\"\n                            pButton\n                            [label]=\"getFilterButtonTitle()\"\n                            (click)=\"onSearch()\"\n                        ></button>\n                        <button\n                            id=\"clear-button\"\n                            class=\"ui-button ui-button-link\"\n                            type=\"button\"\n                            pButton\n                            [label]=\"getClearButtonTitle()\"\n                            (click)=\"onClear()\"\n                        ></button>\n                    </div>\n                </div>\n            </p-footer>\n        </p-panel>\n    </form>\n    <p-panel *sLoadingState=\"showLoader\">\n        <p-header>\n            {{ getTitle() }}\n        </p-header>\n        <ng-container>\n            <s-empty-state\n                *ngIf=\"serverError && !showLoader\"\n                iconClass=\"fa fa-exclamation-triangle\"\n                title=\"{{ getErrorServerTitle() | translate }}\"\n                primaryActionLabel=\"{{ 'error_server_try_again' | translate }}\"\n                (primaryAction)=\"resetGrid()\"\n                description=\"{{ getErrorServerDescription() | translate }}\"\n            ></s-empty-state>\n\n            <s-empty-state\n                *ngIf=\"!showLoader && !serverError && totalRecords === 0\"\n                [title]=\"getEmptyStateTitle()\"\n                [showPrimaryAction]=\"false\"\n                [description]=\"getEmptyStateDescription()\"\n            ></s-empty-state>\n\n            <div class=\"ui-g\">\n                <div class=\"ui-g-12\">\n                    <p-table\n                        #exclusionsTable\n                        id=\"exclusionsTable\"\n                        [hidden]=\"totalRecords === 0 || serverError\"\n                        [value]=\"gridData\"\n                        [columns]=\"gridColumns\"\n                        dataKey=\"id\"\n                        [lazy]=\"true\"\n                        [scrollable]=\"true\"\n                        [resizableColumns]=\"true\"\n                        sortMode=\"multiple\"\n                        [paginator]=\"true\"\n                        [totalRecords]=\"totalRecords\"\n                        [rows]=\"10\"\n                        rows=\"10\"\n                        [rowsPerPageOptions]=\"[10, 20, 50, 100]\"\n                        (onLazyLoad)=\"onGridChange($event)\"\n                    >\n                        <ng-template pTemplate=\"colgroup\" let-columns>\n                            <colgroup>\n                                <col\n                                    *ngFor=\"let col of columns\"\n                                    [style.width]=\"col.width\"\n                                />\n                            </colgroup>\n                        </ng-template>\n\n                        <ng-template\n                            pTemplate=\"header\"\n                            let-columns\n                        >\n                            <tr>\n                                <th *ngFor=\"let col of columns\"\n                                    [id]=\"col.field\"\n                                    [pSortableColumn]=\"col.field\"\n                                    [ngStyle]=\"col.style\"\n                                    pResizableColumn\n                                >\n                                    <div class=\"senior-header\">\n                                        <span class=\"senior-header-title\">\n                                            {{ col.header }}\n                                        </span>\n                                        <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n                                    </div>\n                                </th>\n                                <th id=\"action-column\" style=\"width: 100px\">\n                                    <div class=\"senior-header\">\n                                        <span class=\"senior-header-title\">{{ getActionsColumnLabel() }}</span>\n                                    </div>\n                                </th>\n                            </tr>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\">\n                            <tr [pSelectableRow]=\"rowData\">\n                                <s-table-columns\n                                    [columns]=\"columns\"\n                                    [rowValue]=\"rowData\"\n                                    [locale]=\"locale\">\n                                </s-table-columns>\n                                <td style=\"width: 100px\">\n                                    <s-button\n                                        id=\"details-button\"\n                                        priority=\"default\"\n                                        [label]=\"getDetailsButtonTitle()\"\n                                        [auxiliary]=\"true\"\n                                        (onClick)=\"onClickDetails(rowData)\">\n                                    </s-button>\n                                </td>\n                            </tr>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"paginatorright\">\n                            <s-table-paging\n                                [table]=\"exclusionsTable\"\n                                [totalRecords]=\"totalRecords\"\n                            ></s-table-paging>\n                        </ng-template>\n                    </p-table>\n                </div>\n            </div>\n        </ng-container>\n    </p-panel>\n</div>\n\n<s-exclusion-details></s-exclusion-details>\n",
+            template: "<div>\n    <form [formGroup]=\"filterFormGroup\" autocomplete=\"off\">\n        <p-panel\n            *sLoadingState=\"showLoader\"\n            styleClass=\"form-group\"\n            [toggleable]=\"true\"\n            [(collapsed)]=\"filtersPanelCollapsed\"\n            (onAfterToggle)=\"focusInput('description')\"\n        >\n            <p-header>\n                {{ getFiltersTitle() }}\n                <s-token-list\n                    [tokens]=\"searchTokens\"\n                    (tokenRemoved)=\"onRemoveToken($event)\"\n                    [removableTokens]=\"true\"\n                ></s-token-list>\n            </p-header>\n            <div>\n                <s-dynamic-form\n                    [fields]=\"filterFields\"\n                    [form]=\"filterFormGroup\"\n                    [errorMessages]=\"{ pattern: getErrorInvalid() }\"\n                ></s-dynamic-form>\n            </div>\n            <p-footer>\n                <div class=\"ui-g\">\n                    <div class=\"ui-g-12\">\n                        <button\n                            id=\"filter-button\"\n                            class=\"ui-button\"\n                            type=\"submit\"\n                            pButton\n                            [label]=\"getFilterButtonTitle()\"\n                            (click)=\"onSearch()\"\n                        ></button>\n                        <button\n                            id=\"clear-button\"\n                            class=\"ui-button ui-button-link\"\n                            type=\"button\"\n                            pButton\n                            [label]=\"getClearButtonTitle()\"\n                            (click)=\"onClear()\"\n                        ></button>\n                    </div>\n                </div>\n            </p-footer>\n        </p-panel>\n    </form>\n    <p-panel *sLoadingState=\"showLoader\">\n        <p-header>\n            {{ getTitle() }}\n        </p-header>\n        <ng-container>\n            <s-empty-state\n                *ngIf=\"serverError && !showLoader\"\n                iconClass=\"fa fa-exclamation-triangle\"\n                title=\"{{ getErrorServerTitle() | translate }}\"\n                primaryActionLabel=\"{{ 'error_server_try_again' | translate }}\"\n                (primaryAction)=\"resetGrid()\"\n                description=\"{{ getErrorServerDescription() | translate }}\"\n            ></s-empty-state>\n\n            <s-empty-state\n                *ngIf=\"!showLoader && !serverError && totalRecords === 0\"\n                [title]=\"getEmptyStateTitle()\"\n                [showPrimaryAction]=\"false\"\n                [description]=\"getEmptyStateDescription()\"\n            ></s-empty-state>\n\n            <div class=\"ui-g\">\n                <div class=\"ui-g-12\">\n                    <p-table\n                        #exclusionsTable\n                        id=\"exclusionsTable\"\n                        [hidden]=\"totalRecords === 0 || serverError\"\n                        [value]=\"gridData\"\n                        [columns]=\"gridColumns\"\n                        dataKey=\"id\"\n                        [lazy]=\"true\"\n                        [scrollable]=\"true\"\n                        [resizableColumns]=\"true\"\n                        sortMode=\"multiple\"\n                        [paginator]=\"true\"\n                        [totalRecords]=\"totalRecords\"\n                        [rows]=\"10\"\n                        sortField=\"startDate\"\n                        sortOrder=\"-1\"\n                        rows=\"10\"\n                        [rowsPerPageOptions]=\"[10, 20, 50, 100]\"\n                        (onLazyLoad)=\"onGridChange($event)\"\n                    >\n                        <ng-template pTemplate=\"colgroup\" let-columns>\n                            <colgroup>\n                                <col\n                                    *ngFor=\"let col of columns\"\n                                    [style.width]=\"col.width\"\n                                />\n                            </colgroup>\n                        </ng-template>\n\n                        <ng-template\n                            pTemplate=\"header\"\n                            let-columns\n                        >\n                            <tr>\n                                <th *ngFor=\"let col of columns\"\n                                    [id]=\"col.field\"\n                                    [pSortableColumn]=\"col.field\"\n                                    [ngStyle]=\"col.style\"\n                                    pResizableColumn\n                                >\n                                    <div class=\"senior-header\">\n                                        <span class=\"senior-header-title\">\n                                            {{ col.header }}\n                                        </span>\n                                        <p-sortIcon [field]=\"col.field\"></p-sortIcon>\n                                    </div>\n                                </th>\n                                <th id=\"action-column\" style=\"width: 100px\">\n                                    <div class=\"senior-header\">\n                                        <span class=\"senior-header-title\">{{ getActionsColumnLabel() }}</span>\n                                    </div>\n                                </th>\n                            </tr>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"body\" let-rowData let-columns=\"columns\">\n                            <tr [pSelectableRow]=\"rowData\">\n                                <s-table-columns\n                                    [columns]=\"columns\"\n                                    [rowValue]=\"rowData\"\n                                    [locale]=\"locale\">\n                                </s-table-columns>\n                                <td style=\"width: 100px\">\n                                    <s-button\n                                        id=\"details-button\"\n                                        priority=\"default\"\n                                        [label]=\"getDetailsButtonTitle()\"\n                                        [auxiliary]=\"true\"\n                                        (onClick)=\"onClickDetails(rowData)\">\n                                    </s-button>\n                                </td>\n                            </tr>\n                        </ng-template>\n\n                        <ng-template pTemplate=\"paginatorright\">\n                            <s-table-paging\n                                [table]=\"exclusionsTable\"\n                                [totalRecords]=\"totalRecords\"\n                            ></s-table-paging>\n                        </ng-template>\n                    </p-table>\n                </div>\n            </div>\n        </ng-container>\n    </p-panel>\n</div>\n\n<s-exclusion-details></s-exclusion-details>\n",
             providers: []
         })
     ], ExclusionsListComponent);
@@ -961,7 +1052,7 @@ var routes = [
         },
         children: [
             {
-                path: ":entityName",
+                path: "",
                 component: ExclusionsListComponent
             }
         ]