@one-paragon/angular-utilities 0.1.19 → 0.1.21

package/src/rxjs/rxjs-operators.ts

@@ -0,0 +1,130 @@
+import { Predicate } from '@angular/core';
+import { flatten } from 'lodash';
+import {
+  filter,
+  first,
+  map,
+  pairwise,
+  startWith,
+  Observable,
+  combineLatest,
+  Subscription,
+  MonoTypeOperatorFunction,
+  OperatorFunction,
+  concatMap,
+  merge,
+  of,
+  delay
+} from 'rxjs';
+
+
+export const onceWhen = <T>(predicate: Predicate<T>) => (src: Observable<T>) : Observable<T> => {
+  return src.pipe(filter(predicate),first());
+}
+
+export const mapArray = <T, U>(mapFunc: (src: T) => U ) => (source: Observable<T[]>) =>
+  source.pipe( map( src => src.map(mapFunc) ) );
+
+export  const filterArray = <T>(filterFunc: (src: T) => boolean ) => (source: Observable<T[]>) =>
+  source.pipe( map( src => src.filter(filterFunc) ) );
+
+export function onWait<T,V extends T>(val: V) : MonoTypeOperatorFunction<T> {
+  return (source: Observable<T>) => {
+    return new Observable<T>(subscriber => {
+      let emitted = false;
+      setTimeout(() => {
+        if(!emitted) {
+          subscriber.next(val);
+        }
+      }, 0);
+      source.subscribe({
+        next(x) { emitted = true; subscriber.next(x) },
+        error(err) { emitted = true; subscriber.error(err) },
+        complete() { emitted = true; subscriber.complete(); }
+      });
+    });
+  }
+
+}
+
+export const combineArrays = <T>(sources: Observable<T[]>[]): Observable<T[]> => {
+  return combineLatest(
+    sources.map( src => src.pipe(onWait([])))
+  ).pipe(
+    map( res => flatten(res) )
+  );
+};
+
+export function switchOff( switchSource: Observable<boolean>, defaultState: boolean = true) {
+  return <T>(source: Observable<T>) : Observable<T> => {
+    return new Observable(subsciber => {
+      let isOn = defaultState;
+      const subscription = new Subscription();
+      subscription.add( switchSource.subscribe( on => isOn = on ));
+      subscription.add(source.subscribe({
+        next(value) {
+          if(isOn) {
+            subsciber.next(value);
+          }
+        },
+        error: error => subsciber.error(error),
+        complete: () => subsciber.complete()
+      }));
+      return subscription;
+    });
+  }
+}
+
+export function skipOneWhen( skipper: Observable<any> ) {
+  return <T>(source: Observable<T>) : Observable<T> => {
+    return new Observable(subsriber => {
+      const subscription = new Subscription();
+      let skipNext = false;
+      subscription.add(skipper.subscribe( _ => skipNext = true));
+      subscription.add(source.subscribe({
+        next(value) {
+          if(skipNext) {
+            skipNext = false;
+          } else {
+            subsriber.next(value);
+          }
+        },
+        error: error => subsriber.error(error),
+        complete: () => subsriber.complete()
+      }));
+      return subscription;
+    });
+  }
+}
+
+export function previousAndCurrent<T>(startingValue : T) : OperatorFunction<T, [T, T]> {
+  return (source: Observable<T>) => {
+    return source.pipe(startWith(startingValue), pairwise());
+  }
+}
+
+export function notNull<T>(): OperatorFunction<(T | null | undefined), T> {
+  return  (source: Observable<T | null | undefined>) => {
+    return  source.pipe(filter( (o: T | null | undefined): o is T => o != null) )
+  }
+}
+
+export function delayOn<T>(predicate: (t: T) => boolean, delayTime: number) {
+  return (src: Observable<T>) => {
+    return src.pipe(
+      concatMap(r => {
+        if (predicate(r)) {
+          return merge(
+            of({ r }),
+            of(null).pipe(delay(delayTime))
+          ).pipe(
+            notNull(),
+            map(d => d.r)
+          );
+        } else {
+          return of(r);
+        }
+      })
+    );
+  };
+}

