@one-paragon/angular-utilities 0.1.21 → 0.1.23

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

@@ -1,101 +0,0 @@
-<ng-container *ngrxLet="dirty$ as dirty">
-<ng-container  *ngIf="sorted$ | async as sorted">
-  <ng-container *ngIf="notSorted$ | async as notSorted">
-    <!-- Menu Trigger -->
-    <span matTooltip="Sort">
-      <button mat-icon-button [matMenuTriggerFor]="menu">
-        <mat-icon color="primary">swap_vert</mat-icon>
-      </button>
-    </span>
-
-    <!-- Menu -->
-    <mat-menu #menu="matMenu"  class="my-mat-menu" (closed)="reset()">
-      <div mat-menu-item class="menu-button">
-        <div class="close-button-wrapper">
-          <span matTooltip="Close">
-            <mat-icon>close</mat-icon>
-          </span>
-          <span *ngIf="dirty" matTooltip="Undo" stop-propagation (click)="reset()">
-            <mat-icon>undo</mat-icon>
-          </span>
-        </div>
-      </div>
-
-      <!-- Apply Button -->
-      <div class="apply-button-wrapper">
-        <button mat-button color="primary" (click)="apply(null)"
-          stop-propagation [class.apply-border]="dirty"
-          [disabled]="!dirty">
-            Apply
-            <ng-container *ngIf="dirty">Unsaved Changes</ng-container>
-        </button>
-      </div>
-
-      <!-- Default Sorting Text -->
-      <div *ngIf="!sorted.length" class="tip" >
-        Sorting List
-      </div>
-
-      <!-- Sorted Menu List -->
-      <div class="list"
-        cdkDropList
-        #sortedGroup="cdkDropList"
-        [cdkDropListConnectedTo]="[notSortedGroup]"
-        [cdkDropListData]="sorted"
-        (cdkDropListDropped)="dropIntoSorted($event)">
-
-        <!-- Menu Item Wrapper -->
-        <ng-container *ngFor="let sort of sorted;let i=index">
-
-          <!-- Menu Item Headers -->
-          <span *ngIf="sorted.length > 1 && i === 0 " class="description" class="sort-header">First By</span>
-          <span *ngIf="sorted.length > 1 && i !== 0 " class="description"  class="sort-header">Then By</span>
-
-          <!-- Menu Item -->
-          <div mat-menu-item   cdkDrag class="menu-item">
-            <div class="sort-item">
-              <span class="sorted-name">
-                {{sort.displayName || (sort.active | spaceCase)}}
-                <span class="direction-text">{{sort.direction}}</span>
-              </span>
-
-              <!-- Sort Direction Buttons -->
-              <div class="up-down-buttons-wrapper">
-                <button  class="up-down-button up-button" stop-propagation
-                (click)="setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})">
-                  <mat-icon [ngClass]="sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'" class="up-down-icon">
-                  arrow_upward
-                  </mat-icon>
-                </button>
-
-                <button class="up-down-button" stop-propagation
-                (click)="setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})">
-                  <mat-icon [ngClass]="sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'" class="up-down-icon">
-                    arrow_downward
-                  </mat-icon>
-                </button>
-              </div>
-            </div>
-          </div>
-        </ng-container>
-      </div>
-
-      <!-- Default Not Sorted Text -->
-      <div *ngIf="!notSorted.length" class="tip" >
-        Not Sorted List
-      </div>
-      <!-- Not Sorted Menu List -->
-      <div class="list"
-        cdkDropList
-        #notSortedGroup="cdkDropList"
-        [cdkDropListConnectedTo]="[sortedGroup]"
-        [cdkDropListData]="notSorted"
-        (cdkDropListDropped)="dropIntoNotSorted($event)">
-        <div mat-menu-item *ngFor="let sort of notSorted"  class="menu-item" cdkDrag>
-          <span class="not-sorted-name">{{sort.displayName || (sort.active | spaceCase)}}</span>
-        </div>
-      </div>
-    </mat-menu>
-  </ng-container>
-</ng-container>
-</ng-container>

package/src/table-builder/components/sort-menu/sort-menu.component.scss

