@one-paragon/angular-utilities 2.1.5 → 2.1.7

package/src/table-builder/components/table-container-filter/filter-list/filter-list.component.ts

@@ -1,44 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
-import { TableStore } from '../../../classes/table-store';
-import { FilterInfo, isFilterInfo } from '../../../classes/filter-info';
-import { WrapperFilterStore } from '../table-wrapper-filter-store';
-import { MatButtonModule } from '@angular/material/button';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatIconModule } from '@angular/material/icon';
-import { FilterComponent } from '../../filter/filter.component';
-import { MatChipsModule } from '@angular/material/chips';
-import { KeyDisplayPipe } from '../../../pipes/key-display';
-import { FormatFilterTypePipe } from '../../../pipes/format-filter-type.pipe';
-import { FormatFilterValuePipe } from '../../../pipes/format-filter-value.pipe';
-
-@Component({
-  selector: 'lib-filter-list',
-  templateUrl: './filter-list.component.html',
-  styleUrls: ['../gen-filter-displayer/gen-filter-displayer.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [
-    MatButtonModule, MatTooltipModule, MatIconModule, FilterComponent,
-    MatChipsModule, KeyDisplayPipe, FormatFilterTypePipe, FormatFilterValuePipe
-  ]
-})
-export class FilterChipsComponent {
-
-  tableState = inject(TableStore);
-  filterStore = inject(WrapperFilterStore);
-
-  $filters = computed(() =>
-    Object.values(this.tableState.$filters()).filter(f => isFilterInfo(f) && !f._isExternallyManaged) as FilterInfo[])
-  deleteByIndex(index: number) {
-    this.filterStore.deleteByIndex(index);
-  }
-
-  addFilter(filter:FilterInfo<any>){
-    this.filterStore.addFilter(filter);
-  }
-
-  clearAll() {
-      this.filterStore.clearAll();
-  }
-
-  $currentFilters = this.filterStore.$currentFilters;
-}

package/src/table-builder/components/table-container-filter/gen-filter-displayer/gen-filter-displayer.component.css

@@ -1,42 +0,0 @@
-.filter {
-    margin: 15px;
-    display: inline-block;
-}
-.filter-button {
-    color: cornflowerblue;
-    font-size: 22px;
-    font-weight: 700;
-}
-
-.cancel-button  {
-  margin-right: 30px;
-  font-weight: 700;
-}
-.filter-wrapper{
-  margin-top: 1em;
-  margin-bottom: 1em;
-  float: right;
-}
-.menu {
-    margin-bottom: 10px;
-    width: 109.1%;
-}
-
-.filter-labels {
-    color: cornflowerblue;
-    font-size: 17px;
-    font-weight: 600;
-}
-.float{
-  position: absolute;
-  width: fit-content;
-  z-index: 101;
-  top: 10px;
-  right: 180px;
-  max-width: 90vw;
-}
-.d-w{
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-}

package/src/table-builder/components/table-container-filter/gen-filter-displayer/gen-filter-displayer.component.html

@@ -1,11 +0,0 @@
-<button stop-propagation class="filter-button" mat-icon-button [matMenuTriggerFor]="menu" [matTooltip]="'Add Filter'">
-  <mat-icon class="filter-icon" color="primary">filter_list</mat-icon>
-</button>
-<mat-menu #menu="matMenu">
-  @for (md of $filterCols(); track md.key)
-  {
-    <button (click)="addFilter(md)" mat-menu-item>
-      <span class="filter-labels">{{md.displayName || (md.key | spaceCase)}}</span>
-    </button>
-  }
-</mat-menu>

package/src/table-builder/components/table-container-filter/gen-filter-displayer/gen-filter-displayer.component.spec.ts

