FOUR-14225 it is not possible to reorder the pages from the modal

src/components/sortable/Sortable.vue

@@ -5,8 +5,8 @@
         <i class="fa fa-search sortable-search-icon"></i>
         <input
           id="search"
-          class="form-control border-0 shadow-none px-0"
           v-model="search"
+          class="form-control border-0 shadow-none px-0"
           :placeholder="$t('Search here')"
           data-test="search"
         />
@@ -47,16 +47,33 @@ export default {
   data() {
     return {
       search: "",
-      filteredItems: this.items,
+      filteredItems: [...this.items],
     };
   },
   watch: {
     search(value) {
-      const cleanValue = value.trim().toLowerCase();
+      this.filteredItems = this.filterItems(value, this.items);
+    },
+    items: {
+      handler(newItems) {
+        this.filteredItems = [...newItems];
 
-      this.filteredItems = this.items.filter((item) => item[this.filterKey].toLowerCase().includes(cleanValue));
+        if (this.search.length > 0) {
+          this.filteredItems = this.filterItems(this.search, newItems);
+        }
+      },
+      deep: true,
     },
-  }
+  },
+  methods: {
+    clearSearch(value) {
+      return value.trim().toLowerCase();
+    },
+    filterItems(searchValue, items) {
+      const cleanSearch = this.clearSearch(searchValue);
+      return items.filter((item) => item[this.filterKey].toLowerCase().includes(cleanSearch));
+    },
+  },
 }
 </script>
 

src/components/sortable/sortableList/SortableList.vue

@@ -107,20 +107,24 @@ export default {
       if (draggedItemIndex !== draggedOverItemIndex) {
         // get the order of the dragged over item
         const tempOrder = this.itemsClone[draggedOverItemIndex].order;
-        // swap the order of the dragged item and the dragged over item
-        this.itemsClone[draggedItemIndex].order = tempOrder;
-        // set the index of the dragged item
-        const start = Math.min(draggedItemIndex, draggedOverItemIndex);
-        // set the index of the dragged over item
-        const end = Math.max(draggedItemIndex, draggedOverItemIndex);
         // set the increment
-        const increment = draggedItemIndex > draggedOverItemIndex ? 1 : -1;
+        const increment = this.draggedItem > this.draggedOverItem ? 1 : -1;
 
-        // update the order of the items
-        for (let i = start; i <= end; i++) {
-          if (i !== draggedItemIndex) {
-            this.itemsClone[i].order += increment;
+        // update the order of the items between the dragged item and the dragged over item
+        if (draggedItemIndex < draggedOverItemIndex) {
+          for (let i = draggedItemIndex + 1; i <= draggedOverItemIndex; i++) {
+            const orderAux = this.itemsClone[i].order;
+            this.itemsClone[i].order = orderAux + increment;
           }
+
+          this.itemsClone[draggedItemIndex].order = tempOrder;
+        } else if (draggedItemIndex > draggedOverItemIndex) {
+          for (let i = draggedOverItemIndex; i <= draggedItemIndex - 1; i++) {
+            const orderAux = this.itemsClone[i].order;
+            this.itemsClone[i].order = orderAux + increment;
+          }
+
+          this.itemsClone[draggedItemIndex].order = tempOrder;
         }
       }
 

src/components/vue-form-builder.vue

@@ -359,7 +359,8 @@
       header-close-content="×"
       role="dialog"
       size="lg"
-      :ok-title="$t('CONFIRM')"
+      :title="$t('Edit Pages')"
+      :ok-title="$t('DONE')"
       ok-only
       ok-variant="secondary"
       header-class = "modal-header-custom"
@@ -1346,6 +1347,7 @@ export default {
       this.updateState();
       this.inspect(clone);
     },
+
   }
 };
 </script>

src/mixins/canOpenJsonFile.js

@@ -24,7 +24,7 @@ export default {
       if (json instanceof Array) {
         screen = { config:json, computed: [], customCSS: null };
       } else if (json && json.screens instanceof Array) {
-        screen = json.screens[1];
+        screen = json.screens[0];
         if (window.exampleScreens instanceof Array) {
           window.exampleScreens = json.screens;
         }