package/src/rxjs/subjectifier.ts

@@ -0,0 +1,15 @@
+import { merge, Observable, Observer, Subject } from 'rxjs';
+type PipeLike<T> = Observable<T>['pipe'];
+export class Subjectifier<T> extends Observable<T>{
+  private _subj = new Subject<T>();
+  private merged = merge(this._source, this._subj);
+  constructor(private _source: Observable<T>){
+    super((obs: Observer<T>) => {
+      const s = merge( _source, this._subj ).subscribe(obs);
+      return s;
+    });
+  }
+  next: Subject<T>['next'] = this._subj.next.bind(this._subj);
+  newSubj = (...operations: Parameters<PipeLike<T>>) =>
+    new Subjectifier(this.merged.pipe(...operations));
+}

package/src/specs/clickSubject.spec.ts

@@ -0,0 +1,95 @@
+import { Component } from "@angular/core";
+import { ComponentFixture, fakeAsync, TestBed, waitForAsync } from "@angular/core/testing";
+import { Subject } from "rxjs";
+import { ClickEmitterDirective, ClickSubjectDirective } from "../utilities";
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {HarnessLoader} from '@angular/cdk/testing';
+import { MatButtonModule } from "@angular/material/button";
+import { MatButtonHarness } from "@angular/material/button/testing";
+
+@Component({
+    template: `
+     <a mat-button clickEmitter  #subj='clickEmitter' >click me</a>
+     <div *ngIf='subj | async'>Hello World!</div>
+    `
+}) export class TestComponent {
+  subject = new Subject();
+}
+
+@Component({
+  template: `
+   <a mat-button [clickSubject]='{content: "Hello World!" }' #subj='clickSubject' >click me</a>
+   <div *ngIf='subj | async as o'>{{o.content}}</div>
+  `
+}) export class TestContentComponent {
+subject = new Subject();
+}
+
+
+let fixture: ComponentFixture<TestComponent>;
+let loader: HarnessLoader;
+
+const setupTest = (): void => {
+  TestBed.configureTestingModule({
+      imports: [MatButtonModule],
+      declarations: [
+        TestComponent,
+        ClickEmitterDirective,
+    ],
+    providers: [  ]
+    });
+    fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+};
+
+const setupContentTest = (): void => {
+  TestBed.configureTestingModule({
+      imports: [MatButtonModule],
+      declarations: [
+        TestContentComponent,
+        ClickSubjectDirective,
+    ],
+    providers: [  ]
+    });
+    fixture = TestBed.createComponent(TestContentComponent);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+};
+
+
+describe("ClickSubjectDirective", () => {
+  describe("Default Subject", () => {
+    beforeEach(waitForAsync(setupTest));
+
+    it('before button is clicked the text should remain hidden',async () => {
+      expect(fixture.nativeElement.textContent).not.toContain('Hello World!');
+    });
+
+    it('when button is clicked the text should display', fakeAsync( async () => {
+      const buttonHarness = await loader.getHarness(MatButtonHarness);
+      await buttonHarness.click();
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toContain('Hello World!');
+    }));
+
+  });
+
+  describe("Subject with Content", () => {
+    beforeEach(waitForAsync(setupContentTest));
+
+    it('before button is clicked the text should remain hidden',async () => {
+      expect(fixture.nativeElement.textContent).not.toContain('Hello World!');
+    });
+
+    it('when button is clicked the text should display', fakeAsync( async () => {
+      const buttonHarness = await loader.getHarness(MatButtonHarness);
+      await buttonHarness.click();
+      fixture.detectChanges();
+      expect(fixture.nativeElement.textContent).toContain('Hello World!');
+    }));
+  })
+
+});
+
+

