@one-paragon/angular-utilities 2.8.3 → 2.8.4

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

@@ -0,0 +1,90 @@
+import { PipeTransform } from '@angular/core';
+import { FieldType, MappedMetaData, MetaData } from '../interfaces/meta-data';
+import { formatDate, formatCurrency } from '@angular/common';
+import { phoneFormatter } from '../../utilities/pipes/phone.pipe';
+import { TableBuilderConfig } from '../classes/TableBuilderConfig';
+import { spaceCase } from '../../utilities';
+import { getFactory } from '../functions/sort-data-function';
+
+export function isPipe(o : any ): o is PipeTransform {
+  return typeof ((o as PipeTransform).transform ) === 'function';
+}
+
+export function createTransformer(metaData: MetaData<any, any>, config: TableBuilderConfig, noIcons = false, forItem = false): ((value: any, ...args: any[]) => any) {
+  const defaultFunc = getFactory(metaData.key);
+  if(metaData.map && !forItem){
+    return (value: any) => {
+      return metaData.map!(value)};
+  }
+  if((metaData as MappedMetaData).mapItem){
+    return (value: any) => {
+      return (metaData as MappedMetaData).mapItem!(defaultFunc(value))};
+  }
+  if(config.transformers && config.transformers[metaData.fieldType]) {
+    var transformer = config.transformers![metaData.fieldType]!;
+    return (value: any) => transformer(defaultFunc(value));
+  }
+  const defaultDateFormat = config.dateFormats?.dateFormat ?? 'shortDate';
+  const defaultDateTimeFormat = config.dateFormats?.dateTimeFormat ?? 'short';
+  switch (metaData.fieldType) {
+    case FieldType.Date:
+      const dateFormat = metaData.additional?.dateFormat ?? defaultDateFormat;
+      return (value: any) => dateFormatter(defaultFunc(value), dateFormat);
+    case FieldType.DateTime:
+      const dateTimeFormat = metaData.additional?.dateTimeOptions?.format ?? defaultDateTimeFormat;
+      return (value: any) => dateFormatter(defaultFunc(value), dateTimeFormat);
+    case FieldType.Currency:
+      return (value: any) => currencyFormatter(defaultFunc(value));
+    case FieldType.PhoneNumber:
+      return (value: any) => phoneFormatter(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;
+}
+
+export function createItemTransformer<T = any, AdditionalFields extends string[] = []>(metaData: MetaData<T, AdditionalFields>, config: TableBuilderConfig, noIcons = false, mutate = false){
+  const transform = createTransformer(metaData, config, noIcons);
+  return (t: T) => {
+    if(!mutate){
+      t = { ...t }
+    }
+    t[metaData.key as string] = transform(t)
+  }
+}
+
+export function createItemTransformers<T = any, AdditionalFields extends string[] = []>(metaDatas: MetaData<T, AdditionalFields>[], config: TableBuilderConfig, noIcons = false, mutate = false){
+  const transformers = metaDatas.map(meta => createItemTransformer(meta, config, noIcons, true));
+  return (t: T) => {
+    if(!t) return t;
+    if(!mutate){
+      t = { ... t }
+    }
+    transformers.forEach(m => m(t));
+    return t;
+  }
+}
+
+export function dateFormatter(date: string | Date | number, format: string){
+  if(!date) return;
+  return formatDate(date, format, 'en-US');
+}
+
+export function currencyFormatter(amt: number) {
+  return formatCurrency(amt, 'en-US', '$');
+}

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,42 @@
+
+import { NgModule } from '@angular/core';
+import { MultiSortDirective } from './directives/multi-sort.directive';
+import { ModuleWithProviders } from '@angular/core';
+import { TableBuilderConfig, TableBuilderConfigToken } from './classes/TableBuilderConfig';
+import { TableContainerComponent } from './components';
+import { CustomCellDirective, CustomGroupRowDirective, CustomHeaderDirective, TableFilterDirective, TableFilterStringContainsDirective, TableWrapperDirective } from './directives';
+import { UtilitiesModule } from '../utilities';
+
+@NgModule({
+  imports: [
+    TableContainerComponent,
+    CustomCellDirective,
+    CustomHeaderDirective,
+    CustomGroupRowDirective,
+    TableFilterDirective,
+    TableFilterStringContainsDirective,
+    TableWrapperDirective,
+  ],
+  exports: [
+    TableContainerComponent,
+    CustomCellDirective,
+    CustomHeaderDirective,
+    CustomGroupRowDirective,
+    TableFilterStringContainsDirective,
+    TableWrapperDirective,
+    UtilitiesModule,
+  ],
+  providers: [
+    MultiSortDirective,
+  ]
+})
+export class TableBuilderModule {
+  static forRoot(config: TableBuilderConfig): ModuleWithProviders<TableBuilderModule> {
+    return {
+      ngModule: TableBuilderModule,
+      providers: [
+        { provide: TableBuilderConfigToken, useValue: config }
+      ]
+    };
+  }
+}

package/src/table-builder/types/group-types.ts

@@ -0,0 +1,42 @@
+import { SortDirection } from '@angular/material/sort';
+
+export type NoneGroupHeader = any;
+
+export interface BaseGroup {
+  key: string;
+  groupName: string;
+  groupHeaderDisplay: string;
+  uniqueName: string;
+  isGroupHeader: true;
+  padding: number;
+  length: number;
+  hasTheData: boolean;
+  level: number;
+  parent?: BaseGroup;
+}
+
+export interface DataGroup<T extends NoneGroupHeader = any> extends BaseGroup {
+  children: T[];
+  hasTheData: true;
+}
+
+export interface GroupGroup<T extends NoneGroupHeader = any> extends BaseGroup {
+  groups: (DataGroup<T> | GroupGroup<T>)[];
+  hasTheData: false;
+}
+
+export type Group<T extends NoneGroupHeader = any> = GroupGroup<T> | DataGroup<T>;
+
+export interface GroupedData {
+  key: string;
+  expandedHeaders: string[] | 'all';
+  sort: SortDirection;
+}
+
+export function isGroupHeader(data: any): data is Group {
+  return !!data?.isGroupHeader;
+}
+
+export function isDataGroup<T extends NoneGroupHeader = any>(group: Group<T>): group is DataGroup<T> {
+  return group.hasTheData === true;
+}

package/src/table-builder/types/index.ts

@@ -0,0 +1 @@
+export * from './group-types';

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,36 @@
+import { Directive, ElementRef, Renderer2, effect, inject, input, untracked } from '@angular/core';
+import { Dictionary, Predicate } from '@ngrx/entity';
+
+@Directive({
+  selector: '[conditionalClasses]',
+})
+export class ConditionalClassesDirective {
+  private el = inject(ElementRef);
+  private renderer = inject(Renderer2);
+
+  $element = input.required<any>({ alias: 'element' });
+  $classes = input<Dictionary<Predicate<any> | true>>(undefined, { alias: 'conditionalClasses' });
+
+  classesApplied: string[] = [];
+
+  #onClasses = effect(() => {
+    const classes = this.$classes();
+    untracked(() => {
+      const element = this.$element();
+      let toApply: string [] = [];
+      if(classes) {
+        toApply = Object.keys(classes)
+          .filter( key => (classes![key] === true) || classes![key]!(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());
+  }
+}