@processmaker/screen-builder 2.85.2 → 2.85.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.85.2",
+  "version": "2.85.4",
   "scripts": {
     "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",
@@ -11,7 +11,8 @@
     "run-cypress": "TZ=UTC nyc cypress run",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test-storybook": "test-storybook"
+    "test-storybook": "test-storybook",
+    "serve": "npm run dev"
   },
   "main": "./dist/vue-form-builder.umd.js",
   "module": "./dist/vue-form-builder.es.js",

package/src/components/sortable/Sortable.vue

@@ -47,7 +47,14 @@ export default {
   data() {
     return {
       search: "",
-      filteredItems: [...this.items],
+      filteredItems: [...this.items].map((item, index) => {
+        // Add the order property to the items if it doesn't exist
+        if (item.order === undefined) {
+          // eslint-disable-next-line no-param-reassign
+          this.$set(item, "order", index + 1);
+        }
+        return item;
+      })
     };
   },
   watch: {

package/src/components/sortable/sortableList/SortableList.vue

@@ -64,6 +64,7 @@ export default {
   },
   data() {
     return {
+      refreshSort: 1,
       newName: '',
       draggedItem: 0,
       draggedOverItem: 0,
@@ -72,9 +73,9 @@ export default {
   },
   computed: {
     sortedItems() {
-      const sortedItems = [...this.filteredItems].sort(
-        (a, b) => a.order - b.order
-      );
+      const sortedItems =
+        this.refreshSort &&
+        [...this.filteredItems].sort((a, b) => a.order - b.order);
       return sortedItems;
     }
   },
@@ -178,7 +179,7 @@ export default {
           item.order = index + 1;
         });
       }
-
+      this.refreshSort++;
       this.$emit('ordered', itemsSortedClone);
     },
     dragOver(event) {

package/src/components/task.vue

@@ -96,7 +96,9 @@ export default {
     beforeLoadTask: { type: Function, default: defaultBeforeLoadTask },
     initialLoopContext: { type: String, default: "" },
     taskPreview: { type: Boolean, default: false },
-    loading: { type: Number, default: null }
+    loading: { type: Number, default: null },
+    alwaysAllowEditing: { type: Boolean, default: false },
+    disableInterstitial: { type: Boolean, default: false },
   },
   data() {
     return {
@@ -194,7 +196,9 @@ export default {
         }
         if (this.taskPreview && this.task.status === "CLOSED") {
           this.task.interstitial_screen['_interstitial'] = false;
-          this.task.screen.config = this.disableForm(this.task.screen.config);
+          if (!this.alwaysAllowEditing) {
+            this.task.screen.config = this.disableForm(this.task.screen.config);
+          }
           this.screen = this.task.screen;
         }
       }
@@ -460,7 +464,7 @@ export default {
       }
       this.$emit('submit', this.task, loading, buttonInfo);
 
-      if (this.task && this.task.allow_interstitial && !this.loadingButton) {
+      if (this.task?.allow_interstitial && !this.loadingButton && !this.disableInterstitial) {
         this.task.interstitial_screen['_interstitial'] = true;
         this.screen = this.task.interstitial_screen;
       }
@@ -489,10 +493,7 @@ export default {
       return allowed ? this.parentRequest : this.requestId
     },
     processUpdated: _.debounce(function(data) {
-      if (
-        data.event === 'ACTIVITY_COMPLETED' ||
-        data.event === 'ACTIVITY_ACTIVATED'
-      ) {
+      if (data.event === 'ACTIVITY_ACTIVATED') {
         this.reload();
       }
       if (data.event === 'ACTIVITY_EXCEPTION') {
@@ -524,6 +525,13 @@ export default {
         this.reload();
       }
     },
+    existsEventMessage(id, data) {
+      if (sessionStorage.getItem(id)) {
+        return true;
+      }
+      sessionStorage.setItem(id, data);
+      return false;
+    },
     listenForParentChanges() {
       if (!this.parentRequest) {
         return;
@@ -533,10 +541,16 @@ export default {
         `ProcessMaker.Models.ProcessRequest.${this.parentRequest}`,
         '.ProcessUpdated',
         (data) => {
-          if (['ACTIVITY_ACTIVATED'].includes(data.event)) {
+          if (
+            ['ACTIVITY_ACTIVATED'].includes(data.event) &&
+            !this.existsEventMessage(`${data.event}-${this.userId}-${this.taskId}`)
+          ) {
             this.closeTask(this.parentRequest);
           }
-          if (['ACTIVITY_COMPLETED'].includes(data.event)) {
+          if (
+            ["ACTIVITY_COMPLETED"].includes(data.event) &&
+            !this.existsEventMessage(`${data.event}-${this.userId}-${this.taskId}`)
+          ) {
             if (this.task.process_request.status === 'COMPLETED') {
               this.processCompleted();
             }

package/src/mixins/Json2Vue.js

@@ -54,6 +54,9 @@ export default {
       return str.replace(/\.\d/g, match => `[${match.substr(1)}]`);
     },
     submit(eventData, loading = false, buttonInfo = null) {
+      if (buttonInfo && this.loopContext) {
+        buttonInfo.loopContext = this.loopContext;
+      }
       this.$emit('submit', this.value, loading, buttonInfo);
     },
     buildComponent(definition) {

package/src/stories/Sortable.stories.js

@@ -234,3 +234,52 @@ export const UserCanSortWithFilterByText = {
     expect(itemsOrder[4]).toHaveAttribute("data-order", "5");
   }
 };
+
+// User can reorder items that does not have an order
+export const UserCanReorderItemsThatDoesNotHaveAnOrder = {
+  args: {
+    filterKey: "name",
+    items: [
+      { name: "Page 1" },
+      { name: "Page 2" },
+      { name: "Page 3" },
+      { name: "Page 4" },
+      { name: "Page 5" }
+    ]
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Drag item-1 item-5 position
+    await dragAndDrop(
+      canvas.getByTestId("item-1"),
+      canvas.getByTestId("item-5")
+    );
+
+    // Drag item-1 item-4 position
+    await dragAndDrop(
+      canvas.getByTestId("item-1"),
+      canvas.getByTestId("item-4")
+    );
+
+    // Drag item-1 item-3 position
+    await dragAndDrop(
+      canvas.getByTestId("item-1"),
+      canvas.getByTestId("item-3")
+    );
+
+    // Drag item-1 item-2 position
+    await dragAndDrop(
+      canvas.getByTestId("item-1"),
+      canvas.getByTestId("item-2")
+    );
+
+    // Check the new order
+    const items = canvas.getAllByTestId(/item-\d+/);
+    expect(items[0]).toHaveTextContent("Page 5");
+    expect(items[1]).toHaveTextContent("Page 4");
+    expect(items[2]).toHaveTextContent("Page 3");
+    expect(items[3]).toHaveTextContent("Page 2");
+    expect(items[4]).toHaveTextContent("Page 1");
+  }
+};