From e0201fa241f6b437d26b98e766974970108d032a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Poussard?= <tpoussard@neogeo.fr>
Date: Thu, 30 Dec 2021 15:47:40 +0100
Subject: [PATCH] display message and improve it
---
src/App.vue | 41 ++++++++++---------
src/components/feature/FeatureListTable.vue | 3 +-
src/store/index.js | 7 +++-
src/views/feature/Feature_detail.vue | 2 +-
src/views/feature/Feature_list.vue | 45 +++++++++++++++++----
src/views/project/Project_members.vue | 7 +++-
src/views/registration/Login.vue | 2 +-
7 files changed, 73 insertions(+), 34 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 349930d3..4d52ec45 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -152,13 +152,14 @@
<main>
<div id="content" class="ui stackable grid centered container">
<transition name="fadeDownUp">
- <div v-if="messages && messages.length > 0" class="row">
+ <div v-if="messages && messages.length > 0" class="row over-content">
<div class="fourteen wide column">
<div
v-for="(message, index) in messages"
:key="'message-' + index"
- class="ui info message"
+ :class="['ui', message.level ? message.level : 'info', 'message']"
>
+ <i class="close icon" @click="discardMessage(message)"></i>
<div class="header">
<i class="info circle icon"></i> Informations
</div>
@@ -257,6 +258,10 @@ export default {
if (e.target.closest && !e.target.closest("#menu-dropdown"))
this.menuIsOpen = false;
},
+
+ discardMessage(message) {
+ this.$store.commit("DISCARD_MESSAGE", message)
+ }
},
created() {
@@ -376,23 +381,10 @@ footer {
transition: none !important;
}
-
-.bounce-enter-active {
- animation: bounce-in .5s;
-}
-.bounce-leave-active {
- animation: bounce-in .5s reverse;
-}
-@keyframes bounce-in {
- 0% {
- transform: scale(0);
- }
- 50% {
- transform: scale(1.5);
- }
- 100% {
- transform: scale(1);
- }
+.ui.grid > .row.over-content {
+ position: absolute;
+ z-index: 99;
+ opacity: 0.95;
}
.fadeDownUp-enter-active {
@@ -424,5 +416,16 @@ footer {
}
}
+.ui.message > .close.icon {
+ cursor: pointer;
+ position: absolute;
+ margin: 0em;
+ top: 0.78575em;
+ right: 0.5em;
+ opacity: 0.7;
+ -webkit-transition: opacity 0.1s ease;
+ transition: opacity 0.1s ease;
+}
+
</style>
\ No newline at end of file
diff --git a/src/components/feature/FeatureListTable.vue b/src/components/feature/FeatureListTable.vue
index 9ed52c17..9c19ba12 100644
--- a/src/components/feature/FeatureListTable.vue
+++ b/src/components/feature/FeatureListTable.vue
@@ -334,7 +334,8 @@ export default {
"Contributeur" : ["draft", this.project.moderation ? "pending" : "published"],
};
- if (userStatus === "Super Contributeur" || userStatus === "Contributeur") {
+ if (userStatus === "Contributeur") {
+ //if (userStatus === "Super Contributeur" || userStatus === "Contributeur") {
if (feature.properties.creator.username !== this.user.username) return true;
}
return !access[userStatus].includes(feature.properties.status.value);
diff --git a/src/store/index.js b/src/store/index.js
index f3ff33c6..101367d9 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -93,13 +93,16 @@ export default new Vuex.Store({
SET_EVENTS(state, events) {
state.events = events;
},
- DISPLAY_MESSAGE(state, comment) {
- state.messages = [{ comment }, ...state.messages];
+ DISPLAY_MESSAGE(state, message) {
+ state.messages = [message, ...state.messages];
if (document.getElementById("content")) document.getElementById("content").scrollIntoView({ block: "start", inline: "nearest" });
setTimeout(() => {
state.messages = [];
}, 3000);
},
+ DISCARD_MESSAGE(state, message) {
+ state.messages = state.messages.filter((el) => el.comment !== message.comment)
+ },
CLEAR_MESSAGES(state) {
state.messages = [];
},
diff --git a/src/views/feature/Feature_detail.vue b/src/views/feature/Feature_detail.vue
index 1203b265..bf97c970 100644
--- a/src/views/feature/Feature_detail.vue
+++ b/src/views/feature/Feature_detail.vue
@@ -504,7 +504,7 @@ export default {
},
confirmComment() {
- this.$store.commit("DISPLAY_MESSAGE", "Ajout du commentaire confirmé");
+ this.$store.commit("DISPLAY_MESSAGE", {comment: "Ajout du commentaire confirmé", level: "positive"});
this.getFeatureEvents(); //* display new comment on the page
this.comment_form.attachment_file.file = null;
this.comment_form.attachment_file.fileName = "";
diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue
index 7e459db7..4f4a7c6d 100644
--- a/src/views/feature/Feature_list.vue
+++ b/src/views/feature/Feature_list.vue
@@ -392,13 +392,43 @@ export default {
}
},
- modifyStatus(newStatus) {
- console.log("newStatus", newStatus)
- this.checkedFeatures.forEach((feature_id) => {
- let feature_type__slug = this.clickedFeatures.find((el) => el.feature_id === feature_id).feature_type
- console.log("feature_type__slug", feature_type__slug)
- featureAPI.updateFeature({feature_id, feature_type__slug, project__slug: this.$route.params.slug, newStatus})
+ async modifyStatus(newStatus) {
+ let errorCount = 0
+ const promises = this.checkedFeatures.map((feature_id) => {
+ let feature = this.clickedFeatures.find((el) => el.feature_id === feature_id)
+ if (feature) {
+ return featureAPI.updateFeature({
+ feature_id,
+ feature_type__slug: feature.feature_type,
+ project__slug: this.$route.params.slug, newStatus
+ })
+ } else {
+ errorCount += 1;
+ }
+ })
+ const promisesResult = await Promise.all(promises)
+ promisesResult.forEach((response) => {
+ if (response && response.data && response.status === 200) {
+ this.checkedFeatures.splice(this.checkedFeatures.indexOf(response.data.id), 2);
+ } else {
+ errorCount += 1;
+ }
})
+ let message = {
+ comment: "Tous les signalements ont été modifié avec succès.",
+ level: "positive"
+ }
+ if (errorCount) {
+ //* display error message
+ if(errorCount === 1) {
+ message.comment = "Un signalement n'a pas pu être modifié. (Il reste sélectionné)"
+ } else {
+ message.comment = `${errorCount} signalements n'ont pas pu être modifiés. (Ils restent sélectionnés)`
+ }
+ message.level = "negative"
+ }
+ this.fetchPagedFeatures();
+ this.$store.commit("DISPLAY_MESSAGE", message);
},
@@ -413,7 +443,6 @@ export default {
})
.then(() => {
this.fetchPagedFeatures();
- this.getNloadGeojsonFeatures();
this.checkedFeatures.splice(feature_id);
});
}
@@ -528,8 +557,8 @@ export default {
fetchPagedFeatures(newUrl) {
this.onFilterChange(); //* use paginated event to watch change in filters and modify features on map
let url = `${this.API_BASE_URL}projects/${this.$route.params.slug}/feature-paginated/?output=geojson&limit=${this.pagination.pagesize}&offset=${this.pagination.start}`;
+ //* if receiving next & previous url
if (newUrl && typeof newUrl === "string") {
- //* if receiving next & previous url
//newUrl = newUrl.replace("8000", "8010"); //* for dev uncomment to use proxy link
url = newUrl;
}
diff --git a/src/views/project/Project_members.vue b/src/views/project/Project_members.vue
index aea8f4b1..dc2dff3d 100644
--- a/src/views/project/Project_members.vue
+++ b/src/views/project/Project_members.vue
@@ -273,11 +273,14 @@ export default {
.then((response) => {
if (response.status === 200) {
this.$store.dispatch("GET_USER_LEVEL_PROJECTS"); //* update user status in top right menu
- this.$store.commit("DISPLAY_MESSAGE", "Permissions mises à jour");
+ this.$store.commit("DISPLAY_MESSAGE", {comment: "Permissions mises à jour", level: "positive"});
} else {
this.$store.commit(
"DISPLAY_MESSAGE",
- "Une erreur s'est produite pendant la mises à jour des permissions"
+ {
+ comment : "Une erreur s'est produite pendant la mises à jour des permissions",
+ level: "negative"
+ }
);
}
})
diff --git a/src/views/registration/Login.vue b/src/views/registration/Login.vue
index f26884b1..f9614efa 100644
--- a/src/views/registration/Login.vue
+++ b/src/views/registration/Login.vue
@@ -102,7 +102,7 @@ export default {
if (this.$store.state.user) {
this.$store.commit(
"DISPLAY_MESSAGE",
- "Vous êtes déjà connecté, vous allez être redirigé vers la page d'accueil."
+ {comment :"Vous êtes déjà connecté, vous allez être redirigé vers la page d'accueil."}
);
setTimeout(() => this.$router.push("/"), 3100);
}
--
GitLab