package/src/specs/dialog.spec.ts

@@ -0,0 +1,101 @@
+import { Component } from "@angular/core";
+import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from "@angular/core/testing";
+import { MatDialogModule } from "@angular/material/dialog";
+import { Subject } from "rxjs";
+import { DialogDirective, DialogWrapper } from "../utilities";
+import { DialogService } from "../utilities/directives/dialog-service";
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatDialogHarness} from '@angular/material/dialog/testing';
+import { NoopAnimationsModule } from "@angular/platform-browser/animations";
+import {HarnessLoader} from '@angular/cdk/testing';
+import { MatButtonModule } from "@angular/material/button";
+import { MatButtonHarness } from "@angular/material/button/testing";
+
+@Component({
+    template: `
+    <ng-container *opDialog='subject; let text; let close = close'>
+      If you see this text, I'm open {{text}}
+      <button mat-button (click)='close()' >close</button>
+    </ng-container>
+    `
+}) export class TestComponent {
+  subject = new Subject();
+}
+
+
+describe("DialogDirective", () => {
+
+let fixture: ComponentFixture<TestComponent>;
+let loader: HarnessLoader;
+
+beforeEach(
+  waitForAsync(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatDialogModule, NoopAnimationsModule, MatButtonModule],
+      declarations: [
+        TestComponent,
+        DialogDirective,
+        DialogWrapper,
+    ],
+    providers: [ DialogService ]
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+  }),
+);
+
+  it('before observable emits the dialog should remain closed',async () => {
+    expect(fixture.nativeElement.textContent).not.toContain('If you see this text, I\'m open');
+  });
+
+  it('when observable emits the dialog should be open', fakeAsync( async () => {
+    fixture.componentInstance.subject.next(true);
+    fixture.detectChanges();
+    const dialogHarness = await loader.getHarness(MatDialogHarness);
+    expect(await dialogHarness.getText()).toContain('If you see this text, I\'m open');
+  }));
+
+  it('when observable emits false the dialog should close', fakeAsync( async () => {
+    fixture.componentInstance.subject.next(true);
+    fixture.detectChanges();
+    let dialogHarness = await loader.getAllHarnesses(MatDialogHarness);
+    expect(dialogHarness.length).toBe(1);
+    fixture.componentInstance.subject.next(false);
+    fixture.detectChanges();
+    dialogHarness = await loader.getAllHarnesses(MatDialogHarness);
+    expect(dialogHarness.length).toBe(0);
+  }));
+
+  it('when close is clicked the dialog should close', fakeAsync( async () => {
+    fixture.componentInstance.subject.next(true);
+    fixture.detectChanges();
+    let dialogHarness = await loader.getAllHarnesses(MatDialogHarness);
+    expect(dialogHarness.length).toBe(1);
+    let buttonHarness = await dialogHarness[0].getHarness(MatButtonHarness);
+    await buttonHarness.click();
+    fixture.detectChanges();
+    dialogHarness = await loader.getAllHarnesses(MatDialogHarness);
+    expect(dialogHarness.length).toBe(0);
+  }));
+
+  it('when observable emits the template should have access to the emitted data', fakeAsync( async () => {
+    fixture.componentInstance.subject.next('Text #1');
+    fixture.detectChanges();
+    const dialogHarness = await loader.getHarness(MatDialogHarness);
+    expect(await dialogHarness.getText()).toContain('Text #1');
+  }));
+
+  it('when observable emits a 2nd time the template should have access to the new data', fakeAsync( async () => {
+    fixture.componentInstance.subject.next('Text #1');
+    fixture.detectChanges();
+    const dialogHarness = await loader.getHarness(MatDialogHarness);
+    expect(await dialogHarness.getText()).toContain('Text #1');
+    fixture.componentInstance.subject.next('Text #2');
+    fixture.detectChanges();
+    expect(await dialogHarness.getText()).toContain('Text #2');
+  }));
+
+});
+
+