@@ -1,85 +0,0 @@
-import { firstValueFrom, of } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { TestBed, ComponentFixture, ComponentFixtureAutoDetect, tick, fakeAsync, flush } from '@angular/core/testing';
-import { GenFilterDisplayerComponent } from './gen-filter-displayer.component';
-import { SpaceCasePipe } from '../../../../utilities/pipes/space-case.pipes';
-import { FilterComponent } from '../../filter/filter.component';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { FieldType } from '../../../interfaces/report-def';
-import { By } from '@angular/platform-browser';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { DateFilterComponent } from '../../date-filter/date-filter.component';
-import { TableBuilderModule } from '../../../table-builder.module';
-import { StoreModule } from '@ngrx/store';
-import { EffectsModule } from '@ngrx/effects';
-import { TableStore } from '../../../classes/table-store';
-import { WrapperFilterStore } from '../table-wrapper-filter-store';
-
-
-function getMetaData() {
-  return of([
-    {
-      key: 'name',
-      displayName: 'first name',
-      fieldType: FieldType.String,
-      additional: {},
-      order: 1
-    },
-    {
-      key: 'last',
-      displayName: 'last name',
-      fieldType: FieldType.String,
-      additional: {},
-      order: 2
-    }
-  ]);
-}
-
-describe('generic filter displayer', () => {
-  let fixture: ComponentFixture<GenFilterDisplayerComponent>;
-  let component: GenFilterDisplayerComponent;
-
-  const clickFilter = (idx: number) => {
-    const btn = fixture.debugElement.query(By.css('.filter-button')).nativeElement;
-
-    btn.click();
-    const menu = fixture.debugElement.queryAll(By.css('.mat-menu-item'));
-    menu[idx].nativeElement.click();
-  };
-  beforeEach(() => {
-
-    TestBed.configureTestingModule({
-      declarations: [
-        GenFilterDisplayerComponent,
-        SpaceCasePipe,
-        FilterComponent,
-        DateFilterComponent,
-      ],
-      providers: [TableStore, WrapperFilterStore,
-      { provide: ComponentFixtureAutoDetect, useValue: true }
-      ],
-      imports: [
-        NoopAnimationsModule,
-        CommonModule,
-        FormsModule,
-        TableBuilderModule.forRoot({ defaultTableSettings: { } }),
-        StoreModule.forRoot({}),
-        EffectsModule.forRoot([])]
-    })
-      .compileComponents();
-    fixture = TestBed.createComponent(GenFilterDisplayerComponent);
-    component = fixture.componentInstance;
-  });
-
-  it('should get the generic filter displayer component', () => {
-    expect(component).toBeDefined();
-  });
-
-  it('should be able to create a filter',  async () => {
-    clickFilter(0);
-    const filter = await firstValueFrom(fixture.componentInstance.filterStore.state$.pipe(map(x => x.filterInfo)));
-    expect(filter.length).toBe(1);
-  });
-
-});

package/src/table-builder/components/table-container-filter/gen-filter-displayer/gen-filter-displayer.component.ts

@@ -1,36 +0,0 @@
-import { Component, ChangeDetectionStrategy, inject, computed } from '@angular/core';
-import { MetaData, FieldType } from '../../../interfaces/report-def';
-import { TableStore } from '../../../classes/table-store';
-import { WrapperFilterStore } from '../table-wrapper-filter-store';
-import { MatButtonModule } from '@angular/material/button';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { SpaceCasePipe, StopPropagationDirective } from '../../../../utilities';
-import { MatIconModule } from '@angular/material/icon';
-
-@Component({
-  selector: 'tb-filter-displayer',
-  templateUrl: './gen-filter-displayer.component.html',
-  styleUrls: ['./gen-filter-displayer.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    MatButtonModule, MatMenuModule, MatTooltipModule, StopPropagationDirective, MatIconModule,
-    SpaceCasePipe
-  ]
-})
-export class GenFilterDisplayerComponent {
-  protected tableState = inject(TableStore);
-  protected filterStore = inject(WrapperFilterStore);
-  $filterCols = computed(() => {
-    const mds = this.tableState.$metaDataArray();
-    return mds.filter(m => m.fieldType !== FieldType.Hidden && (m.fieldType !== FieldType.NotMapped || m.filterLogic?.filterBy) && !m.noFilter);
-  });
-
-  addFilter(metaData: MetaData) {
-    this.filterStore.addFilter({
-      key: metaData.key,
-      fieldType: metaData.filterLogic?.filterType || metaData.fieldType,
-      filterBy: metaData.filterLogic?.filterBy === 'use map' ? metaData.map : metaData.filterLogic?.filterBy
-    });
-  }
-}

package/src/table-builder/components/table-container-filter/table-wrapper-filter-store.ts

@@ -1,23 +0,0 @@
-import { Injectable } from "@angular/core";
-import { ComponentStore } from "@ngrx/component-store";
-import { map } from "rxjs/operators";
-import { PartialFilter } from "../../classes/filter-info";
-@Injectable()
-export class WrapperFilterStore  extends ComponentStore<{filterInfo:PartialFilter[]}>{
-  constructor(){
-    super({filterInfo:[]});
-  }
-
-  clearAll = this.updater(()=>({filterInfo:[]}));
-  deleteByIndex = this.updater((state,index:number)=>{
-    const arr = [...state.filterInfo];
-    arr.splice(index, 1);
-    return {filterInfo:arr};
-  });
-
-  $currentFilters = this.selectSignal(state => state.filterInfo);
-
-  addFilter = this.updater((state, filter:PartialFilter)=>{
-    return ({...state,filterInfo:[...state.filterInfo,filter]});
-  })
-}

