@one-paragon/angular-utilities 0.1.21 → 0.1.23

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

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

@@ -1,16 +0,0 @@
-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);
-  }
-}

package/src/table-builder/directives/tb-filter.directive.ts

@@ -1,363 +0,0 @@
-import { Directive, Input, Optional, Predicate, SimpleChanges } from "@angular/core";
-import { BehaviorSubject, Observable, ReplaySubject, Subject, takeUntil, tap } from "rxjs";
-import { CustomFilter, FilterInfo } from "../classes/filter-info";
-import { v4 as uuid } from 'uuid';
-import { FilterType } from "../enums/filterTypes";
-import { MatSlideToggle } from "@angular/material/slide-toggle";
-import { MatRadioButton } from "@angular/material/radio";
-import { MatButtonToggle } from '@angular/material/button-toggle';
-import { MatCheckbox } from "@angular/material/checkbox";
-import { FieldType } from "../interfaces/report-def";
-import { NgControl } from "@angular/forms";
-import { ComponentStore } from "@ngrx/component-store";
-import { TableWrapperDirective } from "./table-wrapper.directive";
-import { MatOption } from "@angular/material/core";
-
-
-const inputs = [
-  'predicate: tbCustomFilter',
-  'filterId: filterId',
-];
-
-
-@Directive({
-  selector: ' '
-})
-export abstract class TableCustomFilterDirective<T = any> {
-  abstract filter$ : Observable<CustomFilter>;
-  filterId!: string;
-  savable = false;
-  used = false;
-  abstract active: boolean;
-  abstract reset(): void;
-}
-
-
-
-
-@Directive({
-  selector: "[tbFilter]"
-}) export class TableFilterDirective extends ComponentStore<FilterInfo> {
-
-  constructor(@Optional() protected  model: NgControl, @Optional() wrapper: TableWrapperDirective) {
-    super();
-    if(wrapper) {
-      wrapper.register(this);
-    }
-    if(model) {
-      this.effect( () => {
-        return model.valueChanges!.pipe(
-          tap( val => {
-            this.filterValue = val;
-            this.update();
-          })
-        )
-      })
-    }
-  }
-  reset() {
-    this.filterValue = undefined;
-  }
-  filter$ = this.state$;
-
-  @Input() filterType!: FilterType;
-  @Input() key!: string;
-  @Input() fieldType!: FieldType;
-  @Input() filterId!: string;
-  @Input() active = true;
-  @Input() filterValue: any = null;
-
-  setFilterValue(value: any) {
-    if(this.model) {
-      setTimeout(() => {
-        this.model.reset(value);
-      }, 0);
-    } else {
-      this.filterValue = value;
-    }
-  }
-
-
-  used = false;
-  savable = false;
-  ready = false;
-
-  _userActive = true;
-  ngOnChanges(changes: SimpleChanges ) {
-    this.update();
-  }
-
-  ngOnInit() {
-    if(!this.filterId) {
-      this.filterId = uuid();
-    } else {
-      this.savable = true;
-    }
-    this.ready = true;
-    this.update();
-  }
-
-  protected setFilter(filter: FilterInfo ) {
-    this.setState(filter);
-  }
-
-  update() {
-    if (this.ready) {
-      this.setFilter(
-        {
-          filterId: this.filterId,
-          key: this.key,
-          filterType: this.filterType,
-          fieldType: this.fieldType,
-          filterValue: this.filterValue,
-          active: this.active && this.filterValue !== undefined,
-          _isExternalyManaged: true,
-        }
-      );
-
-    }
-  }
-}
-
-@Directive({
-  selector: '[tbFilterStringContains]',
-  providers: [{ provide: TableFilterDirective, useExisting: TableFilterStringContainsDirective }],
-  inputs: [
-    'key:tbFilterStringContains',
-    'filterValue:filterValue',
-    'filterId: filterId',
-    'active: active',
-  ]
-}) export class TableFilterStringContainsDirective extends TableFilterDirective {
-  constructor(@Optional()  model: NgControl, @Optional() wrapper: TableWrapperDirective) {
-    super(model,wrapper);
-    this.filterType = FilterType.StringContains;
-    this.fieldType = FieldType.String;
-    this.effect( () => {
-      return model.valueChanges!.pipe(
-        tap( val => {
-          this.filterValue = val;
-          this.update();
-        })
-      )
-    })
-  }
-
-  override reset() {
-    if(this.model) {
-      this.model.reset();
-    }
-    super.reset();
-  }
-
-  override setFilter(filter: FilterInfo) {
-    filter.active = filter.filterValue && this._userActive;
-    super.setFilter(filter);
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if(changes['active']) {
-      this._userActive = changes['active'].currentValue;
-    }
-    super.ngOnChanges(changes);
-  }
-}
-
-@Directive({
-  selector: "[tbCustomFilter]",
-})
-export abstract class TableCustomFilterDirectiveBase<T = any> extends TableCustomFilterDirective<T> {
-
-  filter$! : Subject<CustomFilter>;
-  filter!: CustomFilter;
-  @Input() filterId! : string;
-
-  _predicate!: Predicate<T>;
-  @Input('tbCustomFilter') set predicate( val: Predicate<T> ) {
-    this._predicate = val;
-    this.update({predicate:val});
-  }
-
-  _active: boolean = false;
-  ready = false;
-
-  update(val: Partial<CustomFilter> ) {
-    if(this.ready) {
-      this.filter = {...this.filter,...val};
-      this.filter$.next(this.filter);
-    }
-  }
-
-  @Input() set active(val: boolean) {
-    if(this._active !== val) {
-      this._active = val;
-      this.update({active:val});
-    }
-  }
-  get active(): boolean {
-    return this._active;
-  }
-
-  ngOnInit() {
-    if(!this.filterId) {
-      this.filterId = uuid();
-    } else {
-      this.savable = true;
-    }
-
-    this.filter = {
-      filterType: FilterType.Custom,
-      filterId: this.filterId,
-      active: this._active,
-      predicate: this._predicate,
-    };
-    this.ready = true;
-    this.filter$ = new BehaviorSubject(this.filter);
-  }
-}
-
-@Directive()
-export abstract class TbSelectedFilterDirective<T = any>  extends TableCustomFilterDirectiveBase<T> {
-
-
-  protected constructor(private change: Observable<any>, private isActive: () => boolean, @Optional() wrapper: TableWrapperDirective) {
-    super();
-    if(wrapper) {
-      wrapper.register(this);
-    }
-  }
-
-  reset() {
-    this.active = false;
-  }
-
-  destroySubject$ = new ReplaySubject<void>(1);
-  ngOnDestroy() {
-    this.destroySubject$.next();
-  }
-
-  ngOnInit(): void {
-    this._active = this.isActive();
-    super.ngOnInit();
-    this.change.pipe(takeUntil(this.destroySubject$)).subscribe( () => {
-      this.active = this.isActive();
-    });
-  }
-}
-
-// Checkbox
-@Directive({
-  selector: 'mat-checkbox[tbCustomFilter]',
-  inputs: [
-    ...inputs
-  ],
-  providers: [{ provide: TableCustomFilterDirective, useExisting: MatCheckboxTbFilterDirective }]
-})
-export class MatCheckboxTbFilterDirective extends TbSelectedFilterDirective {
-
-  override set active(val: boolean) {
-    this.matCheckbox.checked = val;
-    super.active = val;
-  }
-  constructor(private matCheckbox: MatCheckbox, @Optional() wrapper: TableWrapperDirective) {
-    super(matCheckbox.change, () => matCheckbox.checked, wrapper);
-  }
-}
-
-
-@Directive({
-  selector: 'mat-slide-toggle[tbCustomFilter]',
-  inputs: [
-    ...inputs
-  ],
-  providers: [{ provide: TableCustomFilterDirective, useExisting: MatSlideToggleTbFilterDirective }]
-})
-export class MatSlideToggleTbFilterDirective<T = any> extends TbSelectedFilterDirective<T> {
-  override set active(val: boolean) {
-    this.matSlideToggle.checked = val;
-    super.active = val;
-  }
-  constructor(private matSlideToggle: MatSlideToggle, @Optional() wrapper: TableWrapperDirective) {
-    super(matSlideToggle.change, () => matSlideToggle.checked,wrapper);
-  }
-
-  ngOnInit(): void {
-    super.ngOnInit();
-  }
-}
-
-// Radio button
-@Directive({
-  selector: 'mat-radio-button[tbCustomFilter]',
-  inputs: ['predicate: tbCustomFilter'],
-  providers: [{ provide: TableCustomFilterDirective, useExisting: MatRadioButtonTbFilterDirective }]
-})
-export class MatRadioButtonTbFilterDirective extends TbSelectedFilterDirective {
-
-  override set active(val: boolean) {
-    this.matRadioButton.checked = val;
-    super.active = val;
-  }
-  constructor(private matRadioButton: MatRadioButton, @Optional() wrapper: TableWrapperDirective) {
-    super(matRadioButton.change, () => matRadioButton.checked, wrapper);
-  }
-
-  ngOnInit(): void {
-    super.ngOnInit();
-  }
-}
-
-// Option (select)
-@Directive({
-  selector: 'mat-option[tbCustomFilter]',
-  inputs: [
-    ...inputs
-  ],
-  providers: [{ provide: TableCustomFilterDirective, useExisting: MatOptionTbFilterDirective }]
-})
-export class MatOptionTbFilterDirective extends TbSelectedFilterDirective {
-
-  override set active(val: boolean) {
-    if(val) {
-      this.matOption.select();
-    } else {
-      this.matOption.deselect();
-    }
-    super.active = val;
-  }
-  constructor(private matOption: MatOption, @Optional() wrapper: TableWrapperDirective) {
-    super( matOption.onSelectionChange.pipe(tap( d => {
-      if(!matOption.value) {
-        matOption.value = uuid();
-      }
-    }
-
-    )), () => matOption.selected, wrapper);
-  }
-
-  ngOnInit(): void {
-    super.ngOnInit();
-  }
-}
-
-// Button toggle
-@Directive({
-  selector: 'mat-button-toggle[tbCustomFilter]',
-  inputs: [
-    ...inputs
-  ],
-  providers: [{ provide: TableCustomFilterDirective, useExisting: MatButtonToggleFilterDirective }]
-})
-export class MatButtonToggleFilterDirective extends TbSelectedFilterDirective {
-  override set active(val: boolean) {
-    this.matButtonToggle.checked = val;
-    super.active = val;
-  }
-  constructor(private matButtonToggle: MatButtonToggle, @Optional() wrapper: TableWrapperDirective) {
-    super(matButtonToggle.change, () => matButtonToggle.checked,wrapper);
-  }
-
-  ngOnInit(): void {
-    super.ngOnInit();
-  }
-}