fix drag box reps

This commit is contained in:
Alessandro Francia
2018-09-19 10:51:41 +02:00
parent bbfd640052
commit a61cca2ae2
4 changed files with 88 additions and 88 deletions
+34 -36
View File
@@ -904,42 +904,6 @@
}
}
}
& .popup{
position: absolute;
display: flex;
padding: 4px;
top: 78px;
left: 60px;
.edit-reps{
width: 100%;
height: calc(~'100% - 26px');;
display: flex;
align-items: center;
justify-content: space-around;
}
// &:before {
// content: "\f0d8";
// color: @color-silver;
// position: absolute;
// top: -26px;
// left: calc(~'50% - 10px');
// font-family: 'fontawesome';
// font-size: 38px;
// }
.group-button{
width: 100%;
display: flex;
justify-content: flex-end;
.btn.btn-success.btn-small{
height: 26px;
font-size: 12px;
}
}
input{
width: 50px;
height: 30px;
}
}
}
.smooth-dnd-draggable-wrapper .element-queue:first-child{
margin-top: 3px;
@@ -1151,6 +1115,40 @@
color: @color-greyish-brown;
}
}
& .popup{
position: absolute;
display: flex;
padding: 4px;
.edit-reps{
width: 100%;
height: calc(~'100% - 26px');;
display: flex;
align-items: center;
justify-content: space-around;
}
// &:before {
// content: "\f0d8";
// color: @color-silver;
// position: absolute;
// top: -26px;
// left: calc(~'50% - 10px');
// font-family: 'fontawesome';
// font-size: 38px;
// }
.group-button{
width: 100%;
display: flex;
justify-content: flex-end;
.btn.btn-success.btn-small{
height: 26px;
font-size: 12px;
}
}
input{
width: 50px;
height: 30px;
}
}
}
.queue-footer{
+25 -27
View File
@@ -5965,33 +5965,6 @@ footer .container button.big:before {
.card-element-queue .card-element-queue-right button.btn i.fa.fa-trash {
font-size: 24px;
}
.card-element-queue .popup {
position: absolute;
display: flex;
padding: 4px;
top: 78px;
left: 60px;
}
.card-element-queue .popup .edit-reps {
width: 100%;
height: calc(100% - 26px);
display: flex;
align-items: center;
justify-content: space-around;
}
.card-element-queue .popup .group-button {
width: 100%;
display: flex;
justify-content: flex-end;
}
.card-element-queue .popup .group-button .btn.btn-success.btn-small {
height: 26px;
font-size: 12px;
}
.card-element-queue .popup input {
width: 50px;
height: 30px;
}
.smooth-dnd-draggable-wrapper .element-queue:first-child {
margin-top: 3px;
}
@@ -6197,6 +6170,31 @@ footer .container button.big:before {
font-size: 20px;
color: #4b4b4b;
}
.card-queue-production .card-queue-production-body .queue-body .popup {
position: absolute;
display: flex;
padding: 4px;
}
.card-queue-production .card-queue-production-body .queue-body .popup .edit-reps {
width: 100%;
height: calc(100% - 26px);
display: flex;
align-items: center;
justify-content: space-around;
}
.card-queue-production .card-queue-production-body .queue-body .popup .group-button {
width: 100%;
display: flex;
justify-content: flex-end;
}
.card-queue-production .card-queue-production-body .queue-body .popup .group-button .btn.btn-success.btn-small {
height: 26px;
font-size: 12px;
}
.card-queue-production .card-queue-production-body .queue-body .popup input {
width: 50px;
height: 30px;
}
.card-queue-production .card-queue-production-body .queue-footer {
display: flex;
margin: 20px 0 0 8px;
@@ -16,16 +16,6 @@
</div>
<button class="btn" @click="onClick()"><i class="fa fa-trash"></i></button>
</div>
<popup v-if="enablePopup" :style="{top:verticalIndex + 'px'}" :arrow="'arrow-top'" :title="'Modifica ripetizioni'">
<button class="close" slot="header-buttons" @click="close()"><i class="fa fa-remove"></i></button>
<div class="edit-reps">
<label>Ripetizioni</label>
<input type="number" v-model.number="numberReps">
</div>
<div class="group-button">
<button class="btn btn-success btn-small" @click="changeReps(numberReps)">Salva</button>
</div>
</popup>
</div>
<!-- </div> -->
</template>
@@ -39,14 +29,12 @@ export default {
number: { default: 2},
remainingReps: {default: 0},
status: { default: 0},
verticalIndex: {default: 0},
selectedProcess: { default: 0},
idPartProgram: {default: 0}
},
data: function(){
return{
enablePopup: false,
numberReps: this.number
enablePopup: false
}
},
// watch: {
@@ -64,16 +52,16 @@ export default {
clickReps: function(){
debugger
this.enablePopup = true;
this.$emit("position", this.$el, true);
this.$emit("position", this.$el, this.enablePopup, true);
},
async changeReps(value){
console.log(value);
await new FileService().changeReps(this.selectedProcess, this.idPartProgram, value)
this.enablePopup = false;
},
close(){
this.enablePopup = false;
}
// close(){
// this.enablePopup = false;
// }
}
};
</script>
@@ -28,13 +28,20 @@
<Container @drag-start="onDrag" @drag-end="onDragEnd" @drop="changePosition($event)" :get-child-payload="getPayloadForItemQueue">
<Draggable v-for="pp in partPrograms" :key="pp.id">
<div class="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" :vertical-index="selectedPositionTop" @position="positionBoxReps"></card-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.reps)"></card-element-queue>
</div>
</Draggable>
</Container>
<!-- <Container @drag-enter="onDragEnter(pp.id)" @drag-leave="onDragLeave()">
</Container> -->
<popup v-if="enablePopup" :style="{top: selectedPositionTop + 'px'}" :arrow="'arrow-top'" :title="'Modifica ripetizioni'">
<button class="close" slot="header-buttons" @click="close()"><i class="fa fa-remove"></i></button>
<div class="edit-reps">
<label>Ripetizioni</label>
<input type="number" v-model.number="numberReps">
</div>
<div class="group-button">
<button class="btn btn-success btn-small" @click="changeReps(numberReps)">Salva</button>
</div>
</popup>
</div>
<div class="queue-footer">
<label>{{partPrograms.length}} elementi in coda</label>
@@ -58,7 +65,7 @@ import { FileService } from '../../../services/fileService';
import { Container, Draggable, } from "vue-smooth-dnd";
export default {
components:{
cardElementQueue, Container, Draggable
cardElementQueue, Container, Draggable, popup: Popup
},
mounted: function(){
@@ -70,7 +77,9 @@ export default {
draggingPosition: null,
itemStatusRunning: null,
selectedPositionTop: 0,
selectedTab: "Sinistra"
selectedTab: "Sinistra",
enablePopup: false,
numberReps: 0
}
},
computed: {
@@ -102,6 +111,7 @@ export default {
await new FileService().deleteItemQueue(processId, item);
},
onDrag({ isSource, payload, willAcceptDrop }) {
this.enablePopup = false;
this.draggingIn = true;
this.draggingItem = payload;
},
@@ -138,11 +148,17 @@ export default {
getPayloadForItemQueue(index){
return this.partPrograms[index];
},
positionBoxReps(arg1, arg2){
this.selectedPositionTop = (arg1.offsetTop + 78);
positionBoxReps(arg1, reps){
debugger
this.numberReps = reps;
this.selectedPositionTop = (arg1.offsetTop + 226);
this.enablePopup = true;
},
selectTab(value){
this.selectedTab = value;
},
close(){
this.enablePopup = false;
}
}