From e25e6fef78544fd7520ceacf736f6f384dc13c45 Mon Sep 17 00:00:00 2001 From: Miguel Angel Date: Tue, 27 Feb 2024 16:26:19 -0400 Subject: [PATCH 1/2] fix: allow sort pages on importing screen --- src/components/sortable/Sortable.vue | 25 ++++++++++++++++--- .../sortable/sortableList/SortableList.vue | 24 ++++++++++-------- src/components/vue-form-builder.vue | 6 ++++- src/mixins/canOpenJsonFile.js | 2 +- 4 files changed, 41 insertions(+), 16 deletions(-) diff --git a/src/components/sortable/Sortable.vue b/src/components/sortable/Sortable.vue index 04fac213c..7575ac9f3 100644 --- a/src/components/sortable/Sortable.vue +++ b/src/components/sortable/Sortable.vue @@ -5,8 +5,8 @@ @@ -52,11 +52,28 @@ export default { }, 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)); + }, + }, } diff --git a/src/components/sortable/sortableList/SortableList.vue b/src/components/sortable/sortableList/SortableList.vue index 182ea0576..32fbad210 100644 --- a/src/components/sortable/sortableList/SortableList.vue +++ b/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; - // 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; } } diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue index 73eddfa2f..bd7bb2d8b 100644 --- a/src/components/vue-form-builder.vue +++ b/src/components/vue-form-builder.vue @@ -360,7 +360,7 @@ role="dialog" size="lg" :title="$t('Edit Pages')" - :ok-title="$t('CONFIRM')" + :ok-title="$t('DONE')" ok-only ok-variant="secondary" > @@ -370,6 +370,7 @@ @item-edit="() => {}" @item-delete="confirmDelete" @add-page="$bvModal.show('addPageModal')" + @ordered="orderPages" /> @@ -1339,6 +1340,9 @@ export default { this.updateState(); this.inspect(clone); }, + orderPages(items) { + this.config = [...items]; + } } }; diff --git a/src/mixins/canOpenJsonFile.js b/src/mixins/canOpenJsonFile.js index 9e8252bae..9a02a992b 100644 --- a/src/mixins/canOpenJsonFile.js +++ b/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; } From 86c37ed22a84d9287f92be718519931046cdb43b Mon Sep 17 00:00:00 2001 From: David Callizaya Date: Tue, 27 Feb 2024 17:20:09 -0400 Subject: [PATCH 2/2] Fix order by `.order` instead of `index` --- src/components/sortable/Sortable.vue | 4 ++-- src/components/sortable/sortableList/SortableList.vue | 2 +- src/components/vue-form-builder.vue | 5 +---- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/components/sortable/Sortable.vue b/src/components/sortable/Sortable.vue index 7575ac9f3..ebaec1509 100644 --- a/src/components/sortable/Sortable.vue +++ b/src/components/sortable/Sortable.vue @@ -47,7 +47,7 @@ export default { data() { return { search: "", - filteredItems: this.items, + filteredItems: [...this.items], }; }, watch: { @@ -56,7 +56,7 @@ export default { }, items: { handler(newItems) { - this.filteredItems = newItems; + this.filteredItems = [...newItems]; if (this.search.length > 0) { this.filteredItems = this.filterItems(this.search, newItems); diff --git a/src/components/sortable/sortableList/SortableList.vue b/src/components/sortable/sortableList/SortableList.vue index 2d8553e95..e6e749c2e 100644 --- a/src/components/sortable/sortableList/SortableList.vue +++ b/src/components/sortable/sortableList/SortableList.vue @@ -108,7 +108,7 @@ export default { // get the order of the dragged over item const tempOrder = this.itemsClone[draggedOverItemIndex].order; // set the increment - const increment = draggedItemIndex > draggedOverItemIndex ? 1 : -1; + const increment = this.draggedItem > this.draggedOverItem ? 1 : -1; // update the order of the items between the dragged item and the dragged over item if (draggedItemIndex < draggedOverItemIndex) { diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue index f475d2ad4..d104354a2 100644 --- a/src/components/vue-form-builder.vue +++ b/src/components/vue-form-builder.vue @@ -378,7 +378,6 @@ @item-edit="() => {}" @item-delete="confirmDelete" @add-page="$bvModal.show('addPageModal')" - @ordered="orderPages" /> @@ -1348,9 +1347,7 @@ export default { this.updateState(); this.inspect(clone); }, - orderPages(items) { - this.config = [...items]; - } + } };