@one-paragon/angular-utilities 0.3.11-beta.1 → 0.4.0

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

@@ -1,38 +0,0 @@
-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';
-import { MatButtonModule } from '@angular/material/button';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { SpaceCasePipe, StopPropagationDirective } from '../../../../utilities';
-import { MatIconModule } from '@angular/material/icon';
-import { AsyncPipe } from '@angular/common';
-
-@Component({
-    selector: 'tb-filter-displayer',
-    templateUrl: './gen-filter-displayer.component.html',
-    styleUrls: ['./gen-filter-displayer.component.css'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: true,
-    imports: [
-      MatButtonModule, MatMenuModule, MatTooltipModule, StopPropagationDirective, MatIconModule,
-      AsyncPipe, SpaceCasePipe
-    ]
-})
-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

@@ -1,23 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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]',
-    standalone: true
-})
-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/src/table-builder/directives/multi-sort.directive.spec.ts

@@ -1,124 +0,0 @@
-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

@@ -1,49 +0,0 @@
-import { Directive, OnInit, OnDestroy } from '@angular/core';
-import { MatSort, Sort, SortDirection } from '@angular/material/sort';
-import { distinctUntilChanged, distinctUntilKeyChanged, map, tap } from 'rxjs/operators';
-import { TableStore } from '../classes/table-store';
-
-@Directive({
-  selector: '[multiSort]',
-  exportAs: 'multiSort',
-  inputs: ['disabled: matSortDisabled'],
-  providers: [
-    { provide: MatSort, useExisting: MultiSortDirective }
-  ],
-  standalone: true
-})
-export class MultiSortDirective extends MatSort implements OnInit, OnDestroy {
-
-  constructor(private state: TableStore) {
-    super();
-    this.state.setSort(this.sortChange.pipe(
-      distinctUntilChanged((f,s) => f.active === s.active && f.direction === s.direction),
-       map(sc => ({ key: sc.active, direction: sc.direction }))));
-    this.state.on(
-      this.state.sort$,
-      (rules) => {
-        const topRule = { active: rules[0]?.active || '', direction: rules[0]?.direction || '' as SortDirection};
-        const topActiveChanged = topRule.active !== this.active || '';
-        const topDirectionChanged = topRule.direction !== this.direction || '';
-        if(topActiveChanged || topDirectionChanged){
-          this.active = topRule.active;
-          this.direction = topRule.direction;
-          this.sortChange.emit(topRule);
-        }
-      }
-    );
-  }
-
-}
-
-export function isDifferent(a: Sort[], b: Sort[]) {
-  if (a.length !== b.length) {
-    return true;
-  }
-  for (let i = 0; i < a.length; i++) {
-    if (a[i].active !== b[i].active || a[i].direction !== b[i].direction) {
-      return true;
-    } 
-  }
-  return false;
-}

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

@@ -1,105 +0,0 @@
-import { Directive, OnInit, Renderer2, Input, ElementRef, booleanAttribute } 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]",
-  standalone: true
-})
-export class ResizeColumnDirective implements OnInit{
-  @Input({ alias : 'resizeColumn', transform: booleanAttribute }) resizable: boolean | string = false;
-
-  @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.mouseDownThroughMouseUpEventMapper(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})
-  }
-
-  mouseDownThroughMouseUpEventMapper(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: MouseDownData, 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 MouseDownData{
-  startPageX:number,
-  startColumnWidth:number,
-  startTableWidth:number,
-}

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

@@ -1,14 +0,0 @@
-import { ContentChildren, Directive, QueryList } from "@angular/core";
-import { TableCustomFilterDirective, TableFilterDirective } from "./tb-filter.directive";
-
-@Directive({
-  selector: '[tbWrapper]',
-  standalone: true,
-})
-export class TableWrapperDirective {
-  registrations : (TableCustomFilterDirective | TableFilterDirective) [] = [];
-
-  register(filter: TableCustomFilterDirective | TableFilterDirective) {
-    this.registrations.push(filter);
-  }
-}