@processmaker/screen-builder 3.0.3 → 3.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "3.0.3",
+  "version": "3.0.5",
   "scripts": {
     "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",
@@ -57,7 +57,7 @@
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/vue-form-elements": "0.61.1",
+    "@processmaker/vue-form-elements": "0.61.2",
     "@processmaker/vue-multiselect": "2.3.0",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
@@ -116,7 +116,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.61.1",
+    "@processmaker/vue-form-elements": "0.61.2",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

package/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: {

package/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>

package/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: [],

package/src/components/inspector/collection-records-list.vue

@@ -1,13 +1,18 @@
 <template>
   <div>
     <div>
-      <label for="collection">{{ $t("Collection") }}</label>
-      <b-form-select
-        id="collection"
-        v-model="collectionId"
-        :options="collections"
-        data-cy="inspector-collection"
-      />
+      <label for="collection">{{ $t("Collection Name") }}</label>
+      <b-form-group>
+        <b-form-select
+          id="collection"
+          v-model="collectionId"
+          :options="collections"
+          data-cy="inspector-collection"
+        />
+        <b-form-text class="mt-2">
+        {{ $t("Collection Record Control is not available for Anonymous Web Entry") }} 
+        </b-form-text>
+    </b-form-group>
     </div>
     <div v-if="collectionId > 0" class="screen-link mt-2">
       <a 

package/src/components/renderer/form-collection-record-control.vue

@@ -61,7 +61,8 @@ export default {
       screenType: "",
       hasMustache: false,
       flagDraft: {},
-      taskDraft: {}
+      taskDraft: {},
+      enableDraft: true
     };
   },
   computed: {
@@ -167,7 +168,6 @@ export default {
       this.selCollectionId = collectionId;
       this.selRecordId = recordId;
       this.selDisplayMode = modeId;
-
       this.$dataProvider
         .getCollectionRecordsView(collectionId, recordId)
         .then((response) => {
@@ -176,22 +176,25 @@ export default {
           const viewScreen = response.collection.read_screen_id;
           const editScreen = response.collection.update_screen_id;
             //Choose screen id regarding of the display Mode
-            this.screenCollectionId =
-              this.selDisplayMode === "View" ? viewScreen : editScreen;
-          
+            this.screenCollectionId = 
+              typeof this.selDisplayMode === 'function' ? 
+                (this.collectionmode.modeId === "View" ? viewScreen : editScreen) :
+                (this.selDisplayMode === "View" ? viewScreen : editScreen);
           this.loadScreen(this.screenCollectionId);
          
           //This section validates if Collection has draft data
-          if(this.taskDraft?.draft?.data == null || this.taskDraft.draft.data === '') {
+          if (this.taskDraft?.draft?.data == null || this.taskDraft.draft.data === '' || !this.enableDraft) 
+          {
             this.localData = respData;
           }else{
             this.localData = _.merge({}, respData, this.taskDraft.draft.data);
           }
-          
+
         })
         .catch(() => {
           this.localData = {};
           globalObject.ProcessMaker.alert(this.$t('This content does not exist. We could not locate indicated data'), "danger");
+          this.placeholder = "Select a collection";
         });;
     },
     isMustache(record) {
@@ -213,6 +216,7 @@ export default {
     },
     record(record) {
       this.hasMustache = false;
+      this.enableDraft = false;
       if (record && !isNaN(record) && record > 0 && this.collection.collectionId) {
         this.selRecordId = record;
         this.loadRecordCollection(this.collection.collectionId, record, this.selDisplayMode);

package/src/components/renderer/form-list-table.vue

@@ -160,12 +160,12 @@ export default {
   },
   watch: {
     listOption() {
-      this.title = this.checkTitle(this.listOption);
+      this.title = this.$t(this.checkTitle(this.listOption));
       this.dataControl = {};
     }
   },
   mounted() {
-    this.title = this.checkTitle(this.listOption);
+    this.title = this.$t(this.checkTitle(this.listOption));
   },
   methods: {
     /**

package/src/components/renderer/form-new-request.vue

@@ -17,7 +17,7 @@
       </div>
     </div>
     <div v-else>
-      <formEmpty link="" title="No Case to Start" url="" />
+      <formEmpty link="" :title="$t('No Case to Start')" url="" />
     </div>
   </div>
 </template>

package/src/components/renderer/form-record-list.vue

@@ -431,20 +431,22 @@ export default {
       }
 
       // Adds radio buttons or checkbox to the table depending selected option
-      if (['single-field', 'single-record'].includes(this.source?.dataSelectionOptions)) {
-        fields.unshift({
-          key: 'radio',
-          label: '',
-          sortable: false,
-        });
-      }
-
-      if (this.source?.dataSelectionOptions === 'multiple-records') {
-        fields.unshift({
-          key: 'checkbox',
-          label: '',
-          sortable: false
-        });
+      if(this.source?.sourceOptions === "Collection") { 
+        if (['single-field', 'single-record'].includes(this.source?.dataSelectionOptions)) {
+          fields.unshift({
+            key: 'radio',
+            label: '',
+            sortable: false,
+          });
+        }
+  
+        if (this.source?.dataSelectionOptions === 'multiple-records') {
+          fields.unshift({
+            key: 'checkbox',
+            label: '',
+            sortable: false
+          });
+        }
       }
       
       return fields;

package/src/components/renderer/form-requests.vue

@@ -70,7 +70,7 @@
     </filter-table>
   </div>
   <div v-else>
-    <formEmpty link="Requests" title="No Cases to Show" :url="noDataUrl" />
+    <formEmpty link="Requests" :title="$t('No Cases to Show')" :url="noDataUrl" />
   </div>
 </template>
 

package/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>

package/src/form-builder-controls.js

@@ -481,6 +481,15 @@ export default [
           jsonData: '',
         },
         form: '',
+        source: {
+          collectionFields: [],
+          collectionFieldsColumns: [],
+          pmql: null,
+          sourceOptions: "Variable",
+          variableStore: null,
+          dataSelectionOptions: "no-selection",
+          singleField: null
+        }
       },
       inspector: [
         keyNameProperty,

package/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));
     },