Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • geocontrib/geocontrib-frontend
  • ext_matthieu/geocontrib-frontend
  • fnecas/geocontrib-frontend
  • MatthieuE/geocontrib-frontend
4 results
Show changes
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div v-if="structure" class="row"> <div v-if="structure" class="row">
<div class="five wide column"> <div class="five wide column">
<div class="ui attached secondary segment"> <div class="ui attached secondary segment">
<h1 class="ui center aligned header"> <h1 class="ui center aligned header ellipsis">
<img <img
v-if="structure.geom_type === 'point'" v-if="structure.geom_type === 'point'"
class="ui medium image" class="ui medium image"
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
:class="loadingImportFile ? 'loading' : ''" :class="loadingImportFile ? 'loading' : ''"
> >
<div class="field"> <div class="field">
<label class="ui icon button" for="json_file"> <label class="ui icon button ellipsis" for="json_file">
<i class="file icon"></i> <i class="file icon"></i>
<span class="label">{{ fileToImport.name }}</span> <span class="label">{{ fileToImport.name }}</span>
</label> </label>
...@@ -100,6 +100,7 @@ ...@@ -100,6 +100,7 @@
<ImportTask <ImportTask
v-if="importFeatureTypeData && importFeatureTypeData.length" v-if="importFeatureTypeData && importFeatureTypeData.length"
:data="importFeatureTypeData" :data="importFeatureTypeData"
:reloading="reloadingImport"
/> />
</div> </div>
</div> </div>
...@@ -149,6 +150,15 @@ ...@@ -149,6 +150,15 @@
Pour suivre le statut de l'import, cliquez sur "Importer des Signalements". Pour suivre le statut de l'import, cliquez sur "Importer des Signalements".
</p> </p>
</div> </div>
<div
v-else-if="waitMessage"
class="ui message info"
>
<p>
L'import des signalements a été lancé.
Vous pourrez suivre le statut de l'import dans quelques instants...
</p>
</div>
<div <div
v-for="(feature, index) in lastFeatures" v-for="(feature, index) in lastFeatures"
:key="feature.feature_id + index" :key="feature.feature_id + index"
...@@ -243,7 +253,9 @@ export default { ...@@ -243,7 +253,9 @@ export default {
}, },
showImport: false, showImport: false,
featuresLoading: true, featuresLoading: true,
loadingImportFile: false loadingImportFile: false,
waitMessage: false,
reloadingImport: false,
}; };
}, },
...@@ -260,6 +272,9 @@ export default { ...@@ -260,6 +272,9 @@ export default {
'project', 'project',
'permissions' 'permissions'
]), ]),
...mapState([
'reloadIntervalId'
]),
...mapState('feature', [ ...mapState('feature', [
'features', 'features',
'features_count' 'features_count'
...@@ -307,9 +322,27 @@ export default { ...@@ -307,9 +322,27 @@ export default {
if (newValue.slug){ if (newValue.slug){
this.GET_IMPORTS({ this.GET_IMPORTS({
feature_type: this.$route.params.feature_type_slug feature_type: this.$route.params.feature_type_slug
}); })
} }
} },
importFeatureTypeData: {
deep: true,
handler(newValue) {
if (newValue && newValue.some(el => el.status === 'pending')) {
setTimeout(() => {
this.reloadingImport = true;
this.GET_IMPORTS({
feature_type: this.$route.params.feature_type_slug
}).then(()=> {
setTimeout(() => {
this.reloadingImport = false;
}, 1000);
})
}, this.$store.state.configuration.VUE_APP_RELOAD_INTERVAL);
}
}
},
}, },
created() { created() {
...@@ -341,9 +374,8 @@ export default { ...@@ -341,9 +374,8 @@ export default {
toggleShowImport() { toggleShowImport() {
this.showImport = !this.showImport; this.showImport = !this.showImport;
if (this.showImport) { if (this.showImport) {
this.$store.dispatch("feature_type/GET_IMPORTS", { this.GET_IMPORTS({
feature_type: this.$route.params.feature_type_slug feature_type: this.$route.params.feature_type_slug });
});
} }
}, },
...@@ -432,11 +464,14 @@ export default { ...@@ -432,11 +464,14 @@ export default {
}, },
importGeoJson() { importGeoJson() {
this.waitMessage = true;
this.$store.dispatch('feature_type/SEND_FEATURES_FROM_GEOJSON', { this.$store.dispatch('feature_type/SEND_FEATURES_FROM_GEOJSON', {
slug: this.$route.params.slug, slug: this.$route.params.slug,
feature_type_slug: this.$route.params.feature_type_slug, feature_type_slug: this.$route.params.feature_type_slug,
fileToImport: this.fileToImport, fileToImport: this.fileToImport,
}); }).then(() => {
this.waitMessage = false;
})
}, },
exportFeatures() { exportFeatures() {
......
...@@ -102,6 +102,23 @@ ...@@ -102,6 +102,23 @@
:placeholder="'Sélectionner la liste de valeurs'" :placeholder="'Sélectionner la liste de valeurs'"
/> />
</div> </div>
<div class="colors_selection" id="id_colors_selection" hidden>
<div
v-for="(value, key, index) in form.colors_style.value.colors"
:key="'colors_style-' + index"
>
<div v-if="key" class="color-input">
<label>{{ key }}</label
><input
:name="key"
type="color"
:value="value"
@input="setColorStyles"
/>
</div>
</div>
</div>
</div> </div>
<span v-if="action === 'duplicate' || action === 'edit'"> </span> <span v-if="action === 'duplicate' || action === 'edit'"> </span>
......
...@@ -191,13 +191,17 @@ export default { ...@@ -191,13 +191,17 @@ export default {
} }
this.SET_CURRENT_FEATURE_TYPE_SLUG(this.$route.params.slug_type_signal); this.SET_CURRENT_FEATURE_TYPE_SLUG(this.$route.params.slug_type_signal);
if (this.feature_type) { if (this.feature_type) {
// Init form this.initForm();
this.form.color = JSON.parse(JSON.stringify(this.feature_type.color)); } else {
this.form.icon = JSON.parse(JSON.stringify(this.feature_type.icon)); this.loading = true;
this.form.colors_style = { this.GET_PROJECT_FEATURE_TYPES(this.$route.params.slug)
...this.form.colors_style, .then(() => {
...JSON.parse(JSON.stringify(this.feature_type.colors_style)) this.initForm();
}; this.loading = false;
})
.catch(() => {
this.loading = false;
});
} }
}, },
...@@ -213,6 +217,19 @@ export default { ...@@ -213,6 +217,19 @@ export default {
'GET_PROJECT_INFO' 'GET_PROJECT_INFO'
]), ]),
initForm() {
this.form.color = JSON.parse(JSON.stringify(this.feature_type.color));
this.form.icon = JSON.parse(JSON.stringify(this.feature_type.icon));
this.form.colors_style = {
...this.form.colors_style,
...JSON.parse(JSON.stringify(this.feature_type.colors_style))
};
if (this.feature_type.colors_style && Object.keys(this.feature_type.colors_style.colors).length > 0) {
this.selectedCustomfield =
this.feature_type.customfield_set.find(el => el.name === this.feature_type.colors_style.custom_field_name).name;
}
},
setDefaultStyle(e) { setDefaultStyle(e) {
const value = e.value; const value = e.value;
this.form.color = value.color.value; this.form.color = value.color.value;
...@@ -234,7 +251,16 @@ export default { ...@@ -234,7 +251,16 @@ export default {
this.GET_PROJECT_FEATURE_TYPES(this.$route.params.slug) this.GET_PROJECT_FEATURE_TYPES(this.$route.params.slug)
.then(() => { .then(() => {
this.loading = false; this.loading = false;
this.success = 'La modification de la symbologie a été prise en compte.' this.success =
'La modification de la symbologie a été prise en compte. Vous allez être redirigé vers la page d\'accueil du projet.';
setTimeout(() => {
this.$router.push({
name: 'project_detail',
params: {
slug: this.$store.state.project_slug,
},
})
}, 1500);
}) })
.catch((err) => { .catch((err) => {
console.error(err); console.error(err);
......
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
data-tooltip="S'abonner au projet" data-tooltip="S'abonner au projet"
data-position="top center" data-position="top center"
data-variation="mini" data-variation="mini"
@click="isModalOpen = true" @click="modalType = 'subscribe'"
> >
<i class="inverted grey envelope icon"></i> <i class="inverted grey envelope icon"></i>
</a> </a>
...@@ -93,6 +93,22 @@ ...@@ -93,6 +93,22 @@
> >
<i class="inverted grey pencil alternate icon"></i> <i class="inverted grey pencil alternate icon"></i>
</router-link> </router-link>
<a
v-if="
user_permissions &&
user_permissions[project.slug] &&
user_permissions[project.slug].is_project_administrator &&
isOffline() !== true
"
id="delete-button"
class="ui button button-hover-red"
data-tooltip="Supprimer le projet"
data-position="top center"
data-variation="mini"
@click="modalType = 'deleteProject'"
>
<i class="inverted grey trash icon"></i>
</a>
</div> </div>
<div class="ui hidden divider"></div> <div class="ui hidden divider"></div>
<div class="sub header"> <div class="sub header">
...@@ -180,7 +196,7 @@ ...@@ -180,7 +196,7 @@
button button-hover-green button button-hover-green
" "
data-tooltip="Ajouter un signalement" data-tooltip="Ajouter un signalement"
data-position="left center" data-position="top right"
data-variation="mini" data-variation="mini"
> >
<i class="ui plus icon"></i> <i class="ui plus icon"></i>
...@@ -206,7 +222,7 @@ ...@@ -206,7 +222,7 @@
button button-hover-green button button-hover-green
" "
data-tooltip="Dupliquer un type de signalement" data-tooltip="Dupliquer un type de signalement"
data-position="left center" data-position="top right"
data-variation="mini" data-variation="mini"
> >
<i class="inverted grey copy alternate icon"></i> <i class="inverted grey copy alternate icon"></i>
...@@ -219,6 +235,29 @@ ...@@ -219,6 +235,29 @@
Import en cours Import en cours
</div> </div>
<div v-else v-frag> <div v-else v-frag>
<a
v-if="
user_permissions &&
user_permissions[project.slug] &&
user_permissions[project.slug].is_project_administrator &&
isOffline() !== true
"
@click="toggleDeleteFeatureType(type)"
class="
ui
compact
small
icon
right
floated
button button-hover-red
"
data-tooltip="Supprimer le type de signalement"
data-position="top center"
data-variation="mini"
>
<i class="inverted grey trash alternate icon"></i>
</a>
<router-link <router-link
:to="{ :to="{
name: 'editer-symbologie-signalement', name: 'editer-symbologie-signalement',
...@@ -238,10 +277,10 @@ ...@@ -238,10 +277,10 @@
icon icon
right right
floated floated
button button-hover-green button button-hover-orange
" "
data-tooltip="Éditer la symbologie du type de signalement" data-tooltip="Éditer la symbologie du type de signalement"
data-position="left center" data-position="top center"
data-variation="mini" data-variation="mini"
> >
<i class="inverted grey paint brush alternate icon"></i> <i class="inverted grey paint brush alternate icon"></i>
...@@ -265,10 +304,10 @@ ...@@ -265,10 +304,10 @@
icon icon
right right
floated floated
button button-hover-green button button-hover-orange
" "
data-tooltip="Éditer le type de signalement" data-tooltip="Éditer le type de signalement"
data-position="left center" data-position="top left"
data-variation="mini" data-variation="mini"
> >
<i class="inverted grey pencil alternate icon"></i> <i class="inverted grey pencil alternate icon"></i>
...@@ -543,32 +582,54 @@ ...@@ -543,32 +582,54 @@
</span> </span>
<div <div
v-if="isModalOpen" v-if="modalType"
class="ui dimmer modals page transition visible active" class="ui dimmer modals page transition visible active"
style="display: flex !important" style="display: flex !important"
> >
<div <div
:class="[ :class="[
'ui mini modal subscription', 'ui mini modal subscription',
{ 'transition visible active': isModalOpen }, { 'transition visible active': modalType },
]" ]"
> >
<i @click="isModalOpen = false" class="close icon"></i> <i @click="modalType = false" class="close icon"></i>
<div class="ui icon header"> <div class="ui icon header">
<i class="envelope icon"></i> <i :class="[modalType === 'subscribe' ? 'envelope' : 'trash', 'icon']"></i>
Notifications du projet {{
modalType === 'subscribe' ? 'Notifications' : 'Suppression'
}} du {{
modalType === 'deleteFeatureType' ? 'type de signalement ' + featureTypeToDelete.title : 'projet'
}}
</div> </div>
<div class="content"> <div class="content">
<div v-if="modalType !== 'subscribe'" >
<p class="centered-text">
Confirmez vous la suppression du {{ modalType === 'deleteProject' ? 'projet, ainsi que les types de signalements' : 'type de signalement'}} et tous les signalements associés&nbsp;?
</p>
<p class="centered-text alert">
Attention cette action est irreversible !
</p>
</div>
<button <button
@click="subscribeProject" @click="handleModalClick"
:class="['ui compact fluid button', is_suscriber ? 'red' : 'green']" :class="['ui compact fluid button', modalType === 'subscribe' && !is_suscriber ? 'green' : 'red']"
> >
<span v-if="modalType === 'subscribe'">
{{ {{
is_suscriber is_suscriber
? "Se désabonner de ce projet" ? "Se désabonner de ce projet"
: "S'abonner à ce projet" : "S'abonner à ce projet"
}} }}
</span>
<span v-else>
Supprimer le
{{
modalType === 'deleteProject'
? 'projet'
: 'type de signalement'
}}
</span>
</button> </button>
</div> </div>
</div> </div>
...@@ -609,6 +670,7 @@ import frag from "vue-frag"; ...@@ -609,6 +670,7 @@ import frag from "vue-frag";
import { mapUtil } from "@/assets/js/map-util.js"; import { mapUtil } from "@/assets/js/map-util.js";
import { mapGetters, mapState, mapActions, mapMutations } from "vuex"; import { mapGetters, mapState, mapActions, mapMutations } from "vuex";
import projectAPI from "@/services/project-api"; import projectAPI from "@/services/project-api";
import featureTypeAPI from "@/services/featureType-api";
import featureAPI from "@/services/feature-api"; import featureAPI from "@/services/feature-api";
import axios from "@/axios-client.js"; import axios from "@/axios-client.js";
...@@ -645,11 +707,12 @@ export default { ...@@ -645,11 +707,12 @@ export default {
geojsonImport: [], geojsonImport: [],
fileToImport: { name: "", size: 0 }, fileToImport: { name: "", size: 0 },
slug: this.$route.params.slug, slug: this.$route.params.slug,
isModalOpen: false, modalType: false,
is_suscriber: false, is_suscriber: false,
tempMessage: null, tempMessage: null,
projectInfoLoading: true, projectInfoLoading: true,
featureTypeImporting: false, featureTypeImporting: false,
featureTypeToDelete: null,
featuresLoading: true, featuresLoading: true,
isFileSizeModalOpen: false, isFileSizeModalOpen: false,
// mapFeatures: null, // mapFeatures: null,
...@@ -660,7 +723,7 @@ export default { ...@@ -660,7 +723,7 @@ export default {
computed: { computed: {
...mapGetters([ ...mapGetters([
'project', 'project',
'permissions' 'permissions',
]), ]),
...mapState('feature_type', [ ...mapState('feature_type', [
'feature_types', 'feature_types',
...@@ -672,7 +735,8 @@ export default { ...@@ -672,7 +735,8 @@ export default {
...mapState([ ...mapState([
'last_comments', 'last_comments',
'user', 'user',
'reloadIntervalId' 'user_permissions',
'reloadIntervalId',
]), ]),
...mapState('map', [ ...mapState('map', [
'map' 'map'
...@@ -715,26 +779,6 @@ export default { ...@@ -715,26 +779,6 @@ export default {
} }
} }
}, },
features: {
deep: true,
handler(newValue, oldValue) {
if (newValue && newValue.length && newValue !== oldValue) {
mapUtil.addFeatures(
this.features,
{},
true,
this.feature_types
);
this.mapLoading = false;
}
}
},
featuresLoading(newValue) {
if (!newValue && this.features && this.features.length === 0) {
this.mapLoading = false;
}
}
}, },
created() { created() {
...@@ -749,15 +793,7 @@ export default { ...@@ -749,15 +793,7 @@ export default {
}, },
mounted() { mounted() {
this.GET_PROJECT_INFO(this.slug) this.retrieveProjectInfo();
.then(() => {
this.projectInfoLoading = false;
setTimeout(this.initMap, 1000);
})
.catch((err) => {
console.error(err)
this.projectInfoLoading = false;
});
if (this.message) { if (this.message) {
this.tempMessage = this.message; this.tempMessage = this.message;
...@@ -775,10 +811,12 @@ export default { ...@@ -775,10 +811,12 @@ export default {
methods: { methods: {
...mapMutations([ ...mapMutations([
'SET_RELOAD_INTERVAL_ID', 'SET_RELOAD_INTERVAL_ID',
'CLEAR_RELOAD_INTERVAL_ID' 'CLEAR_RELOAD_INTERVAL_ID',
'DISPLAY_MESSAGE',
]), ]),
...mapActions([ ...mapActions([
'GET_PROJECT_INFO' 'GET_PROJECT_INFO',
'GET_ALL_PROJECTS',
]), ]),
...mapActions('map', [ ...mapActions('map', [
'INITIATE_MAP' 'INITIATE_MAP'
...@@ -809,6 +847,22 @@ export default { ...@@ -809,6 +847,22 @@ export default {
return false; return false;
}, },
retrieveProjectInfo() {
this.GET_PROJECT_INFO(this.slug)
.then(() => {
this.projectInfoLoading = false;
setTimeout(() => {
let map = mapUtil.getMap();
if (map) map.remove();
this.initMap();
}, 1000);
})
.catch((err) => {
console.error(err)
this.projectInfoLoading = false;
});
},
checkForOfflineFeature() { checkForOfflineFeature() {
let arraysOffline = []; let arraysOffline = [];
let localStorageArray = localStorage.getItem("geocontrib_offline"); let localStorageArray = localStorage.getItem("geocontrib_offline");
...@@ -940,7 +994,7 @@ export default { ...@@ -940,7 +994,7 @@ export default {
}) })
.then((data) => { .then((data) => {
this.is_suscriber = data.is_suscriber; this.is_suscriber = data.is_suscriber;
this.isModalOpen = false; this.modalType = false;
if (this.is_suscriber) if (this.is_suscriber)
this.infoMessage = this.infoMessage =
"Vous êtes maintenant abonné aux notifications de ce projet."; "Vous êtes maintenant abonné aux notifications de ce projet.";
...@@ -950,6 +1004,54 @@ export default { ...@@ -950,6 +1004,54 @@ export default {
setTimeout(() => (this.infoMessage = ""), 3000); setTimeout(() => (this.infoMessage = ""), 3000);
}); });
}, },
deleteProject() {
projectAPI.deleteProject(this.project.slug)
.then((response) => {
if (response === 'success') {
this.GET_ALL_PROJECTS();
this.$router.push('/');
this.DISPLAY_MESSAGE(`Le projet ${this.project.title} a bien été supprimé.`)
} else {
this.DISPLAY_MESSAGE(`Une erreur est survenu lors de la suppression du projet ${this.project.title}.`)
}
})
},
deleteFeatureType() {
featureTypeAPI.deleteFeatureType(this.featureTypeToDelete.slug)
.then((response) => {
this.modalType = false;
if (response === 'success') {
this.GET_ALL_PROJECTS();
this.retrieveProjectInfo();
this.DISPLAY_MESSAGE(`Le type de signalement ${this.featureTypeToDelete.title} a bien été supprimé.`)
} else {
this.DISPLAY_MESSAGE(`Une erreur est survenu lors de la suppression du type de signalement ${this.featureTypeToDelete.title}.`)
}
this.featureTypeToDelete = null;
})
},
handleModalClick() {
switch (this.modalType) {
case 'subscribe':
this.subscribeProject();
break;
case 'deleteProject':
this.deleteProject();
break;
case 'deleteFeatureType':
this.deleteFeatureType();
break;
}
},
toggleDeleteFeatureType(featureType) {
this.featureTypeToDelete = featureType;
this.modalType = 'deleteFeatureType';
},
async initMap() { async initMap() {
if (this.project && this.permissions.can_view_project) { if (this.project && this.permissions.can_view_project) {
await this.INITIATE_MAP(this.$refs.map); await this.INITIATE_MAP(this.$refs.map);
...@@ -969,6 +1071,7 @@ export default { ...@@ -969,6 +1071,7 @@ export default {
true, true,
this.$store.state.feature_type.feature_types this.$store.state.feature_type.feature_types
); );
this.mapLoading = false;
this.GET_PROJECT_FEATURES({ this.GET_PROJECT_FEATURES({
project_slug: this.slug, project_slug: this.slug,
...@@ -1062,3 +1165,12 @@ export default { ...@@ -1062,3 +1165,12 @@ export default {
color: teal; color: teal;
} }
</style> </style>
<style scoped>
.alert {
color: red;
}
.centered-text {
text-align: center;
}
</style>
...@@ -273,11 +273,14 @@ export default { ...@@ -273,11 +273,14 @@ export default {
.then((response) => { .then((response) => {
if (response.status === 200) { if (response.status === 200) {
this.$store.dispatch("GET_USER_LEVEL_PROJECTS"); //* update user status in top right menu 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 { } else {
this.$store.commit( this.$store.commit(
"DISPLAY_MESSAGE", "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"
}
); );
} }
}) })
......
...@@ -102,7 +102,7 @@ export default { ...@@ -102,7 +102,7 @@ export default {
if (this.$store.state.user) { if (this.$store.state.user) {
this.$store.commit( this.$store.commit(
"DISPLAY_MESSAGE", "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); setTimeout(() => this.$router.push("/"), 3100);
} }
......