@one-paragon/angular-utilities 2.8.2 → 2.8.4

package/src/table-builder/components/group-by-list/group-by-list.component.html

@@ -0,0 +1,21 @@
+<span class="tb-group-label">Group By:</span>
+<mat-chip-set>
+  @for (groupBy of $groups(); track groupBy.key)
+  {
+    @if($index > 0)
+    {
+      <mat-icon class="nested-arrow">arrow_right</mat-icon>
+    }
+    <mat-chip (removed)="tableStore.removeGroupByKey(groupBy.key)">
+      <span class="chip-c">
+        {{groupBy.name | spaceCase}}
+        <mat-icon stop-propagation class="sort-icon" (click)="tableStore.cycleGroupBySortDirection(groupBy.key)">
+          @if (groupBy.sort === 'asc'){ arrow_upward }
+          @else if (groupBy.sort === 'desc') { arrow_downward } 
+          @else { swap_vert }
+        </mat-icon>
+      </span>
+      <mat-icon matChipRemove>cancel</mat-icon>
+    </mat-chip>
+  }
+</mat-chip-set>

package/src/table-builder/components/group-by-list/group-by-list.component.spec.ts

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

package/src/table-builder/components/group-by-list/group-by-list.component.ts

@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
+import { TableStore } from '../../classes/table-store';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { SpaceCasePipe, StopPropagationDirective } from '../../../utilities';
+
+@Component({
+  selector: 'group-by-list',
+  templateUrl: './group-by-list.component.html',
+  styleUrls: ['./group-by-list.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    MatChipsModule, MatIconModule, SpaceCasePipe, StopPropagationDirective
+  ]
+})
+export class GroupByListComponent {
+  tableStore = inject(TableStore);
+  $groups = computed(() => {
+    const dict = this.tableStore.$metaData();
+    return this.tableStore.$groupByData().map(gbk => ({
+      key: gbk.key,
+      name: dict[gbk.key].displayName || gbk.key,
+      sort: this.tableStore.getGroupBySortDirection(gbk.key)(),
+    }))
+  })
+}

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

@@ -0,0 +1,22 @@
+.inline{
+  display: inline-block;
+}
+.small-button {
+  height: 18px;
+  width: 18px;
+  font-size: 18px;
+  padding: 0;
+  margin: 0;
+  ::ng-deep * {
+    line-height: initial;
+    font-size: initial;
+    height: 18px;
+    width: 18px;
+    font-size: 18px;
+    bottom: initial;
+
+  }
+}
+button{
+  cursor: pointer;
+}

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

@@ -0,0 +1,38 @@
+<div class=inline>
+  @for (val of value; track $index)
+  {
+    <div>
+      @if($type() === FieldType.Number || $type() === FieldType.Currency)
+      {
+        <input type="number" [ngModel]="val"
+          [readonly]="$index + 1 < value.length" [ngModelOptions]="{standalone:true}"
+          [autoFocus]="$index === value.length - 1" (ngModelChange)="onValueChange($index, $event)"/>
+      }
+      @else if($type() === FieldType.Date)
+      {
+        <input matInput name="filterValue" [ngModel]="val" [matDatepicker]="cal"
+          [readonly]="$index + 1 < value.length" [ngModelOptions]="{standalone:true}"
+          [autoFocus]="$index === value.length - 1" (dateChange)="onValueChange($index, $event.value)"/>
+        <mat-datepicker-toggle class="small-button date-toggle" matSuffix preventEnter [for]="cal" />
+        <mat-datepicker #cal />
+      }
+      @else if($type() === FieldType.DateTime)
+      {
+        <input type="datetime-local" preventEnter [ngModel]="val"
+          [readonly]="$index + 1 < value.length" [ngModelOptions]="{standalone:true}"
+          [autoFocus]="$index === value.length - 1" (ngModelChange)="onValueChange($index, $event)"/>
+      }
+      @else
+      {
+        <input type="string"
+          [ngModel]="val" [readonly]="$index + 1 < value.length" [ngModelOptions]="{standalone:true}"
+          [autoFocus]="$index === value.length - 1" (ngModelChange)="onValueChange($index ,$event)" />
+      }
+    </div>
+    <button [disabled]="value.length <= 1" (click)="removeInput($index)">-</button>
+    @if ($index === value.length - 1)
+    {
+      <button [disabled]="val == undefined || val === ''" (click)="addInput()">+</button>
+    }
+  }
+</div>

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

