@one-paragon/angular-utilities 2.8.2 → 2.8.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: var(tb-current-profile, 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,64 @@
+import { Component, computed, inject, input, signal, viewChild, ChangeDetectionStrategy } from '@angular/core';
+import { TableBuilderStateStore } from '../../ngrx/tableBuilderStateStore';
+import { MatMenu, 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',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ProfilesMenuComponent {
+  stateService = inject(TableBuilderStateStore);
+  tableStore = inject(TableStore);
+  $tableId = input.required<string>({ alias: 'tableId' });
+  $isMatMenuChild = input<boolean>(false, { alias: 'isMatMenuChild' });
+  trigger = viewChild<MatMenuTrigger>('trigger');
+  menu = viewChild.required(MatMenu)
+  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.$savableState();
+    this.stateService.saveTableSettingsToLocalAndStorage(this.$tableId(), key, tableState);
+  }
+
+  addState(key: string, asDefault: boolean){
+    const tableState = this.tableStore.$savableState();
+    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/reset-menu/reset-menu.component.css

@@ -0,0 +1,3 @@
+:host{
+  display: contents;
+}

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

@@ -0,0 +1,10 @@
+<mat-menu #menu2="matMenu">
+  @if($set().length > 1)
+  {
+    <button mat-menu-item (click)="state.resetState()">All</button>
+  }
+  @for (item of $set(); track $index)
+  {
+    <button mat-menu-item (click)="state.resetPart(item)">Reset {{item}}</button>
+  }
+</mat-menu>

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

@@ -0,0 +1,87 @@
+import { ChangeDetectionStrategy, Component, computed, inject, output, viewChild } from '@angular/core';
+import { MatMenu, MatMenuModule } from '@angular/material/menu';
+import { resetable } from '../../classes/table-store';
+import { TableContainerComponent } from '../table-container/table-container.component';
+import { sortsAreSame } from '../../directives';
+import { MatButtonModule } from '@angular/material/button';
+import { isCustomFilter } from '../../classes/filter-info';
+
+@Component({
+  selector: 'lib-reset-menu',
+  imports: [MatMenuModule, MatButtonModule],
+  templateUrl: './reset-menu.component.html',
+  styleUrl: './reset-menu.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ResetMenuComponent {
+  menu = viewChild.required(MatMenu);
+  protected tableContainer = inject(TableContainerComponent);
+  state = this.tableContainer.state;
+  onStateReset$ = output<null>({ alias: 'onStateReset' });
+  protected resetState() {
+    this.tableContainer.$customFilterDirectives().forEach( cf => cf.reset());
+    this.tableContainer.$filterDirectives().forEach( cf => cf.reset() );
+    this.state.resetState();
+    this.onStateReset$.emit(null)
+  }
+
+  $filtersSet = computed(() => {
+    return Object.values(this.state.$filters())
+      .filter(f => (isCustomFilter(f) && f.active) || f.filterValue != undefined)
+      .length;
+  });
+  $sortSet = computed(() => {
+    const sorts = this.state.$selectSorted();
+    if(!sorts.length) return false;
+    const preSorts = this.state.$preSort();
+    if(!preSorts.length) return true;
+    return !sortsAreSame(preSorts, sorts);
+  });
+  $groupBySet = computed(() => this.state.$groupByData().length || this.state.$userDefinedNoGroups());
+  $hiddenSet = computed(() => this.state.$hiddenKeys().length);
+  $orderSet = computed(() => Object.keys(this.state.$userDefinedOrder()).length);
+  $widthsSet = computed(() => Object.keys(this.state.$getUserDefinedWidths()).length);
+  $rowHeightSet = this.state.$userDefinedRowHeight;
+  headerHeightSet = this.state.$userDefinedHeaderHeight;
+  pageSizeSet = computed(() => this.state.$userDefinedPageSize() && this.state.$userDefinedPageSize() !== this.state.selectSignal(s => s.pageSize)());
+  showAllSet = this.state.selectSignal(s => s.userDefined.showAll);
+  $set = computed(() => {
+    const arr: (typeof resetable[number])[] = [] as (typeof resetable[number])[];
+    if(this.$filtersSet()){
+      arr.push('Filters')
+    }
+    if(this.$sortSet()){
+      arr.push('Sorting')
+    }
+    if(this.$groupBySet()){
+      arr.push('Group By')
+    }
+    if(this.$hiddenSet()){
+      arr.push('Hidden Columns')
+    }
+    if(this.$orderSet()){
+      arr.push('Column Order')
+    }
+    if(this.$widthsSet()){
+      arr.push('Column Widths')
+    }
+    if(this.$rowHeightSet()){
+      arr.push('Row Height')
+    }
+    if(this.headerHeightSet()){
+      arr.push('Header Height')
+    }
+    if(this.pageSizeSet()){
+      arr.push('Page Size')
+    }
+    if(this.showAllSet()){
+      arr.push('Show All')
+    }
+    return arr;
+  })
+
+  resetable = resetable;
+  reset(s: string){
+    this.state.resetPart(s as any);
+  }
+}

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

@@ -0,0 +1,139 @@
+import {
+  CdkVirtualScrollViewport,
+  VirtualScrollStrategy,
+} from '@angular/cdk/scrolling';
+import { Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { subscriber } from '../../rxjs';
+import { VirtualScrollContainer } from './table-container/virtual-scroll-container';
+import { effect, linkedSignal, signal, Signal, untracked } from '@angular/core';
+import { DataStore } from '../classes/data-store';
+
+export class TableVirtualScrollStrategy implements VirtualScrollStrategy {
+  constructor(scrollContainer: VirtualScrollContainer, dataStore: DataStore) {
+    this.$rowHeight = scrollContainer.computedRowHeight;
+    this.$headerHeight = scrollContainer.computedHeaderHeight;
+    this.viewport = scrollContainer.viewport;
+    this.dataStore = dataStore;
+    this.$dataLength = scrollContainer.$dataLength;
+  }
+  private dataStore: DataStore;
+  private readonly indexChange = new Subject<number>();
+  scrolledIndexChange = this.indexChange.pipe(distinctUntilChanged());
+  private viewport: Signal<CdkVirtualScrollViewport>;
+
+  private $dataLength: Signal<number>;
+  $dataLengthChange = linkedSignal<number, {curr: number, previous: number }>({
+    source: () => this.$dataLength(),
+    computation: (curr, previous) => ({ curr, previous: previous == undefined ? curr : previous.source })
+  });
+  $rowHeight: Signal<number>;
+  $rowHeightChange = linkedSignal<number, {curr: number, previous: number }>({
+    source: () => this.$rowHeight(),
+    computation: (curr, previous) => {
+      return ({ curr, previous: previous == undefined ? curr : previous.source })}
+  });
+
+  $headerHeight: Signal<number>;
+  $headerHeightChange = linkedSignal<number, {curr: number, previous: number }>({
+    source: () => this.$headerHeight(),
+    computation: (curr, previous) => ({ curr, previous: previous == undefined ? curr : previous.source })
+  });
+
+  contentScrolled$ = new Subject<number>();
+  sub = subscriber(this.contentScrolled$.pipe(
+    debounceTime(20),
+    distinctUntilChanged()
+  ), offset => {
+    this.updateContent('scroll')
+  })
+  onContentScrolled(): void {
+    this.contentScrolled$.next(this.viewport().measureScrollOffset());
+  }
+
+  #onDataLengthChange = effect(() => {
+    const dataLengthChange = this.$dataLengthChange();
+    untracked(() => {
+      if(dataLengthChange.curr === dataLengthChange.previous) return;
+      this.updateContent('data length')
+    });
+  })
+
+  #onHeaderChange = effect(() => {
+    const headerHeightChange = this.$headerHeightChange();
+    untracked(() => {
+      if(headerHeightChange.curr === headerHeightChange.previous) return;
+      this.updateContent('header height')
+    });
+  })
+
+  #onRowChange = effect(() => {
+    const rowHeightChange = this.$rowHeightChange();
+    untracked(() => {
+      if(rowHeightChange.curr === rowHeightChange.previous) return;
+      this.updateContent('row height')
+    })
+  });
+
+  $currentRange = signal({ start: 0, end: 0 })
+
+  private updateContent(trigger: ScrollStrategyTrigger): void {
+    const viewport = this.viewport && this.viewport()
+    if(!viewport || !this.$rowHeight) {
+      return;
+    }
+    const currentContentHeight = +viewport._totalContentHeight().replace('px', '');
+    const newContentHeight = this.$dataLength() * this.$rowHeight();
+    if(currentContentHeight !== newContentHeight){
+      viewport.setTotalContentSize(newContentHeight);
+      this.update(trigger, viewport, true)
+      return;
+    }
+    this.update(trigger, viewport)
+  }
+  update(trigger: ScrollStrategyTrigger, viewport: CdkVirtualScrollViewport, needsScroll = false){
+    if(!viewport.getViewportSize()) return;
+
+    const rowHeightChangeEvent = this.$rowHeightChange();
+    const rowHeight = rowHeightChangeEvent.curr;
+    const rowHeightAdjustment = trigger === 'row height' ? rowHeightChangeEvent.curr / rowHeightChangeEvent.previous : 1;
+
+    const amountOfRows = Math.ceil((viewport.getViewportSize() - this.$headerHeight()) / rowHeight);
+    const f = viewport.measureScrollOffset();
+    const offset = viewport.measureScrollOffset() * rowHeightAdjustment;
+
+    const buffer = 35 + Math.round((40 - rowHeight) / 10);
+    const skip = Math.round(offset / rowHeight);
+    const index = skip % 2 === 0 ? skip : skip - 1;
+    const start = Math.max(0, index - buffer);
+    const end = Math.min(this.$dataLength(), index + amountOfRows + buffer);
+
+    if(start > this.$dataLength()){
+      this.viewport().scrollToOffset(0)
+    }
+    else if(f !== offset){
+      if(offset < f) viewport.scrollToOffset(offset);
+      else setTimeout(() => {
+        viewport.scrollToOffset(offset)
+      }, 0);
+    }
+    if(this.$currentRange().start === start && this.$currentRange().end === end){
+      return;
+    }
+    this.$currentRange.set({ start, end });
+    viewport.setRenderedContentOffset(rowHeight * start);
+    this.dataStore.patchState({ virtualScrollOffset: offset });
+    viewport.setRenderedRange({ start, end });
+
+    this.indexChange.next(index);
+  }
+
+  attach(viewport: CdkVirtualScrollViewport): void {}
+  onDataLengthChanged(): void {}
+  detach(): void {}
+  onContentRendered(): void {}
+  onRenderedOffsetChanged(): void {}
+  scrollToIndex(index: number, behavior: ScrollBehavior): void {}
+}
+
+type ScrollStrategyTrigger = 'scroll' | 'data length' | 'header height' | 'row height';

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/meta-data';
+
+@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.sortLogic?.sortBy) && !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,115 @@
+@let dirty = $dirty();
+@let sorted = $sorted();
+@let notSorted = $notSorted();
+
+<!-- Menu Trigger -->
+<span matTooltip="Sort">
+  <button color="primary" 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" stop-propagation
+      [class.apply-border]="dirty" [disabled]="!dirty"
+      (click)="apply()">
+        Apply @if (dirty) { Unsaved Changes }
+    </button>
+  </div>
+
+  <!-- Default Sorting Text -->
+  @if (!sorted.length)
+  {
+    <div class="tip" >
+      Sorting List
+    </div>
+  }
+
+  <!-- Sorted Menu List -->
+  <div #sortedGroup="cdkDropList"
+    class="list"
+    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="up-down-icon" [class]="sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'">
+              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="up-down-icon" [class]="sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'">
+                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 #notSortedGroup="cdkDropList"
+    class="list"
+    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>