@one-paragon/angular-utilities 0.1.20 → 0.1.21

package/src/table-builder/components/table-container-filter/gen-filter-displayer/gen-filter-displayer.component.css

@@ -0,0 +1,37 @@
+.filter {
+    margin: 15px;
+    display: inline-block;
+}
+.filter-button {
+    color: cornflowerblue;
+    font-size: 22px;
+    font-weight: 700;
+}
+
+.cancel-button  {
+  margin-right: 30px;
+  font-weight: 700;
+}
+.filter-wrapper{
+  margin-top: 1em;
+  margin-bottom: 1em;
+  float: right;
+}
+.menu {
+    margin-bottom: 10px;
+    width: 109.1%;
+}
+
+.filter-labels {
+    color: cornflowerblue;
+    font-size: 17px;
+    font-weight: 600;
+}
+.float{
+  position: absolute;
+  width: fit-content;
+  z-index: 101;
+  top: 10px;
+  right: 180px;
+  max-width: 90vw;
+}

package/src/table-builder/components/table-container-filter/gen-filter-displayer/gen-filter-displayer.component.html

@@ -0,0 +1,8 @@
+<button stop-propagation class="filter-button" mat-icon-button [matMenuTriggerFor]="menu" matTooltip="Add Filter">
+  <mat-icon class="filter-icon" color="primary">filter_list</mat-icon>
+</button>
+<mat-menu #menu="matMenu">
+  <button *ngFor="let md of filterCols$ | async" (click)="addFilter(md)" mat-menu-item>
+    <span class="filter-labels">{{md.displayName || (md.key | spaceCase)}}</span>
+  </button>
+</mat-menu>

package/src/table-builder/components/table-container-filter/gen-filter-displayer/gen-filter-displayer.component.spec.ts

@@ -0,0 +1,88 @@
+import { firstValueFrom, of } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { TestBed, ComponentFixture, ComponentFixtureAutoDetect, tick, fakeAsync, flush } from '@angular/core/testing';
+import { GenFilterDisplayerComponent } from './gen-filter-displayer.component';
+import { MaterialModule } from '../../../material.module';
+import { SpaceCasePipe } from '../../../../utilities/pipes/space-case.pipes';
+import { FilterComponent } from '../../filter/filter.component';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FieldType } from '../../../interfaces/report-def';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { DateFilterComponent } from '../../date-filter/date-filter.component';
+import { TableBuilderModule } from '../../../table-builder.module';
+import { StoreModule } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
+import { TableStore } from '../../../classes/table-store';
+import { WrapperFilterStore } from '../table-wrapper-filter-store';
+
+
+function getMetaData() {
+  return of([
+    {
+      key: 'name',
+      displayName: 'first name',
+      fieldType: FieldType.String,
+      additional: {},
+      order: 1
+    },
+    {
+      key: 'last',
+      displayName: 'last name',
+      fieldType: FieldType.String,
+      additional: {},
+      order: 2
+    }
+  ]);
+}
+
+describe('generic filter displayer', () => {
+  let fixture: ComponentFixture<GenFilterDisplayerComponent>;
+  let component: GenFilterDisplayerComponent;
+
+  const clickFilter = (idx: number) => {
+    const btn = fixture.debugElement.query(By.css('.filter-button')).nativeElement;
+
+    btn.click();
+    const menu = fixture.debugElement.queryAll(By.css('.mat-menu-item'));
+    menu[idx].nativeElement.click();
+  };
+  beforeEach(() => {
+
+    TestBed.configureTestingModule({
+      declarations: [
+        GenFilterDisplayerComponent,
+        SpaceCasePipe,
+        FilterComponent,
+        DateFilterComponent,
+      ],
+      providers: [TableStore, WrapperFilterStore,
+      { provide: ComponentFixtureAutoDetect, useValue: true }
+      ],
+      imports: [
+        NoopAnimationsModule,
+        MaterialModule,
+        CommonModule,
+        FormsModule,
+        TableBuilderModule.forRoot({ defaultTableState: { sorted: []} }),
+        StoreModule.forRoot({}),
+        EffectsModule.forRoot([])]
+    })
+      .compileComponents();
+    fixture = TestBed.createComponent(GenFilterDisplayerComponent);
+    component = fixture.componentInstance;
+    component.filterCols$ = getMetaData();
+  });
+
+  it('should get the generic filter displayer component', () => {
+    expect(component).toBeDefined();
+  });
+
+  it('should be able to create a filter',  async () => {
+    clickFilter(0);
+    const filter = await firstValueFrom(fixture.componentInstance.filterStore.state$.pipe(map(x => x.filterInfo)));
+    expect(filter.length).toBe(1);
+  });
+
+});

