From f320313d190d2f94fe9f067bde0fa21b698c99fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e?= <tpoussard@neogeo.fr>
Date: Tue, 5 Jul 2022 16:50:08 +0200
Subject: [PATCH] ask user confirmation to leave filtered features detail view
& display return button after edition
---
.../Feature/Detail/FeatureHeader.vue | 22 +++++++++++++
src/store/modules/feature.store.js | 1 -
src/views/Feature/FeatureDetail.vue | 32 +++++++++++++++++++
src/views/Project/ProjectDetail.vue | 18 +++++++----
4 files changed, 65 insertions(+), 8 deletions(-)
diff --git a/src/components/Feature/Detail/FeatureHeader.vue b/src/components/Feature/Detail/FeatureHeader.vue
index 0e871cb0..913398f8 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"
@@ -129,6 +143,10 @@ export default {
type: Object,
default: () => {},
},
+ displayToListButton: {
+ type: Boolean,
+ default: false,
+ },
},
computed: {
@@ -185,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/store/modules/feature.store.js b/src/store/modules/feature.store.js
index 6e5d3da9..5d785813 100644
--- a/src/store/modules/feature.store.js
+++ b/src/store/modules/feature.store.js
@@ -193,7 +193,6 @@ const feature = {
slug_signal: featureId,
message: routeName === 'editer-signalement' ? 'Le signalement a été mis à jour' : 'Le signalement a été crée'
},
- query: router.history.current.query,
});
dispatch('projects/GET_ALL_PROJECTS', null, { root:true }); //* & refresh project list
});
diff --git a/src/views/Feature/FeatureDetail.vue b/src/views/Feature/FeatureDetail.vue
index 08ff409f..62fc5e58 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,
};
},
@@ -170,6 +196,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() {
@@ -232,6 +260,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/Project/ProjectDetail.vue b/src/views/Project/ProjectDetail.vue
index 12183102..3fb599f4 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"
--
GitLab