Merge branch 'release-2024-fall' into bugfix/FOUR-19681

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "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.0",
+    "@processmaker/vue-form-elements": "0.61.1",
     "@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.0",
+    "@processmaker/vue-form-elements": "0.61.1",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

src/components/ScreenTemplateCard.vue

@@ -24,9 +24,11 @@
       <hr class="card-divider" />
       <b-card-body class="p-1">
         <div class="template-details">
-          <span class="template-name d-block pt-1">{{ template.name }}</span>
+          <span class="template-name d-block pt-1">{{
+            truncateText(template.name, 45)
+          }}</span>
           <span class="template-description d-block">{{
-            truncateText(template.description, 100)
+            truncateText(template.description, 60)
           }}</span>
         </div>
         <b-collapse v-model="isApplyOptionsActive">

src/components/editor/loop.vue

@@ -27,6 +27,15 @@
                 class="mr-2 ml-1"
               />
               {{ element.config.name || $t("Variable Name") }}
+              <b-badge
+                v-if="isInClipboard(items[index])"
+                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
                   :index="index"
@@ -91,6 +100,15 @@
                 class="mr-2 ml-1"
               />
               {{ element.config.name || $t("Variable Name") }}
+              <b-badge
+                v-if="isInClipboard(items[index])"
+                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
                   :index="index"
@@ -334,4 +352,12 @@ export default {
     box-shadow: 0 0 0 13px rgba(0, 0, 0, 0);
   }
 }
+.custom-badge {
+  background-color: #D1F4D7 !important;
+  color: #06723A !important;
+  padding: 0.5rem 0.75rem;
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 14px;
+}
 </style>

src/components/editor/multi-column.vue

@@ -42,6 +42,15 @@
                       class="mr-2 ml-1"
                     />
                     {{ element.config.name || $t("Variable Name") }}
+                    <b-badge
+                      v-if="isInClipboard(element)"
+                      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
                         :index="index"
@@ -108,6 +117,15 @@
                       class="mr-2 ml-1"
                     />
                     {{ element.config.name || $t("Variable Name") }}
+                    <b-badge
+                      v-if="isInClipboard(element)"
+                      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
                         :index="index"
@@ -375,4 +393,12 @@ export default {
     box-shadow: 0 0 0 13px rgba(0, 0, 0, 0);
   }
 }
+.custom-badge {
+  background-color: #D1F4D7 !important;
+  color: #06723A !important;
+  padding: 0.5rem 0.75rem;
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 14px;
+}
 </style>

src/components/inspector/collection-data-source.vue

@@ -194,6 +194,9 @@
         },
         deep: true
       },
+      dataSelectionOptions() {
+        this.singleField = null;
+      }
     },
   };
   </script>

src/components/inspector/collection-designer-mode.vue

@@ -36,6 +36,9 @@
       ],
       };
     },
+    mounted () {
+      this.callBuilder(this.designerOptions);
+    },
     computed: {
       options() {
         return Object.fromEntries(
@@ -56,10 +59,15 @@
       options: {
         handler() {
           this.$emit("input", this.options);
-          this.$root.$emit("style-mode", this.options.designerOptions);
+          this.callBuilder(this.options.designerOptions);
         },
         deep: true
       },
     },
+    methods: {
+      callBuilder(option) {
+        this.$root.$emit("style-mode", option);
+      }
+    }
   };
   </script>

src/components/inspector/encrypted-config.vue

@@ -13,7 +13,7 @@
       <div v-if="settings.encrypted">
         <select-user-group
           :key="componentKey"
-          :label="$t('Users/Groups to View')"
+          :label="$t('Users/Groups to View Encrypted Fields')"
           v-model="settings.assignments"
           :multiple="true"
           @input="emitChanges"

src/components/renderer/file-upload.vue

@@ -158,6 +158,10 @@ export default {
     this.removeDefaultClasses();
   },
   mounted() {
+    if (this.value) {
+      this.fetchFiles();
+    }
+    
     this.$root.$on('set-upload-data-name',
       (recordList, index, id) => this.listenRecordList(recordList, index, id));
 
@@ -597,6 +601,10 @@ export default {
       }
 
       if (displayMessage.length > 0) {
+        const data = JSON.parse(displayMessage);
+        if (data.message) {
+          displayMessage = data.message;
+        }
         window.ProcessMaker.alert(`${this.$t('File Upload Error:')}  ${displayMessage}`, 'danger');
       }
 
@@ -699,7 +707,29 @@ export default {
     },
     cfSkipFileUpload() {
       this.$emit('cf-skip-file-upload');
-    }
+    },
+    async fetchFiles() {
+      const fileIds = Array.isArray(this.value) ? this.value : [this.value];
+
+      const fetchPromises = fileIds.map(async (file) => {
+        const id = file?.file ?? file;
+        const endpoint = `files/${id}`;
+        try {
+            const response = await ProcessMaker.apiClient.get(endpoint);
+            if (response?.data) {
+                const fileExists = this.files.some(existingFile => existingFile.id === response.data.id);
+                // Check if the file already exists in the list before adding it.
+                if (!fileExists) {
+                    this.files.push(response.data);
+                }
+            }
+        } catch (error) {
+            console.error(`Failed to fetch file ${id}`, error);
+        }
+      });
+
+      return await Promise.all(fetchPromises);
+    },
   },
 };
 </script>

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

