diff --git a/src/components/Feature/Detail/FeatureHeader.vue b/src/components/Feature/Detail/FeatureHeader.vue index 5f8aee17b915cfa90f33ac88c7f765ad1bcb67b5..913398f85f03872b3f4ebd2456f4742faf04d7b7 100644 --- a/src/components/Feature/Detail/FeatureHeader.vue +++ b/src/components/Feature/Detail/FeatureHeader.vue @@ -4,6 +4,20 @@ <div class="content"> {{ currentFeature.title || currentFeature.feature_id }} <div class="ui icon right floated compact buttons"> + <router-link + v-if="displayToListButton" + id="feature-detail-to-features-list" + :to="{ + name: 'liste-signalements', + params: { slug: $route.params.slug }, + }" + custom + > + <div class="ui button tiny-margin teal"> + <i class="ui icon arrow right" /> + Retour à la liste des signalements + </div> + </router-link> <span v-if="featuresCount" id="feature-count" @@ -73,6 +87,7 @@ slug_signal: slugSignal, slug_type_signal: $route.params.slug_type_signal || featureType.slug, }, + query: $route.query }" class="ui button button-hover-orange tiny-margin" data-tooltip="Éditer le signalement" @@ -128,6 +143,10 @@ export default { type: Object, default: () => {}, }, + displayToListButton: { + type: Boolean, + default: false, + }, }, computed: { @@ -184,4 +203,8 @@ export default { #next-feature { margin-right: .5rem !important; } +#feature-detail-to-features-list { + line-height: 0; + margin-right: 5px; +} </style> \ No newline at end of file diff --git a/src/views/Feature/FeatureDetail.vue b/src/views/Feature/FeatureDetail.vue index d88beb3d1fa3686253b8034762bdc15c4e6c8fab..58af63ea9cda720616136a8c8d354320f8e512de 100644 --- a/src/views/Feature/FeatureDetail.vue +++ b/src/views/Feature/FeatureDetail.vue @@ -10,6 +10,7 @@ :features-count="featuresCount" :slug-signal="slugSignal" :feature-type="featureType" + :display-to-list-button="displayToListButton" @setIsCancelling="isCanceling = true" @tofeature="pushNgo" /> @@ -118,6 +119,30 @@ export default { FeatureComments }, + beforeRouteEnter (to, from, next) { + // if the user edited the feature, coming from filtered features details browsing, + // display a button to turn back to the list view, in order to start again from the list + // because order changes after edition, depending the sort criteria + // in beforeRouteEnter, the component is not mounted and this doesn't exist yet, thus we store the value in window object + window.displayToListButton = false; // reinitialisation of the value + if (from.query.offset !== undefined) { // if a queryset for filtered features is stored in the route from + window.displayToListButton = true; // toggle the value to display the button + } + next(); // continue page loading + }, + + beforeRouteLeave (to, from, next) { + if (// In case of filtered listed featuers, if the user wants to edit a feature, + from.query.offset >= 0 && + to.name === 'editer-signalement' && + !this.confirmLeave() // warn the user that features order might change + ){ + next(false); + } else {// Navigate to next view + next(); + } + }, + data() { return { attachments: [], @@ -139,6 +164,7 @@ export default { featuresCount: null, isCanceling: false, slugSignal: '', + displayToListButton: false, }; }, @@ -155,6 +181,14 @@ export default { ]), }, + watch: { + '$route.query'(newValue, oldValue) { + if (newValue !== oldValue) { //* Navigate back or forward to the previous or next URL + this.initPage(); //* doesn't update the page at query changes, thus it is done manually here + } + }, + }, + created() { if (this.$route.params.slug_type_signal) { this.SET_CURRENT_FEATURE_TYPE_SLUG(this.$route.params.slug_type_signal); @@ -163,6 +197,8 @@ export default { mounted() { this.initPage(); + // when this is available, set the value with previously stored value in windows to pass it as a prop + this.displayToListButton = window.displayToListButton; }, beforeDestroy() { @@ -226,6 +262,10 @@ export default { this.DISCARD_LOADER(); }, + confirmLeave() { + return window.confirm('Vous allez quittez la vue signalement filtré, l\'ordre des signalements pourrait changer après édition d\'un signalement.'); + }, + async pushNgo(newEntry) { this.$router.push(newEntry); //* update the params or queries in the route/url await this.getPageInfo(); diff --git a/src/views/Feature/FeatureEdit.vue b/src/views/Feature/FeatureEdit.vue index d1e2a4758abd4a66a0cf0c02313ec11b0aa55fe5..992e012f76928dbad713a13f6e8002dfd4302009 100644 --- a/src/views/Feature/FeatureEdit.vue +++ b/src/views/Feature/FeatureEdit.vue @@ -809,7 +809,6 @@ export default { this.updateStore(); } this.sendingFeature = true; - console.log(this.sendingFeature); this.$store.dispatch('feature/SEND_FEATURE', this.currentRouteName) .then(() => this.sendingFeature = false); } diff --git a/src/views/Project/ProjectDetail.vue b/src/views/Project/ProjectDetail.vue index 12183102c4e6c25e77a8fa10f1b43933b3d1260b..3fb599f496fa5f14b6870f90a7ab4034d6b8fc43 100644 --- a/src/views/Project/ProjectDetail.vue +++ b/src/views/Project/ProjectDetail.vue @@ -75,17 +75,21 @@ ref="map" /> - <div + <router-link id="features-list" - class="ui button fluid teal" - @click="$router.push({ + :to="{ name: 'liste-signalements', params: { slug: slug }, - })" + }" + custom > - <i class="ui icon arrow right" /> - Voir tous les signalements - </div> + <div + class="ui button fluid teal" + > + <i class="ui icon arrow right" /> + Voir tous les signalements + </div> + </router-link> <div id="popup"