@one-paragon/angular-utilities 0.1.20 → 0.1.21

package/src/table-builder/components/in-filter/in-filter.component.ts

@@ -0,0 +1,60 @@
+import { ChangeDetectionStrategy, Component, Input, ChangeDetectorRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { FilterInfo } from '../../classes/filter-info';
+import { FieldType } from '../../interfaces/report-def';
+
+@Component({
+  selector: 'lib-in-filter',
+  templateUrl: './in-filter.component.html',
+  styleUrls: ['./in-filter.component.css'],
+  changeDetection:ChangeDetectionStrategy.OnPush,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: InFilterComponent,
+    multi: true
+  }],
+})
+export class InFilterComponent implements ControlValueAccessor {
+  FieldType = FieldType;
+  @Input() type! : FieldType;
+  value: any[] = [undefined];
+
+  constructor(private ref: ChangeDetectorRef) {
+    this.value = [undefined];
+  }
+  writeValue(obj: any[]): void {
+    if(!obj?.length) obj  = [undefined];
+    this.value = obj;
+    this.ref.markForCheck();
+  }
+  onChange = (_: any) => { };
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  onTouched = () => { };
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  addInput(){
+    this.value = [...this.value, undefined];
+    this.ref.markForCheck();
+    this.onChange(this.value);
+  }
+
+  removeInput(index: number){
+    this.value = [...this.value];
+    this.value.splice(index,1);
+    this.ref.markForCheck();
+    this.onChange(this.value);
+  }
+
+  onValueChange(i:number,value: number | string){
+    this.value = [...this.value];
+    this.value[i] = value;
+    this.ref.markForCheck();
+    this.onChange(this.value);
+  }
+
+}

package/{table-builder/components/index.d.ts → src/table-builder/components/index.ts}

@@ -1,9 +1,9 @@
-export * from './date-filter/date-filter.component';
-export * from './filter/filter.component';
-export * from './gen-col-displayer/gen-col-displayer.component';
-export * from './table-container-filter/gen-filter-displayer/gen-filter-displayer.component';
-export * from './table-container-filter/filter-list/filter-list.component';
-export * from './generic-table/generic-table.component';
-export * from './table-container/table-container';
-export * from './generic-table/paginator.component';
-export * from './group-by-list/group-by-list.component';
+export * from './date-filter/date-filter.component';
+export * from './filter/filter.component';
+export * from './gen-col-displayer/gen-col-displayer.component';
+export * from './table-container-filter/gen-filter-displayer/gen-filter-displayer.component';
+export * from './table-container-filter/filter-list/filter-list.component';
+export * from './generic-table/generic-table.component';
+export * from './table-container/table-container';
+export * from './generic-table/paginator.component';
+export * from './group-by-list/group-by-list.component';

package/src/table-builder/components/initialization-component/initialization-component.html

@@ -0,0 +1,21 @@
+<ng-template #link  let-element='element' let-metaData='metaData' let-transform='transform'>
+  <tb-link-column [element]="element" [metaData]="metaData" [transform]="transform"></tb-link-column>
+</ng-template>
+
+<ng-template #imageUrl  let-element='element' let-metaData='metaData'>
+  <span>
+    <img src="{{element[metaData.key]}}" height="75px" width="75px" />
+  </span>
+</ng-template>
+
+<ng-template #array let-element='element' let-metaData='metaData'>
+  <tb-array-column [array]='element[metaData.key]' [metaData]='metaData'></tb-array-column>
+</ng-template>
+
+<ng-template #default let-element='element' let-metaData='metaData' let-transform='transform' >
+  <span>{{ transform | func : element }}</span>
+</ng-template>
+
+<ng-template #defaultWithIcon let-element='element' let-metaData='metaData' let-transform='transform' >
+  <mat-icon>{{ transform | func : element }}</mat-icon>
+</ng-template>

package/src/table-builder/components/initialization-component/initialization-component.ts

