@nyaruka/temba-components 0.131.2 → 0.131.3

package/out-tsc/src/flow/NodeEditor.js

@@ -8,6 +8,8 @@ import { CustomEventType } from '../interfaces';
 import { generateUUID } from '../utils';
 import { FieldRenderer } from '../form/FieldRenderer';
 import { renderMarkdownInline } from '../markdown';
+import { fromStore, zustand } from '../store/AppState';
+import { getStore } from '../store/Store';
 export class NodeEditor extends RapidElement {
     constructor() {
         super(...arguments);
@@ -314,6 +316,54 @@ export class NodeEditor extends RapidElement {
       .optional-field-link a:hover {
         text-decoration: underline;
       }
+
+      .original-value {
+        background: #fff8dc;
+        padding: 10px;
+        border-radius: 4px;
+        font-size: 13px;
+        color: #666;
+      }
+
+      .original-value-content {
+        color: #333;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+
+      .category-localization-table {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+      }
+
+      .category-localization-row {
+        display: grid;
+        grid-template-columns: 40% 60%;
+      }
+
+      .category-localization-row:last-child {
+        border-bottom: none;
+      }
+
+      .original-name {
+        padding: 10px 20px;
+        background: #fff8dc;
+        display: flex;
+        align-items: center;
+        border-radius: var(--curvature);
+      }
+
+      .localized-name {
+        padding: 10px;
+        display: flex;
+        align-items: center;
+      }
+
+      .localized-name temba-textinput {
+        width: 100%;
+      }
     `;
     }
     connectedCallback() {
@@ -345,11 +395,20 @@ export class NodeEditor extends RapidElement {
         this.isOpen = true;
     }
     initializeFormData() {
+        var _a, _b, _c, _d, _e;
         const nodeConfig = this.getNodeConfig();
         if ((!nodeConfig || nodeConfig.type === 'execute_actions') && this.action) {
             // Action editing mode - use action config
             const actionConfig = ACTION_CONFIG[this.action.type];
-            if (actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.toFormData) {
+            // Check if we're in localization mode
+            if (this.isTranslating &&
+                (actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.localizable) &&
+                actionConfig.toLocalizationFormData) {
+                // Get localized values for this action
+                const localization = ((_c = (_b = (_a = this.flowDefinition) === null || _a === void 0 ? void 0 : _a.localization) === null || _b === void 0 ? void 0 : _b[this.languageCode]) === null || _c === void 0 ? void 0 : _c[this.action.uuid]) || {};
+                this.formData = actionConfig.toLocalizationFormData(this.action, localization);
+            }
+            else if (actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.toFormData) {
                 this.formData = actionConfig.toFormData(this.action);
             }
             else {
@@ -363,7 +422,15 @@ export class NodeEditor extends RapidElement {
         else if (this.node) {
             // Node editing mode - use node config
             const nodeConfig = this.getNodeConfig();
-            if (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.toFormData) {
+            // Check if we're in localization mode for a node with localizable categories
+            if (this.isTranslating &&
+                (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.localizable) === 'categories' &&
+                nodeConfig.toLocalizationFormData) {
+                // Get localized values for this node's categories
+                const localization = ((_e = (_d = this.flowDefinition) === null || _d === void 0 ? void 0 : _d.localization) === null || _e === void 0 ? void 0 : _e[this.languageCode]) || {};
+                this.formData = nodeConfig.toLocalizationFormData(this.node, localization);
+            }
+            else if (nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.toFormData) {
                 this.formData = nodeConfig.toFormData(this.node, this.nodeUI);
             }
             else {
@@ -488,16 +555,63 @@ export class NodeEditor extends RapidElement {
         }
     }
     handleSave() {
-        // Validate the form
-        const validation = this.validateForm();
-        if (!validation.valid) {
-            this.errors = validation.errors;
-            // Expand any groups that contain validation errors
-            this.expandGroupsWithErrors(validation.errors);
-            return;
-        }
-        // Process form data to convert key-value arrays to Records before saving
+        var _a, _b, _c, _d;
+        // Process form data first
         const processedFormData = this.processFormDataForSave();
+        // Skip validation if we're in localization mode
+        // (localization only deals with translating text, not changing structure)
+        if (!this.isTranslating) {
+            // Validate the form
+            const validation = this.validateForm();
+            if (!validation.valid) {
+                this.errors = validation.errors;
+                // Expand any groups that contain validation errors
+                this.expandGroupsWithErrors(validation.errors);
+                return;
+            }
+        }
+        // Check if we're in localization mode
+        if (this.isTranslating) {
+            // Handle action localization
+            if (this.action) {
+                const actionConfig = ACTION_CONFIG[this.action.type];
+                if ((actionConfig === null || actionConfig === void 0 ? void 0 : actionConfig.localizable) &&
+                    actionConfig.fromLocalizationFormData) {
+                    // Save to localization structure
+                    const localizationData = actionConfig.fromLocalizationFormData(processedFormData, this.action);
+                    // Update the flow definition's localization
+                    this.updateLocalization(this.languageCode, this.action.uuid, localizationData);
+                    // Close the dialog
+                    this.fireCustomEvent(CustomEventType.NodeEditCancelled, {});
+                    return;
+                }
+            }
+            // Handle node localization (for router categories)
+            if (this.node) {
+                const nodeConfig = this.getNodeConfig();
+                if ((nodeConfig === null || nodeConfig === void 0 ? void 0 : nodeConfig.localizable) === 'categories' &&
+                    nodeConfig.fromLocalizationFormData) {
+                    // Get localization data for all categories
+                    const localizationData = nodeConfig.fromLocalizationFormData(processedFormData, this.node);
+                    const languageLocalization = ((_b = (_a = this.flowDefinition) === null || _a === void 0 ? void 0 : _a.localization) === null || _b === void 0 ? void 0 : _b[this.languageCode]) || {};
+                    const categories = ((_d = (_c = this.node) === null || _c === void 0 ? void 0 : _c.router) === null || _d === void 0 ? void 0 : _d.categories) || [];
+                    categories.forEach((category) => {
+                        const categoryUuid = category.uuid;
+                        const nextLocalization = localizationData[categoryUuid];
+                        if (nextLocalization) {
+                            this.updateLocalization(this.languageCode, categoryUuid, nextLocalization);
+                        }
+                        else if (languageLocalization[categoryUuid]) {
+                            // Remove existing localization when the translation was cleared
+                            this.updateLocalization(this.languageCode, categoryUuid, {});
+                        }
+                    });
+                    // Close the dialog
+                    this.fireCustomEvent(CustomEventType.NodeEditCancelled, {});
+                    return;
+                }
+            }
+        }
         // Determine whether to use node or action saving based on context
         // If we have a node with a router, always use node saving (even if action is set)
         // because router configuration is handled at the node level
@@ -535,6 +649,12 @@ export class NodeEditor extends RapidElement {
             });
         }
     }
+    updateLocalization(languageCode, actionUuid, localizationData) {
+        // Use the store method to properly update localization with immer
+        zustand
+            .getState()
+            .updateLocalization(languageCode, actionUuid, localizationData);
+    }
     processFormDataForSave() {
         const processed = { ...this.formData };
         // Convert key-value arrays to Records
@@ -586,8 +706,9 @@ export class NodeEditor extends RapidElement {
                                 'There was an error creating' + ' "' + selected.name + '"';
                         }
                     }
-                    // Check required fields
-                    if (fieldConfig.required &&
+                    // Check required fields (skip in localization mode since all fields are optional)
+                    if (!this.isTranslating &&
+                        fieldConfig.required &&
                         (!value || (Array.isArray(value) && value.length === 0))) {
                         errors[fieldName] = `${fieldConfig.label || fieldName} is required.`;
                     }
@@ -948,12 +1069,17 @@ export class NodeEditor extends RapidElement {
         const containerStyle = config.maxWidth
             ? `max-width: ${config.maxWidth};`
             : '';
+        // Render original value if in localization mode and action has the field
+        const originalValueDisplay = this.isTranslating && this.action && fieldName in this.action
+            ? this.renderOriginalValue(fieldName, this.action[fieldName])
+            : html ``;
         const fieldContent = this.renderFieldContent(fieldName, config, value, errors);
+        const content = html ` ${originalValueDisplay} ${fieldContent} `;
         // Wrap in container with style if maxWidth is specified
         if (containerStyle) {
-            return html `<div style="${containerStyle}">${fieldContent}</div>`;
+            return html `<div style="${containerStyle}">${content}</div>`;
         }
-        return fieldContent;
+        return content;
     }
     renderOptionalField(fieldName, config, value) {
         // If the field has a value or has been revealed, show it
@@ -984,9 +1110,76 @@ export class NodeEditor extends RapidElement {
             fieldName
         ]);
     }
+    renderCategoryLocalizationTable() {
+        const categories = this.formData.categories || {};
+        const categoryEntries = Object.entries(categories);
+        if (categoryEntries.length === 0) {
+            return html `<div>No categories to localize</div>`;
+        }
+        const languageName = getStore().getLanguageName(this.languageCode);
+        return html `
+      <div class="category-localization-table">
+        ${categoryEntries.map(([categoryUuid, categoryData]) => html `
+            <div class="category-localization-row">
+              <div class="original-name">${categoryData.originalName}</div>
+              <div class="localized-name">
+                <temba-textinput
+                  name="${categoryUuid}"
+                  placeholder="${languageName} Translation"
+                  value="${categoryData.localizedName || ''}"
+                  @change=${(e) => this.handleCategoryLocalizationChange(categoryUuid, e.target.value)}
+                ></temba-textinput>
+              </div>
+            </div>
+          `)}
+      </div>
+    `;
+    }
+    handleCategoryLocalizationChange(categoryUuid, value) {
+        // Update formData with new localized value
+        if (!this.formData.categories) {
+            this.formData.categories = {};
+        }
+        if (!this.formData.categories[categoryUuid]) {
+            this.formData.categories[categoryUuid] = {};
+        }
+        this.formData.categories[categoryUuid].localizedName = value;
+        // Trigger a re-render
+        this.requestUpdate();
+    }
+    renderOriginalValue(fieldName, originalValue) {
+        // Format the original value for display
+        let displayValue = '';
+        if (Array.isArray(originalValue)) {
+            if (originalValue.length === 0) {
+                return html ``; // Don't show anything for empty arrays
+            }
+            // For arrays, join with commas
+            displayValue = originalValue.join(', ');
+        }
+        else if (typeof originalValue === 'string') {
+            displayValue = originalValue;
+        }
+        else if (originalValue) {
+            displayValue = String(originalValue);
+        }
+        // Don't show if empty
+        if (!displayValue || displayValue.trim() === '') {
+            return html ``;
+        }
+        return html `
+      <div class="original-value">
+        <div class="original-value-content">${displayValue}</div>
+      </div>
+    `;
+    }
     renderFieldContent(fieldName, config, value, errors) {
+        // In localization mode, make all fields optional (not required)
+        const fieldConfig = this.isTranslating
+            ? { ...config, required: false }
+            : config;
         // Use FieldRenderer for consistent field rendering
-        return FieldRenderer.renderField(fieldName, config, value, {
+        return FieldRenderer.renderField(fieldName, fieldConfig, value, {
             errors,
             onChange: (e) => {
                 // Handle different change event types
@@ -1330,6 +1523,12 @@ export class NodeEditor extends RapidElement {
         if (!config) {
             return html ` <div>No configuration available</div> `;
         }
+        // Special rendering for category localization
+        if (this.isTranslating &&
+            config.localizable === 'categories' &&
+            this.formData.categories) {
+            return this.renderCategoryLocalizationTable();
+        }
         // Use the new fields configuration system
         if (config.form) {
             // If layout is specified, use it
@@ -1374,6 +1573,10 @@ export class NodeEditor extends RapidElement {
         if (!(config === null || config === void 0 ? void 0 : config.gutter) || config.gutter.length === 0) {
             return html ``;
         }
+        // Don't show gutter when localizing categories
+        if (this.isTranslating && config.localizable === 'categories') {
+            return html ``;
+        }
         // Use the same layout rendering system for gutter fields
         const renderedFields = new Set();
         return html `
@@ -1443,17 +1646,25 @@ export class NodeEditor extends RapidElement {
         if (!this.isOpen) {
             return html ``;
         }
-        const headerColor = this.getHeaderColor();
+        const headerColor = this.isTranslating ? '#505050' : this.getHeaderColor();
+        const headerTextColor = this.isTranslating ? '#fff' : '#fff';
         const config = this.getConfig();
         const dialogSize = (config === null || config === void 0 ? void 0 : config.dialogSize) || 'medium'; // Default to 'large' if not specified
+        const languageName = this.isTranslating
+            ? getStore().getLanguageName(this.languageCode)
+            : '';
+        let header = (config === null || config === void 0 ? void 0 : config.name) || 'Edit';
+        if (this.isTranslating) {
+            header = languageName ? `${languageName} - ${header}` : header;
+        }
         return html `
       <temba-dialog
-        header="${(config === null || config === void 0 ? void 0 : config.name) || 'Edit'}"
+        header="${header}"
         .open="${this.isOpen}"
         @temba-button-clicked=${this.handleDialogButtonClick}
         primaryButtonName="Save"
         cancelButtonName="Cancel"
-        style="--header-bg: ${headerColor}"
+        style="--header-bg: ${headerColor}; --header-text: ${headerTextColor};"
         size="${dialogSize}"
       >
         <div class="node-editor-form">
@@ -1498,4 +1709,13 @@ __decorate([
 __decorate([
     state()
 ], NodeEditor.prototype, "revealedOptionalFields", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.languageCode)
+], NodeEditor.prototype, "languageCode", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.isTranslating)
+], NodeEditor.prototype, "isTranslating", void 0);
+__decorate([
+    fromStore(zustand, (state) => state.flowDefinition)
+], NodeEditor.prototype, "flowDefinition", void 0);
 //# sourceMappingURL=NodeEditor.js.map