@one-paragon/angular-utilities 1.0.4 → 1.1.2

package/src/table-builder/components/table-container/table-container.helpers/groupBy.helpers.ts

@@ -1,69 +0,0 @@
-import { groupBy } from "lodash";
-import { Timestamp } from "rxjs";
-import { GroupedData } from "../../../classes/TableState";
-import { initIndexSymbol } from "./sort-state.helpers";
-
-function getGroupedData(data: any[], groupByKeys: string[]): any[] {
-  return tbGroupBy(data, groupByKeys);
-}
-
-const   tbGroupBy = (data: any[], groupByKeys: string[], parentGroupName?: any): any[] => {
-  const currentKey = groupByKeys[0];
-  const res = groupBy(data, currentKey);
-  const remainingGroupByKeys = groupByKeys.slice(1);
-  const finalGroups = !remainingGroupByKeys.length;
-  if (remainingGroupByKeys.length) {
-    Object.keys(res).forEach(key => res[key] = tbGroupBy(res[key], remainingGroupByKeys, key))
-  }
-  return Object.keys(res).map((groupName, i) => {
-    const uniqName = parentGroupName ? `${parentGroupName}-${groupName}` : `${groupName}`;
-    const groupHeaders = res[groupName]?.filter(row => row.isGroupHeader) ?? [];
-    return ({
-        isGroupHeader: true,
-        groupHeaderDisplay: groupName,
-        hasTheData: finalGroups,
-        children: finalGroups ? res[groupName] : res[groupName].map(d => {d.padding += 20; return d}),
-        groupName: `tb_group_${uniqName}`,
-        padding: 1,
-        key: currentKey,
-        length : groupHeaders.reduce((acc, curr) => curr.length + acc,0) + ((res[groupName] ?? []).length - groupHeaders.length),
-        [initIndexSymbol]: uniqName,
-      }
-    );
-  })
-}
-
-export function updateGroupByState({ groupedData }:GroupByState, [data, groups, expandedGroups] : [Timestamp<any[]>, Timestamp<string[]>, Timestamp<GroupedData[]>], index: number){
-  if(
-    index === 0
-    || dataUpdated(data, groups, expandedGroups)
-    || groupsUpdated(groups, expandedGroups)
-  ){
-    groupedData = groups.value.length ? getGroupedData(data.value, groups.value) : data.value;
-  }
-  const newDisplayData = expandedGroups.value.length === 0
-    ? groupedData
-    : groupedData.map(group => mapGroupHeader(group, expandedGroups.value)).flat();
-  return ({displayData: newDisplayData, groupedData});
-}
-
-function mapGroupHeader(obj: any, data: GroupedData[]){
-  const showChildren = data.find(a => a.expandedHeaders.includes(obj.groupName));
-  const children = !showChildren ? [] : 
-                        obj.hasTheData ?  obj.children
-                          : obj.children.map(a => mapGroupHeader(a, data))
-
-  return [obj, ...children].flat()
-}
-
-function dataUpdated(data: Timestamp<any[]>, groups: Timestamp<string[]>, expandedGroups: Timestamp<GroupedData[]>){
-  return data.timestamp > groups.timestamp && data.timestamp > expandedGroups.timestamp;
-}
-
-function groupsUpdated(groups: Timestamp<string[]>, expandedGroups: Timestamp<GroupedData[]>){
-  return groups.timestamp > expandedGroups.timestamp;
-}
-
-interface GroupByState { displayData: any[], groupedData: any[]};
-
-export const initialGroupByState = { displayData: [], groupedData: []}

package/src/table-builder/components/table-container/table-container.helpers/sort-state.helpers.ts

@@ -1,45 +0,0 @@
-import { Sort } from "@angular/material/sort";
-import { SortDirection } from "../../../interfaces/report-def";
-import { difference } from "lodash";
-
-// If we are only sorting due to a change in the Sorts[] we can 'optimize'. If the sort array was first by column a asc then by column b desc then by column c asc,
-// and now it is first by column d asc then by column a desc then by column b desc then by column c asc, we dont need to rerun the tail, i.e. for culumn b and c.
-// So we need to calculate the matching tail of the sort array. Then sortsToRun will be the non-matching head.
-// But if any sorts were removed the only way to 'unsort' is to start by the original data and run all the existing sorts again, so 'sorts to run' will be all
-// the sorts.
-// We always pass allSorts to the container because if the table data changes all the sorts will need to be run.
-export function updateSortState(previousSorts: SortState, currentSorts: Sort[]): SortState{
-  currentSorts = addInitSort(currentSorts);
-  if(sortsRemoved(previousSorts.allSorts, currentSorts)){
-    return ({sortsToRun: currentSorts, allSorts: currentSorts});
-  }
-  const sameTailLength = getSameTailLength(previousSorts.allSorts, currentSorts);
-  const sortsToRun = currentSorts.slice(0, currentSorts.length - sameTailLength);
-  return ({sortsToRun, allSorts: currentSorts});
-}
-
-export interface SortState { sortsToRun: Sort[], allSorts: Sort[]}
-
-function addInitSort(sorts: Sort[]){
-  return [...sorts, {active: initIndexSymbol as unknown as string, direction: 'asc' as SortDirection}];
-}
-
-function sortsRemoved(previousSorts: Sort[], currentSorts: Sort[]): boolean{
-  const previousSortedColumns = previousSorts.map(s => s.active);
-  const currentSortedColumns = currentSorts.map(s => s.active);
-  const sortsRemoved = !!difference(previousSortedColumns, currentSortedColumns).length;
-  return sortsRemoved;
-}
-
-
-function getSameTailLength(previousSorts: Sort[], currentSorts: Sort[]){
-  previousSorts = [...previousSorts].reverse();
-  currentSorts = [...currentSorts].reverse();
-  let indexOfChange = currentSorts.findIndex((s, i) => s.active !== previousSorts[i]?.active || s.direction !== previousSorts[i]?.direction);
-  if(indexOfChange === -1) return indexOfChange = currentSorts.length;
-  return indexOfChange;
-}
-
-export const initIndexSymbol = Symbol('tb_init_index');
-
-export const initialSortState: SortState = { sortsToRun: [], allSorts: []};