@@ -0,0 +1,66 @@
+import { ChangeDetectionStrategy, Component, ChangeDetectorRef, inject, input } from '@angular/core';
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { FieldType } from '../../interfaces/meta-data';
+import { AutoFocusDirective } from '../../../utilities';
+import { MatDatepickerModule } from "@angular/material/datepicker";
+
+@Component({
+  selector: 'lib-in-filter',
+  templateUrl: './in-filter.component.html',
+  styleUrl: './in-filter.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: InFilterComponent,
+    multi: true
+  }],
+  imports: [
+    FormsModule, AutoFocusDirective, MatDatepickerModule
+  ]
+})
+export class InFilterComponent implements ControlValueAccessor {
+  private ref = inject(ChangeDetectorRef);
+
+  FieldType = FieldType;
+  $type = input.required<FieldType>({ alias: 'type' })
+  value: (string | number | undefined)[] = [undefined];
+
+  constructor() {
+    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/src/table-builder/components/index.ts

@@ -0,0 +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.component';
+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,78 @@
+<ng-template #link  let-value='value' let-element='element' let-additional="additional" let-styles="innerStyles">
+  @let link = additional.link | func : element;
+  @if(link)
+  {
+    <tb-link-column [element]="element" [additional]="additional" [link]="$any(link)">
+      <span [styler]="styles" [element]="element">{{value}}</span>
+    </tb-link-column>
+  }
+  @else
+  {
+    <span [styler]="styles" [element]="element">{{value}}</span>
+  }
+</ng-template>
+
+<ng-template #routerLink  let-value='value' let-element='element' let-additional="additional" let-styles="innerStyles">
+  @let link = additional.link | func : element;
+  @if(link)
+  {
+    <tb-router-link-column [element]="element" [additional]="additional" [link]="$any(link)">
+      <span [styler]="styles" [element]="element">{{value}}</span>
+    </tb-router-link-column>
+  }
+  @else
+  {
+    <span [styler]="styles" [element]="element">{{value}}</span>
+  }
+
+</ng-template>
+
+<ng-template #linkWithIcon  let-value='value' let-element='element' let-additional="additional" let-styles="innerStyles">
+  @let link = additional.link | func : element;
+  @if(link)
+  {
+    <tb-link-column [element]="element" [additional]="additional"  [link]="$any(link)">
+      <mat-icon [styler]="styles" [element]="element">{{ value}}</mat-icon>
+    </tb-link-column>
+  }
+  @else
+  {
+    <span [styler]="styles" [element]="element">{{value}}</span>
+  }
+</ng-template>
+
+<ng-template #routerLinkWithIcon  let-value='value' let-element='element' let-additional="additional" let-styles="innerStyles">
+  @let link = additional.link | func : element;
+  @if(link)
+  {
+    <tb-link-column [element]="element" [additional]="additional"  [link]="$any(link)">
+      <mat-icon [styler]="styles" [element]="element">{{ value}}</mat-icon>
+    </tb-link-column>
+  }
+  @else
+  {
+    <mat-icon [styler]="styles" [element]="element">{{ value}}</mat-icon>
+  }
+</ng-template>
+
+<ng-template #imageUrl  let-value='value'>
+  <span>
+    <img height="75px" width="75px" [src]="value" />
+  </span>
+</ng-template>
+
+<ng-template #arrayNewLine let-value='value' let-element='element' let-additional="additional" let-styles="innerStyles">
+  <tb-new-line-array-column [value]='value' [additional]='additional' [styler]="styles" [element]="element"/>
+</ng-template>
+
+<ng-template #arrayComma let-value='value' let-element='element' let-additional="additional" let-styles="innerStyles">
+  <tb-comma-array-column [value]='value' [additional]='additional' [styler]="styles" [element]="element"/>
+</ng-template>
+
+<ng-template #default let-value='value' let-element='element' let-styles="innerStyles">
+  <span [styler]="styles" [element]="element">{{value}}</span>
+</ng-template>
+
+<ng-template #defaultWithIcon  let-value='value' let-element='element' let-styles="innerStyles">
+  <mat-icon [styler]="styles" [element]="element">{{value}}</mat-icon>
+</ng-template>

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

@@ -0,0 +1,28 @@
+import { Component, TemplateRef, viewChild, ChangeDetectionStrategy } from "@angular/core";
+import { LinkColumnComponent, RouterLinkColumnComponent } from "../link-column.component";
+import { ArrayCommaColumnComponent, ArrayNewLineColumnComponent } from "../array-column.component";
+import { MatIcon } from "@angular/material/icon";
+import { StylerDirective } from "../../../utilities/directives/styler";
+import { FunctionPipe } from "../../../utilities";
+
+@Component({
+  selector: 'initialization',
+  templateUrl: './initialization.component.html',
+  imports: [
+    LinkColumnComponent, ArrayCommaColumnComponent, MatIcon,
+    RouterLinkColumnComponent, ArrayNewLineColumnComponent,
+    StylerDirective, FunctionPipe
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class InitializationComponent {
+  $linkTemplate = viewChild.required<TemplateRef<any>>('link');
+  $routerLinkTemplate = viewChild.required<TemplateRef<any>>('routerLink');
+  $linkWithIconTemplate = viewChild.required<TemplateRef<any>>('linkWithIcon');
+  $routerLinkWithIconTemplate = viewChild.required<TemplateRef<any>>('routerLinkWithIcon');
+  $imageUrlTemplate = viewChild.required<TemplateRef<any>>('imageUrl');
+  $arrayNewLineTemplate = viewChild.required<TemplateRef<any>>('arrayNewLine');
+  $arrayCommaTemplate = viewChild.required<TemplateRef<any>>('arrayComma');
+  $defaultTemplate = viewChild.required<TemplateRef<any>>('default');
+  $defaultWithIcon = viewChild.required<TemplateRef<any>>('defaultWithIcon');
+}

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

@@ -0,0 +1,42 @@
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { LinkInfo } from "../services/link-creator.service";
+
+@Component({
+  selector: "tb-router-link-column",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    RouterModule
+  ],
+  template: `
+  <a target="{{additional().target}}"
+    [routerLink]=" [link()]"
+    [queryParams]="queryParams()"
+    [fragment]="routerLinkOptions().fragment"
+    [preserveFragment]="routerLinkOptions().preserveFragment"
+    [queryParamsHandling]="routerLinkOptions().queryParamsHandling"
+  >
+    <ng-content></ng-content>
+  </a>
+  `
+}) export class RouterLinkColumnComponent {
+  additional = input.required<LinkInfo>();
+  element = input.required<any>();
+  queryParams = computed(() => this.additional().routerLinkOptions!.queryParams(this.element()));
+  routerLinkOptions = computed(() => this.additional().routerLinkOptions!);
+  link = input.required<string>();
+}
+
+@Component({
+  selector: "tb-link-column",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+  <a target="{{additional().target}}" href="{{link()}}">
+    <ng-content></ng-content>
+  </a>
+  `
+}) export class LinkColumnComponent {
+  element = input.required<any>();
+  additional = input.required<LinkInfo>();
+  link = input.required<string>();
+}

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,32 @@
+@let currentFilterType = $currentFilterType();
+@let info = $info();
+
+@if(currentFilterType !== FilterType.NumberBetween && currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In)
+{
+  <mat-form-field class="my-filter">
+    <input matInput name="filterValue" type="number" [ngModel]="info.filterValue"/>
+  </mat-form-field>
+}
+@if(currentFilterType === FilterType.NumberBetween)
+{
+  <ng-container ngModelGroup="filterValue"  >
+    <mat-form-field class="my-filter">
+      <input matInput name="Start" placeholder="Start" type="number" [ngModel]="info.filterValue?.Start"/>
+    </mat-form-field>
+    <mat-form-field class="my-filter">
+      <input matInput name="End" placeholder="End" type="number" [ngModel]="info.filterValue?.End"/>
+    </mat-form-field>
+  </ng-container>
+}
+
+@if(currentFilterType === FilterType.In)
+{
+  @if($allValuesInMeta())
+  {
+    <tb-in-list-filter name="filterValue" [key]="info.key" [values]="info.filterValue" [(ngModel)]="info.filterValue" />
+  }
+  @else
+  {
+    <lib-in-filter name="filterValue" [type]="FieldType.Date" [(ngModel)]="info.filterValue" />
+  }
+}

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,34 @@
+import { Component, ChangeDetectionStrategy, input, inject, computed } from '@angular/core';
+import { FilterType } from '../../enums/filterTypes';
+import { ControlContainer, FormsModule, NgForm } from '@angular/forms';
+import { PartialFilter } from '../../classes/filter-info';
+import { AllValueOptions, FieldType } from '../../interfaces/meta-data';
+import { MatInputModule } from '@angular/material/input';
+import { InFilterComponent } from '../in-filter/in-filter.component';
+import { TableStore } from '../../classes/table-store';
+import { InListFilterComponent } from '../filter/in-list/in-list-filter.component';
+
+
+@Component({
+  selector: 'tb-number-filter',
+  templateUrl: './number-filter.component.html',
+  styleUrl: './number-filter.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
+  imports: [
+    MatInputModule, FormsModule, InFilterComponent, InListFilterComponent
+  ]
+})
+export class NumberFilterComponent {
+  FilterType = FilterType;
+  FieldType = FieldType;
+  $currentFilterType = input.required<FilterType>({ alias: 'currentFilterType' });
+  $info = input.required<PartialFilter>({ alias: 'info' });
+
+  private state = inject(TableStore)
+  $metaData = computed(() => this.state.$getMetaData(this.$info()?.key)());
+  $allValuesInMeta = computed(() => {
+    const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
+    return filterable === 'all values' || (filterable as AllValueOptions)?.allValues === true;
+  });
+}

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

@@ -0,0 +1,77 @@
+@if(!$isMatMenuChild())
+{
+  <button #trigger="matMenuTrigger" color="primary" mat-icon-button [matMenuTriggerFor]="menu" [matTooltip]="'Profiles'">
+    <mat-icon color="primary">people</mat-icon>
+  </button>
+}
+<mat-menu #menu="matMenu" (closed)="addedKey.value = null; allProfilesPanelOpened.set(false); newProfilePanelOpened.set(false)">
+  @if(!!$currentProfile())
+  {
+    <div mat-menu-item mat-stroked-button [matTooltip]="'Save Profile'" (click)="saveState($currentProfile()!)">
+      <mat-icon color="primary">save</mat-icon>
+      <span>{{$currentProfile()}}</span>
+    </div>
+  }
+  @else
+  {
+    <div class="profile-line">
+      <button color="primary" class="first-in-line first-button" mat-stroked-button (click)="addState(defaultName, m.checked);">
+        <mat-icon class="save-for-default-icon button-save-icon" color="primary">save</mat-icon>
+        <span>Save as <span class="current-name">{{defaultName}}</span> </span>
+      </button>
+      <button stop-propagation mat-icon-button [matTooltip]="'Toggle Profile Being Created As Default'" (click)="m.toggle()" >
+        <mat-icon style="color: green;">{{m.checked ? 'star' : 'star_border'}}</mat-icon>
+      </button>
+      <mat-checkbox #m class="display-none" [checked]="true" />
+    </div>
+  }
+  @if (allProfilesPanelOpened()) {<hr class="divider"/>}
+  <div mat-menu-item stop-propagation [class]="{ hide: !$keys().length, 'all-profile-row': true }" (click)="allProfilesPanelOpened.set(!allProfilesPanelOpened())">
+    <div class="all-profiles">
+      <span>All Profiles</span>
+      <span class="arrow" [class]="`${(allProfilesPanelOpened() ? 'all-profile-arrow-close' : 'all-profile-arrow-open')} all-profile-arrow`"></span>
+    </div>
+  </div>
+  <div [class]="{ hide: !allProfilesPanelOpened(), panel: true }">
+    @for (key of $keys() ; track key)
+    {
+      <div class="profile-line" [class]="key === $currentProfile() ? 'current-in-list' : 'not-current-in-list'">
+        <button class="menu-item first-in-line" mat-stroked-button [matTooltip]="'Select Profile'" (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>
+          <span>{{key}}</span>
+        </button>
+        @if(key !== $defaultProfile())
+        {
+          <button stop-propagation mat-icon-button [matTooltip]="'Toggle Profile Being Default'" (click)="setDefault(key)">
+            <mat-icon style="color: green;">star_border</mat-icon>
+          </button>
+        }
+        @else
+        {
+          <button stop-propagation mat-icon-button [matTooltip]="'Toggle Profile Being Default'" (click)="unsetDefault()">
+            <mat-icon style="color: green;">star</mat-icon>
+          </button>
+        }
+        <button color="warn" class="last-in-line" stop-propagation mat-icon-button [matTooltip]="'Delete Profile'" (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>
+          <mat-icon color='warn'>delete_forever</mat-icon>
+        </button>
+      </div>
+    }
+    <hr class="divider"/>
+  </div>
+  <div class="add-new-profile-row" mat-menu-item stop-propagation (click)="newProfilePanelOpened.set(!newProfilePanelOpened()); addedKey.focus()">Add New Profile</div>
+  <div [class]="{ hide: !newProfilePanelOpened(), panel: true }" >
+    <div class="profile-line" stop-propagation>
+      <div class="new-name-input">
+        <i class="input-hint">Enter New Name</i>
+        <input #addedKey="matInput" matInput [name]="'key'" />
+      </div>
+      <button stop-propagation mat-icon-button [matTooltip]="'Toggle Profile Being Created As Default'" (click)="m2.toggle()" >
+        <mat-icon style="color: green;">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>
+      </button>
+      <mat-checkbox #m2 class="display-none" [ngModel]="!$defaultProfile()" />
+    </div>
+    <button class="add-button" color="primary" mat-raised-button [matTooltip]="'Create New Profile'" [disabled]="!addedKey.value" (click)="addState(addedKey.value, m2.checked); addedKey.value = null">
+      Add
+    </button>
+  </div>
+</mat-menu>