diff --git a/README.md b/README.md
index d7998595b03edb03ad4559cf179a5632d7693f02..81e8e036e53bf71029e7ca6abe725cf993e2069f 100644
--- a/README.md
+++ b/README.md
@@ -24,7 +24,8 @@ NODE_ENV=development
"VUE_APP_LOCALE":"fr-FR",
"VUE_APP_APPLICATION_NAME":"GéoContrib",
"VUE_APP_APPLICATION_ABSTRACT":"Application de saisie d'informations géographiques contributive",
- "VUE_APP_LOGO_PATH":"@/assets/img/logo-neogeo-circle.png",
+ "VUE_APP_APPLICATION_FAVICO":"/geocontrib/favicon.ico",
+ "VUE_APP_LOGO_PATH":"/geocontrib/img/logo-neogeo-circle.png",
"VUE_APP_DJANGO_BASE":"",
"VUE_APP_DJANGO_API_BASE":"/geocontrib/api/",
"DEFAULT_BASE_MAP":{
diff --git a/package-lock.json b/package-lock.json
index aac4365c145df2276e626c9152f58a9009190219..5c65244599ec38ec18636b5cfef2ee74c1468351 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11592,6 +11592,11 @@
}
}
},
+ "vue-multiselect": {
+ "version": "2.1.6",
+ "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-2.1.6.tgz",
+ "integrity": "sha512-s7jmZPlm9FeueJg1RwJtnE9KNPtME/7C8uRWSfp9/yEN4M8XcS/d+bddoyVwVnvFyRh9msFo0HWeW0vTL8Qv+w=="
+ },
"vue-router": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz",
diff --git a/package.json b/package.json
index 6288ae767b382e24b599d969739e7d3d9c545a0e..a508a7db81970ff804f9708136a3cd6252e274c4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "geocontrib-frontend",
- "version": "2.2.0",
+ "version": "2.3.0-rc1",
"private": true,
"scripts": {
"serve": "npm run init-proxy & npm run init-serve",
@@ -27,6 +27,7 @@
"sortablejs": "^1.14.0",
"vue": "^2.6.11",
"vue-frag": "^1.1.5",
+ "vue-multiselect": "~2.1.6",
"vue-router": "^3.2.0",
"vuex": "^3.6.2"
},
diff --git a/public/config/config.json b/public/config/config.json
index 65038a32551262edcccf998e4c66e7707f44de04..f8f8e5834a5e41535a50f00884e924978e71979d 100644
--- a/public/config/config.json
+++ b/public/config/config.json
@@ -4,6 +4,7 @@
"NODE_ENV":"development",
"VUE_APP_LOCALE":"fr-FR",
"VUE_APP_APPLICATION_NAME":"GéoContrib",
+ "VUE_APP_APPLICATION_FAVICO":"/geocontrib/img/geo2f.ico",
"VUE_APP_APPLICATION_ABSTRACT":"Application de saisie d'informations géographiques contributive",
"VUE_APP_LOGO_PATH":"/geocontrib/img/logo-neogeo-circle.png",
"VUE_APP_DJANGO_BASE":"http://localhost:8010",
diff --git a/public/img/geo2f.ico b/public/img/geo2f.ico
new file mode 100644
index 0000000000000000000000000000000000000000..434ba30085b6358a339f1b89d4f16c57d2766750
Binary files /dev/null and b/public/img/geo2f.ico differ
diff --git a/public/img/logo_g2f.png b/public/img/logo_g2f.png
new file mode 100644
index 0000000000000000000000000000000000000000..4eedc26700eeaecf751908a8b0c2c4a22f79d96e
Binary files /dev/null and b/public/img/logo_g2f.png differ
diff --git a/src/assets/js/map-util.js b/src/assets/js/map-util.js
index 3c00b6df99f07e8c38df0e25701ec5539acc2781..84dc6f60b5cca045e97d1a2e65f1a02128c0d5d4 100644
--- a/src/assets/js/map-util.js
+++ b/src/assets/js/map-util.js
@@ -4,14 +4,9 @@
import L from "leaflet"
import "leaflet/dist/leaflet.css";
import flip from '@turf/flip'
-import axios from "axios"
+import axios from '@/axios-client.js';
import "leaflet.vectorgrid";
-
-axios.defaults.headers.common['X-CSRFToken'] = (name => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return (value != null) ? unescape(value[1]) : null;
-})('csrftoken');
+import store from '@/store';
import { FillSymbolizer, PointSymbolizer, LineSymbolizer } from "@/assets/js/vector_tile_fix.js";
@@ -389,12 +384,25 @@ const mapUtil = {
// Look for a custom field
let customField;
let customFieldOption;
- if (Object.keys(feature.properties).some(el => featureType.customfield_set && featureType.customfield_set.map(e => e.name).includes(el))) {
+ if (featureType.customfield_set && Object.keys(feature.properties).some(el => featureType.customfield_set.map(e => e.name).includes(el))) {
customField = Object.keys(feature.properties).filter(el => featureType.customfield_set.map(e => e.name).includes(el));
customFieldOption = feature.properties[customField[0]];
}
- const color = this.retrieveFeatureColor(featureType, feature.properties) || feature.properties.color;
-
+ let color = this.retrieveFeatureColor(featureType, feature.properties) || feature.properties.color;
+
+ // if (!color && customFieldOption && featureType.colors_style) {
+ // color =
+ // featureType.colors_style.value ?
+ // featureType.colors_style.value.colors[customFieldOption].value ?
+ // featureType.colors_style.value.colors[customFieldOption].value :
+ // featureType.colors_style.value.colors[customFieldOption] :
+ // featureType.colors_style.colors[customFieldOption]
+ // } else {
+ // color = feature.properties.color;
+ // }
+ if (color == undefined){
+ color = featureType.color;
+ }
if (geomJSON.type === 'Point') {
if (customFieldOption && featureType.colors_style && featureType.colors_style.value && featureType.colors_style.value.icons) {
const iconHTML = `
@@ -487,13 +495,13 @@ const mapUtil = {
return `
<h4>
- <a href="${feature_url}">${feature.properties.title}</a>
+ <a href="${store.state.configuration.BASE_URL.slice(0, -1)}${feature_url}">${feature.properties.title}</a>
</h4>
<div>
Statut : ${status}
</div>
<div>
- Type : <a href="${feature_type_url}"> ${feature_type.title} </a>
+ Type : <a href="${store.state.configuration.BASE_URL.slice(0, -1)}${feature_type_url}"> ${feature_type.title} </a>
</div>
<div>
Dernière mise à jour : ${date_maj}
diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css
index d49a7d4750077875a1d26d66f025feef2eba7b9d..0777e8e3742e08d03179550ddfff9e40778efb21 100644
--- a/src/assets/styles/base.css
+++ b/src/assets/styles/base.css
@@ -158,4 +158,48 @@ footer .ui.text.menu .item:not(:first-child) {
border-radius: 3px;
background-color: rgb(250, 241, 242);
padding: 1rem;
+}
+
+/* ---------------------------------- */
+ /* ERROR LIST */
+/* ---------------------------------- */
+.multiselect__tags {
+ border: 2px solid #ced4da;
+}
+.multiselect__tags > .multiselect__input {
+ border: none !important;
+ font-size: 1rem !important;
+}
+
+.multiselect__placeholder {
+ color: #838383;
+ margin-bottom: 0px;
+ padding-top: 0;
+}
+
+.multiselect__single, .multiselect__tags, .multiselect__content, .multiselect__option {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ max-width: 100%;
+}
+
+.multiselect__select {
+ z-index: 1 !important;
+}
+.multiselect__clear {
+ position: absolute;
+ right: 1px;
+ top: 8px;
+ width: 40px;
+ display: block;
+ cursor: pointer;
+ z-index: 9;
+ background-color: #fff;
+}
+.multiselect__spinner {
+ z-index: 2 !important;
+ background-color: #fff;
+ opacity: 1;
+ top: 2px;
}
\ No newline at end of file
diff --git a/src/axios-client.js b/src/axios-client.js
new file mode 100644
index 0000000000000000000000000000000000000000..fa6b3d958ba2c8e4ec140a407d117a8137aee1c2
--- /dev/null
+++ b/src/axios-client.js
@@ -0,0 +1,35 @@
+import axios from 'axios';
+
+axios.defaults.withCredentials = true;
+
+// Add a request interceptor
+axios.interceptors.request.use(function (config) {
+
+ config.headers['X-CSRFToken'] = (name => {
+ const re = new RegExp(name + "=([^;]+)");
+ const value = re.exec(document.cookie);
+ return (value != null) ? unescape(value[1]) : null;
+ })('csrftoken');
+
+ return config;
+
+ }, function (error) {
+ return Promise.reject(error);
+ });
+
+// Add a response interceptor
+axios.interceptors.response.use(function (response) {
+
+ response.headers['X-CSRFToken'] = (name => {
+ const re = new RegExp(name + "=([^;]+)");
+ const value = re.exec(document.cookie);
+ return (value != null) ? unescape(value[1]) : null;
+ })('csrftoken');
+
+ return response;
+
+ }, function (error) {
+ return Promise.reject(error);
+ });
+
+export default axios;
\ No newline at end of file
diff --git a/src/components/SearchFeature.vue b/src/components/SearchFeature.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6ea7c0d5747542584fedcddacede3988782670cc
--- /dev/null
+++ b/src/components/SearchFeature.vue
@@ -0,0 +1,114 @@
+<template>
+ <div>
+ <Multiselect
+ v-model="selection"
+ :options="results"
+ :options-limit="10"
+ :allow-empty="true"
+ track-by="feature_id"
+ label="title"
+ :reset-after="false"
+ select-label=""
+ selected-label=""
+ deselect-label=""
+ :searchable="true"
+ :placeholder="'Rechercher un signalement ...'"
+ :show-no-results="true"
+ :loading="loading"
+ :clear-on-select="false"
+ :preserve-search="true"
+ @search-change="search"
+ @select="select"
+ @close="close"
+ >
+ <template slot="clear">
+ <div
+ v-if="selection"
+ class="multiselect__clear"
+ @click.prevent.stop="selection = null"
+ >
+ <i class="close icon"></i>
+ </div>
+ </template>
+ <span slot="noResult">
+ Aucun résultat.
+ </span>
+ <span slot="noOptions">
+ Saisissez les premiers caractères ...
+ </span>
+ </Multiselect>
+ </div>
+</template>
+
+<script>
+import { mapState, mapMutations, mapActions } from 'vuex';
+
+import Multiselect from 'vue-multiselect';
+
+export default {
+ name: 'SearchFeature',
+
+ components: {
+ Multiselect
+ },
+
+ data() {
+ return {
+ loading: false,
+ selection: null,
+ text: null,
+ results: []
+ }
+ },
+
+ computed: {
+ ...mapState('feature', [
+ 'features'
+ ])
+ },
+
+ watch: {
+ text: function(newValue) {
+ this.loading = true;
+ this.GET_PROJECT_FEATURES({
+ project_slug: this.$route.params.slug,
+ feature_type__slug: this.$route.params.slug_type_signal,
+ search: newValue,
+ limit: '10'
+ })
+ .then(() => {
+ if (newValue) {
+ this.results = this.features;
+ } else {
+ this.results.splice(0);
+ }
+ this.loading = false;
+ });
+ }
+ },
+
+ created() {
+ this.RESET_CANCELLABLE_SEARCH_REQUEST();
+ },
+
+ methods: {
+ ...mapMutations(['RESET_CANCELLABLE_SEARCH_REQUEST']),
+ ...mapActions('feature', [
+ 'GET_PROJECT_FEATURES'
+ ]),
+ search(text) {
+ this.text = text;
+ },
+ select(e) {
+ this.$emit('select', e);
+ },
+ close() {
+ this.$emit('close', this.selection);
+ }
+ }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/feature/FeatureAttachmentForm.vue b/src/components/feature/FeatureAttachmentForm.vue
index beb3e6657bb4630b12fa3fc394be9b22528898df..26d93d3ac930559f7ed63bcad41f1ec92a3a5d9e 100644
--- a/src/components/feature/FeatureAttachmentForm.vue
+++ b/src/components/feature/FeatureAttachmentForm.vue
@@ -173,12 +173,13 @@ export default {
let image = new Image();
image.onload = function () {
handleFile(true);
+ URL.revokeObjectURL(image.src);
};
image.onerror = function () {
handleFile(false);
+ URL.revokeObjectURL(image.src);
};
image.src = url.createObjectURL(files);
- URL.revokeObjectURL(image.src);
},
onFileChange(e) {
diff --git a/src/components/feature/FeatureLinkedForm.vue b/src/components/feature/FeatureLinkedForm.vue
index 02cd0bfe25a382e920681ea126841bc5ac80f971..27c60fbd5eaa879ae80d94c40df07bb04de5cc56 100644
--- a/src/components/feature/FeatureLinkedForm.vue
+++ b/src/components/feature/FeatureLinkedForm.vue
@@ -30,10 +30,9 @@
<label for="form.feature_to.id_for_label">{{
form.feature_to.label
}}</label>
- <Dropdown
- :options="featureOptions"
- :selected="selected_feature_to"
- :selection.sync="selected_feature_to"
+ <SearchFeature
+ @select="selectFeatureTo"
+ @close="selectFeatureTo"
/>
{{ form.feature_to.errors }}
</div>
@@ -44,6 +43,7 @@
<script>
import Dropdown from "@/components/Dropdown.vue";
+import SearchFeature from '@/components/SearchFeature.vue';
export default {
name: "FeatureLinkedForm",
@@ -52,6 +52,7 @@ export default {
components: {
Dropdown,
+ SearchFeature
},
data() {
@@ -92,22 +93,6 @@ export default {
},
computed: {
- featureOptions: function () {
- return this.features
- .filter(
- (el) =>
- el.feature_type.slug === this.$route.params.slug_type_signal && //* filter only for the same feature
- el.feature_id !== this.$route.params.slug_signal //* filter out current feature
- )
- .map((el) => {
- return {
- name: `${el.title} (${el.display_creator} - ${this.formatDate(
- el.created_on
- )})`,
- value: el.feature_id,
- };
- });
- },
selected_relation_type: {
// getter
@@ -119,27 +104,7 @@ export default {
this.form.relation_type.value = newValue;
this.updateStore();
},
- },
-
- selected_feature_to: {
- // getter
- get() {
- return this.form.feature_to.value.name;
- },
- // setter
- set(newValue) {
- this.form.feature_to.value = newValue;
- this.updateStore();
- },
- },
- },
-
- watch: {
- featureOptions(newValue) {
- if (newValue) {
- this.getExistingFeature_to(newValue);
- }
- },
+ }
},
methods: {
@@ -153,6 +118,10 @@ export default {
this.$store.commit("feature/REMOVE_LINKED_FORM", this.linkedForm.dataKey);
},
+ selectFeatureTo(e) {
+ this.form.feature_to.value = e;
+ },
+
updateStore() {
this.$store.commit("feature/UPDATE_LINKED_FORM", {
dataKey: this.linkedForm.dataKey,
diff --git a/src/components/map-layers/SidebarLayers.vue b/src/components/map-layers/SidebarLayers.vue
index dace42eff5f205a37bc614755fcb71dde1d1253d..950f41b95854e32a2bdaae7099eaacbb6d5701c4 100644
--- a/src/components/map-layers/SidebarLayers.vue
+++ b/src/components/map-layers/SidebarLayers.vue
@@ -220,13 +220,20 @@ export default {
initSortable() {
this.baseMaps.forEach((basemap) => {
- new Sortable(document.getElementById(`list-${basemap.id}`), {
- animation: 150,
- handle: ".layer-handle-sort", // The element that is active to drag
- ghostClass: "blue-background-class",
- dragClass: "white-opacity-background-class",
- onEnd: this.onlayerMove.bind(this),
- });
+ let element=document.getElementById(`list-${basemap.id}`);
+ if(element) {
+ new Sortable(element, {
+ animation: 150,
+ handle: ".layer-handle-sort", // The element that is active to drag
+ ghostClass: "blue-background-class",
+ dragClass: "white-opacity-background-class",
+ onEnd: this.onlayerMove.bind(this),
+ });
+ }
+ else{
+ console.error(`list-${basemap.id} not found in dom`)
+ }
+
});
},
// Check if there are changes in the basemaps settings. Changes are detected if:
diff --git a/src/main.js b/src/main.js
index 3e5f6956593ac0d53834bdcd46cf80970188613a..56bc1b0585e4d9d65e0712b9b6438479597db717 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,6 +13,8 @@ import '@fortawesome/fontawesome-free/js/all.js'
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+// Multiselect installation
+import 'vue-multiselect/dist/vue-multiselect.min.css';
library.add(fas)
@@ -36,6 +38,15 @@ if(navigator.serviceWorker){
let onConfigLoaded = function(config){
store.commit("SET_CONFIG", config);
+
+ // set title and favico
+ document.title= config.VUE_APP_APPLICATION_NAME+' '+config.VUE_APP_APPLICATION_ABSTRACT;
+ let link = document.createElement('link');
+ link.id = 'dynamic-favicon';
+ link.rel = 'shortcut icon';
+ link.href = config.VUE_APP_APPLICATION_FAVICO;
+ document.head.appendChild(link);
+
window.proxy_url=config.VUE_APP_DJANGO_API_BASE+"proxy/";
axios.all([store.dispatch("USER_INFO"),
store.dispatch("GET_ALL_PROJECTS"),
diff --git a/src/service-worker.js b/src/service-worker.js
index c9c0d32fee26672dbdc0b2f24959aee7e9eb3381..dac6068b2cb19d00474c971971347d4f6fbb87a1 100644
--- a/src/service-worker.js
+++ b/src/service-worker.js
@@ -14,7 +14,7 @@ if (workbox) {
// Since we have a SPA here, this should be index.html always.
// https://stackoverflow.com/questions/49963982/vue-router-history-mode-with-pwa-in-offline-mode
workbox.routing.registerNavigationRoute('/geocontrib/index.html', {
- blacklist: [/\/api/,/\/admin/],
+ blacklist: [/\/api/,/\/admin/,/\/media/],
})
workbox.routing.registerRoute(
diff --git a/src/services/map-api.js b/src/services/map-api.js
index fa4c5ddba7178edc5d26a91095d1dedb3c976e46..f4b8f45edf3b0f2d8835344f0fcb088f45059c88 100644
--- a/src/services/map-api.js
+++ b/src/services/map-api.js
@@ -1,11 +1,6 @@
-import axios from 'axios';
+import axios from '@/axios-client.js';
import store from '../store';
-axios.defaults.headers.common['X-CSRFToken'] = (name => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return (value !== null) ? unescape(value[1]) : null;
-})('csrftoken');
const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
diff --git a/src/services/project-api.js b/src/services/project-api.js
index b918ad2270c8dbcd20cd0d46f8c903af3176a3a4..f3d439cd4b4648a8080ec68e540dfbcf451d8810 100644
--- a/src/services/project-api.js
+++ b/src/services/project-api.js
@@ -1,12 +1,7 @@
-import axios from 'axios';
+import axios from '@/axios-client.js';
import store from '../store'
-axios.defaults.headers.common['X-CSRFToken'] = (name => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return (value !== null) ? unescape(value[1]) : null;
-})('csrftoken');
const baseUrl = store.state.configuration.VUE_APP_DJANGO_API_BASE;
diff --git a/src/store/index.js b/src/store/index.js
index eea20cf397445f8aa14c8dcaec92552347a08168..5e7e3c39ae6a7d0840790123e03d1b079c589068 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,5 +1,4 @@
-const axios = require("axios");
-
+import axios from '@/axios-client.js';
import Vue from 'vue';
import Vuex from 'vuex';
import router from '../router'
@@ -7,26 +6,26 @@ import feature_type from "./modules/feature_type"
import feature from "./modules/feature"
import map from "./modules/map"
-axios.defaults.headers.common['X-CSRFToken'] = (name => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return (value !== null) ? unescape(value[1]) : null;
-})('csrftoken');
+// axios.defaults.headers.common['X-CSRFToken'] = (name => {
+// var re = new RegExp(name + "=([^;]+)");
+// var value = re.exec(document.cookie);
+// return (value !== null) ? unescape(value[1]) : null;
+// })('csrftoken');
Vue.use(Vuex);
-axios.defaults.withCredentials = true; // * add cookies to axios
-function updateAxiosHeader() {
- axios.defaults.headers.common['X-CSRFToken'] = (name => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return (value !== null) ? unescape(value[1]) : null;
- })('csrftoken');
-}
-// ! À vérifier s'il y a un changement de token pendant l'éxécution de l'appli
-updateAxiosHeader();
+// axios.defaults.withCredentials = true; // * add cookies to axios
+// function updateAxiosHeader() {
+// axios.defaults.headers.common['X-CSRFToken'] = (name => {
+// var re = new RegExp(name + "=([^;]+)");
+// var value = re.exec(document.cookie);
+// return (value !== null) ? unescape(value[1]) : null;
+// })('csrftoken');
+// }
+// // ! À vérifier s'il y a un changement de token pendant l'éxécution de l'appli
+// updateAxiosHeader();
const noPermissions = { "can_view_project": true, "can_create_project": false, "can_update_project": false, "can_view_feature": true, "can_view_archived_feature": true, "can_create_feature": false, "can_update_feature": false, "can_delete_feature": false, "can_publish_feature": false, "can_create_feature_type": false, "can_view_feature_type": true, "is_project_administrator": false }
@@ -53,6 +52,7 @@ export default new Vuex.Store({
isLoading: false,
message: "En cours de chargement"
},
+ cancellableSearchRequest: []
},
mutations: {
@@ -117,6 +117,13 @@ export default new Vuex.Store({
message: "En cours de chargement"
};
},
+ SET_CANCELLABLE_SEARCH_REQUEST(state, payload) {
+ state.cancellableSearchRequest.push(payload);
+ },
+
+ RESET_CANCELLABLE_SEARCH_REQUEST(state) {
+ state.cancellableSearchRequest = [];
+ },
},
getters: {
@@ -274,16 +281,17 @@ export default new Vuex.Store({
});
},
- async GET_PROJECT_INFO({ state, commit, dispatch }, slug, noFeatures) {
+ async GET_PROJECT_INFO({ state, commit, dispatch }, slug/*, noFeatures */) {
commit("SET_PROJECT_SLUG", slug);
let promises = [
dispatch("GET_PROJECT_LAST_MESSAGES", slug).then(response => response),
dispatch("feature_type/GET_PROJECT_FEATURE_TYPES", slug).then(response => response),
+ // dispatch("feature/GET_PROJECT_FEATURES", slug).then(response => response),
]
- console.log(noFeatures)
+ /* console.log(noFeatures)
if (!noFeatures) {
promises.push(dispatch("feature/GET_PROJECT_FEATURES", slug).then(response => response))
- }
+ } */
console.log(promises)
if (state.user) promises.push(dispatch("map/GET_BASEMAPS", slug).then(response => response))
diff --git a/src/store/modules/feature.js b/src/store/modules/feature.js
index 2b9eb239c3eded5a247a1572731689d54e219a94..d081b0b6b49432a88d697d0434f0871b913466c2 100644
--- a/src/store/modules/feature.js
+++ b/src/store/modules/feature.js
@@ -1,11 +1,11 @@
-const axios = require("axios");
+import axios from '@/axios-client.js';
import router from '../../router'
-axios.defaults.headers.common['X-CSRFToken'] = (name => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return (value !== null) ? unescape(value[1]) : null;
-})('csrftoken');
+// axios.defaults.headers.common['X-CSRFToken'] = (name => {
+// var re = new RegExp(name + "=([^;]+)");
+// var value = re.exec(document.cookie);
+// return (value !== null) ? unescape(value[1]) : null;
+// })('csrftoken');
const feature = {
@@ -99,9 +99,28 @@ const feature = {
getters: {
},
actions: {
- GET_PROJECT_FEATURES({ commit, rootState }, project_slug) {
+ GET_PROJECT_FEATURES({ commit, rootState }, { project_slug, feature_type__slug, search, limit }) {
+ if (rootState.cancellableSearchRequest.length > 0) {
+ const currentRequestCancelToken =
+ rootState.cancellableSearchRequest[rootState.cancellableSearchRequest.length - 1];
+ currentRequestCancelToken.cancel();
+ }
+
+ const cancelToken = axios.CancelToken.source();
+ commit('SET_CANCELLABLE_SEARCH_REQUEST', cancelToken, { root: true });
+ commit("SET_FEATURES", []);
+ let url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}projects/${project_slug}/feature/`;
+ if (feature_type__slug) {
+ url = url.concat('', `${url.includes('?') ? '&' : '?'}feature_type__slug=${feature_type__slug}`);
+ }
+ if (search) {
+ url = url.concat('', `${url.includes('?') ? '&' : '?'}title__contains=${search}`);
+ }
+ if (limit) {
+ url =url.concat('', `${url.includes('?') ? '&' : '?'}limit=${limit}`);
+ }
return axios
- .get(`${rootState.configuration.VUE_APP_DJANGO_API_BASE}projects/${project_slug}/feature/`)
+ .get(url , { cancelToken: cancelToken.token })
.then((response) => {
if (response.status === 200 && response.data) {
const features = response.data.features;
@@ -120,18 +139,24 @@ const feature = {
const message = routeName === "editer-signalement" ? "Le signalement a été mis à jour" : "Le signalement a été crée";
function redirect(featureId) {
- dispatch("GET_PROJECT_FEATURES", rootState.project_slug).then(() => {
- console.log(state.feature);
- commit("DISCARD_LOADER", null, { root: true })
- router.push({
- name: "details-signalement",
- params: {
- slug_type_signal: rootState.feature_type.current_feature_type_slug,
- slug_signal: featureId,
- message,
- },
+ dispatch(
+ 'GET_PROJECT_FEATURES',
+ {
+ project_slug: rootState.project_slug,
+ feature_type__slug: rootState.feature_type.current_feature_type_slug
+ }
+ )
+ .then(() => {
+ commit("DISCARD_LOADER", null, { root: true })
+ router.push({
+ name: "details-signalement",
+ params: {
+ slug_type_signal: rootState.feature_type.current_feature_type_slug,
+ slug_signal: featureId,
+ message,
+ },
+ });
});
- })
}
async function handleOtherForms(featureId) {
diff --git a/src/store/modules/feature_type.js b/src/store/modules/feature_type.js
index bed583d904949de35706a19a93ea4d10a95e725d..cfc3c0ddb6f6d5d20bd0133ac18b4c046ee99b9a 100644
--- a/src/store/modules/feature_type.js
+++ b/src/store/modules/feature_type.js
@@ -1,10 +1,10 @@
-import axios from "axios"
+import axios from '@/axios-client.js';
-axios.defaults.headers.common['X-CSRFToken'] = (name => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return (value !== null) ? unescape(value[1]) : null;
-})('csrftoken');
+// axios.defaults.headers.common['X-CSRFToken'] = (name => {
+// var re = new RegExp(name + "=([^;]+)");
+// var value = re.exec(document.cookie);
+// return (value !== null) ? unescape(value[1]) : null;
+// })('csrftoken');
const getColorsStyles = (customForms) => customForms.filter(customForm => customForm.options && customForm.options.length).map(el => {
//* in dropdown, value is the name and name is the label to be displayed, could be changed...
diff --git a/src/store/modules/map.js b/src/store/modules/map.js
index c8e5ce93eab03a485b06f5a409be781a95cbe313..b9843087d53556c34c8fd0b7831b5e4560755305 100644
--- a/src/store/modules/map.js
+++ b/src/store/modules/map.js
@@ -1,11 +1,11 @@
-const axios = require("axios");
+import axios from '@/axios-client.js';
import { mapUtil } from "@/assets/js/map-util.js";
-axios.defaults.headers.common['X-CSRFToken'] = (name => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return (value !== null) ? unescape(value[1]) : null;
-})('csrftoken');
+// axios.defaults.headers.common['X-CSRFToken'] = (name => {
+// var re = new RegExp(name + "=([^;]+)");
+// var value = re.exec(document.cookie);
+// return (value !== null) ? unescape(value[1]) : null;
+// })('csrftoken');
const map = {
diff --git a/src/views/feature/Feature_detail.vue b/src/views/feature/Feature_detail.vue
index 24514f13d3786d43b7de0a829c2011b413a2a135..416703ec722b0be57646869861ec0da713ad0e22 100644
--- a/src/views/feature/Feature_detail.vue
+++ b/src/views/feature/Feature_detail.vue
@@ -351,13 +351,13 @@ import frag from "vue-frag";
import { mapGetters, mapState } from "vuex";
import { mapUtil } from "@/assets/js/map-util.js";
import featureAPI from "@/services/feature-api";
-const axios = require("axios");
+import axios from '@/axios-client.js';
-axios.defaults.headers.common['X-CSRFToken'] = (name => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return (value !== null) ? unescape(value[1]) : null;
-})('csrftoken');
+// axios.defaults.headers.common['X-CSRFToken'] = (name => {
+// var re = new RegExp(name + "=([^;]+)");
+// var value = re.exec(document.cookie);
+// return (value !== null) ? unescape(value[1]) : null;
+// })('csrftoken');
export default {
name: "Feature_detail",
@@ -445,7 +445,6 @@ export default {
return status ? status.name : "";
},
},
-
filters: {
formatDate(value) {
let date = new Date(value);
@@ -509,12 +508,13 @@ export default {
let image = new Image();
image.onload = function () {
handleFile(true);
+ URL.revokeObjectURL(image.src);
};
image.onerror = function () {
handleFile(false);
+ URL.revokeObjectURL(image.src);
};
image.src = url.createObjectURL(files);
- URL.revokeObjectURL(image.src);
},
onFileChange(e) {
@@ -567,7 +567,9 @@ export default {
if (response.status === 204) {
this.$store.dispatch(
"feature/GET_PROJECT_FEATURES",
- this.$route.params.slug
+ {
+ project_slug: this.$route.params.slug
+ }
);
this.goBackToProject();
}
@@ -683,8 +685,13 @@ export default {
mounted() {
this.$store.commit("DISPLAY_LOADER", "Recherche du signalement");
if (!this.project) {
- this.$store
- .dispatch("GET_PROJECT_INFO", this.$route.params.slug)
+ // Chargements des features et infos projet en cas d'arrivée directe sur la page ou de refresh
+ axios.all([
+ this.$store
+ .dispatch("GET_PROJECT_INFO", this.$route.params.slug),
+ this.$store.dispatch('feature/GET_PROJECT_FEATURES', {
+ project_slug: this.$route.params.slug
+ })])
.then(() => {
this.$store.commit("DISCARD_LOADER");
this.initMap();
diff --git a/src/views/feature/Feature_edit.vue b/src/views/feature/Feature_edit.vue
index 529584b5452c7d94e04a0860afeda65010aacce8..30ceab1a5636a89b695fe2f8c4991fa3b40ec77e 100644
--- a/src/views/feature/Feature_edit.vue
+++ b/src/views/feature/Feature_edit.vue
@@ -274,14 +274,14 @@ import featureAPI from "@/services/feature-api";
import L from "leaflet";
import "leaflet-draw";
import { mapUtil } from "@/assets/js/map-util.js";
-const axios = require("axios");
+import axios from '@/axios-client.js';
import flip from "@turf/flip";
-axios.defaults.headers.common["X-CSRFToken"] = ((name) => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return value !== null ? unescape(value[1]) : null;
-})("csrftoken");
+// axios.defaults.headers.common["X-CSRFToken"] = ((name) => {
+// var re = new RegExp(name + "=([^;]+)");
+// var value = re.exec(document.cookie);
+// return value !== null ? unescape(value[1]) : null;
+// })("csrftoken");
export default {
name: "Feature_edit",
@@ -1018,17 +1018,19 @@ export default {
mounted() {
this.$store
.dispatch("GET_PROJECT_INFO", this.$route.params.slug)
- .then((data) => {
- console.log(data);
- this.initForm();
- this.initMap();
- this.onFeatureTypeLoaded();
- this.initExtraForms(this.feature);
-
- setTimeout(() => {
- mapUtil.addGeocoders(this.$store.state.configuration);
- }, 1000);
- });
+ .then(() => {
+ this.initForm();
+ this.initMap();
+ this.onFeatureTypeLoaded();
+ this.initExtraForms(this.feature);
+
+ setTimeout(
+ function () {
+ mapUtil.addGeocoders(this.$store.state.configuration);
+ }.bind(this),
+ 1000
+ );
+ });
},
destroyed() {
diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue
index 51435ead9d232e1dbd97355efe483d8b64c9ee6b..f62de2ccefdc53b6cc17c2029b50cde0af788de7 100644
--- a/src/views/feature/Feature_list.vue
+++ b/src/views/feature/Feature_list.vue
@@ -191,13 +191,13 @@ import { mapUtil } from "@/assets/js/map-util.js";
import SidebarLayers from "@/components/map-layers/SidebarLayers";
import FeatureListTable from "@/components/feature/FeatureListTable";
import Dropdown from "@/components/Dropdown.vue";
-const axios = require("axios");
+import axios from '@/axios-client.js';
-axios.defaults.headers.common["X-CSRFToken"] = ((name) => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return value !== null ? unescape(value[1]) : null;
-})("csrftoken");
+// axios.defaults.headers.common['X-CSRFToken'] = (name => {
+// var re = new RegExp(name + "=([^;]+)");
+// var value = re.exec(document.cookie);
+// return (value !== null) ? unescape(value[1]) : null;
+// })('csrftoken');
export default {
name: "Feature_list",
@@ -318,7 +318,11 @@ export default {
.then(() => {
if (!this.modalAllDeleteOpen) {
this.$store
- .dispatch("feature/GET_PROJECT_FEATURES", this.project.slug) // ? Toujours nécessaire de mettre à jour les features classiques ?
+ .dispatch("feature/GET_PROJECT_FEATURES",
+ {
+ project_slug: this.project.slug
+ }
+ )
.then(() => {
this.updateFeatures();
this.checkedFeatures.splice(feature_id);
@@ -366,11 +370,13 @@ export default {
this.zoom = this.$route.query.zoom || "";
this.lat = this.$route.query.lat || "";
this.lng = this.$route.query.lng || "";
+
var mapDefaultViewCenter =
this.$store.state.configuration.DEFAULT_MAP_VIEW.center;
var mapDefaultViewZoom =
this.$store.state.configuration.DEFAULT_MAP_VIEW.zoom;
+
this.map = mapUtil.createMap(this.$refs.map, {
zoom: this.zoom,
lat: this.lat,
@@ -591,7 +597,7 @@ export default {
},
},
- created() {
+/* created() {
if (!this.project) {
this.$store.dispatch(
"GET_PROJECT_INFO",
@@ -599,10 +605,24 @@ export default {
"noFeatures" //* not fetching classic features, too heavy, using paginated features instead
);
}
- },
+ }, */
mounted() {
- this.initMap();
+ if (!this.project) {
+ // Chargements des features et infos projet en cas d'arrivée directe sur la page ou de refresh
+ axios.all([
+ this.$store.dispatch("GET_PROJECT_INFO", this.$route.params.slug),
+ this.$store.dispatch('feature/GET_PROJECT_FEATURES', {
+ project_slug: this.$route.params.slug
+ })])
+ .then(() => {
+ this.initMap();
+ });
+ }
+ else {
+ this.initMap();
+ }
+
},
destroyed() {
diff --git a/src/views/project/Project_detail.vue b/src/views/project/Project_detail.vue
index 56b7bd35dd3439318ba4ea878f02b41054b9c156..2e7066dd2d7090c0176df277e063a6f34fb0cc60 100644
--- a/src/views/project/Project_detail.vue
+++ b/src/views/project/Project_detail.vue
@@ -337,6 +337,14 @@
<div class="content">
<div class="center aligned header">Derniers signalements</div>
<div class="center aligned description">
+ <div
+ :class="{ active: featuresLoading }"
+ class="ui inverted dimmer"
+ >
+ <div class="ui text loader">
+ Récupération des signalements en cours...
+ </div>
+ </div>
<div class="ui relaxed list">
<div
v-for="(item, index) in last_features"
@@ -387,7 +395,7 @@
>
<div class="content">
<div>
- <router-link :to="item.related_feature.feature_url"
+ <router-link :to="getRouteUrl(item.related_feature.feature_url)"
>"{{ item.comment }}"</router-link
>
</div>
@@ -532,13 +540,13 @@ import { mapUtil } from "@/assets/js/map-util.js";
import { mapGetters, mapState } from "vuex";
import projectAPI from "@/services/project-api";
-const axios = require("axios");
+import axios from '@/axios-client.js';
-axios.defaults.headers.common['X-CSRFToken'] = (name => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return (value !== null) ? unescape(value[1]) : null;
-})('csrftoken');
+// axios.defaults.headers.common['X-CSRFToken'] = (name => {
+// var re = new RegExp(name + "=([^;]+)");
+// var value = re.exec(document.cookie);
+// return (value !== null) ? unescape(value[1]) : null;
+// })('csrftoken');
export default {
name: "Project_details",
@@ -572,6 +580,7 @@ export default {
is_suscriber: false,
tempMessage: null,
featureTypeLoading: true,
+ featuresLoading: true
};
},
@@ -596,7 +605,9 @@ export default {
refreshId() {
return "?ver=" + Math.random();
},
-
+ getRouteUrl(url){
+ return '/'+url.replace(this.$store.state.configuration.BASE_URL,''); // remove duplicate /geocontrib
+ },
isOffline() {
return navigator.onLine === false;
},
@@ -771,10 +782,17 @@ export default {
},
mounted() {
- this.$store.dispatch("GET_PROJECT_INFO", this.slug).then(() => {
- this.featureTypeLoading = false;
- setTimeout(this.initMap, 1000);
- });
+ this.$store.dispatch('GET_PROJECT_INFO', this.slug)
+ .then(() => {
+ this.featureTypeLoading = false;
+ setTimeout(this.initMap, 1000);
+ });
+ this.$store.dispatch('feature/GET_PROJECT_FEATURES', {
+ project_slug: this.slug
+ })
+ .then(() => {
+ this.featuresLoading = false;
+ });
if (this.message) {
this.tempMessage = this.message;
diff --git a/src/views/project/Project_edit.vue b/src/views/project/Project_edit.vue
index 4779af2c603dd93c5694cb7646a466b049bdd265..f9784c6a4e5a064f2201ae0b7cc50c30a14cb556 100644
--- a/src/views/project/Project_edit.vue
+++ b/src/views/project/Project_edit.vue
@@ -191,16 +191,16 @@
</template>
<script>
-const axios = require("axios");
+import axios from '@/axios-client.js';
import Dropdown from "@/components/Dropdown.vue";
import { mapGetters } from "vuex";
-axios.defaults.headers.common["X-CSRFToken"] = ((name) => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return value !== null ? unescape(value[1]) : null;
-})("csrftoken");
+// axios.defaults.headers.common["X-CSRFToken"] = ((name) => {
+// var re = new RegExp(name + "=([^;]+)");
+// var value = re.exec(document.cookie);
+// return value !== null ? unescape(value[1]) : null;
+// })("csrftoken");
export default {
name: "Project_edit",
@@ -287,12 +287,13 @@ export default {
let image = new Image();
image.onload = function () {
handleFile(true);
+ URL.revokeObjectURL(image.src);
};
image.onerror = function () {
handleFile(false);
+ URL.revokeObjectURL(image.src);
};
image.src = url.createObjectURL(files);
- URL.revokeObjectURL(image.src);
},
onFileChange(e) {
diff --git a/src/views/project/Project_members.vue b/src/views/project/Project_members.vue
index 34c89ac5718fa7b0dd64f1eeb0e3ac2ad83865d9..aea8f4b1340c1ea3ed81f8ee426985195632eb74 100644
--- a/src/views/project/Project_members.vue
+++ b/src/views/project/Project_members.vue
@@ -106,17 +106,11 @@
</template>
<script>
-import axios from "axios";
+import axios from '@/axios-client.js';
import frag from "vue-frag";
import { mapGetters } from "vuex";
import Dropdown from "@/components/Dropdown.vue";
-axios.defaults.headers.common['X-CSRFToken'] = (name => {
- var re = new RegExp(name + "=([^;]+)");
- var value = re.exec(document.cookie);
- return (value !== null) ? unescape(value[1]) : null;
-})('csrftoken');
-
export default {
name: "Project_members",
@@ -296,7 +290,7 @@ export default {
// todo: move function to a service
return axios
.get(
- `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/utilisateurs`
+ `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/utilisateurs/`
)
.then((response) => response.data)
.catch((error) => {
diff --git a/src/views/registration/Login.vue b/src/views/registration/Login.vue
index 79fe8a823ddb8ff58e2b70e1bb66a06d06ea80bb..0f62078398f1fe07998e86e91d73c4c2601cc8cf 100644
--- a/src/views/registration/Login.vue
+++ b/src/views/registration/Login.vue
@@ -4,7 +4,7 @@
<div class="fourteen wide column">
<img
class="ui centered small image"
- src="@/assets/img/logo-neogeo-circle.png"
+ :src="logo"
/>
<h2 class="ui center aligned icon header">
<div class="content">
@@ -74,13 +74,13 @@ export default {
};
},
computed: {
- LOGO_PATH: function () {
+ logo() {
return this.$store.state.configuration.VUE_APP_LOGO_PATH;
},
- APPLICATION_NAME: function () {
+ APPLICATION_NAME() {
return this.$store.state.configuration.VUE_APP_APPLICATION_NAME;
},
- APPLICATION_ABSTRACT: function () {
+ APPLICATION_ABSTRACT() {
return this.$store.state.configuration.VUE_APP_APPLICATION_ABSTRACT;
},
},
diff --git a/vue.config.js b/vue.config.js
index 777fbbbaf0383828440b5391b142cb44add79982..f9d74727c971c84a1b1afb45270b6a2162a71b69 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -23,6 +23,14 @@ module.exports = {
/manifest\.json$/
],
},
+ iconPaths: {
+ faviconSVG: null,
+ favicon32: null,
+ favicon16: null,
+ appleTouchIcon: null,
+ maskIcon: null,
+ msTileImage: null,
+ },
themeColor: '#1da025'
},
configureWebpack: {