package/src/table-builder/components/table-container/table-container.html

@@ -1,117 +0,0 @@
-<ng-content select="[before]" />
-
-<ng-container multiSort *ngrxLet="state.tableSettings$ as tableSettings">
-  <div class="header-wrapper">
-    <div class="title">
-      @if ((!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed) {
-        <ng-content select=".tb-header-title"/>
-      }
-      @if((state.groupByKeys$ | async)?.length){
-        <group-by-list />
-      }
-    </div>
-    <div class="flx-row-end">
-      <lib-filter-list />
-      @if (!tableSettings.hideHeader) {
-        @if (!(collapseHeader$ | async)) {
-          <ng-container *ngTemplateOutlet="headerMenu"/>
-          <button mat-icon-button color='primary' [matMenuTriggerFor]="mainMenu">
-            <mat-icon>more_vert</mat-icon>
-          </button>
-          <mat-menu #mainMenu='matMenu'>
-            <ng-container *ngTemplateOutlet="headerMenuExtra"/>
-          </mat-menu>
-        }
-        @else {
-          <mat-icon color="primary" [matMenuTriggerFor]="mainMenu" class="flat-menu-button pointer">more_horiz</mat-icon>
-          <mat-menu #mainMenu='matMenu'>
-            <div class="flex-column">
-              <ng-container *ngTemplateOutlet="headerMenu"/>
-            </div>
-            <ng-container *ngTemplateOutlet="headerMenuExtra"/>
-          </mat-menu>
-        }
-        <mat-icon [matTooltip]="(collapseHeader$ | async) ? 'expand' : 'collapse'" class="collapse-icon header"
-          (click)="state.toggleCollapseHeader()">
-          {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}
-        </mat-icon>
-      }
-
-    </div>
-  </div>
-  <div>
-    @if(!!tableSettings.useVirtualScroll) {
-    <tb-virtual-scroll-container>
-      <tb-generic-table [rows]='customRows' [data$]="data" [displayData$]="displayData"
-        (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]="trackBy"></tb-generic-table>
-    </tb-virtual-scroll-container>
-    }
-    @else {
-    <tb-generic-table [rows]='customRows' [data$]="data" [displayData$]="displayData"
-      (selection$)='selection$.emit($event)' [columnInfos]='myColumns$' [trackBy]="trackBy"></tb-generic-table>
-    }
-    @if(tableSettings.usePaginator) {
-    <div class="paginator">
-      <tb-paginator #tbPaginator [data$]="data" [tableElRef]="tableElRef" />
-
-      <mat-icon [matTooltip]="(collapseFooter$ | async) ? 'expand' : 'collapse'" class="collapse-icon footer"
-        (click)="state.toggleCollapseFooter()">
-        {{(collapseFooter$ | async) ? 'expand_more' : 'expand_less'}}
-      </mat-icon>
-    </div>
-    }
-  </div>
-
-
-
-  <ng-template #headerMenu>
-    @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}
-    @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}
-    @if (!tableSettings.hideSort) {<tb-sort-menu/>}
-  </ng-template>
-
-  <ng-template #headerMenuExtra>
-    <button mat-menu-item (click)="resetState()">
-      <mat-icon color="primary">autorenew</mat-icon>
-      <span>Reset table</span>
-    </button>
-    @if (!tableSettings.hideExport) {
-      <button mat-menu-item (click)="exportToCsv()">
-        <mat-icon color="primary">file_download</mat-icon>
-        <span>Export Table</span>
-      </button>
-    }
-    @if (currentStateKey$ | async; as currentKey) {
-      @if (tableId) {
-        <button mat-menu-item (click)="saveState()">
-          <mat-icon color="primary">save</mat-icon>
-          <span>Save to {{currentKey}}</span>
-        </button>
-        <button mat-menu-item [matMenuTriggerFor]="savedNames">
-          <span>Choose Profile</span>
-        </button>
-      }
-    }
-
-    <mat-menu #savedNames='matMenu' panelClass='wide-menu'>
-      <button mat-menu-item clickEmitter  #add='clickEmitter'>
-        <mat-icon>add</mat-icon>
-        <span>New</span>
-      </button>
-      @for (key of stateKeys$ | async; track key) {
-        <button mat-menu-item (click)='setProfileState(key)'>
-          <span>{{key}}</span>
-          <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>
-        </button>
-      }
-    </mat-menu>
-    <ng-container *opDialog='add'>
-      <mat-form-field>
-        <input class="add-key" matInput #addedKey />
-      </mat-form-field>
-      <button mat-button (click)='setProfileState(addedKey.value); add.next(false);' [disabled]="!addedKey.value">
-        Add
-      </button>
-    </ng-container>
-  </ng-template>
-</ng-container>

