@taon-dev/ui 21.0.13 → 21.0.15

package/ts-source/browser-code/taon-backoffice-notifications/taon-error-details-dialog.component.ts

@@ -0,0 +1,86 @@
+// @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 { Component, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+export interface TaonErrorDetailsDialogData {
+    message: string;
+    details: string;
+}
+type TaonEditor = 'vscode' | 'vscodium';
+interface TaonStackTraceLine {
+    text: string;
+    file?: string;
+    line?: number;
+    column?: number;
+}
+@Component({
+    selector: 'taon-error-details-dialog',
+    standalone: true,
+    imports: [MatDialogModule, MatButtonModule, MatButtonToggleModule],
+    templateUrl: './taon-error-details-dialog.component.html',
+    styleUrls: ['./taon-error-details-dialog.component.scss'],
+})
+export class TaonErrorDetailsDialogComponent {
+    readonly data = inject<TaonErrorDetailsDialogData>(MAT_DIALOG_DATA);
+    private readonly editorStorageKey = 'taon-error-details-editor';
+    editor: TaonEditor = this.loadEditor();
+    readonly stackLines = this.parseStackTrace(this.data.details);
+    setEditor(editor: TaonEditor): void {
+        this.editor = editor;
+        localStorage.setItem(this.editorStorageKey, editor);
+    }
+    private loadEditor(): TaonEditor {
+        const editor = localStorage.getItem(this.editorStorageKey);
+        if (editor === 'vscode' || editor === 'vscodium') {
+            return editor;
+        }
+        return 'vscode';
+    }
+    private parseStackTrace(stack: string): TaonStackTraceLine[] {
+        return stack
+            .split('\n')
+            .map(text => text.trimEnd())
+            .filter(text => text.trim().length > 0)
+            .map(text => this.parseStackTraceLine(text));
+    }
+    private parseStackTraceLine(text: string): TaonStackTraceLine {
+        const match = text.match(/((?:[A-Za-z]:[\\/]|\/)[^()\n]+?):(\d+):(\d+)/);
+        if (!match) {
+            return {
+                text,
+            };
+        }
+        return {
+            text,
+            file: match[1],
+            line: Number(match[2]),
+            column: Number(match[3]),
+        };
+    }
+    openStackLine(stackLine: TaonStackTraceLine): void {
+        if (!stackLine.file || !stackLine.line) {
+            return;
+        }
+        const url = this.createEditorUrl(stackLine.file, stackLine.line, stackLine.column);
+        window.location.href = url;
+    }
+    private createEditorUrl(file: string, line: number, column?: number): string {
+        const protocol = this.editor === 'vscodium' ? 'vscodium' : 'vscode';
+        const location = [file, line, column]
+            .filter(value => value !== undefined)
+            .join(':');
+        return `${protocol}://file${location}`;
+    }
+}

package/ts-source/browser-code/taon-backoffice-notifications/taon-error-toast.component.ts

@@ -0,0 +1,62 @@
+// @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 { Component, inject } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { HotToastRef } from '@ngneat/hot-toast';
+import { TaonErrorDetailsDialogComponent } from './taon-error-details-dialog.component';
+export interface TaonErrorToastData {
+    title: string;
+    details: string;
+}
+@Component({
+    selector: 'taon-error-toast',
+    standalone: true,
+    template: `
+    <div
+      class="taon-error-toast"
+      (click)="showDetails()">
+      <div>{{ data.title }}</div>
+
+      <small> Click for details </small>
+    </div>
+  `,
+    styles: [
+        `
+      .taon-error-toast {
+        cursor: pointer;
+      }
+
+      small {
+        display: block;
+        margin-top: 4px;
+        opacity: 0.7;
+      }
+    `,
+    ],
+})
+export class TaonErrorToastComponent {
+    private readonly toastRef = inject<HotToastRef<TaonErrorToastData>>(HotToastRef);
+    private readonly dialog = inject(MatDialog);
+    readonly data = this.toastRef.data;
+    showDetails(): void {
+        this.dialog.open(TaonErrorDetailsDialogComponent, {
+            width: '800px',
+            maxWidth: '95vw',
+            data: {
+                message: this.data.title,
+                details: this.data.details,
+            },
+        });
+        this.toastRef.close();
+    }
+}

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

@@ -0,0 +1,47 @@
+<!--
+==============================================================================
+
+- 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.
+  
+==============================================================================
+-->
+
+<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,14 @@
+/* ============================================================================
+ 
+- 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: block;
+}

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

@@ -0,0 +1,37 @@
+// @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 { 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,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 TaonConfirmDialogModels { }

package/ts-source/browser-code/taon-datatable/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-datatable.component';

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

@@ -0,0 +1,174 @@
+<!--
+==============================================================================
+
+- 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.
+  
+==============================================================================
+-->
+
+<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,22 @@
+/* ============================================================================
+ 
+- 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: block;
+  width: 100%;
+  min-height: 250px;
+}
+
+:host ::ng-deep {
+  .mat-mdc-form-field {
+    margin: 0;
+  }
+}