Added support for Inlinedashboard page

projects/angular-sdk-library/src/lib/_bridge/helpers/sdk-pega-component-map.ts

@@ -91,6 +91,8 @@ import { WssNavBarComponent } from '../../_components/template/wss-nav-bar/wss-n
 import { QuickCreateComponent } from '../../_components/widget/quick-create/quick-create.component';
 import { WssQuickCreateComponent } from '../../_components/designSystemExtension/wss-quick-create/wss-quick-create.component';
 import { BannerComponent } from '../../_components/designSystemExtension/banner/banner.component';
+import { InlineDashboardComponent } from '../../_components/template/inline-dashboard/inline-dashboard.component';
+import { InlineDashboardPageComponent } from '../../_components/template/inline-dashboard-page/inline-dashboard-page.component';
 
 // pegaSdkComponentMap is the JSON object where we'll store the components that are
 // the default implementations provided by the SDK. These will be used if there isn't
@@ -144,8 +146,8 @@ const pegaSdkComponentMap = {
     FileUtility: FileUtilityComponent,
     FlowContainer: FlowContainerComponent,
     //   'Followers': Followers,
-    //   'InlineDashboard': InlineDashboard,
-    //   'InlineDashboardPage': InlineDashboardPage,
+    InlineDashboard: InlineDashboardComponent,
+    InlineDashboardPage: InlineDashboardPageComponent,
     Integer: IntegerComponent,
     //   'LeftAlignVerticalTabs': LeftAlignVerticalTabs,
     ListPage: ListPageComponent,

projects/angular-sdk-library/src/lib/_components/infra/dashboard-filter/dashboard-filter.component.html

@@ -0,0 +1,26 @@
+<div *ngFor="let kid of children">
+    <div *ngIf="kid.type === 'DateTime'" [formGroup]="rangeFormGroup">
+        <mat-form-field class="psdk-full-width">
+            <mat-label>{{kid.label}}</mat-label>
+            <mat-date-range-input [rangePicker]="picker">
+              <input matStartDate placeholder="Start date" formControlName="start">
+              <input matEndDate placeholder="End date" formControlName="end" (dateChange)="dateRangeChangeHandler(kid)">
+            </mat-date-range-input>
+            <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+            <mat-date-range-picker #picker></mat-date-range-picker>
+        </mat-form-field>
+    </div>
+    <div *ngIf="kid.c11nEnv">
+        <span (input)="updateTmpData({event: $event, field: kid})">
+            <component-mapper [name]="kid.c11nEnv.getPConnect().getComponentName()" [props]="{
+                pConn$: kid.c11nEnv.getPConnect(),
+                formGroup$: formGroup$
+              }"
+                    errorMsg="Promoted filters wants component not yet available: {{ kid.c11nEnv.getPConnect().getComponentName() }}">
+            </component-mapper>
+        </span>
+    </div>
+</div>
+<div>
+    <button mat-button color="primary" (click)="clearFilters()">Clear All</button>
+</div>

projects/angular-sdk-library/src/lib/_components/infra/dashboard-filter/dashboard-filter.component.scss

@@ -0,0 +1,7 @@
+.psdk-full-width {
+  width: 100%;
+}
+
+::ng-deep .mat-mdc-form-field-subscript-wrapper {
+  height: 0;
+}

