@processmaker/screen-builder 3.0.2 → 3.0.4

package/src/components/vue-form-builder.vue

@@ -127,6 +127,7 @@
             v-if="isClipboardPage(tabPage)"
             variant="link"
             @click="clearClipboard"
+            class="no-text-transform"
           >
             {{ $t('Clear All') }}
           </b-button>
@@ -201,9 +202,18 @@
                     class="mr-2 ml-1"
                   />
                   {{ element.config.name || element.label || $t("Field Name") }}
+                  <b-badge
+                    v-if="!isClipboardPage(tabPage) && isInClipboard(extendedPages[tabPage].items[index])  && screenType === 'form'"
+                    data-cy="copied-badge"
+                    class="m-2 custom-badge"
+                    pill
+                  >
+                    <i class="far fa-check-circle"></i>
+                    <span class="pl-2">{{ $t('Copied')}}</span>
+                  </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])"
@@ -245,10 +255,13 @@
                   v-model="element.items"
                   :validation-errors="validationErrors"
                   class="card-body"
-                  :class="styleMode === 'Modern' ? elementCssClassModern(element) : elementCssClass(element)"
+                  :class="styleMode === 'Modern' && element.component === 'FormRecordList' 
+                    ? elementCssClassModern(element) 
+                    : elementCssClass(element)"
                   :selected="selected"
                   :config="element.config"
                   :ai-element="element"
+                  :screen-type="screenType"
                   @inspect="inspect"
                   @update-state="updateState"
                 />
@@ -266,9 +279,18 @@
                     class="mr-2 ml-1"
                   />
                   {{ element.config.name || $t("Variable Name") }}
+                  <b-badge
+                    v-if="!isClipboardPage(tabPage) && isInClipboard(extendedPages[tabPage].items[index]) && screenType === 'form'"
+                    data-cy="copied-badge"
+                    class="m-2 custom-badge"
+                    pill
+                  >
+                    <i class="far fa-check-circle"></i>
+                    <span class="pl-2">{{ $t('Copied')}}</span>
+                  </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])"
@@ -299,15 +321,19 @@
                   :tabindex="element.config.interactive ? 0 : -1"
                   class="card-body m-0 pb-4 pt-4"
                   :class="[
-                    styleMode === 'Modern' ? elementCssClassModern(element) : elementCssClass(element),
+                    styleMode === 'Modern' && element.component === 'FormRecordList' 
+                    ? elementCssClassModern(element) 
+                    : elementCssClass(element),
                     { 'prevent-interaction': !element.config.interactive }
                   ]"
+                  :screen-type="screenType"
                   @input="
                     element.config.interactive
                       ? (element.config.content = $event)
                       : null
                   "
                   @focusout.native="updateState"
+                  
                 />
               </div>
             </div>
@@ -1745,4 +1771,15 @@ $side-bar-font-size: 0.875rem;
   cursor: not-allowed; /* Cambia el cursor cuando se pasa por encima */
   pointer-events: all; /* Permite que el pseudo-elemento reciba eventos del ratón */
 }
+.custom-badge {
+  background-color: #D1F4D7 !important;
+  color: #06723A !important;
+  padding: 0.5rem 0.75rem;
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 14px;
+}
+.no-text-transform {
+    text-transform: none;
+}
 </style>

package/src/main.js

@@ -325,6 +325,14 @@ window.Echo = {
       }, 1000);
     });
   },
+
+  eventMockNext(event, response) {
+    this.listeners.forEach((listener) => {
+      setTimeout(() => {
+        listener.callback(response);
+      }, 1000);
+    });
+  },
   private() {
     return {
       notification(callback) {

package/src/mixins/Clipboard.js

@@ -108,19 +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 (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));
     },
 
@@ -144,6 +170,7 @@ export default {
         }
       );
       if (confirm) {
+        this.clipboardPage.items = [];
         this.$store.dispatch("clipboardModule/clearClipboard");
         this.$root.$emit('update-clipboard');
       }