@one-paragon/angular-utilities 1.2.12 → 1.2.13

package/src/table-builder/components/scroll-strategy.ts

@@ -1,76 +0,0 @@
-import {
-  CdkVirtualScrollViewport,
-  VirtualScrollStrategy,
-} from '@angular/cdk/scrolling';
-import { animationFrameScheduler, Observable, Subject } from 'rxjs';
-import { distinctUntilChanged, observeOn } from 'rxjs/operators';
-import { subscriber } from '../../rxjs';
-
-export class TableVirtualScrollStrategy implements VirtualScrollStrategy {
-  scrolledIndexChange: Observable<number>;
-
-  private dataLength = 0;
-  private readonly indexChange = new Subject<number>();
-  private viewport?: CdkVirtualScrollViewport;
-
-  constructor(private itemHeight: number, private headerHeight: number) {
-    this.scrolledIndexChange = this.indexChange.pipe(distinctUntilChanged());
-  }
-
-  attach(viewport: CdkVirtualScrollViewport): void {
-    this.viewport = viewport;
-    this.onDataLengthChanged();
-  }
-
-  contentScrolled$ = new Subject<void>();
-
-  sub = subscriber(this.contentScrolled$.pipe(
-      observeOn(animationFrameScheduler)
-  ), () => {
-    this.updateContent();
-  })
-
-  onContentScrolled(): void {
-    this.contentScrolled$.next();
-  }
-
-  onDataLengthChanged(): void {
-    if (this.viewport) {
-      this.viewport.setTotalContentSize(this.dataLength * this.itemHeight);
-      this.updateContent();
-    }
-  }
-
-  setDataLength(length: number): void {
-    this.dataLength = length;
-    this.onDataLengthChanged();
-  }
-
-  detach(): void {}
-  onContentRendered(): void {}
-  onRenderedOffsetChanged(): void {
-  }
-  scrollToIndex(index: number, behavior: ScrollBehavior): void {
-  }
-
-  private updateContent(): void {
-    if (!this.viewport) {
-      return;
-    }
-
-    const amountOfRows = Math.ceil((this.viewport.getViewportSize() - this.headerHeight) / this.itemHeight);
-    const offset = this.viewport.measureScrollOffset();
-    const buffer = 35;
-
-    const skip = Math.round(offset / this.itemHeight);
-    // always start at an even index so we don't change the color patterns for odd and even rows.
-    const index =  skip % 2 === 0 ? skip : skip - 1;
-    const start = Math.max(0, index - buffer);
-    const end = Math.min(this.dataLength, index + amountOfRows + buffer);
-
-    this.viewport.setRenderedContentOffset(this.itemHeight * start);
-    this.viewport.setRenderedRange({ start, end });
-
-    this.indexChange.next(index);
-  }
-}

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

