@taon-dev/ui 21.0.13 → 21.0.14

package/ts-source/browser-code/taon-confirm-dialog/taon-confirm-dialog.component.html

@@ -0,0 +1,42 @@
+<!--
+==============================================================================
+ TAON READONLY SOURCE
+ DO NOT MODIFY THIS FILE.
+ Changes may be overwritten.
+==============================================================================
+-->
+
+<div
+  class="flex min-w-[320px] max-w-[560px] flex-col gap-6 p-6 text-gray-900 dark:text-gray-100 sm:p-7">
+  
+  <h2 class="m-0 text-xl leading-snug font-medium sm:text-2xl">
+    {{ data.title }}
+  </h2>
+
+  
+  @if (data.message) {
+    <p
+      class="m-0 whitespace-pre-line text-base leading-relaxed text-gray-600 dark:text-gray-300 sm:text-lg">
+      {{ data.message }}
+    </p>
+  }
+
+  
+  <div class="flex flex-wrap items-center justify-end gap-3">
+    <button
+      mat-button
+      type="button"
+      (click)="cancel()">
+      {{ data.cancelText || 'Cancel' }}
+    </button>
+
+    <button
+      mat-flat-button
+      color="primary"
+      type="button"
+      class="!rounded-full !px-6"
+      (click)="confirm()">
+      {{ data.confirmText || 'OK' }}
+    </button>
+  </div>
+</div>

package/ts-source/browser-code/taon-confirm-dialog/taon-confirm-dialog.component.scss

@@ -0,0 +1,9 @@
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+:host {
+  display: block;
+}

package/ts-source/browser-code/taon-confirm-dialog/taon-confirm-dialog.component.ts

