@one-paragon/angular-utilities 2.0.0-beta.2 → 2.0.0-beta.4

package/src/table-builder/services/transform-creator.ts

@@ -0,0 +1,94 @@
+import { PipeTransform, Injectable, inject } from '@angular/core';
+import { FieldType, MetaData } from '../interfaces/report-def';
+import { DatePipe, CurrencyPipe } from '@angular/common';
+import { PhoneNumberPipe } from '../../utilities/pipes/phone.pipe';
+import { TableBuilderConfigToken } from '../classes/TableBuilderConfig';
+import { spaceCase } from '../../utilities';
+import { get } from 'lodash';
+export function isPipe(o : any ): o is PipeTransform {
+  return typeof ((o as PipeTransform).transform ) === 'function';
+}
+
+@Injectable({
+  providedIn:  'root',
+})
+export class TransformCreator {
+  private datePipe = inject(DatePipe);
+  private currencyPipe = inject(CurrencyPipe);
+  private phonePipe = inject(PhoneNumberPipe);
+  private config = inject(TableBuilderConfigToken);
+
+  createTransformer(metaData: MetaData<any, any>, noIcons = false): ((value: any, ...args: any[]) => any)  {
+    const nested = metaData.key.includes('.');
+    const defaultFunc = nested ?  (value: any) => get( value, metaData.key) : (value: any) =>  value[metaData.key];
+    if(metaData.map){
+      return (value: any) => { 
+        return metaData.map!(value)};
+    }
+    if( metaData.transform) {
+      if(isPipe(metaData.transform)){
+        return (value: any) =>  (metaData!.transform as PipeTransform).transform(defaultFunc(value));
+      }
+      return metaData.fieldType === FieldType.Expression ? metaData.transform : (value: any) => (metaData.transform as (a:any,b:any)=>any)(defaultFunc(value),value);
+    }
+    if (this.config.transformers && this.config.transformers[metaData.fieldType]) {
+      var transformer =  this.config.transformers![metaData.fieldType]!;
+      return (value: any) => transformer(defaultFunc(value));
+    }
+    const defaultDateFormat = this.config.dateFormats?.dateFormat ?? 'shortDate';
+    const defaultDateTimeFormat = this.config.dateFormats?.dateTimeFormat ?? 'short';
+    switch(metaData.fieldType) {
+      case FieldType.Date:
+        const dateFormat = metaData.additional?.dateFormat ?? defaultDateFormat;
+        return (value: any) => this.datePipe.transform(defaultFunc(value), dateFormat);
+      case FieldType.DateTime:
+        const dateTimeFormat = metaData.additional?.dateTimeOptions?.format ?? defaultDateTimeFormat;
+        return (value: any) => this.datePipe.transform(defaultFunc(value), dateTimeFormat);
+      case FieldType.Currency:
+          return (value: any) =>  this.currencyPipe.transform(defaultFunc(value));
+      case FieldType.PhoneNumber:
+        return  (value: any) =>  this.phonePipe.transform(defaultFunc(value));
+      case FieldType.Enum:
+        return (value: any) => spaceCase(metaData.additional?.enumMap![defaultFunc(value)] as string) ;
+      case FieldType.Boolean:
+        if(noIcons) {
+          return defaultFunc
+        }
+        let forTrue = 'check'
+        let forFalse = '';
+        if(metaData.additional?.boolean?.forTrue) {
+          forTrue = metaData?.additional.boolean.forTrue.icon;
+        }
+        if(metaData.additional?.boolean?.showForFalse === true) {
+          forFalse = 'clear';
+        } else if (metaData.additional?.boolean?.showForFalse?.icon) {
+          forFalse = metaData.additional?.boolean?.showForFalse?.icon;
+        }
+        return (value: any) => defaultFunc(value) ? forTrue : forFalse ;
+    }
+      return defaultFunc;
+  }
+
+  createItemTransformer = <T = any, AdditionalFields extends string[] = []>(metaData: MetaData<T ,AdditionalFields>, noIcons = false, mutate = false) => {
+    const transform = this.createTransformer(metaData, noIcons);
+    return (t: T) => {
+      if(!mutate){
+        t = { ...t }
+      }
+      t[metaData.key as string] = transform(t)
+    }
+  }
+
+  createItemTransformers = <T = any, AdditionalFields extends string[] = []>(metaDatas: MetaData<T, AdditionalFields>[], noIcons = false, mutate = false) => {
+    const transformers = metaDatas.map(meta => this.createItemTransformer(meta ,noIcons, true));
+    return (t: T) => {
+      if(!t) return t;
+      if(!mutate){
+        t = { ... t}
+      }
+      transformers.forEach(m => m(t));
+      return t;
+    }
+  }
+
+}