package/src/table-builder/components/table-container/table-container.spec.ts

@@ -1,154 +0,0 @@
-import { BehaviorSubject, of } from 'rxjs';
-import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { SpaceCasePipe, PhoneNumberPipe } from '../../../utilities';
-import { FilterComponent } from '../filter/filter.component';
-import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { FieldType } from '../../interfaces/report-def';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { DateFilterComponent } from '../date-filter/date-filter.component';
-import { TableContainerComponent } from './table-container';
-import { GenFilterDisplayerComponent } from '../table-container-filter/gen-filter-displayer/gen-filter-displayer.component';
-import { GenericTableComponent } from '../generic-table/generic-table.component';
-import { GenColDisplayerComponent } from '../gen-col-displayer/gen-col-displayer.component';
-import { ColumnTotalPipe } from '../../pipes/column-total.pipe';
-import { TableBuilder } from '../../classes/table-builder';
-import { MultiSortDirective } from '../../directives/multi-sort.directive';
-import { TableBuilderConfigToken } from '../../classes/TableBuilderConfig';
-import { provideMockStore } from '@ngrx/store/testing';
-import { PaginatorComponent } from '../generic-table/paginator.component';
-import {  LetModule, PushModule } from '@ngrx/component';
-import { HarnessLoader, parallel } from '@angular/cdk/testing';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import {MatTableHarness} from '@angular/material/table/testing';
-import { TransformCreator } from '../../services/transform-creator';
-
-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: [],
-  }
-},
-globalStorageState : {
-  localProfiles: {}
-}};
-describe('table container', () => {
-  let fixture: ComponentFixture<TableContainerComponent>;
-  let component: TableContainerComponent;
-  let loader: HarnessLoader;
-
-  beforeEach(() => {
-
-    TestBed.configureTestingModule({
-      declarations: [
-        TableContainerComponent,
-        FilterComponent,
-        GenFilterDisplayerComponent,
-        GenericTableComponent,
-        PaginatorComponent,
-        GenColDisplayerComponent,
-        SpaceCasePipe,
-        CurrencyPipe,
-        ColumnTotalPipe,
-        DateFilterComponent,
-        MultiSortDirective,
-      ],
-      providers: [
-       { provide : TableBuilderConfigToken , useValue: {defaultTableState: { }}},
-       provideMockStore({ initialState }),
-       DatePipe,
-       TransformCreator,
-       CurrencyPipe,
-       PhoneNumberPipe,
-      ],
-      imports: [
-        NoopAnimationsModule,
-        CommonModule,
-        FormsModule,
-        LetModule,
-      ]
-    })
-    .compileComponents();
-    fixture = TestBed.createComponent(TableContainerComponent);
-    component = fixture.componentInstance;
-    loader = TestbedHarnessEnvironment.loader(fixture);
-  });
-
-  it('can create component', () => {
-    component.tableId = 'test-id';
-    component.tableBuilder = new TableBuilder(of(data));
-    fixture.detectChanges();
-    expect(component).toBeDefined();
-  });
-
-  it('can add metadata dynamicaly after the table has already been rendered', async () => {
-    const md = new BehaviorSubject(metaData);
-    component.tableId = 'test-id';
-    component.tableBuilder = new TableBuilder(of(data), md);
-
-    fixture.detectChanges();
-    expect(component).toBeDefined();
-
-    const tables = await loader.getAllHarnesses(MatTableHarness);
-    expect(tables.length).toBe(1);
-    const table = tables[0];
-
-    let rows = await table.getRows();
-
-    let cells = (await parallel(() => rows.map(row => row.getCells()))).map(row => row.length);
-
-    expect(cells).toEqual([3, 3]);
-
-    md.next([...metaData, {
-        key: 'dynamic',
-        fieldType: FieldType.String,
-        order : 4,
-        additional: {},
-    }]);
-
-    fixture.detectChanges();
-
-    rows = await table.getRows();
-
-    cells = (await parallel(() => rows.map(row => row.getCells()))).map(row => row.length);
-
-    expect(cells).toEqual([4, 4]);
-
-  });
-});