@maro-tech/card 0.2.8 → 0.2.10

package/fesm2022/maro-tech-card.mjs

@@ -6,12 +6,12 @@ import { input, inject, DestroyRef, signal, Component, computed, viewChild, view
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { EventBus, UiButtonComponent, UiToastService, UiModalComponent, UiConfirmService } from '@maro-tech/core';
 import { DomSanitizer } from '@angular/platform-browser';
+import { RouterLink, ActivatedRoute, Router } from '@angular/router';
 import Panzoom from '@panzoom/panzoom';
 import { LucideDownload, LucideDynamicIcon, LucideEye, LucideFileText, LucidePlus, LucideSparkles, LucideTrash } from '@lucide/angular';
 import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
 import { map, shareReplay, forkJoin, switchMap, timer, of } from 'rxjs';
 import { UiTableComponent, UiPaginatorComponent } from '@maro-tech/table';
-import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { map as map$1, exhaustMap, catchError, takeWhile, takeUntil, finalize } from 'rxjs/operators';
 import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -486,6 +486,7 @@ class DetailsGridComponent {
         ...field,
         displayValue: this.formatFieldValue(field),
         imageSrc: this.getImageSrc(field),
+        linkUrl: this.getLinkUrl(field),
     })), ...(ngDevMode ? [{ debugName: "displayFields" }] : /* istanbul ignore next */ []));
     selectedImageSrc = signal(null, ...(ngDevMode ? [{ debugName: "selectedImageSrc" }] : /* istanbul ignore next */ []));
     openViewer(imageSrc) {
@@ -560,6 +561,20 @@ class DetailsGridComponent {
         }
         return raw;
     }
