@5minds/node-red-dashboard-2-processcube-dynamic-form 2.2.1-feature-451281-mf6lqajn → 2.2.1-file-preview-2-247fbf-mfdx0ry5

package/ui/components/UIDynamicForm.vue

@@ -235,14 +235,12 @@ export default {
       return !!this.userTask;
     },
     totalOutputs() {
-      const confirmOutputs = this.props.handle_confirmation_dialogs 
-        ? (this.props.confirm_actions ? this.props.confirm_actions.length : 2)
+      const confirmOutputs = this.props.handle_confirmation_dialogs
+        ? this.props.confirm_actions
+          ? this.props.confirm_actions.length
+          : 2
         : 0;
-      return (
-        this.props.options.length +
-        confirmOutputs +
-        (this.props.trigger_on_change ? 1 : 0)
-      );
+      return this.props.options.length + confirmOutputs + (this.props.trigger_on_change ? 1 : 0);
     },
     isConfirmDialog() {
       return this.userTask.userTaskConfig.formFields.some((field) => field.type === 'confirm');
@@ -891,13 +889,14 @@ export default {
       const formFields = this.userTask.userTaskConfig.formFields;
       const formFieldIds = formFields.map((ff) => ff.id);
       const initialValues = this.userTask.startToken;
+      console.log('Initial Values:', initialValues);
+      console.log('Form Fields:', formFields);
       const finishedFormData = msg.payload.formData;
       this.formIsFinished = !!msg.payload.formData;
       if (this.formIsFinished) {
         this.collapsed = this.props.collapse_when_finished;
       }
 
-      // Check if we have a confirmation dialog field
       const hasConfirmField = formFields.some((field) => field.type === 'confirm');
 
       if (formFields) {
@@ -909,55 +908,55 @@ export default {
             const confirmText = customForm.confirmButtonText ?? 'Confirm';
             const declineText = customForm.declineButtonText ?? 'Decline';
 
-              const confirmActions = [
-                {
-                  alignment: this.props.confirm_actions[1]?.alignment || 'left',
-                  primary: this.props.confirm_actions[1]?.primary || 'destructive',
-                  label: declineText,
-                  condition: '',
-                  isConfirmAction: true,
-                  confirmFieldId: field.id,
-                  confirmValue: false,
-                },
-                {
-                  alignment: this.props.confirm_actions[0]?.alignment || 'right',
-                  primary: this.props.confirm_actions[0]?.primary || 'primary', 
-                  label: confirmText,
-                  condition: '',
-                  isConfirmAction: true,
-                  confirmFieldId: field.id,
-                  confirmValue: true,
-                },
-              ];
+            const confirmActions = [
+              {
+                alignment: this.props.confirm_actions[1]?.alignment || 'left',
+                primary: this.props.confirm_actions[1]?.primary || 'destructive',
+                label: declineText,
+                condition: '',
+                isConfirmAction: true,
+                confirmFieldId: field.id,
+                confirmValue: false,
+              },
+              {
+                alignment: this.props.confirm_actions[0]?.alignment || 'right',
+                primary: this.props.confirm_actions[0]?.primary || 'primary',
+                label: confirmText,
+                condition: '',
+                isConfirmAction: true,
+                confirmFieldId: field.id,
+                confirmValue: true,
+              },
+            ];
 
-              const filteredActions = this.props.options.filter(action => {
-                if (!action.condition) return true;
-                try {
-                  const usertaskWithContext = {
-                    ...this.userTask,
-                    isConfirmDialog: true
-                  };
-                  const func = Function('fields', 'usertask', 'msg', '"use strict"; return (' + action.condition + ')');
-                  const result = func(this.formData, usertaskWithContext, this.msg);
-                  return Boolean(result);
-                } catch (err) {
-                  console.error('Error while evaluating condition: ' + err);
-                  return false;
-                }
-              });
+            const filteredActions = this.props.options.filter((action) => {
+              if (!action.condition) return true;
+              try {
+                const usertaskWithContext = {
+                  ...this.userTask,
+                  isConfirmDialog: true,
+                };
+                const func = Function('fields', 'usertask', 'msg', '"use strict"; return (' + action.condition + ')');
+                const result = func(this.formData, usertaskWithContext, this.msg);
+                return Boolean(result);
+              } catch (err) {
+                console.error('Error while evaluating condition: ' + err);
+                return false;
+              }
+            });
 
-              this.actions = [...filteredActions, ...confirmActions];
-            }
+            this.actions = [...filteredActions, ...confirmActions];
+          }
         });
       }
 
       if (!hasConfirmField && this.props.handle_confirmation_dialogs) {
-        this.actions = this.props.options.filter(action => {
+        this.actions = this.props.options.filter((action) => {
           if (!action.condition) return true;
           try {
             const usertaskWithContext = {
               ...this.userTask,
-              isConfirmDialog: false
+              isConfirmDialog: false,
             };
             const func = Function('fields', 'usertask', 'msg', '"use strict"; return (' + action.condition + ')');
             const result = func(this.formData, usertaskWithContext, this.msg);
@@ -989,33 +988,30 @@ export default {
         this.focusFirstFormField();
       });
     },
-    actionFn(action) {
+    async actionFn(action) {
       if (action.isConfirmAction && action.confirmFieldId) {
         this.formData[action.confirmFieldId] = action.confirmValue;
       }
 
-      if (action.label === 'Speichern' || action.label === 'Speichern und nächster') {
-        const formkitInputs = this.$refs.form.$el.querySelectorAll('.formkit-outer');
-        let allComplete = true;
-
-        formkitInputs.forEach((input) => {
-          const dataComplete = input.getAttribute('data-complete');
-          const dataInvalid = input.getAttribute('data-invalid');
-
-          if (dataComplete == null && dataInvalid === 'true') {
-            allComplete = false;
-          }
-        });
-
-        if (!allComplete) return;
-      }
-
       if (this.checkCondition(action.condition, { isConfirmDialog: this.isConfirmDialog })) {
         this.showError('');
 
-        const processedFormData = { ...this.formData };
+        let processedFormData = { ...this.formData };
         const formFields = this.userTask.userTaskConfig.formFields;
 
+        try {
+          console.log(
+            'Processing file fields:',
+            formFields.filter((f) => f.type === 'file')
+          );
+          processedFormData = await this.processFileFields(processedFormData, formFields);
+          console.log('File processing completed successfully');
+        } catch (error) {
+          console.error('Error processing file fields:', error);
+          this.showError('Fehler beim Verarbeiten der Dateien');
+          return;
+        }
+
         formFields.forEach((field) => {
           const fieldValue = processedFormData[field.id];
 
@@ -1041,8 +1037,8 @@ export default {
 
         let outputIndex;
         if (action.isConfirmAction) {
-            const confirmActionIndex = action.confirmValue ? 1 : 0;
-            outputIndex = this.props.options.length + confirmActionIndex;
+          const confirmActionIndex = action.confirmValue ? 1 : 0;
+          outputIndex = this.props.options.length + confirmActionIndex;
         } else {
           outputIndex = this.props.options.findIndex((element) => element.label === action.label);
         }
@@ -1056,7 +1052,7 @@ export default {
       try {
         const usertaskWithContext = {
           ...this.userTask,
-          isConfirmDialog: context.isConfirmDialog || false
+          isConfirmDialog: context.isConfirmDialog || false,
         };
 
         const func = Function('fields', 'usertask', 'msg', '"use strict"; return (' + condition + ')');
@@ -1095,6 +1091,99 @@ export default {
         }
       }
     },
+    async convertFileToBase64(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+          const base64 = reader.result.split(',')[1];
+          resolve({
+            name: file.name,
+            size: file.size,
+            type: file.type,
+            lastModified: file.lastModified,
+            data: base64,
+          });
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+      });
+    },
+    async processFileFields(formData, formFields) {
+      const processedData = { ...formData };
+
+      for (const field of formFields) {
+        if (field.type === 'file') {
+          const fieldValue = processedData[field.id];
+
+          if (fieldValue) {
+            const multiple = field.customForm
+              ? JSON.parse(JSON.stringify(field.customForm)).multiple === 'true'
+              : false;
+
+            if (multiple && Array.isArray(fieldValue)) {
+              // Handle multiple files
+              const base64Files = [];
+              for (const file of fieldValue) {
+                const processedFile = await this.processIndividualFile(file);
+                if (processedFile) {
+                  base64Files.push(processedFile);
+                }
+              }
+              processedData[field.id] = base64Files;
+            } else if (Array.isArray(fieldValue)) {
+              const base64Files = [];
+              for (const file of fieldValue) {
+                const processedFile = await this.processIndividualFile(file);
+                if (processedFile) {
+                  base64Files.push(processedFile);
+                }
+              }
+              processedData[field.id] = multiple ? base64Files : base64Files[0] || null;
+            } else if (fieldValue) {
+              const processedFile = await this.processIndividualFile(fieldValue);
+              if (processedFile) {
+                processedData[field.id] = processedFile;
+              }
+            }
+          }
+        }
+      }
+
+      return processedData;
+    },
+    async processIndividualFile(fileData) {
+      let actualFile = null;
+
+      if (fileData instanceof File) {
+        actualFile = fileData;
+      } else if (fileData instanceof FileList && fileData.length > 0) {
+        actualFile = fileData[0];
+      } else if (fileData && fileData.file instanceof File) {
+        actualFile = fileData.file;
+      } else if (fileData && fileData.file instanceof FileList && fileData.file.length > 0) {
+        actualFile = fileData.file[0];
+      } else if (Array.isArray(fileData) && fileData.length > 0) {
+        if (fileData[0] instanceof File) {
+          actualFile = fileData[0];
+        } else if (fileData[0] && fileData[0].file instanceof File) {
+          actualFile = fileData[0].file;
+        } else if (fileData[0] && fileData[0].file instanceof FileList && fileData[0].file.length > 0) {
+          actualFile = fileData[0].file[0];
+        }
+      } else if (typeof fileData === 'object' && fileData.data && fileData.name) {
+        return fileData;
+      }
+
+      if (actualFile instanceof File) {
+        return await this.convertFileToBase64(actualFile);
+      }
+
+      if (fileData && typeof fileData === 'object' && !fileData.data) {
+        console.warn('Could not process file data:', fileData);
+      }
+
+      return fileData;
+    },
   },
 };
 
@@ -1111,6 +1200,5 @@ function mapItems(type, field) {
 </script>
 
 <style>
-/* CSS is auto scoped, but using named classes is still recommended */
 @import '../stylesheets/ui-dynamic-form.css';
 </style>

package/ui/stylesheets/ui-dynamic-form.css

@@ -168,7 +168,8 @@ code {
   min-height: 36px;
   padding: 8px 12px;
   box-sizing: border-box;
-  flex-shrink: 0;
+  white-space: normal;
+  word-wrap: break-word;
 }
 
 @media screen and (min-width: 600px) {
@@ -177,10 +178,8 @@ code {
   }
 
   .ui-dynamic-form-footer-action-button {
-    max-width: 200px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    white-space: normal;
+    word-wrap: break-word;
   }
 }
 
@@ -287,15 +286,13 @@ code {
     font-size: 16px;
     width: 100%;
     box-sizing: border-box;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    white-space: normal;
+    word-wrap: break-word;
   }
 
   .ui-dynamic-form-footer-action-button .v-btn__content {
-    white-space: nowrap !important;
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
+    white-space: normal !important;
+    word-wrap: break-word !important;
     max-width: 100% !important;
     display: block !important;
   }
@@ -310,9 +307,8 @@ code {
 
   .ui-dynamic-form-footer-action-primary .v-btn__content,
   .ui-dynamic-form-footer-action-secondary .v-btn__content {
-    white-space: nowrap !important;
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
+    white-space: normal !important;
+    word-wrap: break-word !important;
     max-width: 100% !important;
     display: block !important;
   }