@@ -1,66 +0,0 @@
-import { Injectable, inject } 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';
-import { FieldType } from '../../interfaces/report-def';
-import { toObservable } from '@angular/core/rxjs-interop';
-
-@Injectable()
-export class SortMenuComponentStore extends ComponentStore<ComponentStoreState> {
-  private tableState = inject(TableStore);
-
-  constructor(){
-    super({ notSorted:[], sorted: []})
-  }
-  private set = this.updater((state, data: ComponentStoreState)=> ({...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});
-  })
-  metaDataArr$ = toObservable(this.tableState.$metaDataArray);
-  reset = () => {
-    const sorted = this.tableState.sort$.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.metaDataArr$.pipe(mergeMap(
-      metas => this.tableState.sort$.pipe(
-        map(s => metas
-          .filter(meta => !s.some(s=>s.active=== meta.key) && meta.fieldType !== FieldType.NotMapped && !meta.noSort)
-          .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 ComponentStoreState {
-  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

@@ -1,111 +0,0 @@
-<ng-container *ngrxLet="dirty$ as dirty">
-  @if(sorted$ | async; as sorted){
-    @if (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>
-            @if(dirty){
-              <span 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 @if (dirty) { Unsaved Changes }
-          </button>
-        </div>
-
-        <!-- Default Sorting Text -->
-        @if (!sorted.length) {
-          <div class="tip" >
-            Sorting List
-          </div>
-        }
-
-        <!-- Sorted Menu List -->
-        <div class="list"
-          cdkDropList
-          #sortedGroup="cdkDropList"
-          [cdkDropListConnectedTo]="[notSortedGroup]"
-          [cdkDropListData]="sorted"
-          (cdkDropListDropped)="dropIntoSorted($event)">
-
-          <!-- Menu Item Wrapper -->
-          @for (sort of sorted; track sort.active) {
-            <!-- Menu Item Headers -->
-            @if (sorted.length > 1) {
-              <span class="description sort-header">{{$index === 0 ? 'First By' : '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>
-          }
-
-        </div>
-
-        <!-- Default Not Sorted Text -->
-        @if(!notSorted.length){
-          <div class="tip" >
-            Not Sorted List
-          </div>
-        }
-
-        <!-- Not Sorted Menu List -->
-        <div class="list"
-          cdkDropList
-          #notSortedGroup="cdkDropList"
-          [cdkDropListConnectedTo]="[sortedGroup]"
-          [cdkDropListData]="notSorted"
-          (cdkDropListDropped)="dropIntoNotSorted($event)">
-          @for (sort of notSorted; track sort.active) {
-            <div mat-menu-item class="menu-item" cdkDrag>
-              <span class="not-sorted-name">{{sort.displayName || (sort.active | spaceCase)}}</span>
-            </div>
-          }
-        </div>
-      </mat-menu>
-    }
-  }
-</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,98 +0,0 @@
-import { CdkDragDrop, DragDropModule, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
-import { ChangeDetectionStrategy, Component, OnInit, inject } 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'
-import { LetDirective } from '@ngrx/component';
-import { AsyncPipe, NgClass } from '@angular/common';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
-import { SpaceCasePipe, StopPropagationDirective } from '../../../utilities';
-
-@Component({
-  selector: 'tb-sort-menu',
-  templateUrl: './sort-menu.component.html',
-  styleUrls: ['./sort-menu.component.scss'],
-  providers:[SortMenuComponentStore],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [
-    LetDirective, MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, StopPropagationDirective, DragDropModule,
-    SpaceCasePipe, NgClass, AsyncPipe
-  ]
-})
-export class SortMenuComponent implements OnInit{
-  private tableState = inject(TableStore);
-  protected store = inject(SortMenuComponentStore);
-
-
-  sorted$:Observable<SortWithName[]>;
-  notSorted$:Observable<SortWithName[]>;
-  SortDirection = SortDirection;
-  dirty$ = new BehaviorSubject(false);
-  constructor() {
-    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,54 +0,0 @@
-.header-wrapper{
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width:100%;
-}
-
-.table-wrapper{
-overflow-x: auto;
-}
-
-
-.flx-row-end{
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.flat-menu{
-  line-height: initial;
-  height: initial;
-}
-
-.pointer{
-  cursor: pointer;
-}
-
-.add-key{
-  width: 90%;
-}
-
-.paginator{
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  align-items: center;
-  background-color: white;
-  bottom: 0px;
-  position: sticky;
-  border-top: .5px solid rgba(0,0,0,.12);
-}
-.profiles-menu{
-  visibility: hidden;
-  width: 0px;
-  height: 0px;
-  display: block;
-  overflow: hidden;
-  position: absolute;
-  top: 50px;
-}
-
-
-

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

@@ -1,141 +0,0 @@
-import { Observable, combineLatest, map, scan, timestamp } from "rxjs";
-import { SortState } from "./sort-state.helpers";
-import { FilterPredicateState } from "./filter-state.helpers";
-import { filterData, sortData, tbNoShowSymbol } from "../../../functions/sort-data-function";
-import { defaultShareReplay } from "../../../../rxjs/defaultShareReplay";
-import { FieldType, MetaData } from "../../../interfaces/report-def";
-import { get, set } from "lodash";
-
-export const sortAndFilterData = <T>(data: Observable<T[]>, sortState: Observable<SortState>, filterState: Observable<FilterPredicateState<T>>) => combineLatest([
-  data.pipe(timestamp()),
-  sortState.pipe(timestamp()),
-  filterState.pipe(timestamp())
-]).pipe(scan(({ mappedData: resultData }, [data, sort, f], index)=> {
-
-      if(index === 0 || (data.timestamp > sort.timestamp && data.timestamp > f.timestamp)){
-        return ({ mappedData: filterData(sortData(data.value , sort.value.sortsToRun ), f.value.allFilters)});
-      }
-
-      if(sort.timestamp > f.timestamp){
-        return ({ mappedData: sortData(resultData, sort.value.sortsToRun)});
-      }
-      return ({ mappedData: filterData(resultData, f.value.onlyAddedFilters || f.value.allFilters, !f.value.onlyAddedFilters)});
-    }, { mappedData: []} as { mappedData: T[]})
-  ).pipe(
-    map(({ mappedData: resultData }) => resultData.filter(item => !item[tbNoShowSymbol])),
-    defaultShareReplay()
-  );
-
-export const createDataCleaners = <T>(metadatas: MetaData<T>[], mutate = false) => {
-  const transforms = createCleaners(metadatas);
-  return (data: T) => {
-    if(!mutate){
-      data = { ...data }
-    }
-    for(const transform of transforms){
-      transform(data);
-    }
-    return data;
-  }
-}
-
-const createCleaners = <T>(metadatas: MetaData<T> []) => {
-  return metadatas.reduce((transforms,metaData) => {
-    switch ( metaData.fieldType ) {
-      case FieldType.Currency:
-      case FieldType.Number:{
-        const nested = metaData.key.includes('.');
-        if(nested){
-          transforms.push( (t:T) => {
-            const val = get(t, metaData.key);
-            const num = Number( val );
-            set(t as {}, metaData.key, isNaN(num) || val == null ? null : num)
-            t[metaData.key] =  (isNaN(num) || val == null ? null : num) as any});
-        } else {
-          transforms.push( (t:T) => {
-            const val = t[metaData.key];
-            const num = Number( val );
-            t[metaData.key] =  (isNaN(num) || val == null ? null : num) as any});
-        }
-        break;
-      }
-      case FieldType.Date:{
-        const nested = metaData.key.includes('.');
-        if(nested){
-          transforms.push( (t:T) => {
-            const val = get(t, metaData.key) as string;
-            const date = Date.parse(val);
-            if(isNaN(date)){
-              set(t as {}, metaData.key,  null as any);
-              return
-            }
-            const d = new Date(date);
-            d.setHours(0,0,0,0);
-            set(t as {}, metaData.key,  d as any);
-          })
-        } else {
-          transforms.push( (t:T) => {
-            const val = t[metaData.key] as string;
-            const date = Date.parse(val);
-            if(isNaN(date)){
-              t[metaData.key] =  null as any;
-              return
-            }
-            const d = new Date(date);
-            d.setHours(0,0,0,0);
-            t[metaData.key] =  d as any;
-          })
-        }
-        break;
-      }
-        
-      case FieldType.DateTime:{
-        const nested = metaData.key.includes('.');
-        if(nested){
-          transforms.push( (t:T) => {
-            const val = get(t, metaData.key);
-            const dateTime = Date.parse(val as string);
-            if(isNaN(dateTime)){
-              set(t as {}, metaData.key,  null as any);
-              return
-            }
-            const dt = new Date(dateTime);
-            if(metaData.additional?.dateTimeOptions?.includeMilliseconds){
-              set(t as {}, metaData.key,  dt as any);
-              return
-            }
-            if(metaData.additional?.dateTimeOptions?.includeSeconds){
-              dt.setMilliseconds(0);
-              set(t as {}, metaData.key,  dt as any);
-              return
-            }
-            dt.setSeconds(0, 0);
-            set(t as {}, metaData.key,  dt as any);
-          })
-        } else {
-          transforms.push((t:T) => {
-            const val = t[metaData.key] as string;
-            const dateTime = Date.parse(val);
-            if(isNaN(dateTime)){
-              t[metaData.key] =  null as any;
-              return;
-            }
-            const dt = new Date(dateTime);
-            if(metaData.additional?.dateTimeOptions?.includeMilliseconds){
-              t[metaData.key] =  dt as any;
-              return;
-            }
-            if(metaData.additional?.dateTimeOptions?.includeSeconds){
-              dt.setMilliseconds(0);
-              t[metaData.key] =  dt as any;
-              return;
-            }
-            dt.setSeconds(0, 0);
-            t[metaData.key] =  dt as any;
-          })
-        }
-      }
-    }
-    return transforms;
-  }, [] as ((t:T) => void)[])
-}