ngx-wapp-components 1.8.2 → 1.8.3

package/src/lib/misc/w-timeline/w-timeline.component.html

@@ -0,0 +1,44 @@
+<div *ngIf="panel; else timeline">
+    <w-panel [title]="header" [reduced]="reducedPanelMargin">
+        <div class="col-12">
+            <ng-container *ngTemplateOutlet="timeline"></ng-container>
+        </div>
+    </w-panel>
+</div>
+
+<ng-template #timeline>
+    <p-timeline [value]="events" [align]="align" styleClass="customized-timeline" 
+                [class.w-timeline-non-alternate]="align != 'alternate'">
+        <ng-template pTemplate="marker" let-event>
+            <span *ngIf="event.color.includes('#'); else wappingColors"
+                class="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1 shadow-2"
+                [style.backgroundColor]="event.color">
+                <i [ngClass]="'pi '+event.icon"></i>
+            </span>
+            <ng-template #wappingColors>
+                <span
+                    class="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1 shadow-2"
+                    [class]="'w-timeline-event color-'+event.color">
+                    <i [ngClass]="'pi '+event.icon" [class]="'w-timeline-event color-'+event.color"></i>
+                </span>
+            </ng-template>
+        </ng-template>
+        <ng-template pTemplate="content" let-event>
+            <w-panel [title]="event.status" [subtitle]="event.date" [reduced]="reducedEventPanelMargin">
+                <div class="col-12">
+                    <img *ngIf="event.image"
+                        [src]="event.image"
+                        [alt]="event.name" width="200" class="shadow-2" />
+                    <p> {{event.content}} </p>
+                    <div class="flex w-timeline-button" [ngClass]="{'w-timeline-button-end':align == 'left', 'w-timeline-button-start':align == 'right'}">
+                        <w-button *ngIf="event.button" type="text" 
+                                [label]="event.button.label" 
+                                [icon]="event.button.icon!"
+                                (onClick)="onButtonClick(event)">
+                        </w-button>
+                    </div>
+                </div>
+            </w-panel>
+        </ng-template>
+    </p-timeline>
+</ng-template>

package/src/lib/misc/w-timeline/w-timeline.component.scss

@@ -0,0 +1,61 @@
+@import '../../../styles/_variables.scss';
+
+::ng-deep .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n+1) .p-timeline-event-opposite {
+	text-align: right;
+	padding: $spacingZero;
+}
+
+::ng-deep .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n+1) .p-timeline-event-content {
+	text-align: left;
+	padding: $spacingZero $spacingZero $spacingZero $spacingM;
+    
+    .w-timeline-button {
+        justify-content: end;
+    }
+}
+
+::ng-deep .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n) .p-timeline-event-content {
+	text-align: right;
+	padding: $spacingZero $spacingM $spacingZero $spacingZero;
+
+    .w-timeline-button {
+        justify-content: start;
+    }
+}
+
+::ng-deep .w-timeline-non-alternate .p-timeline-event-content {
+	padding: 0 1rem;
+	margin-bottom: $spacingM !important;
+}
+
+.w-timeline-button-end {
+	justify-content: end;
+}
+
+.w-timeline-button-start {
+	justify-content: start;
+}
+
+.w-timeline-event.color-success {
+    background-color: $statusSuccess2;
+    color: $statusSuccess1;
+}
+
+.w-timeline-event.color-warn {
+    background-color: $statusWarning2;
+    color: $statusWarning1;
+}
+
+.w-timeline-event.color-info {
+    background-color: $statusInfo2;
+    color: $statusInfo1;
+}
+
+.w-timeline-event.color-error {
+    background-color: $statusError2;
+    color: $statusError1;
+}
+
+.w-timeline-event-icon-white {
+    color: $white;
+}

