Merge pull request #1768 from ProcessMaker/bugfix/FOUR-19918

FOUR-19918: Can not paste a multi column inside another multicolumn
ProcessMaker · Nov 5, 2024 · 2048c2f · 2048c2f
2 parents 7b5d5d7 + e6c815c
commit 2048c2f
Show file tree

Hide file tree

Showing 12 changed files with 276 additions and 34 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -114,6 +114,7 @@
           title="Default"
           :render-controls="displayBuilder"
           @change="updateConfig"
+          :screen-type="displayType"
         >
           <default-loading-spinner />
         </vue-form-builder>
@@ -448,6 +449,7 @@ export default {
       },
       showTemplatesPanel: false,
       sharedTemplatesData: null,
+      displayType: 'form'
     };
   },
   computed: {

diff --git a/src/components/editor/loop.vue b/src/components/editor/loop.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="column-draggable" :selector="config.customCssSelector">
-    <draggable style="min-height: 80px" :list="items" group="controls">
+    <draggable
+      style="min-height: 80px"
+      :list="items" 
+      group="controls"
+      @change="onChange"
+    >
       <div
         v-for="(element, index) in items"
         :key="index"
@@ -28,7 +33,7 @@
               />
               {{ element.config.name || $t("Variable Name") }}
               <b-badge
-                v-if="isInClipboard(items[index])"
+                v-if="isInClipboard(items[index]) && screenType === 'form'"
                 data-cy="copied-badge"
                 class="m-2 custom-badge"
                 pill
@@ -38,6 +43,7 @@
               </b-badge>
               <div class="ml-auto">
                 <clipboard-button
+                  v-if="screenType === 'form'"
                   :index="index"
                   :config="element.config"
                   :isInClipboard="isInClipboard(items[index])"
@@ -83,6 +89,7 @@
               :config="element.config"
               @inspect="inspect"
               @update-state="$emit('update-state')"
+              :screen-type="screenType"
             />
           </div>
         </div>
@@ -101,7 +108,7 @@
               />
               {{ element.config.name || $t("Variable Name") }}
               <b-badge
-                v-if="isInClipboard(items[index])"
+                v-if="isInClipboard(items[index]) && screenType === 'form'"
                 data-cy="copied-badge"
                 class="m-2 custom-badge"
                 pill
@@ -111,6 +118,7 @@
               </b-badge>
               <div class="ml-auto">
                 <clipboard-button
+                  v-if="screenType === 'form'"
                   :index="index"
                   :config="element.config"
                   :isInClipboard="isInClipboard(items[index])"
@@ -146,6 +154,7 @@
               ]"
               :tabindex="element.config.interactive ? 0 : -1"
               :config="element.config"
+              :screen-type="screenType"
               @input="
                 element.config.interactive
                   ? (element.config.content = $event)
@@ -191,7 +200,7 @@ export default {
     ...renderer
   },
   mixins: [HasColorProperty, Clipboard],
-  props: ["value", "name", "config", "selected", "validationErrors"],
+  props: ["value", "name", "config", "selected", "validationErrors", "screenType"],
   data() {
     return {
       items: [],
@@ -276,7 +285,13 @@ export default {
           this.$set(item.config.aiConfig, "progress", progress);
         }
       });
-    }
+    },
+    /**
+     * Triggered when the draggable container is changed.
+     */
+    onChange(e) {
+      this.$emit("update-state");
+    },
   }
 };
 </script>

diff --git a/src/components/editor/multi-column.vue b/src/components/editor/multi-column.vue
@@ -43,7 +43,7 @@
                     />
                     {{ element.config.name || $t("Variable Name") }}
                     <b-badge
-                      v-if="isInClipboard(element)"
+                      v-if="isInClipboard(element) && screenType === 'form'"
                       data-cy="copied-badge"
                       class="m-2 custom-badge"
                       pill
@@ -53,6 +53,7 @@
                     </b-badge>
                     <div class="ml-auto">
                       <clipboard-button
+                        v-if="screenType === 'form'"
                         :index="index"
                         :config="element.config"
                         :isInClipboard="isInClipboard(element)"
@@ -95,6 +96,7 @@
                     :selected="selected"
                     :ai-element="element"
                     :config="element.config"
+                    :screen-type="screenType"
                     @inspect="inspect"
                     @update-state="$emit('update-state')"
                   />
@@ -118,7 +120,7 @@
                     />
                     {{ element.config.name || $t("Variable Name") }}
                     <b-badge
-                      v-if="isInClipboard(element)"
+                      v-if="isInClipboard(element) && screenType === 'form'"
                       data-cy="copied-badge"
                       class="m-2 custom-badge"
                       pill
@@ -128,6 +130,7 @@
                     </b-badge>
                     <div class="ml-auto">
                       <clipboard-button
+                        v-if="screenType === 'form'"
                         :index="index"
                         :config="element.config"
                         :isInClipboard="isInClipboard(element)"
@@ -163,6 +166,7 @@
                     ]"
                     :tabindex="element.config.interactive ? 0 : -1"
                     :config="element.config"
