@taon-dev/ui 21.0.13 → 21.0.15

package/ts-source/websql-code/taon-datatable/taon-datatable.component.ts

@@ -0,0 +1,338 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside @taon-dev/ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, ElementRef, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild, inject, } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatSelectModule } from '@angular/material/select';
+import { MtxGridColumn, MtxGridModule } from '@ng-matero/extensions/grid';
+import { getDefaultModel } from 'ng2-rest/websql';
+import { BehaviorSubject, Observable, Subject, catchError, debounceTime, distinctUntilChanged, finalize, from, map, of, startWith, switchMap, tap, } from 'rxjs';
+import { Symbols as TaonSymbols, TaonBaseCrudController, TaonBaseEntity, TaonPaginationSort, TaonPaginationQuery, ClassHelpers, } from 'taon/websql';
+import { _, json5 } from 'tnp-core/websql';
+const defaultColumns: MtxGridColumn[] = [
+    {
+        header: 'ID',
+        field: 'id',
+    },
+    {
+        header: 'NAME',
+        field: 'name',
+    },
+];
+type SearchMode = 'simple' | 'advanced';
+@Component({
+    selector: 'taon-datatable',
+    standalone: true,
+    imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatPaginatorModule,
+        MatSelectModule,
+        MtxGridModule,
+    ],
+    templateUrl: './taon-datatable.component.html',
+    styleUrls: ['./taon-datatable.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TaonDatatableComponent implements OnInit {
+    private readonly cdr = inject(ChangeDetectorRef);
+    private readonly destroyRef = inject(DestroyRef);
+    @Input()
+    pageNumber = 1;
+    @Input()
+    pageSize = 10;
+    @Input()
+    pageSizeOptions: number[] = [5, 10, 20, 50, 100];
+    @Input()
+    allowedColumns: string[] = [];
+    @Input()
+    expansionTemplate?: TemplateRef<any>;
+    @Input()
+    entityCrudController?: TaonBaseCrudController<any>;
+    @Input()
+    columns: MtxGridColumn[] = defaultColumns;
+    @Input()
+    hideSearch = false;
+    @Input()
+    hideAddButton = false;
+    @Input()
+    safe = false;
+    @Input()
+    searchMode: SearchMode = 'advanced';
+    @Input()
+    callQueryMethod?: string;
+    private _data?: any[];
+    @Input()
+    set data(value: any[] | undefined | null) {
+        this._data = value ?? undefined;
+        if (this._data) {
+            this.pageNumber = 1;
+            this.reload();
+        }
+    }
+    get data(): any[] | undefined {
+        return this._data;
+    }
+    get offlineMode(): boolean {
+        return this.data !== undefined;
+    }
+    @Output()
+    readonly expansionChange = new EventEmitter<any>();
+    @Output()
+    readonly addingItem = new EventEmitter<void>();
+    rows: any[] = [];
+    totalElements = 0;
+    isLoading = false;
+    expandable = false;
+    @Input()
+    showPaginator: boolean;
+    advancedSearchOpened = false;
+    searchValue = '';
+    columnFilters: Record<string, string> = {};
+    sort?: TaonPaginationSort;
+    private readonly reload$ = new BehaviorSubject<void>(undefined);
+    private readonly searchChange$ = new Subject<string>();
+    readonly data$: Observable<any[]> = this.reload$.pipe(switchMap(() => this.loadData()));
+    expandedRows = new Set<any>();
+    get entity(): typeof TaonBaseEntity | undefined {
+        return this.entityCrudController?.entityClassResolveFn();
+    }
+    get filterableColumns(): MtxGridColumn[] {
+        return this.columns.filter(column => Boolean(column.field));
+    }
+    onExpansionChange(event: any) {
+        if (event.expanded) {
+            this.expandedRows.add(event.data);
+        }
+        else {
+            this.expandedRows.delete(event.data);
+        }
+        this.expansionChange.emit(event);
+    }
+    isExpanded(row: any): boolean {
+        return this.expandedRows.has(row);
+    }
+    ngOnInit(): void {
+        this.prepareColumns();
+        this.expandable = Boolean(this.expansionTemplate);
+        this.showPaginator = _.isBoolean(this.showPaginator)
+            ? this.showPaginator
+            : Boolean(this.entity) || this.offlineMode;
+        this.searchChange$
+            .pipe(debounceTime(400), distinctUntilChanged(), tap(search => {
+            this.searchValue = search;
+            this.pageNumber = 1;
+            this.reload();
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+        this.data$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(rows => {
+            this.rows = rows;
+            this.cdr.markForCheck();
+        });
+    }
+    searchChanged(value: string): void {
+        this.searchChange$.next(value);
+    }
+    clearSearch(): void {
+        this.searchValue = '';
+        this.columnFilters = {};
+        this.pageNumber = 1;
+        this.reload();
+    }
+    applyAdvancedFilters(): void {
+        this.pageNumber = 1;
+        this.reload();
+    }
+    toggleAdvancedSearch(): void {
+        this.advancedSearchOpened = !this.advancedSearchOpened;
+    }
+    getNextPage(event: PageEvent): void {
+        this.pageNumber = event.pageIndex + 1;
+        this.pageSize = event.pageSize;
+        this.reload();
+    }
+    sortChanged(event: any): void {
+        const field = event?.active ?? event?.field;
+        const direction = event?.direction ?? '';
+        this.sort = {
+            field,
+            direction,
+        };
+        this.pageNumber = 1;
+        this.reload();
+    }
+    reload(): void {
+        this.reload$.next();
+    }
+    private getFieldValue(row: any, field: string): unknown {
+        return field.split('.').reduce((value, key) => value?.[key], row);
+    }
+    private loadOfflineData(): any[] {
+        let rows = [...(this.data ?? [])];
+        const search = this.searchValue.trim().toLowerCase();
+        if (search) {
+            rows = rows.filter(row => this.columns.some(column => {
+                if (!column.field) {
+                    return false;
+                }
+                const value = this.getFieldValue(row, String(column.field));
+                return String(value ?? '')
+                    .toLowerCase()
+                    .includes(search);
+            }));
+        }
+        const filters = this.cleanFilters(this.columnFilters);
+        for (const [field, filterValue] of Object.entries(filters)) {
+            const normalizedFilter = filterValue.toLowerCase();
+            rows = rows.filter(row => {
+                const value = this.getFieldValue(row, field);
+                return String(value ?? '')
+                    .toLowerCase()
+                    .includes(normalizedFilter);
+            });
+        }
+        if (this.sort?.field && this.sort.direction) {
+            const field = String(this.sort.field);
+            const direction = this.sort.direction === 'desc' ? -1 : 1;
+            rows.sort((a, b) => {
+                const aValue = this.getFieldValue(a, field);
+                const bValue = this.getFieldValue(b, field);
+                if (aValue === bValue) {
+                    return 0;
+                }
+                if (aValue === undefined || aValue === null) {
+                    return -1 * direction;
+                }
+                if (bValue === undefined || bValue === null) {
+                    return 1 * direction;
+                }
+                if (typeof aValue === 'number' && typeof bValue === 'number') {
+                    return (aValue - bValue) * direction;
+                }
+                return (String(aValue).localeCompare(String(bValue), undefined, {
+                    numeric: true,
+                    sensitivity: 'base',
+                }) * direction);
+            });
+        }
+        this.totalElements = rows.length;
+        const start = (this.pageNumber - 1) * this.pageSize;
+        const end = start + this.pageSize;
+        return this.prepareRows(rows.slice(start, end));
+    }
+    private loadData(): Observable<any[]> {
+        if (this.offlineMode) {
+            return of(this.loadOfflineData());
+        }
+        if (!this.entity || !this.entityCrudController) {
+            this.totalElements = 0;
+            return of([]);
+        }
+        this.isLoading = true;
+        this.cdr.markForCheck();
+        const query: TaonPaginationQuery = {
+            pageNumber: this.pageNumber,
+            pageSize: this.pageSize,
+            search: this.searchValue,
+            filters: this.cleanFilters(this.columnFilters),
+            sort: this.sort,
+            callQueryMethod: this.callQueryMethod as any,
+        };
+        if (!this.safe && !this.entityCrudController.paginationQuery(query)) {
+            throw new Error(`Please enable paginationQuery() method in your
+       controller ${ClassHelpers.getName(this.entityCrudController)}
+
+       @Controller({ allowedMethods: ['paginationQuery'] })
+       class ${ClassHelpers.getName(this.entityCrudController)} ..
+      `);
+        }
+        if (this.safe && !this.entityCrudController.paginationQuerySafe(query)) {
+            throw new Error(`Please enable paginationQuerySafe() method in your controller
+       ${ClassHelpers.getName(this.entityCrudController)}
+
+       @Controller({ allowedMethods: ['paginationQuerySafe'] })
+       class ${ClassHelpers.getName(this.entityCrudController)} ..
+      `);
+        }
+        return from((this.safe
+            ? this.entityCrudController.paginationQuerySafe
+            : this.entityCrudController.paginationQuery)(query).request()
+            .observable).pipe(tap(response => {
+            this.totalElements =
+                Number(response.headers.get(TaonSymbols.old.X_TOTAL_COUNT)) || 0;
+        }), map(response => this.prepareRows(response.body.json)), catchError(error => {
+            console.error(`[taon-datatable] Unable to load data from ` +
+                `${ClassHelpers.getName(this.entityCrudController)} ${this.safe ? 'paginationQuerySafe' : 'paginationQuery'}`, error);
+            return of([]);
+        }), finalize(() => {
+            this.isLoading = false;
+            this.cdr.markForCheck();
+        }));
+    }
+    private cleanFilters(filters: Record<string, string>): Record<string, string> {
+        return Object.fromEntries(Object.entries(filters)
+            .filter(([, value]) => value !== undefined &&
+            value !== null &&
+            String(value).trim() !== '')
+            .map(([key, value]) => [key, String(value).trim()]));
+    }
+    private prepareRows(rows: any[]): any[] {
+        return rows.map(row => {
+            return row;
+        });
+    }
+    private prepareColumns(): void {
+        const entityClass = this.entity;
+        if (!entityClass) {
+            return;
+        }
+        const usingDefaultColumns = _.isEqual(this.columns, defaultColumns);
+        if (!usingDefaultColumns) {
+            return;
+        }
+        try {
+            const props = Object.keys(getDefaultModel(entityClass as Function) || {});
+            let columns = props
+                .filter(prop => this.allowedColumns.length > 0
+                ? this.allowedColumns.includes(prop)
+                : true)
+                .map(prop => ({
+                header: _.upperCase(prop),
+                field: prop,
+            }) as MtxGridColumn);
+            const extra = this.allowedColumns.filter(field => !props.includes(field));
+            columns = [
+                ...columns,
+                ...extra.map(field => ({
+                    header: _.upperCase(field),
+                    field,
+                }) as MtxGridColumn),
+            ];
+            this.columns = columns;
+        }
+        catch (error) {
+            console.error('[taon-datatable] Unable to generate columns', error);
+        }
+    }
+}

package/ts-source/websql-code/taon-datatable/taon-datatable.models.ts

@@ -0,0 +1,13 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside @taon-dev/ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+export namespace TaonDatatableModels { }

package/ts-source/websql-code/taon-datatable/taon-datatable.routes.ts

@@ -0,0 +1,21 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside @taon-dev/ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+import { Routes } from '@angular/router';
+import { adminLazyRoute } from '../index';
+export const TaonDatatableRoutes: Routes = [
+    {
+        path: '',
+        loadComponent: () => import('./taon-datatable.component').then(m => m.TaonDatatableComponent),
+        children: [],
+    },
+];

package/ts-source/websql-code/taon-draggable-button-panel/index.ts

@@ -0,0 +1,13 @@
+// @ts-nocheck
+/* ============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside @taon-dev/ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+export * from './taon-draggable-button-panel.component';

package/ts-source/websql-code/taon-draggable-button-panel/taon-draggable-button-panel.component.html

@@ -0,0 +1,121 @@
+<!--
+==============================================================================
+
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside @taon-dev/ui project repository
+  for watch development of third party modules like this.
+  
+==============================================================================
+-->
+
+@if (currentState() === State.CLICKABLE_BUTTON || !autoHideIcon) {
+  @if (iconTemplate) {
+    <ng-container [ngTemplateOutlet]="iconTemplate" />
+  } @else {
+    <button
+      class="taon-admin-panel-toogle-open-button"
+      [class.taon-admin-panel-toogle-button-dimmer-opacity]="
+        effectiveState() !== State.CLICKABLE_BUTTON
+      "
+      mat-icon-button
+      type="button"
+      [matTooltip]="title"
+      (click)="toggle()">
+      <mat-icon>{{ buttonIcon }}</mat-icon>
+    </button>
+  }
+}
+
+<section
+  cdkDrag
+  [hidden]="currentState() === State.CLICKABLE_BUTTON"
+  [cdkDragDisabled]="!isDraggingEnabled()"
+  class="taon-draggable-panel"
+  [class.taon-window]="effectiveState() === State.WINDOW"
+  [class.taon-window-full]="effectiveState() !== State.WINDOW"
+  [class.taon-fullscreen]="
+    effectiveState() === State.FULL_SCREEN_DRAGGABLE ||
+    effectiveState() === State.FULL_SCREEN_LOCKED
+  ">
+  <header
+    cdkDragHandle
+    (dblclick)="toogleFullscreen($event)"
+    class="taon-window-bar">
+    
+    <div class="flex min-w-0 flex-1 items-center gap-2">
+      <mat-icon class="text-gray-500"> admin_panel_settings </mat-icon>
+
+      <span class="truncate font-medium">
+        {{ title }}
+      </span>
+    </div>
+
+    
+    <div class="flex min-w-0 items-center justify-center">
+      @if (headerCenterTemplate) {
+        <ng-container [ngTemplateOutlet]="headerCenterTemplate" />
+      }
+    </div>
+
+    
+    <div class="flex shrink-0 items-center">
+      
+      @if (!forceFullScreen()) {
+        @if (currentState() !== State.WINDOW) {
+          <button
+            mat-icon-button
+            type="button"
+            matTooltip="Window mode"
+            (click)="windowMode()">
+            <mat-icon>filter_none</mat-icon>
+          </button>
+        }
+
+        @if (currentState() === State.WINDOW) {
+          <button
+            mat-icon-button
+            type="button"
+            matTooltip="Full screen"
+            (click)="fullScreenDraggable()">
+            <mat-icon>fullscreen</mat-icon>
+          </button>
+        }
+
+        @if (currentState() !== State.FULL_SCREEN_LOCKED) {
+          <button
+            mat-icon-button
+            type="button"
+            matTooltip="Lock full screen"
+            (click)="lockFullScreen()">
+            <mat-icon>lock_open</mat-icon>
+          </button>
+        } @else {
+          <button
+            mat-icon-button
+            type="button"
+            matTooltip="Unlock"
+            (click)="fullScreenDraggable()">
+            <mat-icon>lock</mat-icon>
+          </button>
+        }
+      }
+
+      
+      <button
+        mat-icon-button
+        type="button"
+        matTooltip="Close admin panel"
+        (click)="returnToButton()">
+        <mat-icon>close</mat-icon>
+      </button>
+    </div>
+    
+  </header>
+
+  <div class="min-h-0 flex-1 overflow-hidden">
+    <ng-content />
+  </div>
+</section>

package/ts-source/websql-code/taon-draggable-button-panel/taon-draggable-button-panel.component.scss

@@ -0,0 +1,75 @@
+/* ============================================================================
+ 
+- TAON READONLY SOURCE
+- DO NOT MODIFY THIS FILE.
+- Changes may be overwritten.
+- Use command: taon build:lib:watch
+  inside @taon-dev/ui project repository
+  for watch development of third party modules like this.
+  
+ * ========================================================================== */
+
+:host {
+  display: contents;
+}
+
+.taon-admin-panel-toogle-button-dimmer-opacity {
+  opacity: 0.6;
+}
+
+.taon-draggable-panel {
+  position: fixed;
+
+  display: flex;
+  flex-direction: column;
+
+  min-width: 320px;
+  min-height: 240px;
+
+  overflow: hidden;
+
+  background: white;
+
+  border: 1px solid #e5e7eb;
+
+  box-shadow: 0 20px 50px rgb(0 0 0 / 15%);
+
+  z-index: 1000;
+}
+
+.taon-window {
+  width: 70vw;
+  height: 70vh;
+
+  left: 15vw;
+  top: 25vh;
+
+  border-radius: 6px;
+}
+
+.taon-fullscreen {
+  width: 100vw;
+  height: 100dvh;
+
+  left: 0;
+  top: 0;
+
+  border-radius: 0;
+}
+
+.taon-window-bar {
+  height: 48px;
+
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+
+  flex-shrink: 0;
+  padding-left: 12px;
+
+  border-bottom: 1px solid #e5e7eb;
+  background: #fafafa;
+
+  user-select: none;
+  cursor: move;
+}