@one-paragon/angular-utilities 0.1.20 → 0.1.21

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

@@ -0,0 +1,61 @@
+import { PipeTransform, Inject, Injectable } 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, TableBuilderConfig } from '../classes/TableBuilderConfig';
+import { SpaceCasePipe } 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 {
+  constructor(
+    private datePipe: DatePipe,
+    private currencyPipe: CurrencyPipe,
+    private phonePipe: PhoneNumberPipe,
+    private casePipe: SpaceCasePipe,
+    @Inject(TableBuilderConfigToken) private config: TableBuilderConfig,
+  ) {}
+  createTransformer(metaData: MetaData): ((value: any, ...args: any[]) => any)  {
+    const defaultFunc = (value: any) => get( value, metaData.key);
+    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 tranformer =  this.config.transformers![metaData.fieldType]!;
+      return (value: any) => tranformer(defaultFunc(value));
+    }
+    switch(metaData.fieldType) {
+      case FieldType.Date:
+        const dateFormat = metaData.additional?.dateFormat ?? this.config.defaultSettings?.dateFormat ?? 'shortDate';
+        return (value: any) => this.datePipe.transform(defaultFunc(value), dateFormat);
+      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) =>  this.casePipe.transform(metaData.additional?.enumMap![defaultFunc(value)] as string) ;
+      case FieldType.Boolean:
+        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;
+  }
+
+}

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,21 @@
+.collapse-icon{
+  font-size: 16px;
+  height: 16px;
+  padding-bottom: .2rem;
+  color:#3f51b5;
+  &.header{
+    align-self: flex-end;
+  }
+  &.footer{
+    align-self: flex-start;
+  }
+}
+
+
+.collapse-icon:hover{
+  cursor: pointer;
+}
+
+.hide{
+  display: none;
+}

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