package/src/table-builder/specs/table-custom-filters.spec.ts

@@ -0,0 +1,262 @@
+// import { HarnessLoader } from "@angular/cdk/testing";
+// import { TestbedHarnessEnvironment } from "@angular/cdk/testing/testbed";
+// import { Component, DebugElement, Type } from "@angular/core";
+// import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+// import { MatButtonToggleModule } from "@angular/material/button-toggle";
+// import { MatButtonToggleHarness } from "@angular/material/button-toggle/testing";
+// import { MatCheckbox, MatCheckboxModule } from "@angular/material/checkbox";
+// import { MatLegacyRadioModule as MatRadioModule } from "@angular/material/legacy-radio";
+// import { MatLegacySelectModule as MatSelectModule } from "@angular/material/legacy-select";
+// import { MatSlideToggleModule } from "@angular/material/slide-toggle";
+// import { MatSlideToggleHarness } from "@angular/material/slide-toggle/testing";
+// import { MatLegacyRadioButtonHarness as MatRadioButtonHarness } from '@angular/material/legacy-radio/testing';
+// import { MatCheckboxHarness } from '@angular/material/checkbox/testing';
+// import { MatLegacySelectHarness as MatSelectHarness,  } from "@angular/material/legacy-select/testing";
+// import { MatLegacyOptionHarness as MatOptionHarness } from "@angular/material/legacy-core/testing";
+// import { By } from "@angular/platform-browser";
+// import { firstValueFrom, lastValueFrom, Observable, skip, Subject, take, takeUntil } from "rxjs";
+// import { MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleTbFilterDirective, TableCustomFilterDirective } from "../directives/tb-filter.directive";
+// import { NoopAnimationsModule } from "@angular/platform-browser/animations";
+
+// abstract class ToggleTestComponent {
+
+// }
+
+
+// const takeItem = <T>(src:Observable<T>, itemNumber: number, until: Observable<any>) : Promise<T | null> => {
+//   return firstValueFrom(src.pipe( skip(itemNumber - 1),takeUntil(until) ), {defaultValue: null});
+// }
+
+// @Component({
+//   template: `
+//     <mat-slide-toggle tbCustomFilter   > Slide me! </mat-slide-toggle>
+//     <mat-checkbox tbCustomFilter   > Check me! </mat-checkbox>
+//     <mat-radio-button tbCustomFilter   > Click me! </mat-radio-button>
+//     <mat-select>
+//       <mat-option tbCustomFilter   > Click me! </mat-option>
+//       <mat-option [value]='"other"'   >Other</mat-option>
+//     </mat-select>
+//     <mat-button-toggle tbCustomFilter   > Click me! </mat-button-toggle>
+//     <div class='optionGroup' tbCustomFilterGroup >
+//       <mat-checkbox tbCustomFilter class="child-1-checkbox"  >1</mat-checkbox>
+//     </div>
+//   `
+// }) export class SingleToggleTestComponent extends ToggleTestComponent {
+
+// }
+
+
+// let fixture: ComponentFixture<ToggleTestComponent>;
+// let loader: HarnessLoader;
+
+
+// const setupTest = (): void => {
+
+
+//   TestBed.configureTestingModule({
+//       imports: [
+//         NoopAnimationsModule,
+//         MatSlideToggleModule,
+//         MatCheckboxModule,
+//         MatRadioModule,
+//         MatButtonToggleModule,
+//         MatSelectModule
+//       ],
+//       declarations: [
+//         TableCustomFilterDirective,
+//         SingleToggleTestComponent,
+//         MatSlideToggleTbFilterDirective,
+//         MatButtonToggleFilterDirective,
+//         MatOptionTbFilterDirective,
+//         MatRadioButtonTbFilterDirective,
+//         MatCheckboxTbFilterDirective,
+//         TablebFilterGroupDirective,
+
+//     ],
+//     providers: [  ]
+//     });
+//     fixture = TestBed.createComponent(SingleToggleTestComponent);
+//     fixture.detectChanges();
+//     loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+// };
+
+
+// describe("Custom Table Filters", () => {
+
+//   describe("mat slide toggle filter",  () => {
+//     let toggleHarnesses: MatSlideToggleHarness[];
+//     let dElement: DebugElement;
+//     beforeEach(async () => {
+//       setupTest();
+//       dElement = fixture.debugElement.query(By.directive(MatSlideToggleTbFilterDirective) );
+//       toggleHarnesses = await loader.getAllHarnesses(MatSlideToggleHarness);
+//     } );
+
+//     it('should create', () : void => {
+//       expect(dElement).toBeTruthy();
+//     });
+
+//     it('should emit on toggle', async () => {
+//       var filterDirective = dElement.injector.get(TableCustomFilterDirective);
+//       const dunzo = new Subject();
+//       var val = takeItem(filterDirective.filter$, 2, dunzo);
+//       await toggleHarnesses[0].toggle();
+//       dunzo.next(null);
+//       var i = await val;
+//       expect(i).toBeTruthy();
+//       expect(i?.active).toBeTrue();
+//       expect(filterDirective.active).toBeTrue();
+//     })
+//   })
+
+//   describe("check box filter",  () => {
+//     let checkBoxHarnesses: MatCheckboxHarness;
+//     let dElement: DebugElement;
+//     beforeEach( async () => {
+//      setupTest();
+//       dElement = fixture.debugElement.query(By.directive(MatCheckboxTbFilterDirective) );
+//       checkBoxHarnesses = await loader.getHarness(MatCheckboxHarness);
+
+//     });
+
+//     it('should create', async () : Promise<void> => {
+//       expect(dElement).not.toBeNull();
+//     });
+
+//     it('should emit on check', async () => {
+//       var filterDirective = dElement.injector.get(TableCustomFilterDirective);
+//       var val = firstValueFrom(filterDirective.filter$);
+//       await checkBoxHarnesses.check();
+//       var i = await val;
+//       expect(i).toBeTruthy();
+//       expect(filterDirective.active).toBeTrue();
+//     });
+
+
+//   });
+
+
+//   describe("radio button filter",  () => {
+//     let radioHarnesses: MatRadioButtonHarness;
+//     let dElement: DebugElement;
+//     beforeEach( async () => {
+//      setupTest();
+//       dElement = fixture.debugElement.query(By.directive(MatRadioButtonTbFilterDirective) );
+//       radioHarnesses = await loader.getHarness(MatRadioButtonHarness);
+
+//     });
+
+//     it('should create', async () : Promise<void> => {
+//       expect(dElement).not.toBeNull();
+//     });
+
+//     it('should emit on check', async () => {
+//       var filterDirective = dElement.injector.get(TableCustomFilterDirective);
+//       var val = firstValueFrom(filterDirective.filter$);
+//       await radioHarnesses.check();
+//       var i = await val;
+//       expect(i).toBeTruthy();
+//       expect(filterDirective.active).toBeTrue();
+//     });
+//   });
+
+//   describe("button toggle  filter",  () => {
+//     let buttonToggleHarness: MatButtonToggleHarness;
+//     let dElement: DebugElement;
+//     beforeEach( async () => {
+//      setupTest();
+//       dElement = fixture.debugElement.query(By.directive(MatButtonToggleFilterDirective) );
+//       buttonToggleHarness = await loader.getHarness(MatButtonToggleHarness);
+
+//     });
+
+//     it('should create',  () : void => {
+//       expect(dElement).not.toBeNull();
+//     });
+
+//     it('should emit on toggle', async () => {
+//       var filterDirective = dElement.injector.get(TableCustomFilterDirective);
+//       var val = firstValueFrom(filterDirective.filter$);
+//       await buttonToggleHarness.check();
+//       var i = await val;
+//       expect(i).toBeTruthy();
+//       expect(filterDirective.active).toBeTrue();
+//     });
+//   });
+
+//   describe("option filter",  () => {
+//     let optionHarness: MatOptionHarness;
+//     let optionHarness2: MatOptionHarness;
+//     let selectHarness: MatSelectHarness;
+//     let dElement: DebugElement;
+//     beforeEach(async () => {
+//       setupTest();
+//       selectHarness = await loader.getHarness(MatSelectHarness);
+//       await selectHarness.open();
+//       var h = await loader.getAllHarnesses(MatOptionHarness);
+//       optionHarness = h[0];
+//       optionHarness2 = h[1];
+//       dElement = fixture.debugElement.query(By.directive(MatOptionTbFilterDirective) );
+//     });
+
+//     it('should create', async () : Promise<void> => {
+//       expect(dElement).toBeTruthy();
+//     });
+
+//     it('should emit on select', async () => {
+//       let doneSubject = new Subject<void>();
+
+//       var filterDirective = dElement.injector.get(TableCustomFilterDirective);
+
+//       let val = takeItem(filterDirective.filter$, 2, doneSubject);
+//       await optionHarness.click();
+//       doneSubject.next();
+//       let i = await val;
+
+//       expect(i).toBeTruthy();
+//       expect(i?.active).toBeTrue();
+//       expect(filterDirective.active).toBeTrue();
+
+
+//       val = takeItem(filterDirective.filter$, 2, doneSubject);
+//       await optionHarness2.click();
+
+//       i = await val;
+//       expect(i).toBeTruthy();
+//       expect(i?.active).toBeFalse();
+//       expect(filterDirective.active).toBeFalse();
+
+//     });
+//   });
+
+//   describe("group filter",  () => {
+//     let checkboxHarness: MatCheckboxHarness;
+//     let dElement: DebugElement;
+//     beforeEach(async () => {
+//       setupTest();
+
+//       dElement = fixture.debugElement.query(By.directive(TablebFilterGroupDirective) );
+//       const childLoader = await loader.getChildLoader('.optionGroup');
+//       checkboxHarness = await childLoader.getHarness(MatCheckboxHarness);
+//     });
+
+//     it('should create', () : void => {
+//       expect(dElement).toBeTruthy();
+//     });
+
+//     it('should emit on child select', async () => {
+
+//       var directive = dElement.injector.get(TablebFilterGroupDirective);
+//       var doneSubject = new Subject<void>();
+//       var resultPromise = takeItem(directive.filter$, 2, doneSubject);
+
+//       await checkboxHarness.check();
+//       doneSubject.next();
+
+//       var result = await resultPromise;
+//       expect(result).toBeTruthy();
+
+//     });
+//   });
+
+// });