@@ -0,0 +1,32 @@
+// @ts-nocheck
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+import { Component, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+export interface TaonConfirmDialogData {
+    title: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+}
+@Component({
+    selector: 'taon-confirm-dialog',
+    standalone: true,
+    imports: [MatDialogModule, MatButtonModule],
+    templateUrl: './taon-confirm-dialog.component.html',
+})
+export class TaonConfirmDialogComponent {
+    readonly data = inject<TaonConfirmDialogData>(MAT_DIALOG_DATA);
+    private readonly dialogRef = inject(MatDialogRef<TaonConfirmDialogComponent>);
+    cancel(): void {
+        this.dialogRef.close(false);
+    }
+    confirm(): void {
+        this.dialogRef.close(true);
+    }
+}

package/ts-source/browser-code/taon-confirm-dialog/taon-confirm-dialog.md

@@ -0,0 +1,34 @@
+How to use this
+
+```ts
+dialog = inject(MatDialog);
+const ref = this.dialog.open(TaonConfirmDialogComponent, {
+  width: '376px',
+  panelClass: 'clean-confirm-dialog',
+  data: {
+    title: this.t.gettext(
+      'Buy [[ parentProductTitle ]] for [[ productPrice ]] ?',
+      {
+        parentProductTitle: product.parentProductTitle,
+        productPrice: product.price,
+      },
+    ),
+    message: this.t.gettext("Video '[[ productTitle ]]' included.", {
+      productTitle: product.productTitle,
+    }),
+    confirmText: this.t.gettext('Buy'),
+    cancelText: this.t.gettext('Cancel'),
+  },
+});
+
+ref.afterClosed().subscribe(async confirmed => {
+  if (!confirmed) return;
+
+  const button = this.buyButtons.find(
+    c => c.priceId === product.stripePriceId,
+  );
+
+  await button?.buy();
+});
+
+      ```

package/ts-source/browser-code/taon-confirm-dialog/taon-confirm-dialog.models.ts

@@ -0,0 +1,8 @@
+// @ts-nocheck
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+export namespace TaonConfirmDialogModels { }

package/ts-source/browser-code/taon-datatable/index.ts

@@ -0,0 +1,8 @@
+// @ts-nocheck
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+export * from './taon-datatable.component';

package/ts-source/browser-code/taon-datatable/taon-datatable.component.html

@@ -0,0 +1,169 @@
+<!--
+==============================================================================
+ TAON READONLY SOURCE
+ DO NOT MODIFY THIS FILE.
+ Changes may be overwritten.
+==============================================================================
+-->
+
+<div class="flex w-full flex-col gap-3">
+  
+  @if (!hideSearch) {
+    <div
+      class="flex w-full flex-col gap-2 rounded-lg border border-gray-200 bg-white p-3 shadow-sm dark:border-gray-700 dark:bg-gray-900 md:flex-row md:items-center">
+      
+      <mat-form-field
+        appearance="outline"
+        subscriptSizing="dynamic"
+        class="min-w-0 flex-1">
+        <mat-icon matPrefix> search </mat-icon>
+
+        <input
+          matInput
+          placeholder="Search..."
+          [value]="searchValue"
+          (input)="searchChanged($any($event.target).value)" />
+
+        @if (searchValue) {
+          <button
+            mat-icon-button
+            matSuffix
+            type="button"
+            (click)="clearSearch()">
+            <mat-icon>close</mat-icon>
+          </button>
+        }
+      </mat-form-field>
+
+      
+      @if (searchMode === 'advanced') {
+        <button
+          mat-stroked-button
+          type="button"
+          (click)="toggleAdvancedSearch()">
+          <mat-icon> tune </mat-icon>
+
+          Filters
+
+          @if (advancedSearchOpened) {
+            <mat-icon> expand_less </mat-icon>
+          } @else {
+            <mat-icon> expand_more </mat-icon>
+          }
+        </button>
+      }
+
+      
+      <button
+        mat-icon-button
+        type="button"
+        title="Refresh"
+        (click)="reload()">
+        <mat-icon> refresh </mat-icon>
+      </button>
+
+      
+      @if (!hideAddButton) {
+        <button
+          mat-flat-button
+          color="primary"
+          type="button"
+          (click)="addingItem.emit()">
+          <mat-icon> add </mat-icon>
+
+          Add
+        </button>
+      }
+    </div>
+  }
+  
+
+  
+  @if (!hideSearch && searchMode === 'advanced' && advancedSearchOpened) {
+    <div
+      class="grid grid-cols-1 gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+      @for (column of filterableColumns; track column.field) {
+        <mat-form-field
+          appearance="outline"
+          subscriptSizing="dynamic"
+          class="w-full">
+          <mat-label>
+            {{ column.header }}
+          </mat-label>
+
+          <input
+            matInput
+            [(ngModel)]="columnFilters[$any(column.field)]"
+            (keyup.enter)="applyAdvancedFilters()" />
+        </mat-form-field>
+      }
+
+      <div
+        class="flex items-center justify-end gap-2 md:col-span-2 lg:col-span-3 xl:col-span-4">
+        <button
+          mat-button
+          type="button"
+          (click)="clearSearch()">
+          <mat-icon> filter_alt_off </mat-icon>
+
+          Clear
+        </button>
+
+        <button
+          mat-flat-button
+          color="primary"
+          type="button"
+          (click)="applyAdvancedFilters()">
+          <mat-icon> filter_alt </mat-icon>
+
+          Apply filters
+        </button>
+      </div>
+    </div>
+  }
+  
+
+  
+  <div
+    class="relative min-h-[250px] overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900">
+    @if (isLoading) {
+      <div
+        class="absolute inset-0 z-10 flex items-center justify-center bg-white/60 backdrop-blur-[1px] dark:bg-gray-900/60">
+        <div
+          class="flex items-center gap-2 rounded-md bg-white px-4 py-2 shadow dark:bg-gray-800">
+          <mat-icon class="animate-spin"> refresh </mat-icon>
+
+          Loading...
+        </div>
+      </div>
+    }
+
+    <mtx-grid
+      [data]="rows"
+      [columns]="columns"
+      [expandable]="expandable"
+      [expansionTemplate]="lazyExpansionTemplate"
+      [length]="totalElements"
+      [pageOnFront]="false"
+      [pageIndex]="pageNumber - 1"
+      [pageSize]="pageSize"
+      [pageSizeOptions]="pageSizeOptions"
+      [showPaginator]="showPaginator"
+      (expansionChange)="onExpansionChange($event)"
+      (page)="getNextPage($event)"
+      (sortChange)="sortChanged($event)">
+    </mtx-grid>
+
+    <ng-template
+      #lazyExpansionTemplate
+      let-row>
+      @if (isExpanded(row)) {
+        <ng-container
+          [ngTemplateOutlet]="expansionTemplate"
+          [ngTemplateOutletContext]="{ $implicit: row }">
+        </ng-container>
+      }
+    </ng-template>
+  </div>
+  
+</div>

package/ts-source/browser-code/taon-datatable/taon-datatable.component.scss

@@ -0,0 +1,17 @@
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+:host {
+  display: block;
+  width: 100%;
+  min-height: 250px;
+}
+
+:host ::ng-deep {
+  .mat-mdc-form-field {
+    margin: 0;
+  }
+}

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

@@ -0,0 +1,333 @@
+// @ts-nocheck
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+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/browser';
+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/browser';
+import { _, json5 } from 'tnp-core/browser';
+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/browser-code/taon-datatable/taon-datatable.models.ts

@@ -0,0 +1,8 @@
+// @ts-nocheck
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+export namespace TaonDatatableModels { }

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

@@ -0,0 +1,16 @@
+// @ts-nocheck
+/* ============================================================================
+ * TAON READONLY SOURCE
+ * DO NOT MODIFY THIS FILE.
+ * Changes may be overwritten.
+ * ========================================================================== */
+
+import { Routes } from '@angular/router';
+import { adminLazyRoute } from '../index';
+export const TaonDatatableRoutes: Routes = [
+    {
+        path: '',
+        loadComponent: () => import('./taon-datatable.component').then(m => m.TaonDatatableComponent),
+        children: [],
+    },
+];