feat(core): Mutate item position on drag end (#1143)

ergonode · Nov 25, 2021 · 6936873 · 6936873
1 parent db910ba
commit 6936873
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/...e/attributes/src/extends/attribute/components/Forms/Sections/AttributeOptionKeyValues.vue b/...e/attributes/src/extends/attribute/components/Forms/Sections/AttributeOptionKeyValues.vue
@@ -143,6 +143,7 @@ export default {
                 type: OPTION_STATES.MOVE,
                 value: index,
             });
+
             this.setSortedOptions(items.map(item => item.fieldKey));
 
             this.onScopeValueChange({

diff --git a/modules/@ergonode/ui/src/components/DraggableForm/DraggableForm.vue b/modules/@ergonode/ui/src/components/DraggableForm/DraggableForm.vue
@@ -30,7 +30,8 @@
                     :index="index"
                     :item="item"
                     @remove-item="onRemoveItem"
-                    @swap="onSwapItems">
+                    @swap="onSwapItems"
+                    @drag-end="onDragEndItem">
                     <template #item>
                         <slot
                             name="item"
@@ -236,6 +237,18 @@ export default {
 
             event.preventDefault();
         },
+        onDragEndItem(index) {
+            const optionKey = this.optionKey || 'id';
+            const newItemId = this.localItems[index][optionKey];
+            const oldItemIndex = this.items.findIndex(item => item[optionKey] === newItemId);
+
+            if (index !== oldItemIndex) {
+                this.$emit('move-item', {
+                    index,
+                    items: this.localItems,
+                });
+            }
+        },
         onRemoveItem(item) {
             this.$emit('remove-item', item);
         },

diff --git a/modules/@ergonode/ui/src/components/DraggableForm/DraggableFormItem.vue b/modules/@ergonode/ui/src/components/DraggableForm/DraggableFormItem.vue
@@ -158,6 +158,8 @@ export default {
                 });
 
                 this.$emit('remove-item', this.item);
+            } else {
+                this.$emit('drag-end', this.index);
             }
 
             this.__setState({