@seniorsistemas/exclusion-process-component 0.0.1-40efacd8-8a6c-4d38-8102-8c977c14410a → 0.6.0-44030ff3-2eeb-49f7-8927-0920cc01a805

package/lib/src/exclusion-details/exclusion-details.component.spec.ts

@@ -0,0 +1,171 @@
+import { ChangeDetectorRef, Component, ViewChild } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { RouterTestingModule } from "@angular/router/testing";
+import { FormBuilder } from "@angular/forms";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { ActivatedRoute, RouterModule } from "@angular/router";
+import { TranslateModule, TranslateService } from "@ngx-translate/core";
+import {
+    AngularComponentsModule,
+    ButtonModule
+} from "@seniorsistemas/angular-components";
+import { By } from "@angular/platform-browser";
+import { MessageService } from "primeng/api";
+import { HttpClientTestingModule } from "@angular/common/http/testing";
+import { ExclusionDetailsComponent, ExclusionDetailsModule } from ".";
+import { FilterService } from "../services/filter.service";
+import { LogicalDeleteConfigService } from "../services/logical-delete-config.service";
+import { ProjectConfigs, ProjectConfigsInjectionToken } from "../models/project-config";
+import { LogicalDeleteService } from "../services";
+import { Observable } from "rxjs";
+
+@Component({
+    template: `
+        <div>
+            <button id="test-button" (click)="showDetails()">open</button>
+        </div>
+        <s-exclusion-details></s-exclusion-details>
+    `
+})
+class TestComponent {
+    @ViewChild(ExclusionDetailsComponent)
+    public exclusionDetailsComponent: ExclusionDetailsComponent;
+
+    public showDetails() {
+        this.exclusionDetailsComponent.showDetails({
+            recordId: "valid record id",
+            entityDescription: "valid entity description",
+            entityName: "valid entity name"
+        });
+    }
+}
+
+describe("ExclusionsDetailsComponent", () => {
+    let fixture: ComponentFixture<TestComponent> = null;
+    let component: TestComponent = null;
+
+    let fakeActivatedRoute: any = {};
+    let logicalDeleteService: LogicalDeleteService;
+
+    const defaultProjectConfigs: ProjectConfigs = {
+        domain: "domain",
+        service: "service"
+    };
+
+    beforeEach(async () => {
+        fakeActivatedRoute = {
+            data: new Observable(subscriber => {
+                subscriber.next({
+                    localeConfig: {
+                        calendar: {},
+                        number: {
+                            scale: 1,
+                            decimalSeparator: ","
+                        }
+                    }
+                });
+                subscriber.complete();
+            })
+        };
+
+        await TestBed.configureTestingModule({
+            imports: [
+                AngularComponentsModule.forRoot({
+                    domain: "domain",
+                    service: "service"
+                }),
+                ButtonModule,
+                TranslateModule.forRoot(),
+                RouterModule,
+                RouterTestingModule,
+                HttpClientTestingModule,
+                ExclusionDetailsModule,
+                BrowserAnimationsModule
+            ],
+            providers: [
+                TranslateService,
+                MessageService,
+                FormBuilder,
+                ChangeDetectorRef,
+                FilterService,
+                LogicalDeleteConfigService,
+                LogicalDeleteService,
+                {
+                    provide: ActivatedRoute,
+                    useValue: fakeActivatedRoute
+                },
+                {
+                    provide: ProjectConfigsInjectionToken,
+                    useValue: defaultProjectConfigs
+                }
+            ],
+            declarations: [TestComponent]
+        }).compileComponents();
+
+        logicalDeleteService = TestBed.inject(LogicalDeleteService);
+
+        fixture = TestBed.createComponent(TestComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    const openSidebar = () => {
+        const testButton = fixture.nativeElement.querySelector("#test-button");
+        testButton.dispatchEvent(new Event("click"));
+        fixture.detectChanges();
+    };
+
+    const getExclusionDetailsInstance = () => {
+        return fixture.debugElement
+            .query(By.directive(ExclusionDetailsComponent))
+            .injector.get(ExclusionDetailsComponent);
+    };
+
+    describe("Component constructor", () => {
+        it("should create component", () => {
+            expect(component).toBeTruthy();
+        });
+
+        it("should initialize as hidden", () => {
+            const sidebar = fixture.nativeElement.querySelector("s-sidebar");
+            const isVisible = sidebar.getAttribute("ng-reflect-visible");
+            expect(isVisible).toBe("false");
+        });
+
+        it("should open by calling showDetails", () => {
+            openSidebar();
+            const sidebar = fixture.nativeElement.querySelector("s-sidebar");
+            const isVisible = sidebar.getAttribute("ng-reflect-visible");
+            expect(isVisible).toBe("true");
+        });
+
+        it("should read locale from route data", () => {
+            fakeActivatedRoute.data = new Observable(subscriber => {
+                subscriber.next({
+                    localeConfig: {
+                        calendar: {},
+                        number: {
+                            scale: 1,
+                            decimalSeparator: ","
+                        }
+                    }
+                });
+                subscriber.complete();
+            });
+
+            fixture.detectChanges(false);
+            const cmp = getExclusionDetailsInstance();
+            expect(cmp.locale.number.scale).toBe(1);
+            expect(cmp.locale.number.decimalSeparator).toBe(",");
+        });
+    });
+
+    describe("open sidebar", () => {
+        it("should open by calling showDetails", () => {
+            const getProcessDetailsSpy = spyOn(logicalDeleteService, "getProcessDetails");
+            openSidebar();
+
+            expect(getProcessDetailsSpy).toHaveBeenCalledWith("valid record id");
+        });
+    });
+});

package/lib/src/exclusion-details/exclusion-details.component.ts

@@ -0,0 +1,235 @@
+import * as moment from "moment";
+import { Component, Output, ViewEncapsulation, OnInit, OnDestroy } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+import { EnumBadgeColors, EnumColumnFieldType, TableColumnLocaleOptions } from "@seniorsistemas/angular-components";
+import { Subject } from "rxjs";
+import { finalize, takeUntil } from "rxjs/operators";
+import { EnumExclusionProcessStatus } from "../enums/enum-exclusion-process-status";
+import { ExclusionDetails } from "./protocols/exclusion-details";
+import { LogicalDeleteService } from "../services/logical-delete.service";
+import { ExclusionProcess } from "../models/index";
+import { TranslateService } from "@ngx-translate/core";
+import { LogicalDeleteConfigService } from "../services/logical-delete-config.service";
+import { ShowDetailsInformation } from "./protocols";
+
+@Component({
+    selector: "s-exclusion-details",
+    templateUrl: "./exclusion-details.component.html",
+    styleUrls: ["./exclusion-details.component.scss"],
+    encapsulation: ViewEncapsulation.None
+})
+export class ExclusionDetailsComponent implements OnInit, OnDestroy {
+    public locale!: TableColumnLocaleOptions;
+
+    @Output()
+    get isVisible(): boolean {
+        return this._isVisible;
+    }
+
+    @Output()
+    get isLoading(): boolean {
+        return this._isLoading;
+    }
+
+    @Output()
+    get processSummaryData(): ExclusionDetails[] {
+        return this._processSummaryData;
+    }
+
+    @Output()
+    get processSummaryColumns(): any[] {
+        return this._processSummaryColumns;
+    }
+
+    @Output()
+    public processDetails: ExclusionProcess;
+
+    @Output()
+    public entityDescription: string;
+
+    private _entityName = "";
+    private _isVisible = false;
+    private _isLoading = false;
+    private _processSummaryData: ExclusionDetails[] = [];
+    private _processSummaryColumns: any[] = [];
+    private readonly ngUnsubscribe = new Subject();
+
+    constructor(
+        private readonly router: Router,
+        private readonly route: ActivatedRoute,
+        private readonly translate: TranslateService,
+        private readonly logicalDeleteService: LogicalDeleteService,
+        private readonly projectConfigs: LogicalDeleteConfigService
+    ) {
+    }
+
+    ngOnInit(): void {
+        this.route.data
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((data: { [configs: string]: any, localeConfig: TableColumnLocaleOptions }) => {
+                this.locale = data.localeConfig;
+            });
+        this._processSummaryColumns = this.getSummaryColumns();
+    }
+
+    public ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+
+    public showDetails(details: ShowDetailsInformation) {
+        this.processDetails = null;
+        this._entityName = details.entityName;
+        this._isVisible = true;
+        this.entityDescription = details.entityDescription;
+
+        this.loadProcessDetails(details.recordId);
+    }
+
+    public closeDetails() {
+        this._isVisible = false;
+    }
+
+    public openExclusions() {
+        this.closeDetails();
+        this.router.navigate(
+            ["exclusions-list", this._entityName],
+            {
+                queryParams: {
+                    entityDescription: this.entityDescription
+                }
+            }
+        );
+    }
+
+    public getRecordDescription() {
+        if (!this.processDetails?.description) {
+            return "";
+        }
+
+        return this.processDetails.description;
+    }
+
+    public getInicialDate() {
+        if (!this.processDetails?.startDate) {
+            return "";
+        }
+
+        return moment(this.processDetails.startDate).format("DD/MM/YYYY HH:mm");
+    }
+
+    public getFinishDate() {
+        if (!this.processDetails?.finishDate) {
+            return "";
+        }
+
+        return moment(this.processDetails.finishDate).format("DD/MM/YYYY HH:mm");
+    }
+
+    public isFinished() {
+        return !!this.processDetails?.finishDate;
+    }
+
+    public getShowExclusionsButtonLabel() {
+        return this.translate.instant(`${this.projectConfigs.getTranslationPrefix()}.logical_delete_show_deletions`);
+    }
+
+    public getCloseButtonLabel() {
+        return this.translate.instant(`${this.projectConfigs.getTranslationPrefix()}.logical_delete_close`);
+    }
+
+    public getSummaryLabel() {
+        return this.translate.instant(`${this.projectConfigs.getTranslationPrefix()}.logical_delete_summary`);
+    }
+
+    public getStartDateLabel() {
+        return this.translate.instant(`${this.projectConfigs.getTranslationPrefix()}.logical_delete_start`);
+    }
+
+    public getFinishDateLabel() {
+        return this.translate.instant(`${this.projectConfigs.getTranslationPrefix()}.logical_delete_finish`);
+    }
+
+    public getSidebarTitle() {
+        return this.translate.instant(`${this.projectConfigs.getTranslationPrefix()}.logical_delete_details_title`);
+    }
+
+    private getSummaryColumns() {
+        return [
+            {
+                field: "description",
+                attributes: ["description"],
+                header: this.translate.instant(`${this.projectConfigs.getTranslationPrefix()}.logical_delete_description`),
+                type: EnumColumnFieldType.STRING,
+                style: {
+                    width: "300px"
+                }
+            },
+            {
+                field: "status",
+                attributes: ["status"],
+                header: this.translate.instant(`${this.projectConfigs.getTranslationPrefix()}.logical_delete_status`),
+                type: EnumColumnFieldType.ENUM,
+                enumPrefix: `${this.projectConfigs.getTranslationPrefix()}.logical_delete_enum_exclusion_process_status_`,
+                style: {
+                    width: "100px"
+                },
+                tooltip: this.getColumnStatusTooltip,
+                badgeConfigs: [
+                    {
+                        enumValue: EnumExclusionProcessStatus.ERROR,
+                        color: EnumBadgeColors.RED
+                    },
+                    {
+                        enumValue: EnumExclusionProcessStatus.PENDING,
+                        color: EnumBadgeColors.YELLOW
+                    },
+                    {
+                        enumValue: EnumExclusionProcessStatus.PROCESSING,
+                        color: EnumBadgeColors.BLUE
+                    },
+                    {
+                        enumValue: EnumExclusionProcessStatus.SUCCESS,
+                        color: EnumBadgeColors.GREEN
+                    }
+                ]
+            }
+        ];
+    }
+
+    private getColumnStatusTooltip(rowValue: ExclusionDetails) {
+        if (rowValue.errorMessage) {
+            return rowValue.errorMessage;
+        }
+
+        return null;
+    }
+
+    private loadProcessDetails(recordId: string) {
+        this._isLoading = true;
+
+        this.logicalDeleteService.getProcessDetails(recordId)
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .pipe(finalize(() => this._isLoading = false))
+            .subscribe((process: ExclusionProcess) => {
+                this.processDetails = process;
+                this.loadProcessSummary(process);
+            });
+    }
+
+    private loadProcessSummary(process: ExclusionProcess) {
+        const stepLogs: ExclusionDetails[] = [];
+
+        process.groups.forEach(group => {
+            const steps = group.steps.map(step => ({
+                description: step.description,
+                status: step.status,
+                errorMessage: step.errorMessage
+            } as ExclusionDetails));
+
+            stepLogs.push(...steps);
+        });
+
+        this._processSummaryData = stepLogs;
+    }
+}

package/lib/src/exclusion-details/exclusion-details.module.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { PanelModule } from "primeng/panel";
+import { TableModule as PrimeTableModule } from "primeng/table";
+import { ButtonModule, LoadingStateModule, TableModule, SidebarModule, LocaleModule } from "@seniorsistemas/angular-components";
+import { ExclusionDetailsComponent } from "./exclusion-details.component";
+
+@NgModule({
+    imports: [
+        CommonModule,
+        SidebarModule,
+        ButtonModule,
+        PanelModule,
+        PrimeTableModule,
+        TableModule,
+        LoadingStateModule,
+        LocaleModule
+    ],
+    declarations: [ExclusionDetailsComponent],
+    exports: [ExclusionDetailsComponent],
+    entryComponents: [ExclusionDetailsComponent]
+})
+export class ExclusionDetailsModule {}

package/{exclusion-details/protocols/exclusion-details.d.ts → lib/src/exclusion-details/protocols/exclusion-details.ts}

@@ -1,4 +1,5 @@
 import { EnumExclusionProcessStatus } from "../../enums/enum-exclusion-process-status";
+
 export interface ExclusionDetails {
     description: string;
     status: EnumExclusionProcessStatus;

package/{exclusion-details/protocols/show-details-information.d.ts → lib/src/exclusion-details/protocols/show-details-information.ts}

@@ -1,4 +1,4 @@
-export declare class ShowDetailsInformation {
+export class ShowDetailsInformation {
     recordId: string;
     entityName: string;
     entityDescription: string;

package/lib/src/exclusions-list/exclusions-list.component.html

@@ -0,0 +1,157 @@
+<div>
+    <form [formGroup]="filterFormGroup" autocomplete="off">
+        <p-panel
+            *sLoadingState="showLoader"
+            styleClass="form-group"
+            [toggleable]="true"
+            [(collapsed)]="filtersPanelCollapsed"
+            (onAfterToggle)="focusInput('description')"
+        >
+            <p-header>
+                {{ 'filters' | translate }}
+                <s-token-list
+                    [tokens]="searchTokens"
+                    (tokenRemoved)="onRemoveToken($event)"
+                    [removableTokens]="true"
+                ></s-token-list>
+            </p-header>
+            <div>
+                <s-dynamic-form
+                    [fields]="filterFields"
+                    [form]="filterFormGroup"
+                    [errorMessages]="{ pattern: 'error_invalid' | translate }"
+                ></s-dynamic-form>
+            </div>
+            <p-footer>
+                <div class="ui-g">
+                    <div class="ui-g-12">
+                        <button
+                            id="filter-button"
+                            class="ui-button"
+                            type="submit"
+                            pButton
+                            [label]="'filter' | translate"
+                            (click)="onSearch()"
+                        ></button>
+                        <button
+                            id="clear-button"
+                            class="ui-button ui-button-link"
+                            type="button"
+                            pButton
+                            [label]="'clear' | translate"
+                            (click)="onClear()"
+                        ></button>
+                    </div>
+                </div>
+            </p-footer>
+        </p-panel>
+    </form>
+    <p-panel *sLoadingState="showLoader">
+        <p-header>
+            {{ getTitle() }}
+        </p-header>
+        <ng-container>
+            <s-empty-state
+                *ngIf="serverError && !showLoader"
+                iconClass="fa fa-exclamation-triangle"
+                title="{{ 'error_server_title' | translate }}"
+                primaryActionLabel="{{ 'error_server_try_again' | translate }}"
+                (primaryAction)="resetGrid()"
+                description="{{ 'error_server_description' | translate }}"
+            ></s-empty-state>
+
+            <s-empty-state
+                *ngIf="!showLoader && !serverError && totalRecords === 0"
+                [title]="getEmptyStateTitle()"
+                [showPrimaryAction]="false"
+                [description]="getEmptyStateDescription()"
+            ></s-empty-state>
+
+            <div class="ui-g">
+                <div class="ui-g-12">
+                    <p-table
+                        #exclusionsTable
+                        id="exclusionsTable"
+                        [hidden]="totalRecords === 0 || serverError"
+                        [value]="gridData"
+                        [columns]="gridColumns"
+                        dataKey="id"
+                        [lazy]="true"
+                        [scrollable]="true"
+                        [resizableColumns]="true"
+                        sortMode="multiple"
+                        [paginator]="true"
+                        [totalRecords]="totalRecords"
+                        [rows]="10"
+                        rows="10"
+                        [rowsPerPageOptions]="[10, 20, 50, 100]"
+                        (onLazyLoad)="onGridChange($event)"
+                    >
+                        <ng-template pTemplate="colgroup" let-columns>
+                            <colgroup>
+                                <col
+                                    *ngFor="let col of columns"
+                                    [style.width]="col.width"
+                                />
+                            </colgroup>
+                        </ng-template>
+
+                        <ng-template
+                            pTemplate="header"
+                            let-columns
+                        >
+                            <tr>
+                                <th *ngFor="let col of columns"
+                                    [id]="col.field"
+                                    [pSortableColumn]="col.field"
+                                    [ngStyle]="col.style"
+                                    pResizableColumn
+                                >
+                                    <div class="senior-header">
+                                        <span class="senior-header-title">
+                                            {{ col.header }}
+                                        </span>
+                                        <p-sortIcon [field]="col.field"></p-sortIcon>
+                                    </div>
+                                </th>
+                                <th id="action-column" style="width: 100px">
+                                    <div class="senior-header">
+                                        <span class="senior-header-title">{{'Ações'}}</span>
+                                    </div>
+                                </th>
+                            </tr>
+                        </ng-template>
+
+                        <ng-template pTemplate="body" let-rowData let-columns="columns">
+                            <tr [pSelectableRow]="rowData">
+                                <s-table-columns
+                                    [columns]="columns"
+                                    [rowValue]="rowData"
+                                    [locale]="locale">
+                                </s-table-columns>
+                                <td style="width: 100px">
+                                    <s-button
+                                        id="details-button"
+                                        priority="default"
+                                        [label]="getDetailsButtonTitle()"
+                                        [auxiliary]="true"
+                                        (onClick)="onClickDetails(rowData)">
+                                    </s-button>
+                                </td>
+                            </tr>
+                        </ng-template>
+
+                        <ng-template pTemplate="paginatorright">
+                            <s-table-paging
+                                [table]="exclusionsTable"
+                                [totalRecords]="totalRecords"
+                            ></s-table-paging>
+                        </ng-template>
+                    </p-table>
+                </div>
+            </div>
+        </ng-container>
+    </p-panel>
+</div>
+
+<s-exclusion-details></s-exclusion-details>