@one-paragon/angular-utilities 0.3.10 → 0.3.11-beta.1

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

@@ -0,0 +1,82 @@
+import {
+  CdkVirtualScrollViewport,
+  VirtualScrollStrategy,
+} from '@angular/cdk/scrolling';
+import { Observable, Subject } from 'rxjs';
+import { distinctUntilChanged } from 'rxjs/operators';
+
+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 headerOffset: number) {
+    this.scrolledIndexChange = this.indexChange.pipe(distinctUntilChanged());
+  }
+
+  attach(viewport: CdkVirtualScrollViewport): void {
+    this.viewport = viewport;
+    this.onDataLengthChanged();
+  }
+
+  onContentScrolled(): void {
+    this.updateContent();
+  }
+
+  onDataLengthChanged(): void {
+    if (this.viewport) {
+      this.viewport.setTotalContentSize(this.dataLength * this.itemHeight);
+      this.updateContent();
+    }
+  }
+
+  setDataLength(length: number): void {
+    this.dataLength = length;
+    this.onDataLengthChanged();
+  }
+
+  setScrollHeight(rowHeight: number, headerOffset: number) {
+    this.itemHeight = rowHeight;
+    this.headerOffset = headerOffset;
+    this.updateContent();
+  }
+
+  setItemHeight(rowHeight: number) {
+    this.itemHeight = rowHeight;
+    this.updateContent();
+  }
+
+  setHeaderOffset(headerOffset: number) {
+    this.headerOffset = headerOffset;
+    this.updateContent();
+  }
+
+  detach(): void {}
+  onContentRendered(): void {}
+  onRenderedOffsetChanged(): void {
+  }
+  scrollToIndex(index: number, behavior: ScrollBehavior): void {
+  }
+
+  private updateContent(): void {
+    if (!this.viewport) {
+      return;
+    }
+
+    const amount = Math.ceil(this.viewport.getViewportSize() / this.itemHeight);
+    const offset = this.viewport.measureScrollOffset() - this.headerOffset;
+    const buffer = Math.ceil(amount / 2);
+
+    const skip = Math.round(offset / this.itemHeight);
+    const index = Math.max(0, skip);
+    const start = Math.max(0, index - buffer);
+    const end = Math.min(this.dataLength, index + amount + 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

@@ -0,0 +1,62 @@
+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<ComponentStoreState> {
+  constructor(private tableState: TableStore){
+    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});
+  })
+
+  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.tableState.metaDataArray$.pipe(mergeMap(
+      metas => this.tableState.sort$.pipe(
+        map(s => metas
+          .filter(meta => !s.some(s=>s.active=== meta.key) && !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

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

@@ -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,95 @@
+import { CdkDragDrop, DragDropModule, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+import { ChangeDetectionStrategy, 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'
+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{
+
+  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/{table-builder/components/table-container/table-container-imports.d.ts → src/table-builder/components/table-container/table-container-imports.ts}

@@ -1,14 +1,30 @@
-import { AsyncPipe, NgTemplateOutlet } from "@angular/common";
-import { LetDirective } from "@ngrx/component";
-import { MultiSortDirective } from "../../directives";
-import { GroupByListComponent } from "../group-by-list/group-by-list.component";
-import { FilterChipsComponent } from "../table-container-filter/filter-list/filter-list.component";
-import { MatButtonModule } from "@angular/material/button";
-import { GenericTableComponent } from "../generic-table/generic-table.component";
-import { GenFilterDisplayerComponent } from "../table-container-filter/gen-filter-displayer/gen-filter-displayer.component";
-import { GenColDisplayerComponent } from "../gen-col-displayer/gen-col-displayer.component";
-import { SortMenuComponent } from "../sort-menu/sort-menu.component";
-import { ClickEmitterDirective, DialogDirective, StopPropagationDirective } from "../../../utilities";
-import { PaginatorComponent } from "../generic-table/paginator.component";
-import { VirtualScrollContainer } from "./virtual-scroll-container";
-export declare const containerImports: (typeof MatButtonModule | typeof NgTemplateOutlet | typeof AsyncPipe | typeof MultiSortDirective | typeof StopPropagationDirective | typeof ClickEmitterDirective | typeof DialogDirective | typeof GenColDisplayerComponent | typeof GenFilterDisplayerComponent | typeof LetDirective | typeof FilterChipsComponent | typeof PaginatorComponent | typeof GenericTableComponent | typeof GroupByListComponent | typeof SortMenuComponent | typeof VirtualScrollContainer)[];
+import { AsyncPipe, NgTemplateOutlet } from "@angular/common";
+import { LetDirective } from "@ngrx/component";
+import { MultiSortDirective } from "../../directives";
+import { GroupByListComponent } from "../group-by-list/group-by-list.component";
+import { FilterChipsComponent } from "../table-container-filter/filter-list/filter-list.component";
+import { MatButtonModule } from "@angular/material/button";
+import { MatMenuModule } from "@angular/material/menu";
+import { MatIconModule } from "@angular/material/icon";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { GenericTableComponent } from "../generic-table/generic-table.component";
+import { GenFilterDisplayerComponent } from "../table-container-filter/gen-filter-displayer/gen-filter-displayer.component";
+import { GenColDisplayerComponent } from "../gen-col-displayer/gen-col-displayer.component";
+import { SortMenuComponent } from "../sort-menu/sort-menu.component";
+import { MatInputModule } from "@angular/material/input";
+import { ClickEmitterDirective, DialogDirective, StopPropagationDirective } from "../../../utilities";
+import { PaginatorComponent } from "../generic-table/paginator.component";
+import { VirtualScrollContainer } from "./virtual-scroll-container";
+
+export const containerImports = [
+  AsyncPipe, NgTemplateOutlet,
+  PaginatorComponent,
+
+  LetDirective,
+
+  MultiSortDirective, GroupByListComponent, FilterChipsComponent, GenFilterDisplayerComponent, GenColDisplayerComponent,
+  SortMenuComponent, GenericTableComponent, StopPropagationDirective, ClickEmitterDirective, DialogDirective,
+
+  MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule, MatInputModule,VirtualScrollContainer
+
+]

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

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