@@ -16,6 +16,7 @@
 <script>
 import VueFormRenderer from "../vue-form-renderer.vue";
 import CollectionRecordsList from "../inspector/collection-records-list.vue";
+import _ from 'lodash';
 
 const globalObject = typeof window === "undefined" ? global : window;
 
@@ -179,12 +180,12 @@ export default {
               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 === '') {
             this.localData = respData;
           }else{
-            this.localData = this.taskDraft.draft.data;
+            this.localData = _.merge({}, respData, this.taskDraft.draft.data);
           }
           
         })
@@ -212,9 +213,9 @@ export default {
     },
     record(record) {
       this.hasMustache = false;
-      if (record && !isNaN(record) && record > 0 && this.collection) {
+      if (record && !isNaN(record) && record > 0 && this.collection.collectionId) {
         this.selRecordId = record;
-        this.loadRecordCollection(this.selCollectionId, record, this.collectionmode);
+        this.loadRecordCollection(this.collection.collectionId, record, this.selDisplayMode);
       } else {
         if (this.isMustache(record)) {
           this.callbackRecord();

src/components/renderer/form-collection-view-control.vue

@@ -206,9 +206,9 @@ export default {
     },
     record(record) {
       this.hasMustache = false;
-      if (record && !isNaN(record) && record > 0 && this.collection) {
+      if (record && !isNaN(record) && record > 0 && this.collection.collectionId) {
         this.selRecordId = record;
-        this.loadRecordCollection(this.selCollectionId, record, this.collectionmode);
+        this.loadRecordCollection(this.collection.collectionId, record, this.collectionmode);
       } else {
         if (this.isMustache(record)) {
           this.callbackRecord();

src/components/renderer/form-masked-input.vue

@@ -41,7 +41,7 @@
       <input
         v-else
         v-model="localValue"
-        v-bind="componentConfig"
+        v-bind="componentConfigEncField"
         v-uni-id="name"
         :name="name"
         class="form-control"
@@ -231,6 +231,7 @@ export default {
       labelBtn: '',
       errorEncryptedField: '',
       concealExecuted: false,
+      componentConfigEncField: null,
     };
   },
   computed: {
@@ -289,17 +290,18 @@ export default {
      * "encrypted" attribute is enabled
      */
     if (this.encryptedConfig?.encrypted) {
+      this.componentConfigEncField = JSON.parse(JSON.stringify(this.componentConfig));
       if (uuidValidate(this.localValue)) {
         this.inputType = "password";
         this.iconBtn = "fas fa-eye";
         this.labelBtn = this.$t("Reveal");
         this.concealExecuted = true;
-        this.componentConfig.readonly = true;
+        this.componentConfigEncField.readonly = true;
       } else {
         this.inputType = "text";
         this.iconBtn = "fas fa-eye-slash";
         this.labelBtn = this.$t("Conceal");
-        this.componentConfig.readonly = false;
+        this.componentConfigEncField.readonly = this.componentConfig.readonly;
       }
     } else {
       this.inputType = this.dataType;
@@ -381,7 +383,7 @@ export default {
       this.iconBtn = "fas fa-eye";
       this.labelBtn = this.$t("Reveal");
       this.concealExecuted = true;
-      this.componentConfig.readonly = true;
+      this.componentConfigEncField.readonly = true;
       this.errorEncryptedField = "";
 
       // Assign uuid from encrypted data
@@ -392,7 +394,7 @@ export default {
       this.inputType = this.dataType;
       this.iconBtn = "fas fa-eye-slash";
       this.labelBtn = this.$t("Conceal");
-      this.componentConfig.readonly = false;
+      this.componentConfigEncField.readonly = this.componentConfig.readonly;
 
       // Assign value decrypted
       this.localValue = decryptedValue;