remove drag-and-drop behaviour

This commit is contained in:
Julien Fastré 2021-06-17 22:54:46 +02:00
parent a7131653c9
commit 9d58356b90
2 changed files with 7 additions and 38 deletions

View File

@ -21,13 +21,10 @@
<div v-for="conc in concUnpositionned" <div v-for="conc in concUnpositionned"
class="item-bloc" class="item-bloc"
v-bind:key="conc.person.id" v-bind:key="conc.person.id"
draggable="true"
@dragstart="onStartDragConcern($event, conc.person.id)"
> >
<div class="item-row person"> <div class="item-row person">
<div class="item-col box-person"> <div class="item-col box-person">
<div> <div>
<img src="~ChillMainAssets/img/draggable.svg" class="drag-icon" />
<person :person="conc.person"></person> <person :person="conc.person"></person>
</div> </div>
<div v-if="conc.person.birthdate !== null"> <div v-if="conc.person.birthdate !== null">
@ -89,21 +86,18 @@
v-for="position in positions" v-for="position in positions"
> >
<h3>{{ position.label.fr }}</h3> <h3>{{ position.label.fr }}</h3>
<div class="flex-table list-household-members">
<div v-if="concByPosition(position.id).length > 0" class="flex-table list-household-members">
<member-details <member-details
v-for="conc in concByPosition(position.id)" v-for="conc in concByPosition(position.id)"
v-bind:key="conc.person.id" v-bind:key="conc.person.id"
v-bind:conc="conc" v-bind:conc="conc"
> >
</member-details> </member-details>
<div </div>
class="droppable_zone"
@drop="onDropConcern($event, position.id)" <div v-else>
@dragover.prevent <p class="chill-no-data-statement">{{ $t('household_members_editor.concerned.no_person_in_position') }}</p>
@dragenter.prevent
>
{{ $t('household_members_editor.drop_persons_here', {'position': position.label.fr }) }}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -120,22 +114,6 @@ div.person {
} }
} }
.drag-icon {
height: 1.1em;
margin-right: 0.5em;
}
.droppable_zone {
background-color: var(--chill-llight-gray);
color: white;
font-size: large;
text-align: center;
display: table-cell;
vertical-align: middle;
padding: 1em;
background: linear-gradient(to top, var(--chill-light-gray), 30%, var(--chill-llight-gray));
}
.move_to { .move_to {
.move_hint { .move_hint {
text-align: center; text-align: center;
@ -194,18 +172,8 @@ export default {
this.$refs.addPersons.resetSearch(); // to cast child method this.$refs.addPersons.resetSearch(); // to cast child method
modal.showModal = false; modal.showModal = false;
}, },
onStartDragConcern(evt, person_id) {
evt.dataTransfer.dropEffect = 'move'
evt.dataTransfer.effectAllowed = 'move'
evt.dataTransfer.setData('application/x.person', person_id)
},
onDropConcern(evt, position_id) {
const person_id = Number(evt.dataTransfer.getData('application/x.person'));
this.moveToPosition(person_id, position_id);
},
moveToPosition(person_id, position_id) { moveToPosition(person_id, position_id) {
this.$store.dispatch('markPosition', { person_id, position_id }); this.$store.dispatch('markPosition', { person_id, position_id });
}, },
removeConcerned(conc) { removeConcerned(conc) {
this.$store.dispatch('removeConcerned', conc); this.$store.dispatch('removeConcerned', conc);

View File

@ -19,6 +19,7 @@ const appMessages = {
move_to: "Déplacer vers", move_to: "Déplacer vers",
persons_to_positionnate: 'Usagers à positionner', persons_to_positionnate: 'Usagers à positionner',
persons_leaving: "Usagers quittant leurs ménages", persons_leaving: "Usagers quittant leurs ménages",
no_person_in_position: "Aucun usager ne sera ajouté à cette position",
}, },
drop_persons_here: "Glissez-déposez ici les usagers pour la position \"{position}\"", drop_persons_here: "Glissez-déposez ici les usagers pour la position \"{position}\"",
all_positionnated: "Tous les usagers sont positionnés", all_positionnated: "Tous les usagers sont positionnés",