projects/angular-sdk-library/src/lib/_components/infra/dashboard-filter/dashboard-filter.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { DashboardFilterComponent } from './dashboard-filter.component';
+
+describe('DashboardFilterComponent', () => {
+  let component: DashboardFilterComponent;
+  let fixture: ComponentFixture<DashboardFilterComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardFilterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardFilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/angular-sdk-library/src/lib/_components/infra/dashboard-filter/dashboard-filter.component.ts

@@ -0,0 +1,99 @@
+import { Component, OnInit, Input, forwardRef, SimpleChanges, OnChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
+import { debounceTime } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { getFilterExpression, getFormattedDate, createFilter, combineFilters } from '../../../_helpers/filterUtils';
+
+
+@Component({
+  selector: 'app-dashboard-filter',
+  templateUrl: './dashboard-filter.component.html',
+  styleUrls: ['./dashboard-filter.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatFormFieldModule, ReactiveFormsModule, MatDatepickerModule, MatButtonModule, MatNativeDateModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class DashboardFilterComponent implements OnInit {
+  @Input() pConn$: any;
+  @Input() formGroup$: FormGroup;
+  @Input() inlineProps;
+  @Input() children;
+  angularPConnectData: any = {};
+  configProps$: Object;
+  arChildren$: Array<any>;
+  PCore$: any;
+  private filterChangeSubject = new Subject<string>();
+  rangeFormGroup = new FormGroup({
+    start: new FormControl(null),
+    end: new FormControl(null)
+  });
+
+  constructor() {
+    this.filterChangeSubject.pipe(
+      debounceTime(500)
+    ).subscribe((val) => this.fireFilterChange(val));
+  }
+
+  ngOnInit() {
+    if (!this.PCore$) {
+      this.PCore$ = window.PCore;
+    }
+  }
+
+  clearFilters() {
+    this.formGroup$.reset();
+    this.rangeFormGroup.reset();
+    this.PCore$.getPubSubUtils().publish(
+      this.PCore$.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL
+    );
+  }
+
+  updateTmpData(filterData) {
+    this.filterChangeSubject.next(filterData);
+  }
+
+  dateRangeChangeHandler(field) {
+    const { filterId, name } = field;
+    const start = this.rangeFormGroup.get('start').value;
+    const end = this.rangeFormGroup.get('end').value;
+    if (start && end) {
+      let startDate = getFormattedDate(start);
+      let endDate = getFormattedDate(end);
+
+      if (startDate && endDate) {
+        startDate = `${startDate}T00:00:00`;
+        endDate = `${endDate}T00:00:00`;
+        const startFilter = createFilter(startDate, name, 'GT');
+        const endFilter = createFilter(endDate, name, 'LT');
+
+        const filterData = {
+          filterId,
+          filterExpression: combineFilters([startFilter, endFilter], null)
+        };
+        this.PCore$.getPubSubUtils().publish(
+          this.PCore$.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE,
+          filterData
+        );
+      }
+    }
+  }
+
+  fireFilterChange(data: any) {
+    const { event, field } = data;
+    const filterData = {
+      filterId: field.filterId,
+      filterExpression: getFilterExpression(event.target.value, field.name, field.metadata)
+    };
+
+    this.PCore$.getPubSubUtils().publish(
+      this.PCore$.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE,
+      filterData
+    );
+  };
+
+}

projects/angular-sdk-library/src/lib/_components/template/inline-dashboard-page/inline-dashboard-page.component.html

@@ -0,0 +1 @@
+<app-inline-dashboard [inlineProps]="inlineProps" [children]="children" [formGroup$]="formGroup$"></app-inline-dashboard>

projects/angular-sdk-library/src/lib/_components/template/inline-dashboard-page/inline-dashboard-page.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { InlineDashboardPageComponent } from './inline-dashboard-page.component';
+
+describe('InlineDashboardPageComponent', () => {
+    let component: InlineDashboardPageComponent;
+    let fixture: ComponentFixture<InlineDashboardPageComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            declarations: [InlineDashboardPageComponent]
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(InlineDashboardPageComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

projects/angular-sdk-library/src/lib/_components/template/inline-dashboard-page/inline-dashboard-page.component.ts

@@ -0,0 +1,48 @@
+import { Component, OnInit, Input, forwardRef, SimpleChanges, OnChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup, FormBuilder } from '@angular/forms';
+import { RegionComponent } from '../../infra/region/region.component';
+import { InlineDashboardComponent } from '../inline-dashboard/inline-dashboard.component';
+import { buildFilterComponents } from '../../../_helpers/filterUtils';
+@Component({
+  selector: 'app-inline-dashboard-page',
+  templateUrl: './inline-dashboard-page.component.html',
+  styleUrls: ['./inline-dashboard-page.component.scss'],
+  standalone: true,
+  imports: [CommonModule, InlineDashboardComponent, forwardRef(() => RegionComponent)]
+})
+export class InlineDashboardPageComponent implements OnInit, OnChanges {
+  @Input() pConn$: any;
+
+  configProps$: Object;
+  arChildren$: Array<any>;
+  filterComponents: any;
+  inlineProps: any;
+  children: any = [];
+  formGroup$: FormGroup;
+  constructor(private fb: FormBuilder) {
+    this.formGroup$ = this.fb.group({ hideRequired: false });
+  }
+
+  ngOnInit() {
+    this.updateSelf();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const { pConn$ } = changes;
+
+    if (pConn$.previousValue && pConn$.previousValue !== pConn$.currentValue) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+    this.arChildren$ = this.pConn$.getChildren();
+    const allFilters = this.pConn$.getRawMetadata().children[1];
+    this.filterComponents = buildFilterComponents(this.pConn$, allFilters);
+    this.inlineProps = this.configProps$;
+    this.children[0] = this.arChildren$[0];
+    this.children[1] = this.filterComponents;
+  }
+}

projects/angular-sdk-library/src/lib/_components/template/inline-dashboard/inline-dashboard.component.html

@@ -0,0 +1,18 @@
+<div class="psdk-inline-dashboard">
+  <h4 class="psdk-inline-dashboard-title">{{inlineProps.title}}</h4>
+  <div [ngClass]="{
+    'psdk-inline-style': inlineProps.filterPosition === 'inline-start' || inlineProps.filterPosition === 'inline-end',
+    'psdk-inline-end': inlineProps.filterPosition === 'inline-end'
+  }" *ngIf="children">
+    <div class="psdk-inline-filter">
+      <div>
+        <app-dashboard-filter [children]="children[1]" [formGroup$]="formGroup$" [ngClass]="{
+          'psdk-block-style': inlineProps.filterPosition === 'block-start'
+        }"></app-dashboard-filter>
+      </div>
+    </div>
+    <div class="psdk-inline-list">
+      <app-region [pConn$]="children[0].getPConnect()"></app-region>
+    </div>
+  </div>
+</div>

projects/angular-sdk-library/src/lib/_components/template/inline-dashboard/inline-dashboard.component.scss

@@ -0,0 +1,38 @@
+.psdk-inline-dashboard {
+  margin-left: 8px;
+  margin-right: 8px;
+}
+
+.psdk-inline-dashboard-title {
+  font-weight: 500;
+  font-size: 1.25rem;
+}
+
+.psdk-block-style {
+  display: grid;
+  direction: column-reverse;
+  gap: 1rem;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.psdk-not-block-style {
+  display: grid;
+  grid-template-columns: 3fr 7fr;
+}
+
+.psdk-inline-style {
+  display: flex;
+  .psdk-inline-filter {
+    width: 25%;
+    padding: 0px 8px;
+    margin-top: 1rem;
+  }
+  .psdk-inline-list {
+    width: 75%;
+    padding: 0px 8px;
+  }
+}
+
+.psdk-inline-end {
+  flex-direction: row-reverse;
+}

projects/angular-sdk-library/src/lib/_components/template/inline-dashboard/inline-dashboard.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { InlineDashboardComponent } from './inline-dashboard.component';
+
+describe('InlineDashboardComponent', () => {
+    let component: InlineDashboardComponent;
+    let fixture: ComponentFixture<InlineDashboardComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            declarations: [InlineDashboardComponent]
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(InlineDashboardComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

projects/angular-sdk-library/src/lib/_components/template/inline-dashboard/inline-dashboard.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { RegionComponent } from '../../infra/region/region.component';
+import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
+import { DashboardFilterComponent } from '../../infra/dashboard-filter/dashboard-filter.component';
+
+@Component({
+  selector: 'app-inline-dashboard',
+  templateUrl: './inline-dashboard.component.html',
+  styleUrls: ['./inline-dashboard.component.scss'],
+  standalone: true,
+  imports: [CommonModule, DashboardFilterComponent, forwardRef(() => RegionComponent), forwardRef(() => ComponentMapperComponent)]
+})
+export class InlineDashboardComponent implements OnInit {
+  @Input() pConn$: any;
+  @Input() formGroup$: FormGroup;
+  @Input() inlineProps;
+  @Input() children;
+
+
+  constructor() { }
+
+  ngOnInit() {
+
+  }
+}

projects/angular-sdk-library/src/lib/_components/template/list-view/list-view.component.html

@@ -174,7 +174,7 @@
       </div>
     </div>
 
-    <mat-paginator *ngIf="bInForm$" [pageSizeOptions]="[100, 500, 1000]" showFirstLastButtons></mat-paginator>
+    <mat-paginator *ngIf="bInForm$" [pageSizeOptions]="[10, 20, 50, 100, 500, 1000]" showFirstLastButtons></mat-paginator>
     <mat-paginator *ngIf="!bInForm$" [pageSizeOptions]="[10, 20, 50, 100, 500]" showFirstLastButtons></mat-paginator>
   </div>