@one-paragon/angular-utilities 2.0.0-beta.2 → 2.0.0-beta.4

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

@@ -0,0 +1,126 @@
+
+:host ::ng-deep .mat-expansion-panel-header{
+  padding: 0;
+}
+.current-name{
+  color: blue;
+}
+.menu-item{
+  display: inline-flex;
+  width: initial;
+  flex-grow: 1;
+}
+.profile-line{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.first-in-line{
+  --f-b: 2rem;
+  margin-left: var(--mat-menu-item-with-icon-leading-spacing);
+  &.first-button{
+    height: var(--f-b);
+    margin: .2rem;
+  }
+  .button-save-icon{
+    height: var(--f-b);
+    width: var(--f-b);
+    font-size: var(--f-b);
+  }
+}
+.main-save-button{
+  height: 4rem;
+  width: 4rem;
+  padding: .5rem;
+  mat-icon{
+    height: 3rem;
+    width: 3rem;
+    font-size: 3rem;
+  }
+}
+.save-for-default-icon{
+  margin: 0;
+}
+.display-none{
+  display: none;
+}
+.last-in-line{
+  padding-right: var(--mat-menu-item-with-icon-trailing-spacing);
+}
+.default-cursor{
+  cursor: default;
+}
+.as-def{
+  padding-left: var(--mat-menu-item-with-icon-leading-spacing);
+}
+.divider{
+  margin: .2px 0;
+}
+.add-key{
+  max-width: 8.5rem;
+  margin-left: 2px;
+  ::ng-deep{
+    .mdc-text-field{
+      padding: 0;
+    }
+  }
+}
+.panel{
+  transition: height .1s
+}
+.hide{
+  height: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+.open-panel-button{
+  width: 100%;
+  height: 2.5rem;
+}
+.current-in-list{
+  border-left: 3px solid blue;
+  background-color: #0000ff0d;
+}
+.not-current-in-list{
+  border-left: 3px solid rgba(255, 255, 255, 0);
+}
+.add-new-profile-row, .all-profile-row{
+  border-top: rgb(128 128 128 / 25%) solid 1px;
+}
+.all-profiles{
+  display: flex;
+  justify-content: space-between;
+  &:has(.all-profile-arrow-close){
+    align-items: center;
+  }
+}
+.all-profile-arrow{
+  display: inline-block;
+  height: .7rem;
+  width: .7rem;
+  border-color: black;
+  transform: rotate(-45deg);
+  &-open{
+    border-left: solid 2px;
+    border-bottom: solid 2px;
+  }
+  &-close{
+    border-right: solid 2px;
+    border-top: solid 2px;
+  }
+}
+.new-name-input{
+  margin-left: 3px;
+  display: flex;
+  flex-direction: column;
+  .input-hint{
+    font-size: smaller;
+    font-weight: 200;
+    color: gray;
+  }
+}
+.add-button{
+  height: 20px;
+  line-height: 20px;
+  margin: 3px 0 0 3px;
+}

package/src/table-builder/components/profiles-menu/profiles-menu.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfilesMenuComponent } from './profiles-menu.component';
+
+describe('ProfilesMenuComponent', () => {
+  let component: ProfilesMenuComponent;
+  let fixture: ComponentFixture<ProfilesMenuComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProfilesMenuComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ProfilesMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,63 @@
+import { Component, computed, inject, input, output, signal, viewChild } from '@angular/core';
+import { TableBuilderStateStore } from '../../ngrx/tableBuilderStateStore';
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
+import { MatIcon } from '@angular/material/icon';
+import { TableStore } from '../../classes/table-store';
+import { MatTooltip } from '@angular/material/tooltip';
+import { MatButton, MatIconButton } from '@angular/material/button';
+import { StopPropagationDirective } from '../../../utilities';
+import { MatInput, MatInputModule } from '@angular/material/input';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { Subject } from 'rxjs';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'tb-profiles-menu',
+    imports: [MatIcon, MatTooltip, MatIconButton, MatMenuModule, MatButton, MatInput,
+    MatCheckbox, StopPropagationDirective, MatInputModule, FormsModule
+  ],
+  templateUrl: './profiles-menu.component.html',
+  styleUrl: './profiles-menu.component.scss'
+})
+export class ProfilesMenuComponent {
+  stateService = inject(TableBuilderStateStore);
+  tableStore = inject(TableStore);
+  $tableId = input.required<string>();
+  onSaveState = output<null>();
+  trigger = viewChild<MatMenuTrigger>('trigger');
+  allProfilesPanelOpened = signal(false);
+  newProfilePanelOpened = signal(false);
+  $currentProfile = computed(() => this.stateService.$selectLocalProfileCurrentKey(this.$tableId())());
+  $defaultProfile = computed(() => this.stateService.$selectLocalProfileDefaultKey(this.$tableId())());
+  $keys = computed(() => this.stateService.$selectLocalProfileKeys(this.$tableId())());
+  saveState(key: string) {
+    const tableState = this.tableStore.getSavableStateSignal();
+    this.onSaveState.emit(null);
+    this.stateService.saveTableSettingsToLocalAndStorage(this.$tableId(), key, tableState);
+  }
+
+  addState(key: string, asDefault: boolean){
+    const tableState = this.tableStore.getSavableStateSignal();
+    this.stateService.addNewStateToLocalAndStorage(this.$tableId(), key, tableState, asDefault);
+  }
+
+  setDefault(key: string){
+    this.stateService.setDefaultInLocalAndStorage(this.$tableId(), key);
+  }
+
+  unsetDefault(){
+    this.stateService.unsetDefaultFromLocalAndStorage(this.$tableId());
+  }
+
+  defaultName = 'My Profile';
+  position$ = new Subject<{ top: string, right: string} | undefined>();
+  setPosition = (e: HTMLElement) => {
+    const rect = e.getBoundingClientRect();
+    if(rect.top === 0) return;
+    const a = {
+      right: `${(window.innerWidth - rect.right)}px`,
+      top: `${rect.top}px`,
+    }
+    return a;
+  }
+}

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

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

@@ -0,0 +1,57 @@
+import { Injectable, effect, inject, untracked } from '@angular/core';
+import { Sort } from '@angular/material/sort';
+import { ComponentStore } from '@ngrx/component-store';
+import { TableStore } from '../../classes/table-store';
+import { FieldType } from '../../interfaces/report-def';
+
+@Injectable()
+export class SortMenuComponentStore extends ComponentStore<ComponentStoreState> {
+  private tableState = inject(TableStore);
+  setStoreStateEffect = effect(() => {
+    const metaData = this.tableState.$metaData();
+    if(!metaData) return;
+    this.tableState.$selectSorted();
+    untracked(() => this.setStateFromTableStore());
+  });
+
+  setStateFromTableStore = () => {
+    const metaData = this.tableState.$metaData();
+    const sorted = [...this.tableState.$selectSorted()].map(s => ({
+      ...s,
+      displayName: metaData[s.active]?.displayName
+    } as SortWithName));
+    const notSorted = this.tableState.$metaDataArray()
+      .filter(md => md.fieldType !== FieldType.NotMapped && !md.noSort && !sorted.some(s=>s.active=== md.key))
+      .map(meta=>({ active: meta.key,displayName : meta.displayName } as SortWithName));
+    this.setState({ sorted, notSorted })
+  }
+  constructor(){
+    super({ notSorted:[], sorted: []})
+  }
+
+  setSorted = this.updater((state, sorted: SortWithName[])=>({...state, sorted}));
+  setNotSorted = this.updater((state, notSorted: SortWithName[])=>({...state, notSorted}));
+
+  $sorted = this.selectSignal(state => state.sorted);
+  $notSorted = this.selectSignal(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 = () => {
+    this.setStateFromTableStore();
+  }
+}
+
+export interface ComponentStoreState {
+  sorted : SortWithName[];
+  notSorted: SortWithName[];
+}
+
+export interface SortWithName extends Sort{
+  displayName : string;
+}

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

@@ -0,0 +1,109 @@
+@let dirty = $dirty();
+@let sorted = $sorted();
+@let notSorted = $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()"
+      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 [class]="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 [class]="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>

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,88 @@
+import { CdkDragDrop, DragDropModule, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
+import { TableStore } from '../../classes/table-store';
+import { SortDirection } from '../../interfaces/report-def';
+import { SortMenuComponentStore, SortWithName } from './sort-menu.component-store'
+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,
+    imports: [
+    MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, StopPropagationDirective, DragDropModule,
+    SpaceCasePipe
+  ]
+})
+export class SortMenuComponent {
+  SortDirection = SortDirection;
+  private tableState = inject(TableStore);
+  protected store = inject(SortMenuComponentStore);
+
+  $sorted = computed(() => [...this.store.$sorted()]);
+  $notSorted = computed(() => [...this.store.$notSorted()]);
+  $dirty = signal(false);
+
+  reset(){
+    this.$dirty.set(false);
+    this.store.reset();
+  }
+  
+  dropIntoSorted(event: CdkDragDrop<SortWithName[]>) {
+    this.$dirty.set(true);
+    const sorted = [...event.container.data];
+    if (event.previousContainer === event.container) {
+      moveItemInArray(sorted, event.previousIndex, event.currentIndex);
+      this.store.setSorted(sorted);
+    } else {
+      const notSorted = [...event.previousContainer.data];
+      transferArrayItem(
+        notSorted,
+        sorted,
+        event.previousIndex,
+        event.currentIndex
+      );
+      sorted[event.currentIndex] = { ...sorted[event.currentIndex], direction:SortDirection.asc };
+      this.store.setSorted(sorted);
+      this.store.setNotSorted(notSorted);
+    }
+  }
+
+  dropIntoNotSorted(event: CdkDragDrop<SortWithName[]>){
+    if (event.previousContainer === event.container) {
+      return;
+    } else {
+      this.$dirty.set(true);
+      const sorted = [...event.previousContainer.data];
+      const notSorted = [...event.container.data];
+      transferArrayItem(
+        sorted,
+        notSorted,
+        event.previousIndex,
+        event.currentIndex
+      );
+      notSorted[event.currentIndex] = {...notSorted[event.currentIndex]};
+
+      this.store.setNotSorted(notSorted);
+      this.store.setSorted(sorted);
+    }
+  }
+
+  apply = () => {
+    this.$dirty.set(false);
+    this.tableState.setAllSort(this.store.$sorted());
+  }
+
+  setDirection(sort:SortWithName){
+    this.$dirty.set(true);
+    this.store.setDirection(sort);
+  }
+}
+
+