+    getLinkUrl(field) {
+        if (field.type !== 'link' || !field.link)
+            return null;
+        const data = this.data() || {};
+        const url = field.link.replace(/\{\{([a-zA-Z0-9_.-]+)\}\}/g, (_match, key) => {
+            const value = key.split('.').reduce((current, segment) => {
+                if (current == null || typeof current !== 'object')
+                    return undefined;
+                return current[segment];
+            }, data);
+            return encodeURIComponent(String(value ?? ''));
+        }).trim();
+        return url && url !== '/' && !url.endsWith('/') ? url : null;
+    }
     getImageSrc(field) {
         if (field.type !== 'image')
             return null;
@@ -591,11 +606,11 @@ class DetailsGridComponent {
             : { day: '2-digit', month: '2-digit', year: 'numeric' }).format(date);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DetailsGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: DetailsGridComponent, isStandalone: true, selector: "app-details-grid", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"grid gap-4\" [class.grid-cols-1]=\"!hasExplicitColumns()\" [class.sm:grid-cols-3]=\"!hasExplicitColumns()\" [class.sm:grid-cols-12]=\"hasExplicitColumns()\">\n  @for (field of displayFields(); track $index) {\n    <div class=\"rounded-2xl border border-slate-100 bg-slate-200 p-4\" [ngClass]=\"getFieldColumnClass(field)\" [class.flex]=\"field.type === 'image'\" [class.flex-col]=\"field.type === 'image'\" [class.min-h-64]=\"field.type === 'image'\">\n      <p class=\"text-xs uppercase tracking-[0.18em] text-slate-500\">{{ field.label }}</p>\n      @if (field.type === 'image') {\n        @if (field.imageSrc) {\n          <button type=\"button\" class=\"mt-2 block flex-1 cursor-zoom-in overflow-hidden rounded-xl border border-slate-200 bg-white\" [attr.aria-label]=\"'\u041F\u0435\u0440\u0435\u0433\u043B\u044F\u043D\u0443\u0442\u0438 ' + field.label\" (click)=\"openViewer(field.imageSrc)\">\n            <img [src]=\"field.imageSrc\" [alt]=\"field.label\" class=\"h-full w-full object-cover\" />\n          </button>\n        } @else {\n          <p class=\"mt-2 text-base font-semibold text-slate-900\">-</p>\n        }\n      } @else {\n        <p class=\"mt-2 text-base font-semibold text-slate-900\">{{ field.displayValue ?? '-' }}</p>\n      }\n    </div>\n  }\n</div>\n\n@if (selectedImageSrc(); as imageSrc) {\n  <app-images-viewer [urls]=\"[imageSrc]\" (closed)=\"closeViewer()\" />\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ImagesViewerComponent, selector: "app-images-viewer", inputs: ["urls", "initialIndex"], outputs: ["closed"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.24", type: DetailsGridComponent, isStandalone: true, selector: "app-details-grid", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"grid gap-4\" [class.grid-cols-1]=\"!hasExplicitColumns()\" [class.sm:grid-cols-3]=\"!hasExplicitColumns()\" [class.sm:grid-cols-12]=\"hasExplicitColumns()\">\n  @for (field of displayFields(); track $index) {\n    <div class=\"rounded-2xl border border-slate-100 bg-slate-200 p-4\" [ngClass]=\"getFieldColumnClass(field)\" [class.flex]=\"field.type === 'image'\" [class.flex-col]=\"field.type === 'image'\" [class.min-h-64]=\"field.type === 'image'\">\n      <p class=\"text-xs uppercase tracking-[0.18em] text-slate-500\">{{ field.label }}</p>\n      @if (field.type === 'image') {\n        @if (field.imageSrc) {\n          <button type=\"button\" class=\"mt-2 block flex-1 cursor-zoom-in overflow-hidden rounded-xl border border-slate-200 bg-white\" [attr.aria-label]=\"'\u041F\u0435\u0440\u0435\u0433\u043B\u044F\u043D\u0443\u0442\u0438 ' + field.label\" (click)=\"openViewer(field.imageSrc)\">\n            <img [src]=\"field.imageSrc\" [alt]=\"field.label\" class=\"h-full w-full object-cover\" />\n          </button>\n        } @else {\n          <p class=\"mt-2 text-base font-semibold text-slate-900\">-</p>\n        }\n      } @else if (field.type === 'link' && field.linkUrl) {\n        <a class=\"mt-2 inline-block text-base font-semibold text-sky-800 underline\" [routerLink]=\"field.linkUrl\">{{ field.displayValue === '-' ? field.label : field.displayValue }}</a>\n      } @else {\n        <p class=\"mt-2 text-base font-semibold text-slate-900\">{{ field.displayValue ?? '-' }}</p>\n      }\n    </div>\n  }\n</div>\n\n@if (selectedImageSrc(); as imageSrc) {\n  <app-images-viewer [urls]=\"[imageSrc]\" (closed)=\"closeViewer()\" />\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ImagesViewerComponent, selector: "app-images-viewer", inputs: ["urls", "initialIndex"], outputs: ["closed"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.24", ngImport: i0, type: DetailsGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-details-grid', standalone: true, imports: [CommonModule, ImagesViewerComponent], template: "<div class=\"grid gap-4\" [class.grid-cols-1]=\"!hasExplicitColumns()\" [class.sm:grid-cols-3]=\"!hasExplicitColumns()\" [class.sm:grid-cols-12]=\"hasExplicitColumns()\">\n  @for (field of displayFields(); track $index) {\n    <div class=\"rounded-2xl border border-slate-100 bg-slate-200 p-4\" [ngClass]=\"getFieldColumnClass(field)\" [class.flex]=\"field.type === 'image'\" [class.flex-col]=\"field.type === 'image'\" [class.min-h-64]=\"field.type === 'image'\">\n      <p class=\"text-xs uppercase tracking-[0.18em] text-slate-500\">{{ field.label }}</p>\n      @if (field.type === 'image') {\n        @if (field.imageSrc) {\n          <button type=\"button\" class=\"mt-2 block flex-1 cursor-zoom-in overflow-hidden rounded-xl border border-slate-200 bg-white\" [attr.aria-label]=\"'\u041F\u0435\u0440\u0435\u0433\u043B\u044F\u043D\u0443\u0442\u0438 ' + field.label\" (click)=\"openViewer(field.imageSrc)\">\n            <img [src]=\"field.imageSrc\" [alt]=\"field.label\" class=\"h-full w-full object-cover\" />\n          </button>\n        } @else {\n          <p class=\"mt-2 text-base font-semibold text-slate-900\">-</p>\n        }\n      } @else {\n        <p class=\"mt-2 text-base font-semibold text-slate-900\">{{ field.displayValue ?? '-' }}</p>\n      }\n    </div>\n  }\n</div>\n\n@if (selectedImageSrc(); as imageSrc) {\n  <app-images-viewer [urls]=\"[imageSrc]\" (closed)=\"closeViewer()\" />\n}\n" }]
+            args: [{ selector: 'app-details-grid', standalone: true, imports: [CommonModule, ImagesViewerComponent, RouterLink], template: "<div class=\"grid gap-4\" [class.grid-cols-1]=\"!hasExplicitColumns()\" [class.sm:grid-cols-3]=\"!hasExplicitColumns()\" [class.sm:grid-cols-12]=\"hasExplicitColumns()\">\n  @for (field of displayFields(); track $index) {\n    <div class=\"rounded-2xl border border-slate-100 bg-slate-200 p-4\" [ngClass]=\"getFieldColumnClass(field)\" [class.flex]=\"field.type === 'image'\" [class.flex-col]=\"field.type === 'image'\" [class.min-h-64]=\"field.type === 'image'\">\n      <p class=\"text-xs uppercase tracking-[0.18em] text-slate-500\">{{ field.label }}</p>\n      @if (field.type === 'image') {\n        @if (field.imageSrc) {\n          <button type=\"button\" class=\"mt-2 block flex-1 cursor-zoom-in overflow-hidden rounded-xl border border-slate-200 bg-white\" [attr.aria-label]=\"'\u041F\u0435\u0440\u0435\u0433\u043B\u044F\u043D\u0443\u0442\u0438 ' + field.label\" (click)=\"openViewer(field.imageSrc)\">\n            <img [src]=\"field.imageSrc\" [alt]=\"field.label\" class=\"h-full w-full object-cover\" />\n          </button>\n        } @else {\n          <p class=\"mt-2 text-base font-semibold text-slate-900\">-</p>\n        }\n      } @else if (field.type === 'link' && field.linkUrl) {\n        <a class=\"mt-2 inline-block text-base font-semibold text-sky-800 underline\" [routerLink]=\"field.linkUrl\">{{ field.displayValue === '-' ? field.label : field.displayValue }}</a>\n      } @else {\n        <p class=\"mt-2 text-base font-semibold text-slate-900\">{{ field.displayValue ?? '-' }}</p>\n      }\n    </div>\n  }\n</div>\n\n@if (selectedImageSrc(); as imageSrc) {\n  <app-images-viewer [urls]=\"[imageSrc]\" (closed)=\"closeViewer()\" />\n}\n" }]
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
 class ImagesComponent {
@@ -707,19 +722,24 @@ class TableComponent {
         this.emitAction(event.action, event.row);
     }
     onCellChange(event) {
-        const config = this.editableColumns().find((item) => item.key === event.column.key);
-        if (!config?.api)
+        const config = this.editableColumn(event.column.key);
+        if (!config)
             return;
+        const editAction = Array.isArray(event.row['actions'])
+            ? event.row['actions'].find((action) => String(action.id || '') === 'edit')
+            : undefined;
+        const formId = String(editAction?.formId || '').trim();
+        const api = config.api || (formId
+            ? `/api/${encodeURIComponent(formId)}`
+            : `/api/crud/${encodeURIComponent(this.tableName())}/${encodeURIComponent(String(event.row['id'] || ''))}`);
         this.emitAction({
             id: `edit:${config.key}`,
             label: 'Зберегти',
             type: 'api',
-            api: config.api,
+            api,
             method: config.method || 'PATCH',
             payload: {
-                ...event.row,
                 ...(config.payload || {}),
-                id: event.row['id'],
                 [config.bindKey || config.key]: event.value,
             },
         }, event.row);
@@ -783,10 +803,9 @@ class TableComponent {
         });
     }
     setColumns() {
-        const editable = this.editableColumns();
         this.columnsSignal.set(this.sourceColumns.filter((column) => !column['hidden']).map((column) => {
             const key = String(column['id'] || '');
-            const config = editable.find((item) => item.key === key);
+            const config = this.editableConfig(column);
             return {
                 key,
                 labelKey: String(column['label'] || key),
@@ -796,12 +815,14 @@ class TableComponent {
                 sortable: true,
                 link: column['link'],
                 editable: !!config,
-                editableCondition: String(this.config?.props?.['editableCondition'] || config?.['condition'] || ''),
+                editableCondition: String(config?.['condition'] || ''),
                 editor: config?.editor,
                 bindKey: config?.bindKey || key,
                 options: config?.options || [],
                 data: config?.data,
-                dataParams: config?.dataParams,
+                dataParams: config?.dataParams
+                    ? resolveTemplateValue(config.dataParams, this.data, { interpolate: true })
+                    : undefined,
                 placeholder: config?.placeholder,
             };
         }));
@@ -870,11 +891,25 @@ class TableComponent {
     tableName() {
         return String(this.config?.props?.['table'] || this.config?.props?.['entity'] || '').trim();
     }
-    editableColumns() {
-        const value = this.config?.props?.['editableColumns'];
-        return Array.isArray(value)
-            ? value.filter((item) => !!item && typeof item === 'object' && !!String(item.key || '').trim())
-            : [];
+    editableConfig(column) {
+        const value = column['editable'];
+        if (value === true) {
+            const key = String(column['id'] || '');
+            return {
+                key,
+                bindKey: key,
+                editor: column['data'] ? 'select' : 'text',
+                data: column['data'],
+            };
+        }
+        return value && typeof value === 'object' && !Array.isArray(value)
+            ? value
+            : undefined;
+    }
+    editableColumn(key) {
+        const column = this.sourceColumns.find((item) => String(item['id'] || '') === key);
+        const config = column ? this.editableConfig(column) : undefined;
+        return config ? { ...config, key } : undefined;
     }
     tableEndpoint(table) {
         const params = new URLSearchParams({