diff --git a/src/components/Feature/Detail/FeatureHeader.vue b/src/components/Feature/Detail/FeatureHeader.vue index 49f1d98c814903ff66820cda039ec3fd0451c3c6..7616506c650d7e60a8e8d43131ff2d82c587afc6 100644 --- a/src/components/Feature/Detail/FeatureHeader.vue +++ b/src/components/Feature/Detail/FeatureHeader.vue @@ -132,7 +132,7 @@ class="ui button button-hover-red tiny-margin" data-tooltip="Supprimer le signalement" data-position="bottom right" - @click="$emit('setIsCancelling')" + @click="$emit('setIsDeleting')" > <i class="inverted grey trash alternate icon" diff --git a/src/views/Feature/FeatureDetail.vue b/src/views/Feature/FeatureDetail.vue index 88ae5aa146bde9b12b8093a85b8149ce48ea20e5..afb0e7df8c47e2fb9d01238b3a033aa56b71e509 100644 --- a/src/views/Feature/FeatureDetail.vue +++ b/src/views/Feature/FeatureDetail.vue @@ -15,7 +15,7 @@ :display-to-list-button="displayToListButton" :is-feature-creator="isFeatureCreator" :can-edit-feature="canEditFeature" - @setIsCancelling="isCanceling = true" + @setIsDeleting="isDeleting = true" @tofeature="pushNgo" /> </div> @@ -63,28 +63,33 @@ /> </div> </div> + <div - v-if="isCanceling" + v-if="isDeleting" class="ui dimmer modals visible active" > <div :class="[ - 'ui mini modal subscription', - { 'active visible': isCanceling }, + 'ui mini modal', + { 'active visible': isDeleting }, ]" > <i class="close icon" aria-hidden="true" - @click="isCanceling = false" + @click="isDeleting = false" /> - <div class="ui icon header"> + <div + v-if="isDeleting" + class="ui icon header" + > <i class="trash alternate icon" aria-hidden="true" /> Supprimer le signalement </div> + <div class="actions"> <button type="button" @@ -96,7 +101,61 @@ </div> </div> </div> + + <div + v-if="isLeaving" + class="ui dimmer modals visible active" + > + <div + :class="[ + 'ui mini modal', + { 'active visible': isLeaving }, + ]" + > + <i + class="close icon" + aria-hidden="true" + @click="isLeaving = false" + /> + <div class="ui icon header"> + <i + :class="[project.fast_edition_mode && hasUnsavedChange ? 'sign-out' : 'random', 'icon']" + aria-hidden="true" + /> + Abandonner {{ + project.fast_edition_mode && hasUnsavedChange ? + 'les modifications' : + 'la vue signalement filtré' + }} + </div> + <div class="content"> + {{ + project.fast_edition_mode && hasUnsavedChange ? + 'Les modifications apportées au signalement ne seront pas sauvegardées, continuer ?': + `Vous allez quittez la vue signalement filtré, + l\'ordre des signalements pourrait changer après édition d\'un signalement.` + }} + </div> + <div class="actions"> + <button + type="button" + class="ui green compact button" + @click="stayOnPage" + > + Annuler + </button> + <button + type="button" + class="ui red compact button" + @click="leavePage" + > + Continuer + </button> + </div> + </div> + </div> </div> + <div v-else> Pas de signalement correspondant trouvé </div> @@ -139,19 +198,19 @@ export default { }, beforeRouteUpdate (to, from, next) { - let leaving = true; // by default navigate to next route if (this.hasUnsavedChange) { - leaving = this.confirmLeave(); // prompt user that there is unsaved changes or that features order might change + this.confirmLeave(next); // prompt user that there is unsaved changes or that features order might change + } else { + next(); // continue navigation } - next(leaving); }, beforeRouteLeave (to, from, next) { - let leaving = true; // by default navigate to next route if (this.hasUnsavedChange || (from.query.offset >= 0 && to.name === 'editer-signalement')) { - leaving = this.confirmLeave(); // prompt user that there is unsaved changes or that features order might change + this.confirmLeave(next); // prompt user that there is unsaved changes or that features order might change + } else { + next(); // continue navigation } - next(leaving); }, data() { @@ -173,7 +232,8 @@ export default { events: [], featureType: {}, featuresCount: null, - isCanceling: false, + isDeleting: false, + isLeaving: false, slugSignal: '', displayToListButton: false, }; @@ -309,10 +369,17 @@ export default { } }, - confirmLeave() { - return window.confirm(this.project.fast_edition_mode && this.hasUnsavedChange ? - 'Les modifications apportées au signalement ne seront pas sauvegardées, continuer ?': - 'Vous allez quittez la vue signalement filtré, l\'ordre des signalements pourrait changer après édition d\'un signalement.'); + confirmLeave(next) { + this.next = next; + this.isLeaving = true; + }, + + stayOnPage() { + this.isLeaving = false; + }, + + leavePage() { + this.next(); }, async reloadPage() { diff --git a/src/views/Project/FeaturesListAndMap.vue b/src/views/Project/FeaturesListAndMap.vue index fde352a957e3980fea4e7b76329ca27f1d3fdd78..fecd47522fb47ebc3d494f8e2f3cdf0db0e77951 100644 --- a/src/views/Project/FeaturesListAndMap.vue +++ b/src/views/Project/FeaturesListAndMap.vue @@ -62,7 +62,7 @@ > <div :class="[ - 'ui mini modal subscription', + 'ui mini modal', { 'active visible': isDeleteModalOpen }, ]" >