@cyprnet/node-red-contrib-uibuilder-formgen 0.4.13 → 0.5.1

package/templates/index.v3.js.mustache

@@ -0,0 +1,463 @@
+// PortalSmith FormGen Portal Runtime (Vue 3)
+// SPDX-License-Identifier: MIT
+// Generated: [[timestamp]]
+// Instance: [[instanceName]]
+// Form ID: [[formId]]
+
+(function() {
+  'use strict';
+  
+  // Configuration from runtime
+  const CONFIG = {
+    formId: '[[formId]]',
+    storageMode: '[[storageMode]]',
+    exportFormats: __EXPORT_FORMATS_JSON__,
+    baseUrl: '[[baseUrl]]',
+    themeMode: '[[themeMode]]',
+    license: __LICENSE_JSON__,
+    submitMode: '[[submitMode]]',        // 'uibuilder' | 'http'
+    submitUrl: '[[submitUrl]]',          // required when submitMode === 'http'
+    submitHeadersJson: '[[submitHeadersJson]]' // optional JSON string
+  };
+
+  function pad2(n) { return String(n).padStart(2, '0'); }
+  function timestampForFilename() {
+    const d = new Date();
+    return `${d.getFullYear()}${pad2(d.getMonth() + 1)}${pad2(d.getDate())}-${pad2(d.getHours())}${pad2(d.getMinutes())}${pad2(d.getSeconds())}`;
+  }
+
+  function escapeCsvCell(val) {
+    if (val === null || val === undefined) return '';
+    const s = String(val).replace(/\r?\n/g, '\\n');
+    if (/[,"\n]/.test(s)) return `"${s.replace(/"/g, '""')}"`;
+    return s;
+  }
+
+  function downloadTextFile(filename, mime, text) {
+    const blob = new Blob([text], { type: mime });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    setTimeout(() => URL.revokeObjectURL(url), 5000);
+  }
+
+  function canUseLocalStorage() {
+    try {
+      const k = '__ps_test__';
+      localStorage.setItem(k, '1');
+      localStorage.removeItem(k);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  function parseKeyValueDelimiter(textValue, delimiter) {
+    const out = [];
+    const text = (textValue === null || textValue === undefined) ? '' : String(textValue);
+    const del = delimiter || '=';
+    text.split('\n')
+      .map(l => l.trim())
+      .filter(Boolean)
+      .forEach(line => {
+        const parts = line.split(del);
+        if (parts.length >= 2) {
+          const key = parts[0].trim();
+          const value = parts.slice(1).join(del).trim();
+          if (key) out.push({ key, value });
+        }
+      });
+    return out;
+  }
+
+  function keyvalueDelimiterLines(textValue) {
+    const text = (textValue === null || textValue === undefined) ? '' : String(textValue);
+    return text.split('\n').map(l => l.trim()).filter(Boolean);
+  }
+
+  function processedFormData(schema, formData) {
+    const processed = Object.assign({}, formData);
+    (schema.sections || []).forEach(section => {
+      (section.fields || []).forEach(field => {
+        if (!field || !field.id) return;
+        if (field.type === 'keyvalue') {
+          if (field.keyvalueMode && field.keyvalueMode === 'delimiter') {
+            processed[field.id] = keyvalueDelimiterLines(formData[field.id]);
+          } else {
+            processed[field.id] = (formData[field.id] || []).map(p => ({ key: String(p.key || ''), value: String(p.value || '') }));
+          }
+        }
+      });
+    });
+    return processed;
+  }
+
+  function applyTheme() {
+    const m = String(CONFIG.themeMode || 'auto').toLowerCase();
+    document.documentElement.setAttribute('data-theme', m);
+  }
+
+  function tryParseHeadersJson(s) {
+    const raw = String(s || '').trim();
+    if (!raw) return {};
+    try { return JSON.parse(raw); } catch (e) { return {}; }
+  }
+
+  function showAlert(vm, msg, variant) {
+    if (!vm) return;
+    vm.alertMessage = String(msg || '');
+    vm.alertVariant = variant || 'info';
+    vm.showAlert = true;
+  }
+
+  let uibuilderInstance = null;
+  let app = null;
+
+  function setupUibuilderHandlers() {
+    if (!uibuilderInstance || !uibuilderInstance.onChange) return;
+    uibuilderInstance.onChange('msg', function(msg) {
+      const payload = msg && msg.payload;
+      if (!payload || typeof payload !== 'object') return;
+      if (!app) return;
+
+      if (payload.type === 'draft') {
+        app.applyDraft(payload.data || payload.payload || payload);
+      }
+      if (payload.type === 'submit:ok' || payload.type === 'submit:error') {
+        app.handleSubmitResponse(payload);
+      }
+    });
+  }
+
+  async function loadSchema() {
+    const response = await fetch('./form.schema.json');
+    if (!response.ok) throw new Error(`Failed to load schema: ${response.statusText}`);
+    return await response.json();
+  }
+
+  function initVueApp(schema) {
+    // Ensure ALL fields exist for reactivity and defaults
+    const formData = {};
+    const fieldErrors = {};
+    (schema.sections || []).forEach(section => {
+      (section.fields || []).forEach(field => {
+        if (!field || !field.id) return;
+        if (field.type === 'checkbox') {
+          formData[field.id] = Boolean(field.defaultValue);
+        } else if (field.type === 'number') {
+          formData[field.id] = (field.defaultValue !== undefined) ? field.defaultValue : null;
+        } else if (field.type === 'select' || field.type === 'radio') {
+          formData[field.id] = (field.defaultValue !== undefined) ? field.defaultValue : '';
+        } else if (field.type === 'keyvalue') {
+          if (field.keyvalueMode && field.keyvalueMode === 'delimiter') {
+            formData[field.id] = '';
+          } else {
+            formData[field.id] = Array.isArray(field.pairs) && field.pairs.length ? field.pairs.map(p => ({ key: String(p.key || ''), value: String(p.value || '') })) : [{ key: '', value: '' }];
+          }
+        } else {
+          formData[field.id] = (field.defaultValue !== undefined) ? field.defaultValue : '';
+        }
+        fieldErrors[field.id] = '';
+      });
+    });
+
+    const appConfig = {
+      data() {
+        return {
+          license: CONFIG.license,
+          schema,
+          formData,
+          fieldErrors,
+          showAlert: false,
+          alertMessage: '',
+          alertVariant: 'info',
+          saving: false,
+          loading: false,
+          submitting: false,
+          showResult: false,
+          lastResult: null,
+          lastResultStatus: null,
+          resultView: 'table',
+          copyBlockActions: schema.actions ? schema.actions.filter(a => a.type === 'copyBlock') : [],
+          exportFormats: CONFIG.exportFormats
+        };
+      },
+      computed: {
+        description() { return this.schema.description || ''; },
+        hasErrors() { return Object.values(this.fieldErrors).some(err => err !== ''); },
+        visibleFieldsBySection() {
+          const result = {};
+          (this.schema.sections || []).forEach(section => {
+            result[section.id] = (section.fields || []).filter(field => this.shouldShowField(field));
+          });
+          return result;
+        },
+        lastResultPretty() {
+          try { return JSON.stringify(this.lastResult, null, 2); } catch (e) { return String(this.lastResult || ''); }
+        },
+        resultHeaders() {
+          if (!this.formattedResult || !this.formattedResult.length) return [];
+          return Object.keys(this.formattedResult[0] || {});
+        },
+        formattedResult() {
+          const r = this.lastResult;
+          if (!r || typeof r !== 'object') return [];
+          // Prefer array of objects
+          if (Array.isArray(r) && r.length && typeof r[0] === 'object' && !Array.isArray(r[0])) {
+            return r.map(row => this.flattenRow(row));
+          }
+          // If object with array field
+          for (const k of Object.keys(r)) {
+            if (Array.isArray(r[k]) && r[k].length && typeof r[k][0] === 'object' && !Array.isArray(r[k][0])) {
+              return r[k].map(row => this.flattenRow(row));
+            }
+          }
+          // Single object
+          return [this.flattenRow(r)];
+        }
+      },
+      methods: {
+        flattenRow(obj) {
+          const out = {};
+          Object.keys(obj || {}).forEach(k => {
+            const v = obj[k];
+            if (Array.isArray(v)) {
+              out[k] = v.map(x => (x === null || x === undefined) ? '' : (typeof x === 'object' ? JSON.stringify(x) : String(x))).join(' | ');
+            } else if (v && typeof v === 'object') {
+              out[k] = JSON.stringify(v);
+            } else {
+              out[k] = (v === null || v === undefined) ? '' : String(v);
+            }
+          });
+          return out;
+        },
+        shouldShowField(field) {
+          if (!field || !field.showIf) return true;
+          const cond = field.showIf;
+          const val = this.formData[cond.field];
+          if (cond.operator === 'equals') return val === cond.value;
+          if (cond.operator === 'neq') return val !== cond.value;
+          return true;
+        },
+        validateField(field) {
+          if (!field || !field.id) return true;
+          const v = this.formData[field.id];
+          let err = '';
+          if (field.required) {
+            if (field.type === 'checkbox') {
+              if (!v) err = 'Required';
+            } else if (field.type === 'keyvalue' && field.keyvalueMode === 'delimiter') {
+              const lines = keyvalueDelimiterLines(v);
+              if (!lines.length) err = 'Required';
+            } else if (Array.isArray(v)) {
+              if (!v.length) err = 'Required';
+            } else {
+              if (v === null || v === undefined || String(v).trim() === '') err = 'Required';
+            }
+          }
+          this.fieldErrors[field.id] = err;
+          return !err;
+        },
+        validateAll() {
+          let ok = true;
+          (this.schema.sections || []).forEach(section => {
+            (section.fields || []).forEach(field => {
+              if (!this.shouldShowField(field)) return;
+              if (!this.validateField(field)) ok = false;
+            });
+          });
+          return ok;
+        },
+        addPair(fieldId) {
+          if (!Array.isArray(this.formData[fieldId])) this.formData[fieldId] = [];
+          this.formData[fieldId].push({ key: '', value: '' });
+        },
+        removePair(fieldId, idx) {
+          if (!Array.isArray(this.formData[fieldId])) return;
+          this.formData[fieldId].splice(idx, 1);
+          if (this.formData[fieldId].length === 0) this.formData[fieldId].push({ key: '', value: '' });
+        },
+        handleClearForm() {
+          // Reset to defaults by reloading schema initial defaults
+          initVueApp(this.schema);
+          showAlert(this, 'Form cleared', 'info');
+        },
+        handleDraftFileSelected(evt) {
+          const input = evt && evt.target;
+          const file = input && input.files && input.files[0];
+          if (!file) return;
+          input.value = '';
+          file.text().then(text => {
+            try { this.applyDraft(JSON.parse(text)); } catch (e) { showAlert(this, 'Invalid draft JSON', 'danger'); }
+          }).catch(() => showAlert(this, 'Failed to read draft file', 'danger'));
+        },
+        applyDraft(draft) {
+          if (!draft || typeof draft !== 'object') { showAlert(this, 'Invalid draft payload', 'danger'); return; }
+          const data = draft.data || draft.payload || draft;
+          Object.keys(this.formData).forEach(k => {
+            if (Object.prototype.hasOwnProperty.call(data, k)) this.formData[k] = data[k];
+          });
+          showAlert(this, 'Draft loaded', 'success');
+        },
+        loadDraftFromStorage() {
+          if (CONFIG.storageMode !== 'localstorage') return;
+          if (!canUseLocalStorage()) return;
+          const key = `ps:draft:${CONFIG.formId}`;
+          const txt = localStorage.getItem(key);
+          if (!txt) return;
+          try { this.applyDraft(JSON.parse(txt)); } catch (e) { /* ignore */ }
+        },
+        handleSaveDraft() {
+          this.saving = true;
+          try {
+            const payload = { formId: CONFIG.formId, timestamp: new Date().toISOString(), data: this.formData };
+            if (CONFIG.storageMode === 'localstorage' && canUseLocalStorage()) {
+              localStorage.setItem(`ps:draft:${CONFIG.formId}`, JSON.stringify(payload));
+              showAlert(this, 'Draft saved', 'success');
+            } else if (uibuilderInstance && uibuilderInstance.send) {
+              uibuilderInstance.send({ payload: { type: 'draft:save', formId: CONFIG.formId, payload } });
+              showAlert(this, 'Draft sent to Node-RED', 'info');
+            } else {
+              showAlert(this, 'No draft storage available', 'warning');
+            }
+          } catch (e) {
+            showAlert(this, 'Failed to save draft', 'danger');
+          } finally {
+            this.saving = false;
+          }
+        },
+        handleCopyBlock(action) {
+          try {
+            const tpl = String(action.template || '');
+            const replaced = tpl.replace(/\{\{(\w+)\}\}/g, (_m, fieldId) => {
+              const v = this.formData[fieldId];
+              return (v === null || v === undefined) ? '' : String(v);
+            });
+            navigator.clipboard.writeText(replaced);
+            showAlert(this, action.successMessage || 'Copied', 'success');
+          } catch (e) {
+            showAlert(this, 'Copy failed', 'danger');
+          }
+        },
+        async handleSubmit() {
+          this.submitting = true;
+          this.showAlert = false;
+          try {
+            if (!this.validateAll()) {
+              showAlert(this, 'Please fix validation errors', 'danger');
+              return;
+            }
+            const payload = processedFormData(this.schema, this.formData);
+            const meta = { timestamp: new Date().toISOString(), userAgent: navigator.userAgent, url: window.location.href };
+
+            if (CONFIG.submitMode === 'http') {
+              const headers = Object.assign({ 'Content-Type': 'application/json' }, tryParseHeadersJson(CONFIG.submitHeadersJson));
+              const resp = await fetch(CONFIG.submitUrl, { method: 'POST', headers, body: JSON.stringify({ formId: CONFIG.formId, payload, meta }) });
+              const text = await resp.text();
+              let json = null;
+              try { json = JSON.parse(text); } catch (e) { /* ignore */ }
+              this.lastResultStatus = resp.status;
+              this.lastResult = (json !== null) ? json : text;
+              this.showResult = true;
+              showAlert(this, resp.ok ? 'Submitted' : 'Submit error', resp.ok ? 'success' : 'danger');
+              return;
+            }
+
+            if (uibuilderInstance && uibuilderInstance.send) {
+              uibuilderInstance.send({ payload: { type: 'submit', formId: CONFIG.formId, payload, meta } });
+              showAlert(this, 'Submitted to Node-RED', 'success');
+            } else {
+              showAlert(this, 'uibuilder not available; submit skipped', 'warning');
+            }
+          } catch (e) {
+            showAlert(this, 'Submit failed: ' + (e && e.message ? e.message : e), 'danger');
+          } finally {
+            this.submitting = false;
+          }
+        },
+        handleSubmitResponse(payload) {
+          this.lastResultStatus = payload.status || null;
+          this.lastResult = payload.result;
+          this.showResult = true;
+          showAlert(this, payload.type === 'submit:ok' ? 'Submission OK' : 'Submission error', payload.type === 'submit:ok' ? 'success' : 'danger');
+        },
+        handleExport(format) {
+          const f = String(format || '').toLowerCase();
+          if (!f) return;
+          const data = processedFormData(this.schema, this.formData);
+          const ts = timestampForFilename();
+          if (f === 'json') {
+            downloadTextFile(`${CONFIG.formId}_${ts}.json`, 'application/json', JSON.stringify(data, null, 2));
+          } else if (f === 'csv') {
+            const keys = Object.keys(data);
+            const header = keys.map(escapeCsvCell).join(',');
+            const row = keys.map(k => escapeCsvCell(data[k])).join(',');
+            downloadTextFile(`${CONFIG.formId}_${ts}.csv`, 'text/csv', header + '\n' + row + '\n');
+          } else if (f === 'html') {
+            const html = `<!doctype html><html><head><meta charset="utf-8"><title>${CONFIG.formId}</title></head><body><pre>${String(JSON.stringify(data, null, 2)).replace(/[&<>]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[c]))}</pre></body></html>`;
+            downloadTextFile(`${CONFIG.formId}_${ts}.html`, 'text/html', html);
+          }
+        },
+        downloadResultJson() {
+          if (!this.lastResult) return;
+          const ts = timestampForFilename();
+          downloadTextFile(`${CONFIG.formId}_result_${ts}.json`, 'application/json', JSON.stringify(this.lastResult, null, 2));
+        }
+      }
+    };
+
+    // Vue 3 global build
+    if (typeof Vue === 'undefined' || typeof Vue.createApp !== 'function') {
+      throw new Error('Vue 3 not loaded');
+    }
+    app = Vue.createApp(appConfig).mount('#app');
+  }
+
+  async function init() {
+    try {
+      applyTheme();
+
+      if (CONFIG.license && CONFIG.license.brandingLocked && CONFIG.license.brandingAttempted) {
+        console.warn('PortalSmith FormGen: custom branding is disabled in Free mode (watermarked). Using default branding.');
+      }
+
+      if (typeof uibuilder === 'undefined') {
+        await new Promise(resolve => {
+          let attempts = 0;
+          const check = setInterval(() => {
+            if (typeof uibuilder !== 'undefined') {
+              clearInterval(check);
+              resolve();
+            } else if (++attempts > 20) {
+              clearInterval(check);
+              console.warn('uibuilder not found, some features may not work');
+              resolve();
+            }
+          }, 100);
+        });
+      }
+
+      if (typeof uibuilder !== 'undefined' && typeof uibuilder.start === 'function') {
+        uibuilder.start();
+        uibuilderInstance = uibuilder;
+      }
+
+      const schema = await loadSchema();
+      initVueApp(schema);
+      setupUibuilderHandlers();
+      if (app && typeof app.loadDraftFromStorage === 'function') {
+        app.loadDraftFromStorage();
+      }
+    } catch (e) {
+      console.error('Portal initialization error:', e);
+    }
+  }
+
+  document.addEventListener('DOMContentLoaded', init);
+})();
+
+