@processmaker/screen-builder 3.0.2 → 3.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "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.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.0",
+    "@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/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">

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"
@@ -27,8 +32,18 @@
                 class="mr-2 ml-1"
               />
               {{ element.config.name || $t("Variable Name") }}
+              <b-badge
+                v-if="isInClipboard(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="screenType === 'form'"
                   :index="index"
                   :config="element.config"
                   :isInClipboard="isInClipboard(items[index])"
@@ -74,6 +89,7 @@
               :config="element.config"
               @inspect="inspect"
               @update-state="$emit('update-state')"
+              :screen-type="screenType"
             />
           </div>
         </div>
@@ -91,8 +107,18 @@
                 class="mr-2 ml-1"
               />
               {{ element.config.name || $t("Variable Name") }}
+              <b-badge
+                v-if="isInClipboard(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="screenType === 'form'"
                   :index="index"
                   :config="element.config"
                   :isInClipboard="isInClipboard(items[index])"
@@ -128,6 +154,7 @@
               ]"
               :tabindex="element.config.interactive ? 0 : -1"
               :config="element.config"
+              :screen-type="screenType"
               @input="
                 element.config.interactive
                   ? (element.config.content = $event)
@@ -173,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: [],
@@ -258,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>
@@ -334,4 +367,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>

package/src/components/editor/multi-column.vue

@@ -42,8 +42,18 @@
                       class="mr-2 ml-1"
                     />
                     {{ element.config.name || $t("Variable Name") }}
+                    <b-badge
+                      v-if="isInClipboard(element) && 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="screenType === 'form'"
                         :index="index"
                         :config="element.config"
                         :isInClipboard="isInClipboard(element)"
@@ -86,6 +96,7 @@
                     :selected="selected"
                     :ai-element="element"
                     :config="element.config"
+                    :screen-type="screenType"
                     @inspect="inspect"
                     @update-state="$emit('update-state')"
                   />
@@ -108,8 +119,18 @@
                       class="mr-2 ml-1"
                     />
                     {{ element.config.name || $t("Variable Name") }}
+                    <b-badge
+                      v-if="isInClipboard(element) && 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="screenType === 'form'"
                         :index="index"
                         :config="element.config"
                         :isInClipboard="isInClipboard(element)"
@@ -145,6 +166,7 @@
                     ]"
                     :tabindex="element.config.interactive ? 0 : -1"
                     :config="element.config"
+                    :screen-type="screenType"
                     @input="
                       element.config.interactive
                         ? (element.config.content = $event)
@@ -194,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: [],
@@ -375,4 +397,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>

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

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

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

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

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

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

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

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

package/src/components/task.vue

@@ -107,6 +107,7 @@ export default {
     alwaysAllowEditing: { type: Boolean, default: false },
     disableInterstitial: { type: Boolean, default: false },
     waitLoadingListeners: { type: Boolean, default: false },
+    isWebEntry: { type: Boolean, default: false },
   },
   data() {
     return {
@@ -677,55 +678,97 @@ export default {
         return null;
       }
     },
+    
     /**
-     * Handles the process completion and redirects the user based on the task assignment.
-     * @param {object} data - The data object containing endEventDestination.
-     * @param {string} userId - The ID of the current user.
-     * @param {string} requestId - The ID of the current request.
+     * Handles redirection upon process completion, considering destination type and user task validation.
+     * @async
+     * @param {Object} data - Contains information about the end event destination.
+     * @param {number} userId - ID of the current user.
+     * @param {number} requestId - ID of the request to complete.
+     * @returns {Promise<void>}
      */
     async processCompletedRedirect(data, userId, requestId) {
+      // Emit completion event if accessed through web entry.
+      if (this.isWebEntry) {
+        this.$emit("completed", requestId);
+        return;
+      }
+
       try {
-        // Verify if is not anotherProcess type
-        if (data.endEventDestination.type !== "anotherProcess") {
-          if (data?.endEventDestination.value) {
-            window.location.href = data?.endEventDestination.value;
-          } else {
-            window.location.href = `/requests/${this.requestId}`;
-          }
+        const destinationUrl = this.resolveDestinationUrl(data);
+        if (destinationUrl) {
+          window.location.href = destinationUrl;
           return;
         }
-        // Parse endEventDestination from the provided data
-        const endEventDestination = this.parseJsonSafely(
-          data.endEventDestination.value
-        );
-        // Get the next request using retry logic
-        const nextRequest = await this.retryApiCall(() =>
-          this.getNextRequest(
-            endEventDestination.processId,
-            endEventDestination.startEvent
-          )
-        );
-
-        const params = {
-          processRequestId: nextRequest.data.id,
-          status: "ACTIVE",
-          page: 1,
-          perPage: 1
-        };
-        // Get the tasks for the next request using retry logic
-        const response = await this.retryApiCall(() => this.getTasks(params));
-        // Handle the first task from the response
-        const firstTask = response.data.data[0];
-        if (firstTask && firstTask.user_id === userId) {
-          this.redirectToTask(firstTask.id);
-        } else {
-          this.redirectToRequest(requestId);
-        }
+
+        // Proceed to handle redirection to the next request if applicable.
+        await this.handleNextRequestRedirection(data, userId, requestId);
       } catch (error) {
         console.error("Error processing completed redirect:", error);
         this.$emit("completed", requestId);
       }
     },
+
+    /**
+     * Resolves the URL to redirect to if the end event is not another process.
+     * @param {Object} data - Contains the end event destination data.
+     * @returns {string|null} - The URL for redirection, or null if proceeding to another process.
+     */
+    resolveDestinationUrl(data) {
+      if (data.endEventDestination.type !== "anotherProcess") {
+        return data.endEventDestination.value || `/requests/${this.requestId}`;
+      }
+      return null;
+    },
+
+    /**
+     * Handles redirection logic to the next request's task or fallback to the request itself.
+     * @async
+     * @param {Object} data - Contains the end event destination.
+     * @param {number} userId - ID of the current user.
+     * @param {number} requestId - ID of the request to complete.
+     * @returns {Promise<void>}
+     */
+    async handleNextRequestRedirection(data, userId, requestId) {
+      const nextRequest = await this.fetchNextRequest(data.endEventDestination);
+      const firstTask = await this.fetchFirstTask(nextRequest);
+
+      if (firstTask?.user_id === userId) {
+        this.redirectToTask(firstTask.id);
+      } else {
+        this.redirectToRequest(requestId);
+      }
+    },
+
+    /**
+     * Fetch the next request using retry logic.
+     * @async
+     * @param {Object} endEventDestination - The parsed end event destination object.
+     * @returns {Promise<Object>} - The next request data.
+     */
+    async fetchNextRequest(endEventDestination) {
+      const destinationData = this.parseJsonSafely(endEventDestination.value);
+      return await this.retryApiCall(() =>
+        this.getNextRequest(destinationData.processId, destinationData.startEvent)
+      );
+    },
+
+    /**
+     * Fetch the first task from the next request using retry logic.
+     * @async
+     * @param {Object} nextRequest - The next request object.
+     * @returns {Promise<Object|null>} - The first task data, or null if no tasks found.
+     */
+    async fetchFirstTask(nextRequest) {
+      const params = {
+        processRequestId: nextRequest.data.id,
+        status: "ACTIVE",
+        page: 1,
+        perPage: 1
+      };
+      const response = await this.retryApiCall(() => this.getTasks(params));
+      return response.data.data[0] || null;
+    },
     getAllowedRequestId() {
       const permissions = this.task.user_request_permission || [];
       const permission = permissions.find(item => item.process_request_id === this.parentRequest)