@processmaker/screen-builder 2.85.2 → 2.85.3

package/package.json

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

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