package/src/table-builder/styles/collapser.styles.scss

@@ -0,0 +1,16 @@
+.collapse-icon{
+  font-size: 16px;
+  height: 16px;
+  color:#3f51b5;
+  align-self: flex-start;
+}
+.collapse-icon:hover{
+  cursor: pointer;
+}
+.hide{
+  display: none;
+}
+.paginator-row{
+  display: flex;
+  align-items: center;
+}

package/src/table-builder/table-builder.module.ts

@@ -0,0 +1,73 @@
+
+import { NgModule } from '@angular/core';
+import { CommonModule, DatePipe, CurrencyPipe } from '@angular/common';
+import { SpaceCasePipe } from '../utilities/pipes/space-case.pipes';
+import { MultiSortDirective } from './directives/multi-sort.directive';
+import { ModuleWithProviders } from '@angular/core';
+import { TableBuilderConfig, TableBuilderConfigToken } from './classes/TableBuilderConfig';
+import { PhoneNumberPipe } from '../utilities/pipes/phone.pipe';
+import { RouterModule } from '@angular/router';
+import { FilterComponent, GenericTableComponent, TableContainerComponent } from './components';
+import { CustomCellDirective, MatSlideToggleTbFilterDirective, MatRadioButtonTbFilterDirective, MatOptionTbFilterDirective, MatCheckboxTbFilterDirective, MatButtonToggleFilterDirective, TableFilterDirective, TableFilterStringContainsDirective, TableWrapperDirective, ResizeColumnDirective, TableCustomFilterDirective } from './directives';
+import { UtilitiesModule } from '../utilities';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatNativeDateModule } from '@angular/material/core';
+import { TableBuilderStateStore } from './ngrx/tableBuilderStateStore';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatDialogModule,
+    MatNativeDateModule,
+    RouterModule,
+    TableContainerComponent,
+    GenericTableComponent,
+    TableContainerComponent,
+    CustomCellDirective,
+    FilterComponent,
+    MatSlideToggleTbFilterDirective,
+    MatRadioButtonTbFilterDirective,
+    MatOptionTbFilterDirective,
+    MatCheckboxTbFilterDirective,
+    MatButtonToggleFilterDirective,
+    TableFilterDirective,
+    TableFilterStringContainsDirective,
+    TableWrapperDirective,
+    ResizeColumnDirective,
+    UtilitiesModule,
+  ],
+  exports: [
+    GenericTableComponent,
+    TableContainerComponent,
+    CustomCellDirective,
+    FilterComponent,
+    MatSlideToggleTbFilterDirective,
+    MatRadioButtonTbFilterDirective,
+    MatOptionTbFilterDirective,
+    MatCheckboxTbFilterDirective,
+    MatButtonToggleFilterDirective,
+    TableFilterDirective,
+    TableFilterStringContainsDirective,
+    TableWrapperDirective,
+    ResizeColumnDirective,
+    UtilitiesModule,
+  ],
+  providers: [
+    SpaceCasePipe,
+    DatePipe,
+    CurrencyPipe,
+    PhoneNumberPipe,
+    MultiSortDirective,
+    TableBuilderStateStore,
+  ]
+})
+export class TableBuilderModule {
+  static forRoot(config: TableBuilderConfig): ModuleWithProviders<TableBuilderModule> {
+    return {
+      ngModule: TableBuilderModule,
+      providers: [
+        { provide: TableBuilderConfigToken, useValue: config }
+      ]
+    };
+  }
+}