package/src/table-builder/components/table-header-menu/table-header-menu.component.css

@@ -1,21 +0,0 @@
-.input {
-  appearance: none;
-  outline: none;
-  background: none;
-  box-shadow: none;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  color: inherit;
-  border: 1px solid black;
-  border-radius: 4px;
-  width: 50px;
-  padding-left: 4px;
-  &::placeholder{
-    font-size: 12px;
-  }
-}
-.height-input-wrapper{
-  display: flex;
-  gap: 4px;
-}

package/src/table-builder/components/table-header-menu/table-header-menu.component.html

@@ -1,48 +0,0 @@
-<mat-menu #mainMenu='matMenu' [xPosition]="'before'">
-  <span [matTooltip]="!r.$set().length ? 'Nothing To Reset' : ''">
-    <button mat-menu-item [matMenuTriggerFor]="r.menu()" #d="matMenuItem" [disabled]="!r.$set().length">
-      <mat-icon color="primary">autorenew</mat-icon>
-      <span>Reset</span>
-    </button>
-  </span>
-  @if (!tableContainer.state.$tableSettings().hideExport) {
-    <button mat-menu-item (click)="exportToCsv()">
-      <mat-icon color="primary">file_download</mat-icon>
-      <span>Export Table</span>
-    </button>
-  }
-  @if (tableContainer.$tableId(); as tableId) {
-    <button stop-propagation mat-menu-item [matMenuTriggerFor]="pm.menu()">
-      <mat-icon color="primary">people</mat-icon>
-      <span>Profiles</span>
-    </button>
-    <tb-profiles-menu class="profiles-menu" #pm [tableId]="tableId" [isMatMenuChild]="true" />
-  }
-
-
-  <div mat-menu-item>
-    <div class="height-input-wrapper">
-      <span>Row Height</span>
-      <input #i class="input" stop-propagation type="number" 
-        [value]="$rowHeightNum()"
-        (change)="updateHeight('row', i)"
-        placeholder="Set Size"
-        [min]="10" [max]="100" />
-    </div>
-  </div>
-  @if(!state.$tableSettings().hideHeader)
-  {
-    <div mat-menu-item>
-      <div class="height-input-wrapper">
-        <span>Header Height</span>
-        <input #i2 class="input" stop-propagation type="number"
-        [value]="$headerHeightNum()"
-        (change)="updateHeight('header', i2)"
-        placeholder="Set Size"
-        [min]="10" [max]="100"/>
-      </div>
-    </div>
-  }
-</mat-menu>
-<lib-reset-menu #r/>
-

package/src/table-builder/components/table-header-menu/table-header-menu.component.ts

@@ -1,35 +0,0 @@
-import { Component, computed, inject, viewChild } from '@angular/core';
-import { MatIcon } from '@angular/material/icon';
-import { MatMenu, MatMenuModule } from '@angular/material/menu';
-import { TableContainerComponent } from '../table-container/table-container';
-import { ExportToCsvService } from '../../services/export-to-csv.service';
-import { ProfilesMenuComponent } from "../profiles-menu/profiles-menu.component";
-import { ResetMenuComponent } from "../reset-menu/reset-menu.component";
-import { MatTooltip } from '@angular/material/tooltip';
-import { StopPropagationDirective } from '../../../utilities';
-
-@Component({
-  selector: 'lib-table-header-menu',
-  imports: [MatMenuModule, MatIcon, ProfilesMenuComponent, ResetMenuComponent, MatTooltip, StopPropagationDirective],
-  templateUrl: './table-header-menu.component.html',
-  styleUrl: './table-header-menu.component.css'
-})
-export class TableHeaderMenuComponent {
-  menu = viewChild.required(MatMenu);
-  private exportToCsvService = inject(ExportToCsvService);
-  protected tableContainer = inject(TableContainerComponent);
-  state = this.tableContainer.state;
-  $rowHeightNum = computed(() => +(this.tableContainer.$genericTable()?.$rowHeight()?.replace('px', '') || 0) || undefined);
-  $headerHeightNum = computed(() => +(this.tableContainer.$genericTable()?.$headerHeight()?.replace('px', '') || 0) || undefined);
-  protected exportToCsv(): void {
-    this.exportToCsvService.exportToCsv(this.tableContainer.$data());
-  }
-
-  updateHeight(v: 'row' | 'header', element: HTMLInputElement){
-    if(+element.value < 10) element.value = '10';
-    if(+element.value > 100) element.value = '100';
-    if(v === 'row') this.state.setUserDefinedRowHeight(+element.value);
-    if(v === 'header') this.state.setUserDefinedHeaderHeight(+element.value);
-  }
-
-}

