@5minds/node-red-dashboard-2-processcube-dynamic-form 2.2.0 → 2.2.1-develop-1f198a-mfc8cyvw

package/ui/components/FooterActions.vue

@@ -11,26 +11,6 @@
           {{ action.label }}
         </v-btn>
       </div>
-      <div>
-        <v-btn
-          class="ui-dynamic-form-footer-action-button ui-dynamic-form-footer-action-secondary"
-          :disabled="formIsFinished"
-          @click="handleSuspend"
-        >
-          Suspend
-        </v-btn>
-      </div>
-      <div>
-        <v-btn
-          class="ui-dynamic-form-footer-action-terminate"
-          :disabled="formIsFinished"
-          @click="handleTerminate"
-          variant="text"
-          size="small"
-        >
-          Terminate
-        </v-btn>
-      </div>
     </div>
     <div class="ui-dynamic-form-footer-actions-right">
       <div v-for="(action, index) in rightSideActions" :key="`right-${index}`">
@@ -69,8 +49,8 @@ export default {
     leftSideActions() {
       const leftActions = this.actions.filter((action) => action.alignment === 'left' || !action.alignment);
       const sortPrimaryToLeft = (a, b) => {
-        const aPrimary = a.primary === 'true';
-        const bPrimary = b.primary === 'true';
+        const aPrimary = a.primary === 'primary';
+        const bPrimary = b.primary === 'primary';
         if (aPrimary && !bPrimary) return -1;
         if (!aPrimary && bPrimary) return 1;
         return 0;
@@ -81,8 +61,8 @@ export default {
     rightSideActions() {
       const rightActions = this.actions.filter((action) => action.alignment === 'right');
       const sortPrimaryToRight = (a, b) => {
-        const aPrimary = a.primary === 'true';
-        const bPrimary = b.primary === 'true';
+        const aPrimary = a.primary === 'primary';
+        const bPrimary = b.primary === 'primary';
         if (!aPrimary && bPrimary) return -1;
         if (aPrimary && !bPrimary) return 1;
         return 0;
@@ -93,29 +73,15 @@ export default {
   },
   methods: {
     getActionButtonClass(action) {
-      return action.primary === 'true'
-        ? 'ui-dynamic-form-footer-action-primary'
-        : 'ui-dynamic-form-footer-action-secondary';
-    },
-    handleTerminate() {
-      const terminateAction = {
-        label: 'Terminate',
-        alignment: 'left',
-        primary: 'false',
-        isTerminate: true,
-      };
-
-      this.actionCallback(terminateAction);
-    },
-    handleSuspend() {
-      const suspendAction = {
-        label: 'Suspend',
-        alignment: 'left',
-        primary: 'false',
-        isSuspend: true,
-      };
-
-      this.actionCallback(suspendAction);
+      switch (action.primary) {
+        case 'primary':
+          return 'ui-dynamic-form-footer-action-primary';
+        case 'destructive':
+          return 'ui-dynamic-form-footer-action-terminate';
+        case 'secondary':
+        default:
+          return 'ui-dynamic-form-footer-action-secondary';
+      }
     },
   },
 };

package/ui/components/UIDynamicForm.vue

@@ -235,12 +235,13 @@ export default {
       return !!this.userTask;
     },
     totalOutputs() {
-      const outputsConfirmTerminate = 2;
+      const confirmOutputs = this.props.handle_confirmation_dialogs 
+        ? (this.props.confirm_actions ? this.props.confirm_actions.length : 2)
+        : 0;
       return (
         this.props.options.length +
-        (this.props.handle_confirmation_dialogs ? 2 : 0) +
-        (this.props.trigger_on_change ? 1 : 0) +
-        outputsConfirmTerminate
+        confirmOutputs +
+        (this.props.trigger_on_change ? 1 : 0)
       );
     },
     isConfirmDialog() {
@@ -308,16 +309,12 @@ export default {
       element.classList.add('test');
     });
 
-    this.$socket.on('widget-load:' + this.id, (msg) => {
-      this.init(msg);
-    });
     this.$socket.on('msg-input:' + this.id, (msg) => {
       this.init(msg);
     });
     this.$socket.emit('widget-load', this.id);
   },
   unmounted() {
-    this.$socket?.off('widget-load' + this.id);
     this.$socket?.off('msg-input:' + this.id);
   },
   methods: {
@@ -900,6 +897,8 @@ export default {
         this.collapsed = this.props.collapse_when_finished;
       }
 
+      const hasConfirmField = formFields.some((field) => field.type === 'confirm');
+
       if (formFields) {
         formFields.forEach((field) => {
           this.formData[field.id] = field.defaultValue;
@@ -908,31 +907,63 @@ export default {
             const customForm = field.customForm ? JSON.parse(JSON.stringify(field.customForm)) : {};
             const confirmText = customForm.confirmButtonText ?? 'Confirm';
             const declineText = customForm.declineButtonText ?? 'Decline';
-            const confirmActions = [
-              {
-                alignment: 'left',
-                primary: 'true',
-                label: confirmText,
-                condition: '',
-                isConfirmAction: true,
-                confirmFieldId: field.id,
-                confirmValue: true,
-              },
-              {
-                alignment: 'left',
-                primary: 'true',
-                label: declineText,
-                condition: '',
-                isConfirmAction: true,
-                confirmFieldId: field.id,
-                confirmValue: false,
-              },
-            ];
-            if (this.props.handle_confirmation_dialogs) {
-              this.actions = confirmActions;
-            } else {
-              this.actions = [...this.actions, ...confirmActions];
+
+              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;
+                }
+              });
+
+              this.actions = [...filteredActions, ...confirmActions];
             }
+        });
+      }
+
+      if (!hasConfirmField && this.props.handle_confirmation_dialogs) {
+        this.actions = this.props.options.filter(action => {
+          if (!action.condition) return true;
+          try {
+            const usertaskWithContext = {
+              ...this.userTask,
+              isConfirmDialog: false
+            };
+            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;
           }
         });
       }
@@ -958,38 +989,6 @@ export default {
       });
     },
     actionFn(action) {
-      if (action.isTerminate) {
-        this.showError('');
-
-        const msg = this.msg ?? {};
-        msg.payload = {
-          formData: this.formData,
-          userTask: this.userTask,
-          isTerminate: true,
-        };
-
-        const terminateOutputIndex = this.totalOutputs - 1;
-
-        this.send(msg, terminateOutputIndex);
-        return;
-      }
-
-      if (action.isSuspend) {
-        this.showError('');
-
-        const msg = this.msg ?? {};
-        msg.payload = {
-          formData: this.formData,
-          userTask: this.userTask,
-          isSuspend: true,
-        };
-
-        const suspendOutputIndex = this.totalOutputs - 2;
-
-        this.send(msg, suspendOutputIndex);
-        return;
-      }
-
       if (action.isConfirmAction && action.confirmFieldId) {
         this.formData[action.confirmFieldId] = action.confirmValue;
       }
@@ -1010,7 +1009,7 @@ export default {
         if (!allComplete) return;
       }
 
-      if (this.checkCondition(action.condition)) {
+      if (this.checkCondition(action.condition, { isConfirmDialog: this.isConfirmDialog })) {
         this.showError('');
 
         const processedFormData = { ...this.formData };
@@ -1038,20 +1037,29 @@ export default {
 
         const msg = this.msg ?? {};
         msg.payload = { formData: processedFormData, userTask: this.userTask };
-        this.send(
-          msg,
-          this.actions.findIndex((element) => element.label === action.label) +
-            (this.isConfirmDialog ? this.props.options.length : 0)
-        );
+
+        let outputIndex;
+        if (action.isConfirmAction) {
+            const confirmActionIndex = action.confirmValue ? 1 : 0;
+            outputIndex = this.props.options.length + confirmActionIndex;
+        } else {
+          outputIndex = this.props.options.findIndex((element) => element.label === action.label);
+        }
+        this.send(msg, outputIndex);
       } else {
         this.showError(action.errorMessage);
       }
     },
-    checkCondition(condition) {
+    checkCondition(condition, context = {}) {
       if (condition === '') return true;
       try {
-        const func = Function('fields', 'userTask', 'msg', '"use strict"; return (' + condition + ')');
-        const result = func(this.formData, this.userTask, this.msg);
+        const usertaskWithContext = {
+          ...this.userTask,
+          isConfirmDialog: context.isConfirmDialog || false
+        };
+
+        const func = Function('fields', 'usertask', 'msg', '"use strict"; return (' + condition + ')');
+        const result = func(this.formData, usertaskWithContext, this.msg);
         return Boolean(result);
       } catch (err) {
         console.error('Error while evaluating condition: ' + err);

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;
   }