package/src/specs/toggleGroupDirective.spec.ts

@@ -0,0 +1,231 @@
+import { Component, DebugElement } from "@angular/core";
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+import { MatSlideToggle, MatSlideToggleModule } from "@angular/material/slide-toggle";
+import { MatSlideToggleGroupDirective } from "../utilities/directives/mat-toggle-group-directive";
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatSlideToggleHarness } from '@angular/material/slide-toggle/testing';
+import { By } from "@angular/platform-browser";
+import { count, firstValueFrom, lastValueFrom, skip, Subject, takeUntil } from "rxjs";
+
+abstract class ToggleTestComponent {
+
+}
+
+
+@Component({
+  template: `
+  <ng-container opMatSlideToggleGroup >
+    <mat-slide-toggle name='toggle1' > Slide me! </mat-slide-toggle>
+  </ng-container>
+  `
+}) export class SingleToggleTestComponent extends ToggleTestComponent {
+
+}
+
+@Component({
+  template: `
+  <ng-container opMatSlideToggleGroup [allowMultiple]='true' >
+    <mat-slide-toggle name='toggle1'  > Slide me! </mat-slide-toggle>
+    <mat-slide-toggle name='toggle2' > Slide me! </mat-slide-toggle>
+  </ng-container>
+  `
+}) export class MultiToggleWithMultipleTestComponent extends ToggleTestComponent {
+
+}
+
+@Component({
+  template: `
+  <ng-container opMatSlideToggleGroup  >
+    <mat-slide-toggle name='toggle1'  > Slide me! </mat-slide-toggle>
+    <mat-slide-toggle name='toggle2' > Slide me! </mat-slide-toggle>
+  </ng-container>
+  `
+}) export class MultiToggleTestComponent extends ToggleTestComponent {
+
+}
+
+
+let fixture: ComponentFixture<ToggleTestComponent>;
+let loader: HarnessLoader;
+let toggleHarnesses: MatSlideToggleHarness [];
+let toggleGroupDirective: MatSlideToggleGroupDirective;
+
+let toggles: DebugElement[];
+
+
+const setupTest = (type) => async (): Promise<void> => {
+
+  TestBed.configureTestingModule({
+      imports: [MatSlideToggleModule],
+      declarations: [
+        type,
+        MatSlideToggleGroupDirective,
+    ],
+    providers: [  ]
+    });
+    fixture = TestBed.createComponent(type);
+    fixture.detectChanges();
+
+    loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+    toggleHarnesses = await loader.getAllHarnesses(MatSlideToggleHarness);
+    toggles = fixture.debugElement.queryAll(By.directive(MatSlideToggle));
+    toggleGroupDirective =  toggles[0].injector.get(MatSlideToggleGroupDirective);
+
+
+};
+
+
+async function toggleAndReturnValues(index: number)   {
+  const firstVal = firstValueFrom(toggleGroupDirective.valueEmitter.pipe(skip(1)));
+  await toggleHarnesses[index].toggle();
+  return await firstVal;
+}
+
+describe("opMatSlideToggleGroup", () => {
+  describe("Single Toggle", () => {
+    beforeEach(waitForAsync(setupTest(SingleToggleTestComponent)));
+
+    it('should create', async () => {
+      expect(toggleGroupDirective).toBeDefined();
+    })
+
+    it('starts with an initial value', async  () => {
+      const firstVal = firstValueFrom(toggleGroupDirective.valueEmitter);
+      const val = await firstVal;
+      expect(val).toEqual({'toggle1': false});
+    });
+
+    it('when toggling on should emit the latest value as true', async  () => {
+      const val = await toggleAndReturnValues(0);
+      expect(val).toEqual({'toggle1': true});
+    });
+
+    it('can toggle on and then off', async  () => {
+
+      const val = await toggleAndReturnValues(0);
+      expect(val).toEqual({'toggle1': true});
+      const val2 =  await toggleAndReturnValues(0);
+      expect(val2).toEqual({'toggle1': false});
+    });
+  });
+
+  describe("Multi Toggle", () => {
+    beforeEach(waitForAsync(setupTest(MultiToggleWithMultipleTestComponent)));
+
+    it('starts with an initial value', async  () => {
+      const firstVal = firstValueFrom(toggleGroupDirective.valueEmitter);
+      const val = await firstVal;
+      expect(val).toEqual({'toggle1': false,'toggle2': false});
+    });
+
+    it('can toggle first toggle', async  () => {
+      const val = await toggleAndReturnValues(0);
+      expect(val).toEqual({'toggle1': true,'toggle2': false});
+    });
+
+    it('can toggle second toggle', async  () => {
+      const val = await toggleAndReturnValues(1);
+      expect(val).toEqual({'toggle1': false,'toggle2': true});
+    });
+
+    it('can toggle both toggles', async  () => {
+      const val = await toggleAndReturnValues(0);
+      expect(val).toEqual({'toggle1': true,'toggle2': false});
+
+      const val2 = await toggleAndReturnValues(1);
+      console.log(val2);
+      expect(val2).toEqual({'toggle1': true,'toggle2': true});
+    });
+
+    it('can toggle both toggles multiple times', async  () => {
+      let val = await toggleAndReturnValues(0);
+      expect(val).toEqual({'toggle1': true,'toggle2': false});
+
+      val = await toggleAndReturnValues(1);
+      expect(val).toEqual({'toggle1': true,'toggle2': true});
+
+      val = await toggleAndReturnValues(1);
+      expect(val).toEqual({'toggle1': true,'toggle2': false});
+
+      val = await toggleAndReturnValues(1);
+      expect(val).toEqual({'toggle1': true,'toggle2': true});
+
+      val = await toggleAndReturnValues(0);
+      expect(val).toEqual({'toggle1': false,'toggle2': true});
+      val = await toggleAndReturnValues(1);
+      expect(val).toEqual({'toggle1': false,'toggle2': false});
+    });
+
+  });
+
+  describe("Multi Toggle Only One Allowed", () => {
+    beforeEach(waitForAsync(setupTest(MultiToggleTestComponent)));
+
+    it('starts with an initial value', async  () => {
+      const firstVal = firstValueFrom(toggleGroupDirective.valueEmitter);
+      const val = await firstVal;
+      expect(val).toEqual({'toggle1': false,'toggle2': false});
+    });
+
+    it('can toggle first toggle', async  () => {
+      const val = await toggleAndReturnValues(0);
+      expect(val).toEqual({'toggle1': true,'toggle2': false});
+    });
+
+    it('can toggle second toggle', async  () => {
+      const val = await toggleAndReturnValues(1);
+      expect(val).toEqual({'toggle1': false,'toggle2': true});
+    });
+
+    it('when toggle both toggles only the last one remains set', async  () => {
+      const val = await toggleAndReturnValues(0);
+      expect(val).toEqual({'toggle1': true,'toggle2': false});
+
+      const val2 = await toggleAndReturnValues(1);
+      console.log(val2);
+      expect(val2).toEqual({'toggle1': false,'toggle2': true});
+
+      var toggle1Value = await toggleHarnesses[0].isChecked();
+
+      expect(toggle1Value).toBeFalse();
+    });
+
+    it('can toggle both toggles multiple times and only the last one will be set', async  () => {
+      let val = await toggleAndReturnValues(0);
+      expect(val).toEqual({'toggle1': true,'toggle2': false});
+
+      val = await toggleAndReturnValues(1);
+      expect(val).toEqual({'toggle1': false,'toggle2': true});
+
+      val = await toggleAndReturnValues(1);
+      expect(val).toEqual({'toggle1': false,'toggle2': false});
+
+      val = await toggleAndReturnValues(1);
+      expect(val).toEqual({'toggle1': false,'toggle2': true});
+
+      val = await toggleAndReturnValues(0);
+      expect(val).toEqual({'toggle1': true,'toggle2': false});
+      val = await toggleAndReturnValues(1);
+      expect(val).toEqual({'toggle1': false,'toggle2': true});
+    });
+
+    it('can toggle 2nd toggle doesnt emit an extra time', async  () => {
+      const end = new Subject();
+      const total = lastValueFrom( toggleGroupDirective.valueEmitter.pipe(
+        takeUntil(end),
+        count( (a,i) => true ),
+      ));
+
+      await toggleHarnesses[0].toggle();
+      await toggleHarnesses[1].toggle();
+
+      end.next(null);
+      const result = await total;
+
+      expect(result).toEqual(3);
+    });
+
+  });
+
+});

