@processmaker/screen-builder 3.0.1 → 3.0.3

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)
@@ -866,6 +909,7 @@ export default {
 
       if (
         elementDestinationValue &&
+        elementDestinationValue !== 'taskSource' &&
         data?.params[0]?.tokenId === this.taskId &&
         data?.params[0]?.requestStatus === 'ACTIVE'
       ) {

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="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="[
-                    elementCssClass(element),
+                    styleMode === 'Modern' && element.component === 'FormRecordList' 
+                    ? elementCssClassModern(element) 
+                    : elementCssClass(element),
                     { 'prevent-interaction': !element.config.interactive }
                   ]"
                   @input="
@@ -376,7 +399,7 @@
               v-model="accordion.open"
             >
               <component
-                v-if="shouldShow(item)"
+                v-if="shouldShow(item, accordion)"
                 :is="item.type"
                 v-for="(item, index) in getInspectorFields(accordion)"
                 :key="index"
@@ -694,8 +717,10 @@ export default {
       collapse: {},
       groupOrder: {},
       searchProperties: ['name'],
-      showTemplatesPanel: false,
-      enableOption: true
+      enableOption: true,
+      enableDesignOption: true,
+      styleMode: null,
+      showTemplatesPanel: false
     };
   },
   computed: {
@@ -711,7 +736,7 @@ export default {
     clipboardItems() {
       return this.$store.getters["clipboardModule/clipboardItems"];
     },
-    
+
     sortedPages() {
       return [...this.config].sort((a, b) => a.order - b.order);
     },
@@ -855,6 +880,9 @@ export default {
     this.$root.$on("ai-form-progress-updated", (progress, nonce) => {
       this.updateProgress(progress, nonce);
     });
+    this.$root.$on("style-mode", (mode) => {
+      this.styleMode = mode;
+    });
     this.setGroupOrder(defaultGroupOrder);
   },
   methods: {
@@ -876,7 +904,7 @@ export default {
         this.$refs.tabsBar.openClipboard();
       });
     },
-    shouldShow(item) {
+    shouldShow(item, accordion) {
       const sourceOptions = this.inspection.config[item.field]?.sourceOptions;
 
       if (sourceOptions === 'Variable') {
@@ -888,6 +916,21 @@ export default {
         this.enableOption = false;
       }
 
+      if(this.styleMode === "Modern") {
+        this.enableDesignOption = false;
+      } else {
+        this.enableDesignOption = true;
+      }
+
+      if(accordion.name === "Design") {
+        if(item.type === "ColorSelectRecord" && !this.enableDesignOption) {
+          return false;
+        }
+        if(item.type === "ColorSelectModern" && this.enableDesignOption ) {
+          return false;
+        }
+      }
+
       return !(item.if === "hideControl" && this.enableOption === false);
     },
     isCurrentPageEmpty(currentPage) {
@@ -1189,6 +1232,9 @@ export default {
       });
     },
     updateState() {
+      if (this.selected) {
+        this.checkAndRefreshUuids(this.selected, this.clipboardPage.items);
+      }
       // paste the clipboard items into the current page
       this.replaceClipboardContent(this.config);
       this.$store.dispatch("undoRedoModule/pushState", {
@@ -1523,6 +1569,26 @@ export default {
       this.updateState();
       this.inspect(clone);
     },
+    /**
+     * Compares a config with an array and updates UUIDs if different.
+     *
+     * @param {Object} selected - The config to compare.
+     * @param {Array<Object>} clipboardItems - Array of configs to check.
+     * @returns {Array<Object>} - Updated array with new UUIDs.
+     */
+    checkAndRefreshUuids(selected, clipboardItems) {
+      return clipboardItems.map(config => {
+        // Use lodash to compare the config objects
+        const isEqual = _.isEqual(selected.config, config.config);
+
+        // If they are not equal, update the UUID
+        if (!isEqual) {
+          config.uuid = this.generateUUID(); // Update UUID
+        }
+
+        return config;
+      });
+    },
   }
 };
 </script>
@@ -1702,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/form-builder-controls.js

@@ -46,6 +46,9 @@ import {
   tooltipProperty,
   LoadingSubmitButtonProperty,
   LabelSubmitButtonProperty,
+  bgcolorModern,
+  bgcolorPropertyRecord,
+  colorPropertyRecord,
 } from './form-control-common-properties';
 
 export default [
@@ -557,8 +560,17 @@ export default [
           },
           if: 'hideControl'
         },
-        colorProperty,
-        bgcolorProperty,
+        {
+          type: 'collectionDesignerMode',
+          field: 'designerMode',
+          config: {
+            label: 'Table Style',
+            helper: ''
+          }
+        },
+        colorPropertyRecord,
+        bgcolorPropertyRecord,
+        bgcolorModern
       ],
     },
   },

package/src/form-control-common-properties.js

@@ -1,6 +1,33 @@
 import Tooltip from './components/inspector/tooltip';
 import DeviceVisibility from './components/inspector/device-visibility';
 
+export const bgcolorModern = {
+  type: 'ColorSelectModern',
+  field: 'bgcolormodern',
+  config: {
+    label: '',
+    helper: '',
+    options: [
+      {
+        value: 'alert alert-primary',
+        content: 'primary',
+      },
+      {
+        value: 'alert alert-success',
+        content: 'success',
+      },
+      {
+        value: 'alert alert-warning',
+        content: 'warning',
+      },
+      {
+        value: 'alert alert-secondary',
+        content: 'secondary',
+      },
+    ],
+  },
+};
+
 export const bgcolorProperty = {
   type: 'ColorSelect',
   field: 'bgcolor',
@@ -44,6 +71,49 @@ export const bgcolorProperty = {
   },
 };
 
+export const bgcolorPropertyRecord = {
+  type: 'ColorSelectRecord',
+  field: 'bgcolor',
+  config: {
+    label: 'Background Color',
+    helper: 'Set the element\'s background color',
+    options: [
+      {
+        value: 'alert alert-primary',
+        content: 'primary',
+      },
+      {
+        value: 'alert alert-secondary',
+        content: 'secondary',
+      },
+      {
+        value: 'alert alert-success',
+        content: 'success',
+      },
+      {
+        value: 'alert alert-danger',
+        content: 'danger',
+      },
+      {
+        value: 'alert alert-warning',
+        content: 'warning',
+      },
+      {
+        value: 'alert alert-info',
+        content: 'info',
+      },
+      {
+        value: 'alert alert-light',
+        content: 'light',
+      },
+      {
+        value: 'alert alert-dark',
+        content: 'dark',
+      },
+    ],
+  },
+};
+
 export const colorProperty = {
   type: 'ColorSelect',
   field: 'color',
@@ -87,6 +157,49 @@ export const colorProperty = {
   },
 };
 
+export const colorPropertyRecord = {
+  type: 'ColorSelectRecord',
+  field: 'color',
+  config: {
+    label: 'Text Color',
+    helper: 'Set the element\'s text color',
+    options: [
+      {
+        value: 'text-primary',
+        content: 'primary',
+      },
+      {
+        value: 'text-secondary',
+        content: 'secondary',
+      },
+      {
+        value: 'text-success',
+        content: 'success',
+      },
+      {
+        value: 'text-danger',
+        content: 'danger',
+      },
+      {
+        value: 'text-warning',
+        content: 'warning',
+      },
+      {
+        value: 'text-info',
+        content: 'info',
+      },
+      {
+        value: 'text-light',
+        content: 'light',
+      },
+      {
+        value: 'text-dark',
+        content: 'dark',
+      },
+    ],
+  },
+};
+
 // Ref https://mathiasbynens.be/notes/javascript-identifiers
 export const javascriptReservedKeywords = 'null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false';
 
@@ -96,8 +209,8 @@ export const keyNameProperty = {
   config: {
     label: 'Variable Name',
     name: 'Variable Name',
-    // Update tests/e2e/specs/Builder.spec.js when changing this
-    validation: 'regex:/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(?<!\\.)$/|required|not_in:' + javascriptReservedKeywords,
+    // Update tests/e2e/specs/Builder.spec.js when changing dot_notation
+    validation: 'dot_notation|required|not_in:' + javascriptReservedKeywords,
     helper: 'A variable name is a symbolic name to reference information.',
   },
 };

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

@@ -58,11 +58,17 @@ export default {
     addUuidToElements(screenConfig) {
       const replaceInPage = (page) => {
         page.items.forEach((item, index) => {
-          if (!item.uuid) {
-            item.uuid = this.generateUUID();
-          }
-          if (item.items) {
-            replaceInPage(item);
+          if (item instanceof Array) {
+            // multi-column each item in the column
+            replaceInPage({ items: item });
+          } else {
+            // loop through children
+            if (!item.uuid) {
+              item.uuid = this.generateUUID();
+            }
+            if (item.items) {
+              replaceInPage(item);
+            }
           }
         });
       }
@@ -109,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);
@@ -138,6 +147,7 @@ export default {
         }
       );
       if (confirm) {
+        this.clipboardPage.items = [];
         this.$store.dispatch("clipboardModule/clearClipboard");
         this.$root.$emit('update-clipboard');
       }

package/src/mixins/HasColorProperty.js

@@ -7,6 +7,11 @@ export default {
       element.config.color ? css.push(element.config.color) : null;
       return css.join(' ');
     },
+    elementCssClassModern(element) {
+      const css = [];
+      element.config.bgcolormodern ? css.push(element.config.bgcolormodern) : null;
+      return css.join(' ');
+    }
   },
 };