package/src/table-builder/components/table-container-filter/gen-filter-displayer/gen-filter-displayer.component.ts

@@ -0,0 +1,27 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { MetaData, FieldType } from '../../../interfaces/report-def';
+import { Observable } from 'rxjs';
+import { TableStore } from '../../../classes/table-store';
+import { map } from 'rxjs/operators';
+import { WrapperFilterStore } from '../table-wrapper-filter-store';
+
+@Component({
+    selector: 'tb-filter-displayer',
+    templateUrl: './gen-filter-displayer.component.html',
+    styleUrls: ['./gen-filter-displayer.component.css'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class GenFilterDisplayerComponent {
+
+  constructor( public tableState: TableStore, public filterStore : WrapperFilterStore) {
+    this.filterCols$ =  tableState.metaDataArray$.pipe(
+      map(md => Object.values( md ).filter(m => (m.fieldType !== FieldType.Hidden) && (!m.noFilter))),
+    );
+  }
+
+    filterCols$: Observable<MetaData[]>;
+
+    addFilter(metaData: MetaData) {
+      this.filterStore.addFilter({key: metaData.key, fieldType: metaData.fieldType});
+    }
+}

package/src/table-builder/components/table-container-filter/table-wrapper-filter-store.ts

@@ -0,0 +1,23 @@
+import { Injectable } from "@angular/core";
+import { ComponentStore } from "@ngrx/component-store";
+import { map } from "rxjs/operators";
+import { PartialFilter } from "../../classes/filter-info";
+@Injectable()
+export class WrapperFilterStore  extends ComponentStore<{filterInfo:PartialFilter[]}>{
+  constructor(){
+    super({filterInfo:[]});
+  }
+
+  clearAll = this.updater(()=>({filterInfo:[]}));
+  deleteByIndex = this.updater((state,index:number)=>{
+    const arr = [...state.filterInfo];
+    arr.splice(index, 1);
+    return {filterInfo:arr};
+  });
+
+  currentFilters$ = this.state$.pipe(map(state => state.filterInfo));
+
+  addFilter = this.updater((state,filter:PartialFilter)=>{
+    return ({...state,filterInfo:[...state.filterInfo,filter]});
+  })
+}

package/src/table-builder/directives/custom-cell-directive.ts

@@ -0,0 +1,45 @@
+import { Directive, TemplateRef, Input, AfterContentInit, Optional } from '@angular/core';
+import { CdkColumnDef } from '@angular/cdk/table';
+import { SortDef, MetaData, FieldType } from '../interfaces/report-def';
+
+// here is how to use it
+// <generic-table [report]="report">
+//     <p *customCell="'column1'; let element = element" [class.makeMeRed]="element?.port">If Port, i will be red</p>
+//     <p *customCell="'column2'">I am custom cell two </p>
+// </generic-table>
+@Directive({
+    selector: '[customCell]',
+})
+export class CustomCellDirective implements AfterContentInit {
+    @Input() customCell!: string;
+    @Input() displayName?: string;
+    @Input() preSort?: SortDef;
+    @Input() TemplateRef: TemplateRef<any>;
+    @Input() customCellOrder?: number;
+    @Input() customCellWidth?: string;
+    constructor(
+      @Optional()  private templateRef: TemplateRef<any>,
+      @Optional() public columnDef: CdkColumnDef
+      ) {
+        this.TemplateRef = this.templateRef;
+     }
+     ngAfterContentInit() {
+      if (this.TemplateRef === null) {
+        this.TemplateRef = this.templateRef;
+      }
+    }
+
+    getMetaData(metaData? : MetaData): MetaData {
+      return {
+        key: this.customCell,
+        displayName: this.displayName ?? metaData?.displayName,
+        preSort: this.preSort ?? metaData?.preSort,
+        fieldType: metaData?.fieldType ??  FieldType.Unknown,
+        order: this.customCellOrder ?? metaData?.order,
+        _internalNotUserDefined: !(!!metaData),
+        width: this.customCellWidth ?? metaData?.width,
+        customCell: true,
+        noExport: !metaData
+      };
+    }
+}

package/{table-builder/directives/index.d.ts → src/table-builder/directives/index.ts}

@@ -1,5 +1,6 @@
-export * from './custom-cell-directive';
-export * from './multi-sort.directive';
-export * from './resize-column.directive';
-export * from './table-wrapper.directive';
-export * from './tb-filter.directive';
+export * from './custom-cell-directive';
+export * from './multi-sort.directive';
+export * from './resize-column.directive';
+export * from './table-wrapper.directive';
+export * from './tb-filter.directive';
+

package/src/table-builder/directives/multi-sort.directive.spec.ts

@@ -0,0 +1,124 @@
+import { MultiSortDirective } from './multi-sort.directive';
+import { Sort, MatSortable } from '@angular/material/sort';
+import { FieldType } from '../interfaces/report-def';
+import { TableBuilderConfigToken } from '../classes/TableBuilderConfig';
+import { DatePipe } from '@angular/common';
+import { TestBed } from '@angular/core/testing';
+import { StoreModule } from '@ngrx/store';
+import { storageStateReducer } from '../ngrx/reducer';
+import { TableStore } from '../classes/table-store';
+
+describe('MultiSortDirective', () => {
+
+    let directive: MultiSortDirective;
+    let rules: Sort[];
+
+    const data = [
+      {
+        name: 'Joe',
+        age: 10,
+        balance: 25
+      },
+      {
+        name: 'Jane',
+        age: 20,
+        balance: 35
+      }
+    ];
+    const metaData =  [
+      {
+        key: 'name',
+        fieldType: FieldType.String,
+        additional: {},
+        order : 1
+      },
+      {
+        key: 'age',
+        fieldType: FieldType.Number,
+        additional: {},
+        order : 2
+      },
+      {
+        key: 'balance',
+        fieldType: FieldType.Number,
+        additional: {},
+        order : 3
+      }
+    ];
+
+    const initialState = {fullTableState: {
+      'test-id': {
+        metaData,
+        hiddenKeys: [],
+        pageSize: 10,
+        initialized : true ,
+        filters: [],
+        sorted : [],
+      }
+    }};
+
+    beforeEach(() => {
+      TestBed.resetTestingModule ();
+      rules = [];
+      TestBed.configureTestingModule({
+        declarations: [],
+        providers: [
+         { provide : TableBuilderConfigToken , useValue: {defaultTableState: { }}},
+         DatePipe,
+         TableStore
+        ],
+        imports: [
+          StoreModule.forRoot({'fullTableState': storageStateReducer}),
+        ],
+        teardown: {destroyAfterEach: true}
+      })
+      .compileComponents();
+
+      const store = TestBed.inject(TableStore);
+     // stateManager.upda ..tableId = 'test-id';
+     // stateManager.initializeState();
+      directive = new MultiSortDirective(store);
+
+        rules = [
+            { active: 'a', direction: 'asc' },
+            { active: 'b', direction: 'asc' },
+            { active: 'c', direction: 'asc' },
+        ];
+
+        [...rules].reverse().forEach( rule =>  store.setSort( {key:rule.active, direction: rule.direction} ));
+        directive.ngOnInit();
+    });
+
+    describe('Initializing Rules',  () => {
+
+        it('should inititialize the rules', () => {
+            expect(directive.rules).toEqual(rules);
+        });
+    });
+
+    describe('Updating the rules', () => {
+        it('should add new rule to begining of rules array', () => {
+            const originalLength = directive.rules.length;
+            const sort: MatSortable = { id: 'd', start: 'asc', disableClear: false };
+            directive.sort(sort);
+            expect(directive.rules.length).toBe(originalLength + 1, 'updated rules length should be one larger than original');
+            expect(directive.rules[0].active).toBe(sort.id);
+        });
+
+        it('should remove old rule for the column of new rule and replace it with new rule', () => {
+            const originalLength = directive.rules.length;
+            const sort: MatSortable = { id: 'a', start: 'asc', disableClear: false };
+            directive.sort(sort);
+            expect(directive.rules.length).toBe(originalLength, 'updated rules length should be same as original');
+            expect(directive.rules[0].direction).toBe('desc');
+        });
+
+        it('should remove old rule without replacing it if new rule for that column has no direction', () => {
+            const originalLength = directive.rules.length;
+            const sort: MatSortable = { id: 'a', start: 'asc', disableClear: false };
+            directive.sort({...sort});
+            directive.sort({...sort});
+            expect(directive.rules.length).toBe(originalLength - 1, 'updated rules length should be one smaller than original');
+        });
+    });
+});

package/src/table-builder/directives/multi-sort.directive.ts

@@ -0,0 +1,41 @@
+import { Directive, OnInit, OnDestroy } from '@angular/core';
+import { MatSort, Sort } from '@angular/material/sort';
+import { map } from 'rxjs/operators';
+import { TableStore } from '../classes/table-store';
+
+@Directive({
+  selector: '[multiSort]',
+  exportAs: 'multiSort',
+  inputs: ['disabled: matSortDisabled'],
+  providers: [
+    { provide: MatSort, useExisting: MultiSortDirective }
+  ]
+})
+export class MultiSortDirective extends MatSort implements OnInit, OnDestroy {
+  rules: Sort[] = [];
+
+  constructor(private state: TableStore) {
+    super();
+    this.state.setSort(this.sortChange.pipe(map(sc => ({ key: sc.active, direction: sc.direction }))));
+    this.state.on(
+      this.state.sorted$,
+      rules => {
+        this.rules = rules;
+
+        if (this.active && rules.length === 0) {
+          this.active = '';
+          this.direction = '';
+          this.sortChange.emit({ active: '', direction: '' });
+        }
+
+        if(rules.length > 0 && (this.active !== rules[0].active || this.direction !== rules[0].direction)) {
+          this.active = rules[0].active;
+          this.direction = rules[0].direction;
+          this.sortChange.emit(rules[0]);
+        }
+
+      }
+    );
+  }
+
+}

package/src/table-builder/directives/resize-column.directive.ts

@@ -0,0 +1,104 @@
+import { Directive, OnInit, Renderer2, Input, ElementRef } from "@angular/core";
+import { fromEvent } from "rxjs";
+import { filter, map, switchMap, takeUntil } from "rxjs/operators";
+import { defaultShareReplay } from "../../rxjs";
+import { TableStore } from "../classes/table-store";
+
+@Directive({
+  selector: "[resizeColumn]",
+})
+export class ResizeColumnDirective implements OnInit{
+  @Input("resizeColumn") resizable!: boolean;
+
+  @Input() key!: string;
+  constructor(private renderer: Renderer2, private el: ElementRef, public store: TableStore,) { }
+
+  ngOnInit(){
+    if (this.resizable){
+      const {table, columnHead} = this.getTableAndColumnHeadHtmlElements();
+      const resizer = this.createResizerSpanInColumnHead(columnHead);
+
+      const aggregateMouseEventsMapped$ = this.mouseDownThroghMouseUpEventMapper(resizer,columnHead,table)
+
+      const resizeColsData$ = aggregateMouseEventsMapped$.pipe(
+        filter(({mouseMove})=>!!mouseMove.buttons),
+        map( ({mouseDownData,mouseMove}) => {
+            const {newTableWidth,newColumnWidth}  = this.calculateNewWidths(mouseDownData,mouseMove)
+            return ({
+              key:this.key,
+              widthInPixel:newColumnWidth,
+              tableSize:newTableWidth,
+            })
+          }),
+        defaultShareReplay()
+      );
+
+      this.store.setUserDefinedWidth(resizeColsData$.pipe(
+        map(resizeData => ([{key: this.key, widthInPixel: resizeData.widthInPixel }]))
+      ));
+
+      this.store.setTableWidth(resizeColsData$.pipe(
+        map(resizeData => resizeData.tableSize )));
+    }
+
+  }
+
+  createResizerSpanInColumnHead(columnHead:HTMLElement){
+    const resizer = this.renderer.createElement("span");
+    this.renderer.addClass(resizer, "resize-holder");
+    resizer.style['cursor']='col-resize';
+    resizer.style['user-select']='none';
+    resizer.style['width']='10px';
+    resizer.style['height']='100%';
+    resizer.style['position']='absolute';
+    resizer.style['right']='0';
+    resizer.style['top']='0';
+    resizer.style['z-index']='1';
+    this.renderer.appendChild(columnHead, resizer);
+    return resizer;
+  }
+
+  getTableAndColumnHeadHtmlElements():{table:HTMLElement,columnHead:HTMLElement}{
+    const columnHead: HTMLElement = this.el.nativeElement;
+    const row = this.renderer.parentNode(columnHead);
+    const table = this.renderer.parentNode(row);
+    return ({table,columnHead})
+  }
+
+  mouseDownThroghMouseUpEventMapper(resizer:HTMLElement, columnHead:HTMLElement, table:HTMLElement){
+    return this.resizerMouseDownEventMapper(resizer,columnHead,table)
+    .pipe(
+      switchMap( mouseDownData => fromEvent<MouseEvent>(table, "mousemove").pipe(
+        map( mouseMove => ({mouseDownData, mouseMove})),
+        takeUntil(fromEvent<MouseEvent>(document, "mouseup"))
+      ) ),
+    )
+  }
+  resizerMouseDownEventMapper(resizer:HTMLElement, columnHead:HTMLElement, table:HTMLElement){
+    return fromEvent<MouseEvent>(resizer, "mousedown").pipe(
+      map(event => ({
+        startPageX: event.pageX,
+        startColumnWidth: this.getElementWidth(columnHead),
+        startTableWidth: this.getElementWidth(table),
+      }))
+    );
+  }
+
+  calculateNewWidths(mouseDownData:MouseDowmData,mouseMove:MouseEvent):{newTableWidth:number,newColumnWidth:number}{
+    const change = (mouseMove.pageX - mouseDownData.startPageX );
+    let newColumnWidth = mouseDownData.startColumnWidth + change;
+    if(newColumnWidth < 1){
+      newColumnWidth = 1;
+    }
+    const columnChange = newColumnWidth - mouseDownData.startColumnWidth;
+    const newTableWidth = (mouseDownData.startTableWidth + columnChange);
+    return ({newTableWidth,newColumnWidth})
+  }
+  getElementWidth = (elem:HTMLElement) => (+(globalThis.getComputedStyle(elem).getPropertyValue('width').replace('px','')))
+
+}
+interface MouseDowmData{
+  startPageX:number,
+  startColumnWidth:number,
+  startTableWidth:number,
+}

package/src/table-builder/directives/table-wrapper.directive.ts

@@ -0,0 +1,16 @@
+import { ContentChildren, Directive, QueryList } from "@angular/core";
+import { TableCustomFilterDirective, TableFilterDirective } from "./tb-filter.directive";
+
+@Directive({
+  selector: '[tbWrapper]'
+})
+export class TableWrapperDirective {
+  @ContentChildren(TableCustomFilterDirective, {descendants: true}) customFilters!: QueryList<TableCustomFilterDirective>;
+  @ContentChildren(TableFilterDirective, {descendants: true}) filters!: QueryList<TableFilterDirective>;
+
+  registerations : (TableCustomFilterDirective | TableFilterDirective) [] = [];
+
+  register(filter: TableCustomFilterDirective | TableFilterDirective) {
+    this.registerations.push(filter);
+  }
+}