package/src/table-builder/directives/custom-cell-directive.ts

@@ -1,59 +0,0 @@
-import { Directive, TemplateRef, inject, input, computed, signal } from '@angular/core';
-import { CdkColumnDef } from '@angular/cdk/table';
-import { CustomCellMeta, FieldType, SortDef } from '../interfaces/report-def';
-import { TableBuilder } from '../classes/table-builder';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-
-interface CustomCellContext<T> {
-  $implicit: T,
-  element: T,
-}
-// here is how to use it
-// <generic-table [report]="report">
-//     <p *customCell="'column1'; let element = element" [class.makeMeRed]="element?.port">If Port, i will be red</p>
-//     <p *customCell="'column2'">I am custom cell two </p>
-// </generic-table>
-@Directive({
-    selector: '[customCell]',
-    })
-export class CustomCellDirective<T = any> {
-    private templateRef = inject<TemplateRef<any>>(TemplateRef, { optional: true });
-    public columnDef = inject(CdkColumnDef, { optional: true });
-    $customCell = input.required<string>({alias: 'customCell'});
-    $displayName = input<string | undefined>(undefined, {alias: 'customCellDisplayName'});
-    $preSort = input<SortDef | undefined>(undefined, {alias: 'preSort'});
-    $templateRef = input<TemplateRef<any> | undefined>(this.templateRef || undefined, {alias: 'templateRef'});
-    $customCellOrder = input<number | undefined>(undefined, {alias: 'customCellOrder'});
-    $customCellWidth = input<string | undefined>(undefined, {alias: 'customCellWidth'});
-    /**
-     * for type safety, this is a reference to the table builder instance.
-     */
-    $customCellTableRef = input<TableBuilder<T> | undefined>(undefined, {alias: 'customCellTableRef'});
-    /**
-     * true if column not mapped to a property in the data source. Default is false.
-     */
-    $customCellNotMapped = input(false, {alias: 'customCellNotMapped', transform: coerceBooleanProperty});
-    $metaData = computed((): CustomCellMeta | undefined => {
-      const c= this.$customCell();
-      if(!c) return;
-      return ({
-        key: this.$customCell(),
-        displayName: this.$displayName(),
-        preSort: this.$preSort(),
-        fieldType: this.$customCellNotMapped() ? FieldType.NotMapped : FieldType.Unknown,
-        order: this.$customCellOrder(),
-        width: this.$customCellWidth(),
-        customCell: true,
-        noExport: true,
-      }) 
-    });
-    $inited = signal(false);
-
-    ngOnInit(){
-      this.$inited.set(true);
-    }
-
-    static ngTemplateContextGuard<T>(dir: CustomCellDirective<T>, ctx: any): ctx is CustomCellContext<T> {
-      return true;
-    }
-}

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,50 +0,0 @@
-import { Directive, OnInit, OnDestroy, inject } from '@angular/core';
-import { MatSort, Sort, SortDirection } from '@angular/material/sort';
-import { distinctUntilChanged, distinctUntilKeyChanged, map, tap } 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 {
-  private state = inject(TableStore);
-
-
-  constructor() {
-    super();
-    this.state.setSort(this.sortChange.pipe(
-      distinctUntilChanged((f,s) => f.active === s.active && f.direction === s.direction),
-       map(sc => ({ key: sc.active, direction: sc.direction }))));
-    this.state.on(
-      this.state.sort$,
-      (rules) => {
-        const topRule = { active: rules[0]?.active || '', direction: rules[0]?.direction || '' as SortDirection};
-        const topActiveChanged = topRule.active !== this.active || '';
-        const topDirectionChanged = topRule.direction !== this.direction || '';
-        if(topActiveChanged || topDirectionChanged){
-          this.active = topRule.active;
-          this.direction = topRule.direction;
-          this.sortChange.emit(topRule);
-        }
-      }
-    );
-  }
-
-}
-
-export function sortsAreSame(a: Sort[], b: Sort[]) {
-  if (a.length !== b.length) {
-    return false;
-  }
-  for (let i = 0; i < a.length; i++) {
-    if (a[i].active !== b[i].active || a[i].direction !== b[i].direction) {
-      return false;
-    } 
-  }
-  return true;
-}