package/src/test.ts

@@ -0,0 +1,17 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
+);

package/src/utilities/array-helpers.ts

@@ -0,0 +1,13 @@
+export const replaceInArrayWithClone = <T = any>(arr: T[], findMeth: (t: T) => boolean, actionOnClone: (t: T) => any = ((t: T) => {})): T[] => {
+  const index = arr.findIndex(findMeth);
+  const clonedArray = [...arr];
+  const t = clonedArray[index];
+  clonedArray[index] =
+    t != null && typeof t === 'object' ?
+      Array.isArray(t) ?
+        [...t] as any
+        : { ...t }
+      : t;
+  actionOnClone(clonedArray[index]);
+  return clonedArray;
+}

package/src/utilities/directives/auto-focus.directive.ts

@@ -0,0 +1,20 @@
+import { Directive, ElementRef, AfterViewInit, Input, inject } from '@angular/core';
+
+@Directive({
+  selector: '[autoFocus]',
+  })
+export class AutoFocusDirective implements AfterViewInit {
+  private elementRef = inject(ElementRef);
+
+
+  @Input() autoFocus = true;
+
+  ngAfterViewInit() {
+    if(this.autoFocus){
+      setTimeout(() => {
+        this.elementRef.nativeElement.focus();
+      });
+    }
+  }
+
+}

