reorder wip

This commit is contained in:
Joel McKinnon 2020-01-25 12:46:15 -08:00
parent 96746f4042
commit 5055a18ca1

View File

@ -29,16 +29,21 @@
</button> </button>
</div> </div>
<div class="c-c condition-collection"> <div class="c-c condition-collection">
<div class="c-c__container-holder"> <ul class="c-c__container-holder">
<div v-for="(conditionIdentifier, index) in conditionCollection" <li v-for="(conditionIdentifier, index) in conditionCollection"
:key="conditionIdentifier.key" :key="conditionIdentifier.key"
> >
<div v-if="isEditing"> <div v-if="isEditing">
<div :id="'drop' + index" <div v-if="index !== conditionCollection.length - 1"
:id="'drop' + index"
class="c-c__drag-ghost" class="c-c__drag-ghost"
@drop.prevent="dropCondition" @drop.prevent="dropCondition"
@dragover.prevent @dragover.prevent
></div> ></div>
<div v-else
class="c-c__drag-ghost"
>
</div>
<ConditionEdit :condition-identifier="conditionIdentifier" <ConditionEdit :condition-identifier="conditionIdentifier"
:current-condition-identifier="currentConditionIdentifier" :current-condition-identifier="currentConditionIdentifier"
:condition-index="index" :condition-index="index"
@ -52,8 +57,8 @@
:current-condition-identifier="currentConditionIdentifier" :current-condition-identifier="currentConditionIdentifier"
/> />
</div> </div>
</div> </li>
</div> </ul>
</div> </div>
</div> </div>
</section> </section>
@ -102,24 +107,21 @@ export default {
}, },
methods: { methods: {
dropCondition(e) { dropCondition(e) {
const newCondIndex = Number(e.dataTransfer.getData('conditionIndex')); const moveIndex = Number(e.dataTransfer.getData('conditionIndex'));
const oldCondIndex = Number(e.target.id.slice(4)); const targetIndex = Number(e.target.id.slice(4));
let reorderPlan = []; function moveArrIndex(arr, from, to) {
arr.splice(to, 0, arr.splice(from, 1)[0]);
return arr;
}
this.conditionCollection.forEach((condition, index) => { const oldIndexArr = Object.keys(this.conditionCollection);
const reorderObj = {}; const newIndexArr = moveArrIndex(Object.keys(this.conditionCollection), moveIndex, targetIndex);
reorderObj.oldIndex = index;
if (index === oldCondIndex) {
reorderObj.newIndex = newCondIndex;
} else if (index === newCondIndex) {
reorderObj.newIndex = oldCondIndex;
} else {
reorderObj.newIndex = index;
}
reorderPlan.push(reorderObj);
});
const reorderPlan = [];
for (let i = 0; i < oldIndexArr.length; i++) {
reorderPlan.push({oldIndex: i, newIndex: newIndexArr[i]});
}
this.reorder(reorderPlan); this.reorder(reorderPlan);
}, },
handleConditionResult(args) { handleConditionResult(args) {