@@ -0,0 +1,138 @@
+
+import { NgModule } from '@angular/core';
+import { GenericTableComponent } from './components/generic-table/generic-table.component';
+import { CustomCellDirective } from './directives/custom-cell-directive';
+import { GenColDisplayerComponent } from './components/gen-col-displayer/gen-col-displayer.component';
+import { GenFilterDisplayerComponent } from './components/table-container-filter/gen-filter-displayer/gen-filter-displayer.component';
+import { FilterComponent } from './components/filter/filter.component';
+import { CommonModule, DatePipe, CurrencyPipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { SpaceCasePipe } from '../utilities/pipes/space-case.pipes';
+import { MaterialModule } from './material.module';
+import { DateFilterComponent } from './components/date-filter/date-filter.component';
+import { TableContainerComponent } from './components/table-container/table-container';
+import { ColumnTotalPipe } from './pipes/column-total.pipe';
+import { MultiSortDirective } from './directives/multi-sort.directive';
+import { ColumnBuilderComponent } from './components/column-builder/column-builder.component';
+import { ModuleWithProviders } from '@angular/core';
+import { TableBuilderConfig, TableBuilderConfigToken } from './classes/TableBuilderConfig';
+import { NumberFilterComponent } from './components/number-filter/number-filter.component';
+import { StoreModule } from '@ngrx/store';
+import { storageStateReducer } from './ngrx/reducer';
+import { HeaderMenuComponent } from './components/header-menu/header-menu.component';
+import { EffectsModule } from '@ngrx/effects';
+import { SaveTableEffects } from './ngrx/effects';
+import { KeyDisplayPipe } from './pipes/key-display';
+import { PhoneNumberPipe } from '../utilities/pipes/phone.pipe';
+import { RouterModule } from '@angular/router';
+import { ArrayColumnComponent } from './components/array-column.component';
+import { LinkColumnComponent } from './components/link-column.component';
+import { InFilterComponent } from './components/in-filter/in-filter.component';
+import { FormatFilterValuePipe } from './pipes/format-filter-value.pipe';
+import { FormatFilterTypePipe } from './pipes/format-filter-type.pipe';
+import { ResizeColumnDirective } from './directives/resize-column.directive';
+import {LetModule} from '@ngrx/component'
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { InitializationComponent } from './components/initialization-component/initialization-component';
+import { InListFilterComponent } from './components/filter/in-list/in-list-filter.component';
+import { SortMenuComponent } from './components/sort-menu/sort-menu.component';
+import { FilterChipsComponent } from './components/table-container-filter/filter-list/filter-list.component';
+import { PaginatorComponent } from './components/generic-table/paginator.component';
+import { UtilitiesModule } from '../utilities';
+import {
+  MatButtonToggleFilterDirective,
+  MatCheckboxTbFilterDirective,
+  MatOptionTbFilterDirective,
+  MatRadioButtonTbFilterDirective,
+  MatSlideToggleTbFilterDirective,
+  TableFilterDirective,
+  TableFilterStringContainsDirective,
+} from './directives';
+import { TableWrapperDirective } from './directives/table-wrapper.directive';
+import { GroupByListComponent } from './components/group-by-list/group-by-list.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MaterialModule,
+    StoreModule.forFeature('globalStorageState', storageStateReducer),
+    EffectsModule.forFeature([SaveTableEffects]),
+    FormsModule,
+    RouterModule,
+    LetModule,
+    DragDropModule,
+    UtilitiesModule,
+  ],
+    exports: [
+        GenericTableComponent,
+        PaginatorComponent,
+        TableContainerComponent,
+        CustomCellDirective,
+        GenColDisplayerComponent,
+        GenFilterDisplayerComponent,
+        FilterComponent,
+        MultiSortDirective,
+        ResizeColumnDirective,
+        MatSlideToggleTbFilterDirective,
+        MatRadioButtonTbFilterDirective,
+        MatOptionTbFilterDirective,
+        MatCheckboxTbFilterDirective,
+        MatButtonToggleFilterDirective,
+        TableFilterDirective,
+        TableFilterStringContainsDirective,
+        TableWrapperDirective,
+        GroupByListComponent,
+    ],
+    declarations: [
+        ColumnTotalPipe,
+        TableContainerComponent,
+        GenericTableComponent,
+        PaginatorComponent,
+        CustomCellDirective,
+        GenColDisplayerComponent,
+        GenFilterDisplayerComponent,
+        DateFilterComponent,
+        FilterComponent,
+        MultiSortDirective,
+        NumberFilterComponent,
+        ColumnBuilderComponent,
+        ArrayColumnComponent,
+        LinkColumnComponent,
+        HeaderMenuComponent,
+        KeyDisplayPipe,
+        FormatFilterValuePipe,
+        FormatFilterTypePipe,
+        ResizeColumnDirective,
+        InFilterComponent,
+        InitializationComponent,
+        InListFilterComponent,
+        SortMenuComponent,
+        FilterChipsComponent,
+        MatSlideToggleTbFilterDirective,
+        MatRadioButtonTbFilterDirective,
+        MatOptionTbFilterDirective,
+        MatCheckboxTbFilterDirective,
+        MatButtonToggleFilterDirective,
+        TableFilterDirective,
+        TableFilterStringContainsDirective,
+        TableWrapperDirective,
+        GroupByListComponent,
+    ],
+    providers : [
+      SpaceCasePipe,
+      DatePipe,
+      CurrencyPipe,
+      PhoneNumberPipe
+    ]
+})
+export class TableBuilderModule {
+  static forRoot(config: TableBuilderConfig): ModuleWithProviders<TableBuilderModule> {
+    return {
+      ngModule: TableBuilderModule,
+      providers: [
+        MultiSortDirective,
+        { 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/directives/auto-focus.directive.ts

@@ -0,0 +1,19 @@
+import { Directive, ElementRef, AfterViewInit, Input } from '@angular/core';
+
+@Directive({
+  selector: '[autoFocus]'
+})
+export class AutoFocusDirective implements AfterViewInit {
+
+  @Input() autoFocus = true;
+  constructor(private elementRef: ElementRef) { }
+
+  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 } from '@angular/core';
+import { Dictionary, Predicate } from '@ngrx/entity';
+
+@Directive({
+  selector: '[conditionalClasses]'
+})
+export class ConditionalClassesDirective {
+
+  constructor(private el: ElementRef, private renderer: 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,22 @@
+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());
+  }
+}