@@ -0,0 +1,15 @@
+import { Component, TemplateRef, ViewChild } from "@angular/core";
+import { TableStore } from "../../classes/table-store";
+import { MetaData } from "../../interfaces/report-def";
+
+@Component({
+  templateUrl: './initialization-component.html',
+})
+export class InitializationComponent {
+  @ViewChild('link', {static: true}) linkTemplate! : TemplateRef<any>;
+  @ViewChild('imageUrl', {static: true}) imageUrlTemplate! : TemplateRef<any>;
+  @ViewChild('currency', {static: true}) currencyTemplate! : TemplateRef<any>;
+  @ViewChild('array', {static: true}) arrayTemplate! : TemplateRef<any>;
+  @ViewChild('default', {static: true}) defaultTemplate! : TemplateRef<any>;
+  @ViewChild('defaultWithIcon', {static: true}) defaultWithIcon! : TemplateRef<any>;
+}

package/src/table-builder/components/link-column.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input } from "@angular/core";
+import { TableStore } from "../classes/table-store";
+import { MetaData } from "../interfaces/report-def";
+
+@Component({
+  selector: "tb-link-column",
+  template: `
+  <ng-container *ngrxLet="(link | func : (metaData)) as linkInfo">
+    <a *ngIf="$any(linkInfo).useRouterLink; else hrefLink" target="{{$any(linkInfo).target}}"
+      [routerLink]=" [($any(linkInfo).link | func : element)]"
+      [queryParams]="$any(linkInfo).routerLinkOptions.queryParams | func : element"
+      [fragment]="$any(linkInfo).routerLinkOptions.fragment"
+      [preserveFragment]="$any(linkInfo).routerLinkOptions.preserveFragment"
+      [queryParamsHandling]="$any(linkInfo).routerLinkOptions.queryParamsHandling"
+    >
+      {{transform | func : element}}
+    </a>
+    <ng-template #hrefLink>
+      <a target="{{$any(linkInfo).target}}"
+        href="{{($any(linkInfo).link | func : element)}}">
+        {{transform | func : element}}
+      </a>
+    </ng-template>
+  </ng-container>
+  `
+})export class LinkColumnComponent {
+  @Input() metaData!: MetaData;
+  @Input() element!: any;
+  @Input() transform = (a:any)=>a;
+  constructor(protected store: TableStore) {  }
+  link =  (metaData : MetaData) => this.store.getLinkMap(metaData);
+
+}

package/src/table-builder/components/number-filter/number-filter.component.css

@@ -0,0 +1,10 @@
+.switch {
+    display: inline-block;
+}
+
+.my-filter {
+    margin-right: 15px;
+}
+.inline{
+  display: inline-block;
+}

package/src/table-builder/components/number-filter/number-filter.component.html

@@ -0,0 +1,21 @@
+<ng-container *ngIf="CurrentFilterType !== FilterType.NumberBetween && CurrentFilterType !== FilterType.IsNull && CurrentFilterType !== FilterType.In">
+  <mat-form-field class="my-filter">
+    <input matInput name="filterValue" [ngModel]="info.filterValue" type="number"/>
+  </mat-form-field>
+</ng-container>
+
+
+<ng-container *ngIf="CurrentFilterType === FilterType.NumberBetween">
+  <ng-container ngModelGroup="filterValue"  >
+    <mat-form-field class="my-filter">
+      <input matInput name="Start" [ngModel]="info.filterValue?.Start" placeholder="Start" type="number"/>
+    </mat-form-field>
+    <mat-form-field class="my-filter">
+      <input matInput name="End" [ngModel]="info.filterValue?.End" placeholder="End" type="number"/>
+    </mat-form-field>
+  </ng-container>
+</ng-container>
+
+<div class="inline" *ngIf="CurrentFilterType === FilterType.In">
+  <lib-in-filter name='filterValue' [type]="FieldType.Number" [(ngModel)]='info.filterValue'  ></lib-in-filter>
+</div>

package/src/table-builder/components/number-filter/number-filter.component.spec.ts