package/src/table-builder/classes/DefaultSettings.ts

@@ -0,0 +1,10 @@
+import { ArrayStyle } from '../interfaces/report-def';
+
+export interface DefaultSettings {
+  dateFormat?: string;
+}
+
+export const ArrayDefaults = {
+  limit : 3,
+  arrayStyle : ArrayStyle.CommaDelimited
+}

package/src/table-builder/classes/GenericTableDataSource.ts

@@ -0,0 +1,22 @@
+import { Observable } from 'rxjs';
+import { MultiSortDirective } from '../directives/multi-sort.directive';
+import { MatTableObservableDataSource } from './MatTableObservableDataSource'
+import { sortData } from '../functions/sort-data-function';
+import { MatSort } from '@angular/material/sort';
+
+
+export function isMultiSort(sort: MatSort): sort is MultiSortDirective {
+    return Array.isArray((sort as MultiSortDirective ).rules);
+}
+
+export class GenericTableDataSource<T> extends MatTableObservableDataSource<T>
+{
+
+  constructor(dataSrc: Observable<T[]>)
+  {
+    super(dataSrc);
+
+    const baseSort = this.sortData;
+    this.sortData = ((data: T[], sort:  MatSort) => isMultiSort(sort) ?  sortData(data, sort.rules) : baseSort(data, sort));
+  }
+}