@@ -1,119 +0,0 @@
-.cdk-drag-preview {
-  box-sizing: border-box;
-  border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-
-.cdk-drag-placeholder {
-  opacity: 0;
-}
-
-.cdk-drag-animating {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.list{
-  padding: 5px 2px;
-  border-bottom: solid 1px #ccc;
-  color: rgba(0, 0, 0, 0.87);
-  background: white;
-}
-
-.light-arrow{
-  color: rgb(147 177 234 / 47%);
-}
-
-.dark-arrow{
-  color: #224e9c;
-}
-
-.up-down-button{
-  background-color: white;
-  border-radius: 30%;
-  border-color: aqua;
-  padding: 1px 1px 0;
-  border-width: .5px;
-  cursor: pointer;
-  height: 27px;
-}
-
-.mat-icon.up-down-icon{
-  margin-right: 0;
-  font-size: 20px;
-  font-weight: lighter;
-}
-
-.sort-item{
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.up-down-buttons-wrapper{
-  margin-left: 2rem;
-}
-
-.up-button{
-  margin-right: .3rem;
-}
-
-.mat-mdc-menu-item{
-  &.menu-item, &.menu-button{
-    min-height: initial;
-    padding: 0 3px;
-    line-height: 25px;
-    height: 30px;
-  }
-  &.menu-item{
-    cursor: move;
-  }
-}
-
-.sorted-name{
-  color: #224e9c;
-  font-size: 17px;
-  font-weight: 700;
-}
-
-.not-sorted-name{
-  color: rgb(147 177 234);
-  font-size: 17px;
-  font-weight: 700;
-  
-}
-
-.apply-border{
-  border: #224e9c solid .5px;
-}
-
-.apply-border:hover{
-  background-color: antiquewhite;
-}
-
-.apply-button-wrapper{
-  display: grid;
-  justify-content: center;
-
-}
-
-.sort-header{
-  font-size: 10px;
-  font-style: italic;
-}
-
-.tip{
-  padding: 0 3px;
-  color: lightgray;
-}
-
-.direction-text{
-  font-size: small;
-  font-weight: 400;
-}
-
-.close-button-wrapper{
-  display: flex;
-  flex-direction: row-reverse;
-}

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

@@ -1,82 +0,0 @@
-import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
-import { Component, OnInit } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-import { Observable } from 'rxjs';
-import { first, map, tap } from 'rxjs/operators';
-import { TableStore } from '../../classes/table-store';
-import { SortDirection } from '../../interfaces/report-def';
-import { SortMenuComponentStore, SortWithName } from './sort-menu.component-store'
-
-@Component({
-  selector: 'tb-sort-menu',
-  templateUrl: './sort-menu.component.html',
-  styleUrls: ['./sort-menu.component.scss'],
-  providers:[SortMenuComponentStore]
-})
-export class SortMenuComponent implements OnInit{
-
-  sorted$:Observable<SortWithName[]>;
-  notSorted$:Observable<SortWithName[]>;
-  SortDirection = SortDirection;
-  dirty$ = new BehaviorSubject(false);
-  constructor(private tableState: TableStore, public store: SortMenuComponentStore) {
-    this.sorted$=this.store.sorted$.pipe(map(data=>[...data]));
-    this.notSorted$=this.store.notSorted$.pipe(map(data=>[...data]));
-  }
-
-  reset(){
-    this.dirty$.next(false);
-    this.store.reset();
-  }
-
-  ngOnInit(){
-    this.store.reset();
-  }
-
-  dropIntoSorted(event: CdkDragDrop<SortWithName[]>) {
-    this.dirty$.next(true);
-    if (event.previousContainer === event.container) {
-      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
-      this.store.setSorted(event.container.data);
-    } else {
-
-      transferArrayItem(event.previousContainer.data,
-                        event.container.data,
-                        event.previousIndex,
-                        event.currentIndex);
-      event.container.data[event.currentIndex] = {...event.container.data[event.currentIndex],direction:SortDirection.asc};
-      this.store.setSorted(event.container.data);
-      this.store.setNotSorted(event.previousContainer.data);
-    }
-  }
-
-  dropIntoNotSorted(event: CdkDragDrop<SortWithName[]>){
-    if (event.previousContainer === event.container) {
-      return;
-    } else {
-      this.dirty$.next(true);
-      transferArrayItem(event.previousContainer.data,
-                        event.container.data,
-                        event.previousIndex,
-                        event.currentIndex);
-      event.container.data[event.currentIndex] = {...event.container.data[event.currentIndex]};
-
-      this.store.setNotSorted(event.container.data);
-      this.store.setSorted(event.previousContainer.data);
-    }
-  }
-
-  apply = this.store.effect((obs:Observable<null>)=>
-    obs.pipe(tap(()=>{
-      this.dirty$.next(false);
-      this.tableState.setAllSort(this.store.sorted$.pipe(first()))
-  })));
-
-  setDirection(sort:SortWithName){
-    this.dirty$.next(true);
-    this.store.setDirection(sort);
-  }
-
-}
-
-

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

@@ -1,26 +0,0 @@
-.wide-menu {
-  width: 200px !important;
-}
-
-.header-wrapper{
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width:100%;
-}
-
-
-.flx-row-end{
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.flat-menu{
-  line-height: initial;
-  height: initial;
-}
-
-
-

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

@@ -1,113 +0,0 @@
-<ng-content select="[before]" >
-</ng-content>
-
-<ng-container multiSort [matSortDisabled]="disableSort">
-  <ng-container *ngrxLet="state.tableSettings$ as tableSettings">
-
-
-    <div class="header-wrapper">
-      <div class="title">
-        <ng-content select=".tb-header-title"
-          *ngIf="(!(collapseHeader$ | async)) || tableSettings.showTitleWhenHeaderCollapsed">
-
-        </ng-content>
-        <group-by-list></group-by-list>
-      </div>
-      <div class="flx-row-end">
-        <lib-filter-list></lib-filter-list>
-        <ng-container *ngIf="!tableSettings.hideHeader">
-          <ng-container *ngIf="!(collapseHeader$ | async); else allMenu">
-            <ng-container *ngTemplateOutlet="headerMenu"></ng-container>
-            <button mat-icon-button color='primary' [matMenuTriggerFor]="mainMenu"
-              [ngClass]="{'flat-menu':(collapseHeader$ | async)}">
-              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>
-            </button>
-            <mat-menu #mainMenu='matMenu'>
-              <ng-container *ngTemplateOutlet="headerMenuExtra"></ng-container>
-            </mat-menu>
-          </ng-container>
-          <ng-template #allMenu>
-            <button mat-icon-button color='primary' [matMenuTriggerFor]="mainMenu"
-              [ngClass]="{'flat-menu':(collapseHeader$ | async)}">
-              <mat-icon>{{(collapseHeader$ | async) ? 'more_horiz' : 'more_vert'}}</mat-icon>
-            </button>
-            <mat-menu #mainMenu='matMenu'>
-              <div class="flex-column">
-                <ng-container *ngTemplateOutlet="headerMenu"></ng-container>
-              </div>
-              <ng-container *ngTemplateOutlet="headerMenuExtra"></ng-container>
-            </mat-menu>
-          </ng-template>
-          <mat-icon [matTooltip]="(collapseHeader$ | async) ? 'expand' : 'collapse'" class="collapse-icon header"
-            (click)="state.toggleCollapseHeader()">
-            {{(collapseHeader$ | async) ? 'expand_less' : 'expand_more'}}
-          </mat-icon>
-        </ng-container>
-      </div>
-    </div>
-
-    <div style="clear: both;">
-      <tb-generic-table [rows]='customRows' [data$]="data" [IndexColumn]='IndexColumn'
-        [SelectionColumn]='SelectionColumn' (selection$)='selection$.emit($event)' [trackBy]='trackBy'
-        [isSticky]='isSticky' [columnInfos]='myColumns$' [disableSort]="disableSort" [groupHeaderTemplate]="groupHeaderTemplate">
-      </tb-generic-table>
-    </div>
-
-
-
-    <ng-template #headerMenu>
-      <ng-container>
-        <tb-filter-displayer *ngIf="!tableSettings.hideFilter">
-        </tb-filter-displayer>
-        <tb-col-displayer *ngIf="!tableSettings.hideColumnSettings"></tb-col-displayer>
-        <tb-sort-menu *ngIf="!tableSettings.hideSort"></tb-sort-menu>
-      </ng-container>
-    </ng-template>
-    <ng-template #headerMenuExtra>
-      <button mat-menu-item (click)="resetState()">
-        <mat-icon color="primary">autorenew</mat-icon>
-        <span>Reset table</span>
-      </button>
-      <button mat-menu-item (click)="exportToCsv()" *ngIf="!tableSettings.hideExport">
-        <mat-icon color="primary">file_download</mat-icon>
-        <span>Export Table</span>
-      </button>
-      <ng-container *ngIf="currentStateKey$ | async as currentKey">
-        <button mat-menu-item *ngIf="tableId" (click)="saveState()">
-          <mat-icon color="primary">save</mat-icon>
-          <span>Save to {{currentKey}}</span>
-        </button>
-        <button *ngIf='tableId' mat-menu-item [matMenuTriggerFor]="savedNames">
-          <span>Choose Profile</span>
-        </button>
-      </ng-container>
-
-      <mat-menu #savedNames='matMenu' panelClass='wide-menu'>
-        <button mat-menu-item clickEmitter  #add='clickEmitter'>
-          <mat-icon>add</mat-icon>
-          <span>New</span>
-        </button>
-        <ng-container *ngFor='let key of stateKeys$ | async'>
-          <button mat-menu-item (click)='setProfileState(key)'>
-            <div style='display: flex; align-items: center; justify-content: space-between;'>
-              <span style='display:flex;'>{{key}}</span>
-              <span style='display:flex;'>
-                <span style="width: 120px;"></span>
-                <mat-icon color='warn' (click)='deleteProfileState(key)' stop-propagation>delete_forever</mat-icon>
-              </span>
-            </div>
-          </button>
-        </ng-container>
-      </mat-menu>
-      <ng-container *opDialog='add'>
-        <mat-form-field>
-          <input style='width:90%' 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>
-
-</ng-container>

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

@@ -1,157 +0,0 @@
-import { BehaviorSubject, of } from 'rxjs';
-import { TestBed, ComponentFixture } from '@angular/core/testing';
-import { MaterialModule } from '../../material.module';
-import { SpaceCasePipe, PhoneNumberPipe,  UtilitiesModule } 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,
-        MaterialModule,
-        CommonModule,
-        FormsModule,
-        LetModule,
-        UtilitiesModule,
-      ]
-    })
-    .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]);
-
-  });
-});