@@ -0,0 +1,30 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FieldType } from 'projects/angular-utilities/src/public-api';
+
+import { NumberFilterComponent } from './number-filter.component';
+
+describe('NumberFilterComponent', () => {
+  let component: NumberFilterComponent;
+  let fixture: ComponentFixture<NumberFilterComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NumberFilterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NumberFilterComponent);
+    component = fixture.componentInstance;
+    component.info = {
+      key: '',
+      fieldType: FieldType.Unknown
+    };
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/table-builder/components/number-filter/number-filter.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
+import { FilterType } from '../../enums/filterTypes';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { PartialFilter } from '../../classes/filter-info';
+import { FieldType } from '../../interfaces/report-def';
+
+
+@Component({
+  selector: 'tb-number-filter',
+  templateUrl: './number-filter.component.html',
+  styleUrls: ['./number-filter.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [{provide: ControlContainer, useExisting: NgForm}]
+})
+export class NumberFilterComponent {
+  FilterType = FilterType; FieldType = FieldType;
+  @Input() CurrentFilterType!: FilterType;
+  @Input() info!:PartialFilter;
+}

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

@@ -0,0 +1,59 @@
+import { Injectable } from '@angular/core';
+import { Sort } from '@angular/material/sort';
+import { ComponentStore } from '@ngrx/component-store';
+import { combineLatest } from 'rxjs';
+import { distinctUntilChanged, map, mergeMap } from 'rxjs/operators';
+import { TableStore } from '../../classes/table-store';
+import { notNull } from '../../../rxjs/rxjs-operators';
+
+@Injectable()
+export class SortMenuComponentStore extends ComponentStore<ComponenStoreState> {
+  constructor(private tableState: TableStore){
+    super({notSorted:[],sorted:[]})
+  }
+  private set = this.updater((state,data:ComponenStoreState)=> ({...data}));
+
+  setSorted = this.updater((state,sorted:SortWithName[])=>({...state,sorted}));
+
+  setNotSorted = this.updater((state,notSorted:SortWithName[])=>({...state,notSorted}));
+  sorted$ = this.select(state=>state.sorted);
+  notSorted$ = this.select(state=>state.notSorted);
+  setDirection = this.updater((state,sort:SortWithName)=>{
+    const index = state.sorted.findIndex(s => s.active === sort.active);
+    const sorted = [...state.sorted];
+    sorted.splice(index,1,sort);
+    return ({...state,sorted});
+  })
+  reset = () => {
+    const sorted = this.tableState.sorted$.pipe(
+      mergeMap(sort => this.tableState.metaData$.pipe(
+        notNull(),
+        map(
+        meta => sort.map(s => {
+          return ({...s, displayName: meta[s.active]?.displayName} as SortWithName)})
+      )))
+    );
+    const notSorted = this.tableState.metaDataArray$.pipe(mergeMap(
+      metas => this.tableState.sorted$.pipe(
+        map(s => metas.filter(meta=> !s.some(s=>s.active=== meta.key))
+          .map(meta=>({active:meta.key,displayName : meta.displayName} as SortWithName)))
+      )
+    ));
+    this.set(combineLatest([
+      sorted.pipe(distinctSortArray),notSorted.pipe(distinctSortArray)
+    ]).pipe(map(([sorted,notSorted])=>({sorted,notSorted}))));
+  }
+}
+
+export interface ComponenStoreState {
+  sorted : SortWithName[];
+  notSorted: SortWithName[];
+}
+
+export interface SortWithName extends Sort{
+  displayName : string;
+}
+
+const equalSortArray = (arr1:SortWithName[],arr2:SortWithName[]) =>
+  arr1.length === arr2.length && arr2.every(s1 => arr1.some(s2 => s1.active === s2.active));
+const distinctSortArray = distinctUntilChanged<SortWithName[]>(equalSortArray);

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

@@ -0,0 +1,101 @@
+<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

@@ -0,0 +1,119 @@
+.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

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1,26 @@
+.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;
+}
+
+
+