package/src/table-builder/classes/MatTableObservableDataSource.ts

@@ -0,0 +1,23 @@
+import { MatTableDataSource } from '@angular/material/table';
+import { Observable, Subscription } from 'rxjs';
+
+export class MatTableObservableDataSource<T> extends  MatTableDataSource<T> {
+  subscription?: Subscription;
+  constructor(private dataSrc: Observable<T[]>) {
+    super([]);
+  }
+
+  connect() {
+    if (!this.subscription) {
+      this.subscription = this.dataSrc.subscribe( data => this.data = data );
+    }
+    return super.connect();
+  }
+  disconnect() {
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+      this.subscription = undefined;
+    }
+    super.disconnect();
+  }
+}

package/src/table-builder/classes/TableBuilderConfig.ts

@@ -0,0 +1,19 @@
+import { InjectionToken } from '@angular/core';
+import { TableState } from './TableState';
+import { DefaultSettings } from './DefaultSettings';
+import { ArrayAdditional, FieldType } from '../interfaces/report-def';
+export interface TableBuilderConfig {
+  defaultTableState: Partial<TableState>;
+  export?: TableBuilderExport;
+  defaultSettings?: DefaultSettings;
+  arrayInfo?: ArrayAdditional;
+  transformers?: Partial<{ [key in keyof typeof FieldType]: (val: any) => any }>
+}
+
+export interface TableBuilderExport {
+  dateFormat?: string;
+  onSave?: (event?: any) => void;
+  prepend? : string;
+}
+
+export const TableBuilderConfigToken = new InjectionToken<TableBuilderConfig>('TableBuilderConfig');