@processmaker/screen-builder 2.85.1 → 2.85.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.85.1",
+  "version": "2.85.3",
   "scripts": {
     "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",

package/src/components/renderer/form-button.vue

@@ -57,6 +57,13 @@ export default {
         boundary: 'window',
       };
     },
+    buttonInfo() {
+      return {
+        name: this.name,
+        label: this.label,
+        value: this.fieldValue
+      };
+    }
   },
   methods: {
     setValue(parent, name, value) {
@@ -83,7 +90,7 @@ export default {
         }
         this.$emit('input', this.fieldValue);
         this.$nextTick(() => {
-          this.$emit('submit', this.eventData, this.loading);
+          this.$emit('submit', this.eventData, this.loading, this.buttonInfo);
         });
         return;
       }

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

@@ -115,7 +115,7 @@ export default {
       hasErrors: false,
       refreshScreen: 0,
       redirecting: null,
-      loadingButton: false
+      loadingButton: false,
     };
   },
   watch: {
@@ -223,7 +223,7 @@ export default {
           }
           this.renderComponent = component;
         }
-      },
+      }
     },
   },
   computed: {
@@ -289,7 +289,7 @@ export default {
       }
     },
     loadTask() {
-      const url = `/${this.taskId}?include=data,user,requestor,processRequest,component,screen,requestData,loopContext,bpmnTagName,interstitial,definition,nested,userRequestPermission`;
+      const url = `/${this.taskId}?include=data,user,draft,requestor,processRequest,component,screen,requestData,loopContext,bpmnTagName,interstitial,definition,nested,userRequestPermission`;
       // For Vocabularies
       if (window.ProcessMaker && window.ProcessMaker.packages && window.ProcessMaker.packages.includes('package-vocabularies')) {
         window.ProcessMaker.VocabulariesSchemaUrl = `vocabularies/task_schema/${this.taskId}`;
@@ -324,6 +324,15 @@ export default {
         this.resetScreenState();
         this.requestData = _.get(this.task, 'request_data', {});
         this.loopContext = _.get(this.task, "loop_context", "");
+
+        if (this.task.draft) {
+          this.requestData = _.merge(
+            {},
+            this.requestData,
+            this.task.draft.data
+          );
+        }
+
         this.refreshScreen++;
       }
 
@@ -433,7 +442,7 @@ export default {
       }
       return 'card-header text-capitalize text-white ' + header;
     },
-    submit(formData = null, loading = false) {
+    submit(formData = null, loading = false, buttonInfo = null) {
       //single click
       if (this.disabled) {
         return;
@@ -449,7 +458,7 @@ export default {
       } else {
         this.loadingButton = false;
       }
-      this.$emit('submit', this.task, loading);
+      this.$emit('submit', this.task, loading, buttonInfo);
 
       if (this.task && this.task.allow_interstitial && !this.loadingButton) {
         this.task.interstitial_screen['_interstitial'] = true;

package/src/components/vue-form-renderer.vue

@@ -246,8 +246,8 @@ export default {
         node.$children.forEach((child) => this.registerCustomFunctions(child));
       }
     },
-    submit(eventData, loading = false) {
-      this.$emit("submit", this.data, loading);
+    submit(eventData, loading = false, buttonInfo = null) {
+      this.$emit("submit", this.data, loading, buttonInfo);
     },
     parseCss() {
       const containerSelector = `.${this.containerClass}`;

package/src/mixins/Json2Vue.js

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

package/src/mixins/ScreenBase.js

@@ -145,7 +145,7 @@ export default {
         return 'MUSTACHE: ' + e.message;
       }
     },
-    async submitForm(eventData, loading = false) {
+    async submitForm(eventData, loading = false, buttonInfo = null) {
       await this.validateNow(findRootScreen(this));
       this.hasSubmitted(true);
       if (!this.valid__ || this.disableSubmit__) {
@@ -155,7 +155,7 @@ export default {
         // if the form is not valid the data is not emitted
         return;
       }
-      this.$emit('submit', this.vdata, loading);
+      this.$emit('submit', this.vdata, loading, buttonInfo);
     },
     resetValue(safeDotName, variableName) {
       this.setValue(safeDotName, null);

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");
+  }
+};