package/src/utilities/directives/clickEmitterDirective.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import { Subject } from 'rxjs';
+
+
+@Directive({
+  selector: '[clickEmitter]',
+  exportAs: 'clickEmitter',
+  host: {
+    '(click)': 'next(true)'
+  },
+  }) export class ClickEmitterDirective extends Subject<boolean> {
+  constructor() {
+    super();
+  }
+}

package/src/utilities/directives/clickSubject.ts

@@ -0,0 +1,19 @@
+import { Directive, Input } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Directive({
+  selector: '[clickSubject]',
+  exportAs: 'clickSubject',
+  host: {
+    '(click)': 'next(this._val)'
+  },
+  }) export class ClickSubjectDirective<T = boolean> extends Subject<T> {
+  constructor( ) {
+    super();
+  }
+  _val!: T;
+
+  @Input('clickSubject') set clickSubject( val: T) {
+    this._val = val;
+  }
+}

package/src/utilities/directives/conditional-classes.directive.ts

@@ -0,0 +1,35 @@
+import { Directive, ElementRef, Input, Renderer2, SimpleChanges, inject } from '@angular/core';
+import { Dictionary, Predicate } from '@ngrx/entity';
+
+@Directive({
+  selector: '[conditionalClasses]',
+  })
+export class ConditionalClassesDirective {
+  private el = inject(ElementRef);
+  private renderer = inject(Renderer2);
+
+
+  @Input() element?: any;
+  @Input('conditionalClasses') classes?: Dictionary<Predicate<any>>;
+
+  classesApplied: string[] = [];
+
+  ngOnChanges(changes: SimpleChanges) {
+    let toApply: string [] = [];
+    if(this.classes) {
+      toApply = Object.keys(this.classes)
+      .filter( key => this.classes![key]!(this.element) );
+    }
+
+    var classesNotYetApplied = toApply.filter( c => !this.classesApplied.includes(c) );
+    var classesToRemove = this.classesApplied.filter( c => !toApply.includes(c));
+
+    classesToRemove.forEach( c => this.renderer.removeClass( this.el.nativeElement, c ) );
+
+    classesNotYetApplied.forEach( c => this.renderer.addClass( this.el.nativeElement , c ) );
+
+    this.classesApplied = toApply;
+  }
+
+
+}

package/src/utilities/directives/dialog-service.ts

@@ -0,0 +1,19 @@
+import { Injectable} from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Injectable({ providedIn: 'root' })
+export class DialogService {
+  allOpenOpDialogs: MatDialogRef<any>[] = [];
+
+  addDialogRef(ref: MatDialogRef<any>) {
+    this.allOpenOpDialogs.push(ref);
+  }
+
+  removeDialogRef(ref: MatDialogRef<any>) {
+    this.allOpenOpDialogs = this.allOpenOpDialogs.filter(rf => ref.id !== rf.id);
+  }
+
+  closeAllOpDialogs() {
+    this.allOpenOpDialogs.forEach(ref => ref.close());
+  }
+}