fix move element list

This commit is contained in:
Alessandro Francia
2018-09-20 16:19:00 +02:00
parent 33bae8459e
commit 603e07cd7e
4 changed files with 72 additions and 35 deletions
@@ -25,9 +25,9 @@
</div>
</div> -->
<div class="queue-body scrollable" v-if="selectedTab == 'Sinistra'">
<Container @drag-start="onDrag" @drag-end="onDragEnd" @drop="changePosition($event)" :get-child-payload="getPayloadForItemQueue">
<Container @drop="changePosition($event)" :get-child-payload="getPayloadForItemQueue">
<Draggable v-for="pp in partPrograms" :key="pp.id">
<div class="element-queue">
<div class="draggable-item element-queue">
<label class="number">{{pp.id}}</label><card-element-queue @click="deleteItemQueue(selectedProcess, pp)" :selected-process="selectedProcess" :id-part-program="pp.id" :name="pp.partProgramName" :number="pp.reps" :remaining-reps="pp.remainingReps" :status="pp.status" @position="positionBoxReps($event,pp)"></card-element-queue>
</div>
</Draggable>
@@ -63,6 +63,7 @@ import {ModalHelper} from "src/modules/base-components";
import modalAddElementQueue from "src/modules/base-components/modal-add-element-queue.vue"
import { FileService } from '../../../services/fileService';
import { productionActions } from "src/store/production.store";
import { applyDrag } from "./utils";
import { store, AppModel } from "src/store";
import { Container, Draggable, } from "vue-smooth-dnd";
export default {
@@ -111,19 +112,18 @@ export default {
await new FileService().deleteQueue(id);
},
async deleteItemQueue(processId, item){
debugger
await new FileService().deleteItemQueue(processId, item);
},
onDrag({ isSource, payload, willAcceptDrop }) {
this.enablePopup = false;
this.draggingIn = true;
this.draggingItem = payload;
},
// onDrag({ isSource, payload, willAcceptDrop }) {
// this.enablePopup = false;
// this.draggingIn = true;
// this.draggingItem = payload;
// },
onDragEnd() {
this.draggingIn = false;
// this.draggingTool = null;
},
// onDragEnd({ isSource, payload, willAcceptDrop }) {
// this.draggingIn = false;
// this.draggingItem = payload;
// },
onDragEnter(position) {
this.draggingPosition = position;
@@ -136,13 +136,14 @@ export default {
if(event.payload && event.payload.status != 1 && event.payload.status != 3 && event.addedIndex != event.removedIndex){
this.draggingIn = false;
this.draggingItem = null;
var itemsPositions = {objectId: event.payload.id, newPosition: event.addedIndex};
await new FileService().moveItemsQueue(this.selectedProcess,itemsPositions,this.partPrograms).then(function(){
response = true;
});
if(response && event.addedIndex && event.removeIndex){
this.partPrograms.splice(event.addedIndex, 0, this.partPrograms.splice(event.removedIndex,1)[0]);
}
var itemsPositions = {objectId: event.payload.id, newPosition: event.addedIndex, oldPosition: event.removedIndex};
await new FileService().moveItemsQueue(this.selectedProcess,itemsPositions,this.partPrograms);
// .then(function(){
// response = true;
// });
// if(response && event.addedIndex && event.removeIndex){
// this.partPrograms.splice(event.addedIndex, 0, this.partPrograms.splice(event.removedIndex,1)[0]);
// }
}
else{
event = null;
@@ -0,0 +1,17 @@
export const applyDrag = (arr, dragResult) => {
const { removedIndex, addedIndex, payload } = dragResult
if (removedIndex === null && addedIndex === null) return arr
const result = [...arr]
let itemToAdd = payload
if (removedIndex !== null) {
itemToAdd = result.splice(removedIndex, 1)[0]
}
if (addedIndex !== null) {
result.splice(addedIndex, 0, itemToAdd)
}
return result
};
+4 -5
View File
@@ -36,15 +36,15 @@ export class FileService extends baseRestService {
}
async deleteItemQueue(processId, model){
debugger
var result = await this.Delete<any>(this.BASE_URL + "queue/" + processId + "/remove/" + model.id, true);
productionActions.deletePartProgram(store,model);
return result;
}
async moveItemsQueue(processId, itemsPositions, model){
var result = await this.Put<any>(this.BASE_URL + "queue/" + processId + "/move", itemsPositions, true);
productionActions.movePartPrograms(store,result);
async moveItemsQueue(processId, position, model){
var result = await this.Put<any>(this.BASE_URL + "queue/" + processId + "/move", position, true);
model = result;
productionActions.movePartProgram(store,{model,position});
return result;
}
@@ -59,7 +59,6 @@ export class FileService extends baseRestService {
}
async changeReps(processId,model){
debugger
var result = await this.Put<any>(this.BASE_URL + "queue/" + processId + "/edit/" + model.id, {reps: model.reps});
productionActions.updatePartProgram(store, result);
return result;
+31 -11
View File
@@ -11,7 +11,8 @@ export interface ProductionActions {
updatePartPrograms(context, model:server.PartProgramModel[]);
deletePartPrograms(context);
deletePartProgram(context, model:server.PartProgramModel);
movePartPrograms(context, model:server.PartProgramModel[]);
movePartPrograms(context, model:server.PartProgramModel[]);
movePartProgram(context, {model,position});
}
export const productionStore = {
@@ -23,24 +24,39 @@ export const productionStore = {
},
mutations: {
UpdatePartProgram(store, model: server.PartProgramModel) {
debugger
store._partProgram.set(model.id, model);
store.partProgram = Array.from(store._partProgram.values());
},
UpdatePartPrograms(store, model: server.PartProgramModel[]){
store._partProgram.clear();
store.partProgram = [];
for(const key in model){
const element = model[key];
store._partProgram.set(element.id,element);
store.partProgram = Array.from(store._partProgram.values());
}
},
DeletePartPrograms(store) {
store.partProgram = [];
},
DeletePartProgram(store, model:server.PartProgramModel) {
debugger
let idx = store.partProgram.indexOf(model);
if(store.partProgram[idx] && model && store.partProgram[idx].id == model.id){
store.partProgram.splice(idx,1);
}
// store._partProgram.delete(model.id);
// store.partProgram = Array.from(store._partProgram.values());
// let idx = store.partProgram.indexOf(model);
// if(store.partProgram[idx] && model && store.partProgram[idx].id == model.id){
// store.partProgram.splice(idx,1);
// }
store._partProgram.delete(model.id);
store.partProgram = Array.from(store._partProgram.values());
},
MovePartPrograms(store, model:server.PartProgramModel[]) {
store.partProgram = model;
store.partProgram = [];
store.partProgram = model;
},
MovePartProgram(store, {model,position}) {
if(position){
var model = store.partProgram.splice(position.oldPosition, 1)[0];
store.partProgram.splice(position.newPosition, 0, model);
// store.partProgram.splice(position.newPosition, 0, store.partProgram.splice(position.oldPosition,1)[0]);
}
}
},
actions: {
@@ -48,10 +64,14 @@ export const productionStore = {
context.commit("UpdatePartProgram", model);
},
updatePartPrograms(context, model:server.PartProgramModel[]) {
context.commit("MovePartPrograms", model);
context.commit("UpdatePartPrograms", model);
// context.commit("MovePartPrograms", model);
},
movePartPrograms(context, model:server.PartProgramModel[]) {
context.commit("MovePartPrograms", model);
},
movePartProgram(context, {model,position}) {
context.commit("MovePartProgram", {model,position});
},
deletePartProgram(context, model:server.PartProgramModel) {
context.commit("DeletePartProgram", model);