+                    :screen-type="screenType"
                     @input="
                       element.config.interactive
                         ? (element.config.content = $event)
@@ -212,7 +216,7 @@ export default {
     ...renderer
   },
   mixins: [HasColorProperty, Clipboard],
-  props: ["value", "name", "config", "selected", "validationErrors"],
+  props: ["value", "name", "config", "selected", "validationErrors", "screenType"],
   data() {
     return {
       items: [],

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
@@ -203,7 +203,7 @@
                   />
                   {{ element.config.name || element.label || $t("Field Name") }}
                   <b-badge
-                    v-if="!isClipboardPage(tabPage) && isInClipboard(extendedPages[tabPage].items[index])"
+                    v-if="!isClipboardPage(tabPage) && isInClipboard(extendedPages[tabPage].items[index])  && screenType === 'form'"
                     data-cy="copied-badge"
                     class="m-2 custom-badge"
                     pill
@@ -213,7 +213,7 @@
                   </b-badge>
                   <div class="ml-auto">
                     <clipboard-button
-                      v-if="!isClipboardPage(tabPage)"
+                      v-if="!isClipboardPage(tabPage) && screenType === 'form'"
                       :index="index"
                       :config="element.config"
                       :isInClipboard="isInClipboard(extendedPages[tabPage].items[index])"
@@ -261,6 +261,7 @@
                   :selected="selected"
                   :config="element.config"
                   :ai-element="element"
+                  :screen-type="screenType"
                   @inspect="inspect"
                   @update-state="updateState"
                 />
@@ -279,7 +280,7 @@
                   />
                   {{ element.config.name || $t("Variable Name") }}
                   <b-badge
-                    v-if="!isClipboardPage(tabPage) && isInClipboard(extendedPages[tabPage].items[index])"
+                    v-if="!isClipboardPage(tabPage) && isInClipboard(extendedPages[tabPage].items[index]) && screenType === 'form'"
                     data-cy="copied-badge"
                     class="m-2 custom-badge"
                     pill
@@ -289,7 +290,7 @@
                   </b-badge>
                   <div class="ml-auto">
                     <clipboard-button
-                      v-if="!isClipboardPage(tabPage)"
+                      v-if="!isClipboardPage(tabPage) && screenType === 'form'"
                       :index="index"
                       :config="element.config"
                       :isInClipboard="isInClipboard(extendedPages[tabPage].items[index])"
@@ -325,12 +326,14 @@
                     : elementCssClass(element),
                     { 'prevent-interaction': !element.config.interactive }
                   ]"
+                  :screen-type="screenType"
                   @input="
                     element.config.interactive
                       ? (element.config.content = $event)
                       : null
                   "
                   @focusout.native="updateState"
+
                 />
               </div>
             </div>

diff --git a/src/mixins/Clipboard.js b/src/mixins/Clipboard.js
@@ -108,22 +108,45 @@ export default {
       }
 
       const replaceInPage = (page) => {
-        page.items.forEach((item, index) => {
-          if (item.component === clipboardComponentName) {
-            // clone clipboard content to avoid modifying the original
-            const clipboardContent = _.cloneDeep(this.$store.getters["clipboardModule/clipboardItems"]);
-            // replace uuids in clipboard content
-            clipboardContent.forEach(this.updateUuids);
-            page.items.splice(index, 1, ...clipboardContent);
-            if (clipboardContent.length) {
-              window.ProcessMaker.alert(this.$t("Clipboard Pasted Succesfully"), "success");
-            }
-          }
-          if (item.items) {
-            replaceInPage(item);
-          }
-        });
-      }
+        const processItems = (items) => {
+            items.forEach((item, index) => {
+                // Recursively process nested arrays
+                if (Array.isArray(item)) {
+                    return processItems(item);
+                }
+
+                // Replace clipboard component with clipboard content
+                if (item.component === clipboardComponentName) {
+                    // Clone clipboard content to avoid modifying original data
+                    const clipboardContent = _.cloneDeep(this.$store.getters["clipboardModule/clipboardItems"]);
+
+                    // Update UUIDs in clipboard content to prevent duplicate IDs
+                    clipboardContent.forEach(this.updateUuids);
+
+                    // Replace the clipboard component with the clipboard content
+                    items.splice(index, 1, ...clipboardContent);
+
+                    // Show success message if clipboard content is present
+                    if (clipboardContent.length > 0) {
+                        window.ProcessMaker.alert(this.$t("Clipboard Pasted Successfully"), "success");
+                    }
+                }
+
+                // Process nested items recursively
+                if (item.items) {
+                    processItems(item.items);
+                }
+            });
+        };
+
+        // Initiate the processing of page items
+        if (page && Array.isArray(page.items)) {
+            processItems(page.items);
+        } else {
+            console.warn("Invalid page structure or no items to process.");
+        }
+      };
+
       screenConfig.forEach((item) => replaceInPage(item));
     },
 

diff --git a/tests/e2e/fixtures/displayScreenNext.json b/tests/e2e/fixtures/displayScreenNext.json