package/src/lib/misc/w-timeline/w-timeline.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WTimelineComponent } from './w-timeline.component';
+
+describe('WTimelineComponent', () => {
+  let component: WTimelineComponent;
+  let fixture: ComponentFixture<WTimelineComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ WTimelineComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(WTimelineComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/misc/w-timeline/w-timeline.component.ts

@@ -0,0 +1,27 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { WTimelineEventItem } from '../../shared/models/w-timeline-event-item.model';
+import { ActionButtonResponse } from '../../shared/models/action-button-response.model';
+
+@Component({
+  selector: 'w-timeline',
+  templateUrl: './w-timeline.component.html',
+  styleUrls: ['./w-timeline.component.scss']
+})
+export class WTimelineComponent {
+
+  @Input('events') events!: WTimelineEventItem[];
+  @Input('header') header!: string;
+  @Input('panel') panel: boolean = false;
+  @Input('align') align: string = "alternate";
+  @Input('reducedPanelMargin') reducedPanelMargin: boolean = false; 
+  @Input('reducedEventPanelMargin') reducedEventPanelMargin: boolean = false; 
+
+  @Output('buttonClick') buttonClick: EventEmitter<ActionButtonResponse> = new EventEmitter<ActionButtonResponse>(); 
+
+  constructor() {}
+
+  onButtonClick(event: WTimelineEventItem) {
+    if(event.button?.id) 
+      this.buttonClick.emit({id: event.button.id, element: event})
+  }
+}

package/src/lib/misc/w-wizard/w-wizard.component.html

@@ -0,0 +1,72 @@
+<w-panel class="col-12" [activeGrid]="false">
+    <p-steps [model]="stepsItems" [activeIndex]="activeIndex" (activeIndexChange)="onActiveIndexChange($event)" [readonly]="isReadOnly"></p-steps>
+</w-panel>
+
+<w-panel class="col-12" [activeGrid]="false">
+    
+    <div class="flex flex-column align-items-center sm:align-items-start w-wizard-headings">
+        <span *ngIf="stepsHeadings && stepsHeadings[activeIndex]" class="w-wizard-heading">
+            {{stepsHeadings[activeIndex]}}
+        </span>
+        <span *ngIf="stepsSubheadings && stepsSubheadings[activeIndex]" class="w-wizard-subheading">
+            {{stepsSubheadings[activeIndex]}}
+        </span>
+    </div>
+
+    <ng-content *ngIf="activeIndex == 0" select=".step-1" class="w-wizard-body"></ng-content>
+    <ng-content *ngIf="activeIndex == 1" select=".step-2" class="w-wizard-body"></ng-content>
+    <ng-content *ngIf="activeIndex == 2" select=".step-3" class="w-wizard-body"></ng-content>
+    <ng-content *ngIf="activeIndex == 3" select=".step-4" class="w-wizard-body"></ng-content>
+    <ng-content *ngIf="activeIndex == 4" select=".step-5" class="w-wizard-body"></ng-content>
+    <ng-content *ngIf="activeIndex == 5" select=".step-6" class="w-wizard-body"></ng-content>
+    <ng-content *ngIf="activeIndex == 6" select=".step-7" class="w-wizard-body"></ng-content>
+    <ng-content *ngIf="activeIndex == 7" select=".step-8" class="w-wizard-body"></ng-content>
+    <ng-content *ngIf="activeIndex == 8" select=".step-9" class="w-wizard-body"></ng-content>
+    <ng-content *ngIf="activeIndex == 9" select=".step-10" class="w-wizard-body"></ng-content>
+    <ng-content *ngIf="activeIndex == 10" select=".step-11" class="w-wizard-body"></ng-content>
+    <ng-content *ngIf="activeIndex == 11" select=".step-12" class="w-wizard-body"></ng-content>
+    <ng-content *ngIf="activeIndex == 12" select=".step-13" class="w-wizard-body"></ng-content>
+    <ng-content *ngIf="activeIndex == 13" select=".step-14" class="w-wizard-body"></ng-content>
+    <ng-content *ngIf="activeIndex == 14" select=".step-15" class="w-wizard-body"></ng-content>
+    <ng-content *ngIf="activeIndex == 15" select=".step-16" class="w-wizard-body"></ng-content>
+    <ng-content *ngIf="activeIndex == 16" select=".step-17" class="w-wizard-body"></ng-content>
+    <ng-content *ngIf="activeIndex == 17" select=".step-18" class="w-wizard-body"></ng-content>
+    <ng-content *ngIf="activeIndex == 18" select=".step-19" class="w-wizard-body"></ng-content>
+    <ng-content *ngIf="activeIndex == 19" select=".step-20" class="w-wizard-body"></ng-content>
+
+    <div class="flex justify-content-between flex-wrap m-auto">
+        <div class="flex align-items-center justify-content-center">
+            <w-button *ngIf="activeIndex != 0" 
+                      [icon]="'pi-arrow-left'" 
+                      type="secondary" 
+                      [label]="previousBtnLabel" 
+                      (onClick)="previousPage()">
+            </w-button>
+        </div>
+        <div *ngIf="!(stepsItems.length -1 == activeIndex); else confirmButtons" class="flex align-items-center justify-content-center">
+            <w-button type="primary"
+                      [icon]="'pi-arrow-right'" 
+                      [label]="nextBtnLabel" 
+                      (onClick)="nextPage()">
+            </w-button>
+        </div>
+        <ng-template #confirmButtons >
+            <div class="flex align-items-center justify-content-center">
+                <w-button *ngIf="secondaryConfirmButtonLabel"
+                          type="secondary"
+                          class="w-wizard-button-gap"
+                          [icon]="'pi '+secondaryConfirmButtonIcon"
+                          [label]="secondaryConfirmButtonLabel" 
+                          [disabled]="formGroup && !formGroup.valid" 
+                          (onClick)="secondaryConfirm()">
+                </w-button>
+                <w-button type="primary"
+                           [icon]="'pi '+confirmButtonIcon"
+                           [label]="confirmButtonLabel" 
+                           [disabled]="formGroup && !formGroup.valid" 
+                           (onClick)="confirm()">
+                </w-button>
+            </div>
+        </ng-template>
+    </div>
+</w-panel>

package/src/lib/misc/w-wizard/w-wizard.component.scss

@@ -0,0 +1,31 @@
+@import '../../../styles/_variables.scss';
+
+.w-wizard-button-gap {
+    margin-right: $spacingM;
+}
+
+.w-wizard-heading {
+    @extend .heading4;
+}
+
+.w-wizard-subheading {
+    @extend .subtitle2;
+    margin-top: $spacingM;
+}
+
+.w-wizard-body {
+    @extend .body;
+}
+
+::ng-deep .p-steps .p-steps-item.p-highlight .p-steps-title {
+    @extend .body;
+}
+
+::ng-deep .p-steps .p-steps-item.p-highlight .p-steps-number {
+	background: $highlightBg;
+	color: $primaryDarkerColor;
+}
+
+.w-wizard-headings {
+    margin-bottom: $spacingM;
+}

package/src/lib/misc/w-wizard/w-wizard.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WWizardComponent } from './w-wizard.component';
+
+describe('WWizardComponent', () => {
+  let component: WWizardComponent;
+  let fixture: ComponentFixture<WWizardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ WWizardComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(WWizardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/misc/w-wizard/w-wizard.component.ts

@@ -0,0 +1,55 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { MenuItem, MessageService } from 'primeng/api';
+
+@Component({
+  selector: 'w-wizard',
+  templateUrl: './w-wizard.component.html',
+  styleUrls: ['./w-wizard.component.scss'],
+  providers: [MessageService]
+})
+export class WWizardComponent {
+  items!: MenuItem[];
+  activeIndex: number = 0;
+
+  @Input('stepsItems') stepsItems!: MenuItem[];
+  @Input('stepsHeadings') stepsHeadings!: string[];
+  @Input('stepsSubheadings') stepsSubheadings!: string[];
+  @Input('nextBtnLabel') nextBtnLabel: string = "Next";
+  @Input('previousBtnLabel') previousBtnLabel: string = "Previous";
+  @Input('confirmButtonLabel') confirmButtonLabel!: string;
+  @Input('confirmButtonIcon') confirmButtonIcon!: string;
+  @Input('secondaryConfirmButtonLabel') secondaryConfirmButtonLabel!: string;
+  @Input('secondaryConfirmButtonIcon') secondaryConfirmButtonIcon!: string;
+  @Input('isReadOnly') isReadOnly: boolean = true;
+  @Input('formGroup') formGroup!: FormGroup;
+
+  @Output('confirmButtonActivated') confirmButtonActivated = new EventEmitter<boolean>();
+  @Output('secondaryConfirmButtonActivated') secondaryConfirmButtonActivated = new EventEmitter<boolean>();
+  @Output('activeIndexParent') activeIndexParent = new EventEmitter<number>();
+
+  constructor(public messageService: MessageService) {}
+
+  onActiveIndexChange(event:any) {
+    this.activeIndex = event;
+  }
+
+  nextPage() {
+      this.activeIndex++;
+      this.activeIndexParent.emit(this.activeIndex);
+      return;
+  }
+  
+  previousPage() {
+    this.activeIndex--;
+    this.activeIndexParent.emit(this.activeIndex);
+  }
+  
+  confirm() {
+    this.confirmButtonActivated.emit(true);
+  }
+
+  secondaryConfirm() {
+    this.secondaryConfirmButtonActivated.emit(true);
+  }
+}

package/src/lib/report/w-powerbi-report/w-powerbi-report.component.css

@@ -0,0 +1,18 @@
+::ng-deep iframe {
+    border: none;
+}
+
+::ng-deep .hidden {
+    height: 0 !important;
+    width: 0 !important;
+}
+
+::ng-deep .report-container {
+    height: var(--height);
+    width: auto;
+    margin: 0px auto;
+}
+
+::ng-deep .powerbi-report-container .card {
+	padding: 5px;
+}

package/src/lib/report/w-powerbi-report/w-powerbi-report.component.html

@@ -0,0 +1,52 @@
+<div *ngIf="reportTitle || showPrintButton || showFullScreenButton" class="flex justify-content-between flex-wrap">
+    <div class="flex align-items-center justify-content-center">
+    </div>
+    <div class="flex align-items-center justify-content-center">
+        <div class="text-right">
+            <p-button *ngIf="showRefreshButton" icon="pi pi-refresh" 
+                      styleClass="p-button-rounded p-button-secondary p-button-text"
+                      (onClick)="refresh()">
+            </p-button>
+            <p-button *ngIf="showPrintButton" icon="pi pi-print" 
+                      styleClass="p-button-rounded p-button-secondary p-button-text"
+                      (onClick)="print()">
+            </p-button>
+            <p-button *ngIf="showFullScreenButton" icon="pi pi-arrows-alt" 
+                      styleClass="p-button-rounded p-button-secondary p-button-text"
+                      (onClick)="enterFullScreen()">
+            </p-button>
+        </div>
+    </div>
+</div>
+
+<div *ngIf="filterPanelPosition == 'right'" class="grid">
+    <div class="col-12 md:col-12 lg:col-8">
+        <ng-container *ngTemplateOutlet="powerbiReport"></ng-container>
+    </div>
+    <div class="col-12 md:col-12 lg:col-4">
+        <ng-content *ngIf="hasReportFilters" select=".report-filters-right"></ng-content>
+    </div>
+</div>
+
+<div *ngIf="filterPanelPosition == 'left'" class="grid">
+    <div class="col-12 md:col-12 lg:col-8">
+        <ng-content *ngIf="hasReportFilters" select=".report-filters-left"></ng-content>
+    </div>
+    <div class="col-12 md:col-12 lg:col-4">
+        <ng-container *ngTemplateOutlet="powerbiReport"></ng-container>
+    </div>
+</div>
+
+<div *ngIf="filterPanelPosition == 'bottom'">
+    <ng-container *ngTemplateOutlet="powerbiReport"></ng-container>
+    <ng-content *ngIf="hasReportFilters" select=".report-filters-bottom"></ng-content>
+</div>
+
+<ng-template #powerbiReport>
+    <div id="powerbiContainer">
+        <powerbi-report [embedConfig]="reportConfig" 
+                        [cssClassName]="reportClass" 
+                        [eventHandlers]="eventHandlersMap">
+        </powerbi-report>
+    </div>
+</ng-template>

package/src/lib/report/w-powerbi-report/w-powerbi-report.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WPowerbiReportComponent } from './w-powerbi-report.component';
+
+describe('WPowerbiReportComponent', () => {
+  let component: WPowerbiReportComponent;
+  let fixture: ComponentFixture<WPowerbiReportComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ WPowerbiReportComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(WPowerbiReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/report/w-powerbi-report/w-powerbi-report.component.ts

@@ -0,0 +1,175 @@
+import { Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { EmbedConfig } from '../../shared/models/embed-config.model';
+import { Embed, IReportEmbedConfiguration, Report, models, service } from 'powerbi-client';
+import { PowerBIReportEmbedComponent } from 'powerbi-client-angular';
+
+@Component({
+  selector: 'w-powerbi-report',
+  templateUrl: './w-powerbi-report.component.html',
+  styleUrls: ['./w-powerbi-report.component.css']
+})
+export class WPowerbiReportComponent implements OnInit {
+
+  @Input('embedConfig') embedConfig!: EmbedConfig;
+  @Input('reportTitle') reportTitle!: string;
+  @Input('hasReportFilters') hasReportFilters: boolean = false;
+  @Input('parameterReportFilters') parameterReportFilters!: string;
+  @Input('showReportFilters') showReportFilters: boolean = false;
+  @Input('filterPanelPosition') filterPanelPosition: string = "bottom";
+  @Input('showPageNavigation') showPageNavigation: boolean = false;
+  @Input('showPrintButton') showPrintButton: boolean = false;
+  @Input('showFullScreenButton') showFullScreenButton: boolean = false;
+  @Input('showVisualHeaders') showVisualHeaders: boolean = true;
+  @Input('showRefreshButton') showRefreshButton: boolean = false;
+  @Input('height') height: string = '810px';
+  // @Input('zoomRatio') zoomRatio: number = 0.00175;
+
+  @Output('refreshNotAllowed') refreshNotAllowed = new EventEmitter<boolean>();
+
+  powerbiReportWidth!: number;
+  private _zoom!: number;
+
+  @Input() set zoom(value: number) {
+    this._zoom = value;
+    this.setReportZoom(this._zoom);
+  }
+
+  get zoom(): number {
+    return this._zoom;
+  }
+  reportClass = 'report-container';
+
+  reportConfig: IReportEmbedConfiguration = {
+    type: 'report',
+    embedUrl: undefined,
+    tokenType: models.TokenType.Aad,
+    accessToken: undefined,
+    filters: undefined,
+    settings: {
+      layoutType: models.LayoutType.Custom,
+      customLayout: {
+        displayOption: models.DisplayOption.FitToWidth
+      },
+      background: models.BackgroundType.Transparent
+    }
+  };
+
+  eventHandlersMap = new Map([
+    ['loaded', () => {
+      const report = this.reportObj.getReport();
+      report.setComponentTitle('Embedded report');
+    },
+    ],
+    ['rendered', () => { }],
+    ['error', (event?: service.ICustomEvent<any>) => {
+      if (event) {
+        console.error(event.detail);
+      }
+    },
+    ],
+    ['visualClicked', () => { }],
+    ['pageChanged', (event) => { }],
+  ]) as Map<string, (event?: service.ICustomEvent<any>, embeddedEntity?: Embed) => void | null>;
+
+  @ViewChild(PowerBIReportEmbedComponent) reportObj!: PowerBIReportEmbedComponent;
+
+  // @HostListener('window:resize', ['$event'])
+  // onResize(event: any) {
+  //   this.getReportDivWidth();
+  // }
+
+  constructor(private elementRef: ElementRef) {}
+
+  ngOnInit(): void {
+    this.embedReport();
+    this.elementRef.nativeElement.style.setProperty("--height", this.height)
+  }
+
+  // getReportDivWidth() {
+  //   this.powerbiReportWidth = this.elementRef.nativeElement.querySelector('#powerbiContainer').offsetWidth;
+  //   this.setReportZoom(this.powerbiReportWidth * this.zoomRatio);
+  // }
+
+  async embedReport(): Promise<void> {
+    try {
+      this.reportConfig = {
+        ...this.reportConfig,
+        id: this.embedConfig!.id,
+        embedUrl: this.embedConfig!.embedUrl,
+        accessToken: this.embedConfig!.embedToken.token,
+        filters: this.parameterReportFilters ? [JSON.parse(this.parameterReportFilters)] : undefined,
+        settings: {
+          panes: {
+            filters: {
+              visible: this.showReportFilters
+            },
+            pageNavigation: {
+              visible: this.showPageNavigation
+            },
+          },
+          visualSettings: {
+            visualHeaders: [
+              {
+                settings: {
+                  visible: this.showVisualHeaders
+                }
+              }
+            ]
+          },
+          customLayout: {
+            displayOption: models.DisplayOption.FitToWidth
+          },
+          background: models.BackgroundType.Transparent
+        }
+      };
+    } catch (error: any) {
+      console.log(`Failed to fetch config for report. Status: ${error.status} ${error.statusText}`);
+      return;
+    }
+  }
+
+  async refresh() {
+    const report: Report = this.reportObj.getReport();
+    try {
+      await report.refresh();
+    } catch (errors:any) {
+      console.log(errors);
+      if(errors.message = "refreshNotAllowed") this.onRefreshNotAllowed();
+    }
+  }
+
+  async updateFilters(filters: models.IFilter[]) {
+    try {
+      const report: Report = this.reportObj.getReport();
+      await report.removeFilters();        
+      await report.updateFilters(models.FiltersOperations.Add, filters);
+    } catch (error:any) {
+      console.error(error);
+      if(error.message = "refreshNotAllowed") this.onRefreshNotAllowed();
+      return;
+    }
+  }
+
+  async setReportZoom(zoom: number) {
+    try {
+      const report: Report = this.reportObj.getReport();
+      await report.setZoom(zoom);
+    } catch (error) {
+      console.log("Error setting report zoom: " + error)
+    }
+  }
+
+  print() {
+    const report: Report = this.reportObj.getReport();
+    report.print();
+  }
+
+  enterFullScreen() {
+    const report: Report = this.reportObj.getReport();
+    report.fullscreen();
+  }
+
+  onRefreshNotAllowed() {
+    this.refreshNotAllowed.emit(true);
+  }
+}