@maro-tech/card 0.2.8 → 0.2.9

package/fesm2022/maro-tech-card.mjs

@@ -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({