@one-paragon/angular-utilities 2.8.3 → 2.8.4

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/meta-data';
+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);
+  }
+}
+
+

package/src/table-builder/components/table-container/table-container.component.html

@@ -0,0 +1,94 @@
+@let tableId = $tableId();
+@let tableSettings = state.$tableSettings();
+
+<ng-content select="[before]" />
+<ng-container multiSort>
+  <div class="tb-header-wrapper" [id]="headerId">
+    <div class="title">
+      @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed)
+      {
+        <ng-content select=".tb-header-title"/>
+        @if (tableSettings.title)
+        {
+          @switch (tableSettings.title.level)
+          {
+            @case (1) { <h1 class="tb-container-title" [style]="tableSettings.title.styles">{{tableSettings.title.text}}</h1>}
+            @case (2) { <h2 class="tb-container-title" [style]="tableSettings.title.styles">{{tableSettings.title.text}}</h2>}
+            @case (4) { <h4 class="tb-container-title" [style]="tableSettings.title.styles">{{tableSettings.title.text}}</h4>}
+            @case (5) { <h5 class="tb-container-title" [style]="tableSettings.title.styles">{{tableSettings.title.text}}</h5>}
+            @case (6) { <h6 class="tb-container-title" [style]="tableSettings.title.styles">{{tableSettings.title.text}}</h6>}
+            @default { <h3 class="tb-container-title" [style]="tableSettings.title.styles">{{tableSettings.title.text}}</h3>}
+          }
+        }
+      }
+    </div>
+    @if(state.$groupByData().length)
+    {
+      <group-by-list />
+    }
+    <div class="flx-row-end">
+      <lib-filter-list />
+      @if (!tableSettings.hideHeader)
+      {
+        @if (!$collapsedHeader())
+        {
+          <ng-container *ngTemplateOutlet="headerMenu"/>
+          <button mat-icon-button color='primary' [matMenuTriggerFor]="mainMenu">
+            <mat-icon>more_vert</mat-icon>
+          </button>
+          <mat-menu #mainMenu='matMenu' [xPosition]="'before'">
+            <lib-table-header-menu #l/>
+          </mat-menu>
+
+        }
+        @else
+        {
+          <mat-icon color="primary" class="flat-menu-button pointer" [matMenuTriggerFor]="mainMenu">more_horiz</mat-icon>
+          <mat-menu #mainMenu='matMenu'>
+            <div class="collapsed-head-row">
+              <ng-container *ngTemplateOutlet="headerMenu; injector menuInjector"/>
+            </div>
+            <lib-table-header-menu />
+          </mat-menu>
+        }
+        <mat-icon class="collapse-icon header" [matTooltip]="$collapsedHeader() ? 'expand' : 'collapse'"
+          (click)="state.toggleCollapseHeader()">
+          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}
+        </mat-icon>
+      }
+
+    </div>
+  </div>
+
+  @if($useVirtual())
+  {
+    <tb-virtual-scroll-container class="scrollable">
+      <tb-generic-table [rows]="$customRows()" [data]="$data()!" [displayData]="$filteredSortedAndGrouped()?.displayData || []"
+        [columnInfos]='$myColumns()' [trackBy]="$trackBy()" [dataSource]="dataSource" (selection)='_selection$.next($event)' />
+    </tb-virtual-scroll-container>
+  }
+  @else
+  {
+    <tb-generic-table [rows]="$customRows()" [data]="$data()!" [displayData]="$filteredSortedAndGrouped()?.displayData || []"
+      [columnInfos]='$myColumns()' [trackBy]="$trackBy()" [dataSource]="dataSource"  (selection)='_selection$.next($event)' />
+  }
+  @if(tableSettings.usePaginator)
+  {
+    <div #paginatorWrapper class="paginator tb-paginator-wrapper">
+      <ng-content select=".tb-paginator-row" />
+      <tb-paginator #tbPaginator />
+
+      <mat-icon class="collapse-icon footer" [matTooltip]="$collapsedFooter() ? 'expand' : 'collapse'"
+        (click)="state.toggleCollapseFooter()">
+        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}
+      </mat-icon>
+    </div>
+  }
+</ng-container>
+
+<ng-template #headerMenu>
+  @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}
+  @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}
+  @if (!tableSettings.hideSort) {<tb-sort-menu/>}
+  @if (!!tableId && !$collapsedHeader()) {<tb-profiles-menu [tableId]="tableId"/>}
+</ng-template>

package/src/table-builder/components/table-container/table-container.component.scss

@@ -0,0 +1,60 @@
+.tb-header-wrapper{
+  display: flex;
+  flex-direction: row;
+  width:100%;
+}
+
+
+.flx-row-end{
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  margin-left: auto;
+}
+
+.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;
+}
+.collapsed-head-row{
+  display: flex;
+  justify-content: space-evenly;
+}
+::ng-deep tb-generic-table {
+  .mat-mdc-row:nth-child(odd):not(.no-stripe) {
+    background-color: var(--tb-odd-row-background-color, #cdeefe);
+  }
+}
+.tb-container-title{
+  padding-left: var(--tb-container-title-padding-left, 10px);
+  margin: var(--tb-container-title-margin, 0);
+}