@maro-tech/card 0.2.7 → 0.2.9

package/fesm2022/maro-tech-card.mjs

@@ -9,7 +9,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 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, firstValueFrom } from 'rxjs';
+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';
@@ -707,19 +707,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 +788,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 +800,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 +876,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({
@@ -1623,7 +1643,6 @@ class HistoryTabComponent {
     destroyRef = inject(DestroyRef);
     refreshSequence = signal(0, ...(ngDevMode ? [{ debugName: "refreshSequence" }] : /* istanbul ignore next */ []));
     lastRequestKey = '';
-    dictionaryCache = new Map();
     constructor() {
         this.eventBus.on(ENTITY_UPDATED)
             .pipe(takeUntilDestroyed(this.destroyRef))
@@ -1749,8 +1768,8 @@ class HistoryTabComponent {
                         label: config.label || field,
                         type: config.type || 'text',
                         summary: values.summary,
-                        from: await this.toDisplayValue(values.from, config),
-                        to: await this.toDisplayValue(values.to, config),
+                        from: await this.toDisplayValue(values.from, config, values.from_data),
+                        to: await this.toDisplayValue(values.to, config, values.to_data),
                     };
                 }
                 return { ...change, changedFields };
@@ -1764,6 +1783,8 @@ class HistoryTabComponent {
             return [key, {
                     from: from && typeof from === 'object' && 'value' in from ? from.value : from,
                     to: to && typeof to === 'object' && 'value' in to ? to.value : to,
+                    from_data: field?.from_data,
+                    to_data: field?.to_data,
                     summary: typeof field?.changeSummary === 'string' ? field.changeSummary : undefined,
                 }];
         }));
@@ -1778,10 +1799,10 @@ class HistoryTabComponent {
         }
         return undefined;
     }
-    async toDisplayValue(value, config) {
+    async toDisplayValue(value, config, data) {
         const display = config.type === 'boolean' && value !== null && value !== undefined && value !== ''
             ? (value === true || value === 'true' || value === 1 ? 'Так' : 'Ні')
-            : await this.resolveDisplay(value, config);
+            : await this.resolveDisplay(value, config, data);
         const structured = config.displayMode === 'structured' ? await this.toStructuredItems(value, config.itemFields) : undefined;
         const result = {
             value: value ?? null,
@@ -1794,23 +1815,24 @@ class HistoryTabComponent {
             result.url = `/api/files/${encodeURIComponent(String(value))}`;
         return result;
     }
-    async resolveDisplay(value, config) {
+    async resolveDisplay(value, config, data) {
         if (value === null || value === undefined || value === '')
             return 'Не задано';
+        const dataLabel = this.getDataLabel(data);
+        if (dataLabel !== null)
+            return dataLabel;
         const values = Array.isArray(value) ? value : [value];
-        return (await Promise.all(values.map(async (item) => config.data && item !== null && item !== undefined && item !== ''
-            ? this.resolveDictionary(config.data, String(item))
-            : typeof item === 'object' ? JSON.stringify(item) : String(item)))).filter(Boolean).join(', ') || 'Не задано';
-    }
-    resolveDictionary(name, key) {
-        const cacheKey = `${name}:${key}`;
-        const cached = this.dictionaryCache.get(cacheKey);
-        if (cached)
-            return cached;
-        const request = firstValueFrom(this.http.get(cardApiResourceUrl(this.baseUrl, `/api/suggest/${encodeURIComponent(name)}/${encodeURIComponent(key)}`)))
-            .then((item) => item?.label || key).catch(() => key);
-        this.dictionaryCache.set(cacheKey, request);
-        return request;
+        return values
+            .filter((item) => item !== null && item !== undefined && item !== '')
+            .map((item) => typeof item === 'object' ? JSON.stringify(item) : String(item))
+            .filter(Boolean).join(', ') || 'Не задано';
+    }
+    getDataLabel(data) {
+        const values = Array.isArray(data) ? data : [data];
+        const labels = values
+            .map((item) => item && typeof item === 'object' && 'label' in item ? String(item.label ?? '') : '')
+            .filter(Boolean);
+        return labels.length ? labels.join(', ') : null;
     }
     async toStructuredItems(value, itemFields) {
         const values = Array.isArray(value) ? value : value && typeof value === 'object' ? [value] : [];
@@ -1831,7 +1853,8 @@ class HistoryTabComponent {
                     if (value === null || value === undefined || value === '' || seenLabels.has(label))
                         return null;
                     seenLabels.add(label);
-                    const display = fieldConfig.data ? await this.resolveDictionary(fieldConfig.data, String(value)) : typeof value === 'object' ? JSON.stringify(value) : String(value);
+                    const display = this.getDataLabel(record[`${key}_data`])
+                        || (typeof value === 'object' ? JSON.stringify(value) : String(value));
                     return { key, label, value, display };
                 }))).filter((field) => field !== null),
             };