@processmaker/screen-builder 3.0.2 → 3.0.3

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

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

@@ -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>

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

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

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,6 +202,15 @@
                     class="mr-2 ml-1"
                   />
                   {{ element.config.name || element.label || $t("Field Name") }}
+                  <b-badge
+                    v-if="!isClipboardPage(tabPage) && isInClipboard(extendedPages[tabPage].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
                       v-if="!isClipboardPage(tabPage)"
@@ -245,7 +255,9 @@
                   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"
@@ -266,6 +278,15 @@
                     class="mr-2 ml-1"
                   />
                   {{ element.config.name || $t("Variable Name") }}
+                  <b-badge
+                    v-if="!isClipboardPage(tabPage) && isInClipboard(extendedPages[tabPage].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
                       v-if="!isClipboardPage(tabPage)"
@@ -299,7 +320,9 @@
                   :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 }
                   ]"
                   @input="
@@ -1745,4 +1768,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

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