diff --git a/src/App.vue b/src/App.vue
index 343ccfe54930b931fc6bc1111399d9ee6d749a6a..940e4ea9c7ee80e27d188c66d6a644d4be5a1ef1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -151,6 +151,11 @@
</div>
</div>
</div>
+ <div :class="{ active: loader.isLoading }" class="ui inverted dimmer">
+ <div class="ui text loader">
+ {{ loader.message }}
+ </div>
+ </div>
<router-view />
<!-- //* Les views sont injectées ici -->
</div>
@@ -194,6 +199,7 @@ export default {
"USER_LEVEL_PROJECTS",
"configuration",
"messages",
+ "loader",
]),
...mapGetters(["project"]),
APPLICATION_NAME: function () {
@@ -256,6 +262,11 @@ body {
flex-direction: column;
}
+/* to display loader between header and footer */
+main {
+ position: relative;
+}
+
footer {
margin-top: auto;
}
@@ -269,28 +280,32 @@ footer {
background: white !important;
}
+.flex {
+ display: flex;
+}
+
+/* keep above loader */
+#menu-dropdown {
+ z-index: 1001;
+}
+
@media screen and (min-width: 560px) {
.mobile {
display: none !important;
}
-
.header-menu {
min-width: 560px;
}
-
.menu.container {
width: auto !important;
margin-left: 1em !important;
margin-right: 1em !important;
}
-
.push-right-desktop {
margin-left: auto;
}
}
-.flex {
- display: flex;
-}
+
@media screen and (max-width: 560px) {
.desktop {
display: none !important;
diff --git a/src/components/feature/FeatureAttachmentForm.vue b/src/components/feature/FeatureAttachmentForm.vue
index 83343c7935dab9d69dee36ccbde5b2315927da43..eb7f1aa25b5de25e34e80ea718e26d63373efe01 100644
--- a/src/components/feature/FeatureAttachmentForm.vue
+++ b/src/components/feature/FeatureAttachmentForm.vue
@@ -23,7 +23,6 @@
:name="form.title.html_name"
:id="form.title.id_for_label"
v-model="form.title.value"
-
/>
<ul :id="form.title.id_for_error" class="errorlist">
<li v-for="error in form.title.errors" :key="error">
@@ -46,6 +45,7 @@
<input
@change="onFileChange"
type="file"
+ accept="application/pdf, image/jpeg, image/png"
style="display: none"
:name="form.attachment_file.html_name"
:id="'attachment_file' + attachmentForm.dataKey"
@@ -118,21 +118,23 @@ export default {
attachmentForm(newValue) {
this.initForm(newValue);
},
+ //* utilisation de watcher, car @change aurait un délai
"form.title.value": function (newValue, oldValue) {
- if (oldValue != ''){
- if (newValue != oldValue){
+ if (oldValue != "") {
+ if (newValue != oldValue) {
this.updateStore();
}
}
},
"form.info.value": function (newValue, oldValue) {
- if (oldValue != ''){
- if (newValue != oldValue){
+ if (oldValue != "") {
+ if (newValue != oldValue) {
this.updateStore();
}
}
},
},
+
methods: {
initForm(attachmentForm) {
for (let el in attachmentForm) {
@@ -152,10 +154,7 @@ export default {
this.attachmentForm.dataKey
);
if (this.form.id.value)
- this.$store.commit(
- "feature/DELETE_ATTACHMENTS",
- this.form.id.value
- );
+ this.$store.commit("feature/DELETE_ATTACHMENTS", this.form.id.value);
},
updateStore() {
@@ -166,22 +165,54 @@ export default {
attachment_file: this.form.attachment_file.value,
info: this.form.info.value,
fileToImport: this.fileToImport,
- }
+ };
this.$store.commit("feature/UPDATE_ATTACHMENT_FORM", data);
- if (data.id){
- this.$store.commit(
- "feature/PUT_ATTACHMENTS",
- data
- );
+ if (data.id) {
+ this.$store.commit("feature/PUT_ATTACHMENTS", data);
}
},
+ validateImgFile(files, handleFile) {
+ let url = window.URL || window.webkitURL;
+ let image = new Image();
+ image.onload = function () {
+ handleFile(true);
+ };
+ image.onerror = function () {
+ handleFile(false);
+ };
+ image.src = url.createObjectURL(files);
+ URL.revokeObjectURL(image.src);
+ },
+
onFileChange(e) {
+ // * read image file
const files = e.target.files || e.dataTransfer.files;
- if (!files.length) return;
- this.fileToImport = files[0]; //* store file to import
- this.form.attachment_file.value = files[0].name; //* add name to the form for display, in order to match format return from API
- this.updateStore();
+
+ const _this = this; //* 'this' is different in onload function
+ function handleFile(isValid) {
+ if (isValid) {
+ _this.fileToImport = files[0]; //* store the file to post later
+ _this.form.attachment_file.value = files[0].name; //* add name to the form for display, in order to match format return from API
+ _this.updateStore();
+ _this.form.attachment_file.errors = [];
+ } else {
+ _this.form.attachment_file.errors.push(
+ "Transférez une image valide. Le fichier que vous avez transféré n'est pas une image, ou il est corrompu."
+ );
+ }
+ }
+
+ if (files.length) {
+ //* exception for pdf
+ if (files[0].type === "application/pdf") {
+ handleFile(true);
+ } else {
+ this.form.attachment_file.errors = [];
+ //* check if file is an image and pass callback to handle file
+ this.validateImgFile(files[0], handleFile);
+ }
+ }
},
checkForm() {
diff --git a/src/components/feature/FeatureExtraForm.vue b/src/components/feature/FeatureExtraForm.vue
index 932f808d972d282114852aa15f2a2e4569675e6e..c0deb2df754b5d0e73b1142a52c8d45d54e639c7 100644
--- a/src/components/feature/FeatureExtraForm.vue
+++ b/src/components/feature/FeatureExtraForm.vue
@@ -111,7 +111,11 @@ export default {
methods: {
updateStore_extra_form(evt) {
let newExtraForm = this.field;
- newExtraForm["value"] = evt.target.checked || evt.target.value; //* if checkbox use "check", if undefined, use "value"
+ if (this.field.field_type === "boolean") {
+ newExtraForm["value"] = evt.target.checked; //* if checkbox use "checked"
+ } else {
+ newExtraForm["value"] = evt.target.value;
+ }
this.$store.commit("feature/UPDATE_EXTRA_FORM", newExtraForm);
},
},
diff --git a/src/components/feature/FeatureListTable.vue b/src/components/feature/FeatureListTable.vue
index b509c122c1f46d8f8da10c4a3df0a44ce1f4565a..c55b807a95f87ffed6ba8eaca90757c21a92625b 100644
--- a/src/components/feature/FeatureListTable.vue
+++ b/src/components/feature/FeatureListTable.vue
@@ -71,8 +71,7 @@
type="checkbox"
:id="feature.id"
:value="feature.id"
- v-model="checkedFeatures"
- :checked="checkedFeatures[feature.id]"
+ v-model="checked"
/>
<label></label>
</div>
@@ -280,6 +279,15 @@ export default {
return arr;
},
+ checked: {
+ get() {
+ return this.checkedFeatures;
+ },
+ set(newChecked) {
+ this.$store.commit("feature/UPDATE_CHECKED_FEATURES", newChecked);
+ },
+ },
+
displayedPageEnd() {
return this.filteredFeatures.length <= this.pagination.end
? this.filteredFeatures.length
diff --git a/src/components/feature_type/FeatureTypeCustomForm.vue b/src/components/feature_type/FeatureTypeCustomForm.vue
index 39d1349eacbe108c3e4679165da14a850583b338..5d3d0b72f1b5902526403679338d7d44effa2351 100644
--- a/src/components/feature_type/FeatureTypeCustomForm.vue
+++ b/src/components/feature_type/FeatureTypeCustomForm.vue
@@ -106,7 +106,7 @@
v-model="arrayOption"
class="options-field"
/>
- <small>{{ form.help_text }}</small>
+ <small>{{ form.options.help_text }}</small>
<ul id="errorlist" class="errorlist">
<li v-for="error in form.options.errors" :key="error">
{{ error }}
@@ -195,7 +195,7 @@ export default {
id_for_label: "options",
label: "Options",
html_name: "options",
- help_text: "",
+ help_text: "Valeurs possibles de ce champ, séparées par des virgules",
field: {
max_length: 256,
},
@@ -284,46 +284,50 @@ export default {
},
checkUniqueName() {
- console.log(this.$store);
- console.log(this.$store.state);
- console.log(this.$store.state.feature_type);
- if (this.form.name.value) {
- const occurences = this.$store.state.feature_type.customForms
- .map((el) => el.name)
- .filter((el) => el === this.form.name.value);
- console.log("occurences", occurences);
- console.log(occurences.length);
- if (occurences.length > 1) {
- console.log("duplicate", this.form.name.value);
- this.form.name.errors = [
- "Les champs personnalisés ne peuvent pas avoir des noms similaires.",
- ];
- return false;
- }
- }
- this.form.name.errors = [];
- return true;
+ const occurences = this.$store.state.feature_type.customForms
+ .map((el) => el.name)
+ .filter((el) => el === this.form.name.value);
+ return occurences.length === 1;
},
checkCustomForm() {
- if (this.form.label.value === null) {
+ this.form.label.errors = [];
+ this.form.name.errors = [];
+ this.form.options.errors = [];
+ console.log(
+ this.form.field_type.value,
+ this.form.field_type.value === "list",
+ this.form.options.value.length < 2
+ );
+ if (!this.form.label.value) {
+ //* vérifier que le label est renseigné
this.form.label.errors = ["Veuillez compléter ce champ."];
return false;
- } else if (this.form.name.value === null) {
+ } else if (!this.form.name.value) {
+ //* vérifier que le nom est renseigné
this.form.name.errors = ["Veuillez compléter ce champ."];
- this.form.label.errors = [];
return false;
} else if (!this.hasRegularCharacters(this.form.name.value)) {
+ //* vérifier qu'il n'y a pas de caractères spéciaux
this.form.name.errors = [
"Veuillez utiliser seulement les caratères autorisés.",
];
- this.form.label.errors = [];
return false;
- } else if (this.checkUniqueName()) {
- this.form.label.errors = [];
- this.form.name.errors = [];
- return true;
+ } else if (!this.checkUniqueName()) {
+ //* vérifier si les noms sont pas dupliqués
+ this.form.name.errors = [
+ "Les champs personnalisés ne peuvent pas avoir des noms similaires.",
+ ];
+ return false;
+ } else if (
+ this.form.field_type.value === "list" &&
+ this.form.options.value.length < 2
+ ) {
+ //* s'il s'agit d'un type liste, vérifier que le champ option est bien renseigné
+ this.form.options.errors = ["Veuillez compléter ce champ."];
+ return false;
}
+ return true;
},
},
diff --git a/src/store/index.js b/src/store/index.js
index eef57b2b52cbdccab9fc2c740888b4b501b446f8..6f543f6d8a48b83ba0b027c7cf7c051f5c4a6a75 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -48,12 +48,11 @@ export default new Vuex.Store({
USER_LEVEL_PROJECTS: null,
user_permissions: null,
messages: [],
- events: null
- // events: {
- // 'events': null,
- // 'features': null,
- // 'comments': null
- // }
+ events: null,
+ loader: {
+ isLoading: false,
+ message: "En cours de chargement"
+ },
},
mutations: {
@@ -101,14 +100,23 @@ export default new Vuex.Store({
},
DISPLAY_MESSAGE(state, comment) {
state.messages = [{ comment }, ...state.messages];
- document.getElementById("messages").scrollIntoView({ block: "start", inline: "nearest" });
+ if (document.getElementById("content")) document.getElementById("content").scrollIntoView({ block: "start", inline: "nearest" });
setTimeout(() => {
state.messages = [];
}, 3000);
},
CLEAR_MESSAGES(state) {
state.messages = [];
- }
+ },
+ DISPLAY_LOADER(state, message) {
+ state.loader = { isLoading: true, message }
+ },
+ DISCARD_LOADER(state) {
+ state.loader = {
+ isLoading: false,
+ message: "En cours de chargement"
+ };
+ },
},
getters: {
diff --git a/src/store/modules/feature.js b/src/store/modules/feature.js
index 055f6e30d8cfdc51001690d19cc95e755e5b25ae..72b383a7be2634c741475ed4aa65250095467371 100644
--- a/src/store/modules/feature.js
+++ b/src/store/modules/feature.js
@@ -14,11 +14,30 @@ const feature = {
attachmentFormset: [],
attachmentsToDelete: [],
attachmentsToPut: [],
- linkedFormset: [],
+ checkedFeatures: [],
+ extra_form: [],
features: [],
form: null,
- extra_form: [],
+ linkedFormset: [],
linked_features: [],
+ statusChoices: [
+ {
+ name: "Brouillon",
+ value: "draft",
+ },
+ {
+ name: "Publié",
+ value: "published",
+ },
+ {
+ name: "Archivé",
+ value: "archived",
+ },
+ {
+ name: "En attente de publication",
+ value: "pending",
+ },
+ ],
},
mutations: {
SET_FEATURES(state, features) {
@@ -79,6 +98,9 @@ const feature = {
REMOVE_ATTACHMENTS_ID_TO_DELETE(state, attachementId) {
state.attachmentsToDelete = state.attachmentsToDelete.filter(el => el !== attachementId);
},
+ UPDATE_CHECKED_FEATURES(state, checkedFeatures) {
+ state.checkedFeatures = checkedFeatures;
+ }
},
getters: {
},
@@ -99,9 +121,12 @@ const feature = {
});
},
- SEND_FEATURE({ state, rootState, dispatch }, routeName) {
+ SEND_FEATURE({ state, rootState, commit, dispatch }, routeName) {
+ commit("DISPLAY_LOADER", "Le signalement est en cours de création", { root: true })
const message = routeName === "editer-signalement" ? "Le signalement a été mis à jour" : "Le signalement a été crée";
+
function redirect(featureId) {
+ commit("DISCARD_LOADER", null, { root: true })
router.push({
name: "details-signalement",
params: {
@@ -111,12 +136,14 @@ const feature = {
},
});
}
+
async function handleOtherForms(featureId) {
await dispatch("SEND_ATTACHMENTS", featureId)
await dispatch("PUT_LINKED_FEATURES", featureId)
redirect(featureId);
}
+ //* prepare feature data to send
let extraFormObject = {}; //* prepare an object to be flatten in properties of geojson
for (const field of state.extra_form) {
extraFormObject[field.name] = field.value;
@@ -134,12 +161,13 @@ const feature = {
...extraFormObject
}
}
+
if (routeName === "editer-signalement") {
- axios
+ return axios
.put(`${rootState.configuration.VUE_APP_DJANGO_API_BASE}features/${state.form.feature_id}/?` +
- `feature_type__slug=${rootState.feature_type.current_feature_type_slug}` +
- `&project__slug=${rootState.project_slug}`
- , geojson)
+ `feature_type__slug=${rootState.feature_type.current_feature_type_slug}` +
+ `&project__slug=${rootState.project_slug}`
+ , geojson)
.then((response) => {
if (response.status === 200 && response.data) {
if (state.attachmentFormset.length > 0 || state.linkedFormset.length > 0) {
@@ -150,6 +178,7 @@ const feature = {
}
})
.catch((error) => {
+ commit("DISCARD_LOADER", null, { root: true })
if(error.message=="Network Error" ||window.navigator.onLine==false){
let arraysOffline=[];
let localStorageArray=localStorage.getItem("geocontrib_offline");
@@ -176,9 +205,11 @@ const feature = {
console.log(error)
throw error;
}
+
+ throw error;
});
} else {
- axios
+ return axios
.post(`${rootState.configuration.VUE_APP_DJANGO_API_BASE}features/`, geojson)
.then((response) => {
if (response.status === 201 && response.data) {
@@ -190,6 +221,7 @@ const feature = {
}
})
.catch((error) => {
+ commit("DISCARD_LOADER", null, { root: true })
if(error.message=="Network Error" ||window.navigator.onLine==false){
let arraysOffline=[];
let localStorageArray=localStorage.getItem("geocontrib_offline");
@@ -239,7 +271,7 @@ const feature = {
console.error(error);
return error
});
-
+
}
}
@@ -253,7 +285,7 @@ const feature = {
if (attachment.title)
data['info'] = attachment.info
formdataToUpdate.append("data", JSON.stringify(data));
- let payload ={
+ let payload = {
'attachmentsId': attachment.id,
'featureId': featureId,
'formdataToUpdate': formdataToUpdate
@@ -263,7 +295,7 @@ const feature = {
}
function deleteAttachement(attachmentsId, featureId) {
- let payload ={
+ let payload = {
'attachmentsId': attachmentsId,
'featureId': featureId
}
@@ -274,7 +306,7 @@ const feature = {
...state.attachmentFormset.map((attachment) => postAttachement(attachment)),
...state.attachmentsToPut.map((attachments) => putAttachement(attachments, featureId)),
...state.attachmentsToDelete.map((attachmentsId) => deleteAttachement(attachmentsId, featureId))
- ]
+ ]
);
state.attachmentsToDelete = []
state.attachmentsToPut = []
@@ -330,8 +362,8 @@ const feature = {
DELETE_FEATURE({ state, rootState }, feature_id) {
console.log("Deleting feature:", feature_id, state)
const url = `${rootState.configuration.VUE_APP_DJANGO_API_BASE}features/${feature_id}/?` +
- `feature_type__slug=${rootState.feature_type.current_feature_type_slug}` +
- `&project__slug=${rootState.project_slug}`;
+ `feature_type__slug=${rootState.feature_type.current_feature_type_slug}` +
+ `&project__slug=${rootState.project_slug}`;
return axios
.delete(url)
.then((response) => response)
diff --git a/src/views/feature/Feature_detail.vue b/src/views/feature/Feature_detail.vue
index 62203ff90acf0230451cf02f0f3e22c85579c717..fc5562d7eaf9d6bca6c768835466093069db95e2 100644
--- a/src/views/feature/Feature_detail.vue
+++ b/src/views/feature/Feature_detail.vue
@@ -37,8 +37,9 @@
>
<i class="inverted grey pencil alternate icon"></i>
</router-link>
+ <!-- (permissions && permissions.can_delete_feature) || -->
<a
- v-if="permissions && permissions.can_delete_feature"
+ v-if="isFeatureCreator"
@click="isCanceling = true"
id="feature-delete"
class="ui button button-hover-red"
@@ -71,17 +72,11 @@
<td>
<b>
<i
- v-if="
- field.field_type === 'boolean' && field.value === true
- "
- class="olive check icon"
- ></i>
- <i
- v-else-if="
- field.field_type === 'boolean' &&
- field.value === false
- "
- class="red times icon"
+ v-if="field.field_type === 'boolean'"
+ :class="[
+ 'icon',
+ field.value ? 'olive check' : 'grey times',
+ ]"
></i>
<span v-else>
{{ field.value }}
@@ -97,11 +92,8 @@
<tr>
<td>Statut</td>
<td>
- <i
- v-if="feature.status"
- :class="getIconLabelStatus(feature.status, 'icon')"
- ></i>
- {{ getIconLabelStatus(feature.status, 'label') }}
+ <i v-if="feature.status" :class="['icon', statusIcon]"></i>
+ {{ statusLabel }}
</td>
</tr>
<tr>
@@ -143,20 +135,6 @@
<a @click="pushNgo(link)">{{ link.feature_to.title }} </a>
({{ link.feature_to.display_creator }} -
{{ link.feature_to.created_on }})
- <!-- <router-link
- :key="$route.fullPath"
- :to="{
- name: 'details-signalement',
- params: {
- slug_type_signal: link.feature_to.feature_type_slug,
- slug_signal: link.feature_to.feature_id,
- },
- }"
- >{{ link.feature_to.title }}</router-link
- >
- ({{ link.feature_to.display_creator }} -
- {{ link.feature_to.created_on }})
- -->
</td>
</tr>
</tbody>
@@ -300,7 +278,7 @@
style="display: none"
name="attachment_file"
id="attachment_file"
- @change="getAttachmentFileData($event)"
+ @change="onFileChange"
/>
</div>
<div class="field">
@@ -313,6 +291,11 @@
{{ comment_form.title.errors }}
</div>
</div>
+ <ul v-if="comment_form.attachment_file.errors" class="errorlist">
+ <li>
+ {{ comment_form.attachment_file.errors }}
+ </li>
+ </ul>
<button
@click="postComment"
type="button"
@@ -408,7 +391,7 @@ export default {
computed: {
...mapState(["user"]),
...mapGetters(["permissions"]),
- ...mapState("feature", ["linked_features"]),
+ ...mapState("feature", ["linked_features", "statusChoices"]),
DJANGO_BASE_URL: function () {
return this.$store.state.configuration.VUE_APP_DJANGO_BASE;
},
@@ -417,7 +400,6 @@ export default {
const result = this.$store.state.feature.features.find(
(el) => el.feature_id === this.$route.params.slug_signal
);
- console.log("result", result);
return result;
},
@@ -427,6 +409,28 @@ export default {
}
return false;
},
+
+ statusIcon() {
+ switch (this.feature.status) {
+ case "archived":
+ return "grey archive";
+ case "pending":
+ return "teal hourglass outline";
+ case "published":
+ return "olive check";
+ case "draft":
+ return "orange pencil alternate";
+ default:
+ return "";
+ }
+ },
+
+ statusLabel() {
+ const status = this.statusChoices.find(
+ (el) => el.value === this.feature.status
+ );
+ return status ? status.name : "";
+ },
},
filters: {
@@ -438,24 +442,6 @@ export default {
},
methods: {
- getIconLabelStatus(status, type){
- if (status === 'archived')
- if (type == 'icon')
- return "grey archive icon";
- else return 'Archivé';
- else if (status === 'pending')
- if (type == 'icon')
- return "teal hourglass outline icon";
- else return 'En attente de publication';
- else if (status === 'published')
- if (type == 'icon')
- return "olive check icon";
- else return 'Publié';
- else if (status === 'draft')
- if (type == 'icon')
- return "orange pencil alternate icon";
- else return 'Brouillon';
- },
pushNgo(link) {
this.$router.push({
name: "details-signalement",
@@ -468,8 +454,6 @@ export default {
this.getFeatureAttachments();
this.getLinkedFeatures();
this.addFeatureToMap();
- //this.initMap();
- //this.$router.go();
},
postComment() {
@@ -489,7 +473,6 @@ export default {
})
.then(() => {
this.confirmComment();
- //this.getFeatureAttachments(); //* display new attachment from comment on the page
});
} else {
this.confirmComment();
@@ -507,15 +490,50 @@ export default {
this.comment_form.comment.value = null;
},
- getAttachmentFileData(evt) {
- const files = evt.target.files || evt.dataTransfer.files;
- const period = files[0].name.lastIndexOf(".");
- const fileName = files[0].name.substring(0, period);
- const fileExtension = files[0].name.substring(period + 1);
- const shortName = fileName.slice(0, 10) + "[...]." + fileExtension;
- this.comment_form.attachment_file.file = files[0];
- this.comment_form.attachment_file.value = shortName;
- this.comment_form.title.value = shortName;
+ validateImgFile(files, handleFile) {
+ let url = window.URL || window.webkitURL;
+ let image = new Image();
+ image.onload = function () {
+ handleFile(true);
+ };
+ image.onerror = function () {
+ handleFile(false);
+ };
+ image.src = url.createObjectURL(files);
+ URL.revokeObjectURL(image.src);
+ },
+
+ onFileChange(e) {
+ // * read image file
+ const files = e.target.files || e.dataTransfer.files;
+
+ const _this = this; //* 'this' is different in onload function
+ function handleFile(isValid) {
+ if (isValid) {
+ const period = files[0].name.lastIndexOf(".");
+ const fileName = files[0].name.substring(0, period);
+ const fileExtension = files[0].name.substring(period + 1);
+ const shortName = fileName.slice(0, 10) + "[...]." + fileExtension;
+ _this.comment_form.attachment_file.file = files[0]; //* store the file to post later
+ _this.comment_form.attachment_file.value = shortName; //* for display
+ _this.comment_form.title.value = shortName;
+ _this.comment_form.attachment_file.errors = null;
+ } else {
+ _this.comment_form.attachment_file.errors =
+ "Transférez une image valide. Le fichier que vous avez transféré n'est pas une image, ou il est corrompu.";
+ }
+ }
+
+ if (files.length) {
+ //* exception for pdf
+ if (files[0].type === "application/pdf") {
+ handleFile(true);
+ } else {
+ this.comment_form.attachment_file.errors = null;
+ //* check if file is an image and pass callback to handle file
+ this.validateImgFile(files[0], handleFile);
+ }
+ }
},
goBackToProject(message) {
@@ -533,7 +551,10 @@ export default {
.dispatch("feature/DELETE_FEATURE", this.feature.feature_id)
.then((response) => {
if (response.status === 204) {
- this.$store.dispatch("feature/GET_PROJECT_FEATURES", this.$route.params.slug);
+ this.$store.dispatch(
+ "feature/GET_PROJECT_FEATURES",
+ this.$route.params.slug
+ );
this.goBackToProject();
}
});
@@ -599,7 +620,9 @@ export default {
if (feature) {
const currentFeature = [feature];
const featureGroup = mapUtil.addFeatures(currentFeature);
- mapUtil.getMap().fitBounds(featureGroup.getBounds(), { padding: [25, 25] });
+ mapUtil
+ .getMap()
+ .fitBounds(featureGroup.getBounds(), { padding: [25, 25] });
}
})
.catch((error) => {
@@ -629,9 +652,6 @@ export default {
},
created() {
- // if (!this.project) {
- // this.$store.dispatch("GET_PROJECT_INFO", this.$route.params.slug);
- // }
this.$store.commit(
"feature_type/SET_CURRENT_FEATURE_TYPE_SLUG",
this.$route.params.slug_type_signal
diff --git a/src/views/feature/Feature_edit.vue b/src/views/feature/Feature_edit.vue
index 35ffbd7d68555a18fcea51a6060f10c72599af66..1dc8b37cb83ade39e4b14299b837b630763b0552 100644
--- a/src/views/feature/Feature_edit.vue
+++ b/src/views/feature/Feature_edit.vue
@@ -74,7 +74,7 @@
<div v-frag v-if="feature_type && feature_type.geom_type === 'point'">
<p v-if="isOffline()!=true">
<button
- @click="showGeoRef = true"
+ @click="toggleGeoRefModal"
id="add-geo-image"
type="button"
class="ui compact button"
@@ -84,44 +84,69 @@
Vous pouvez utiliser une image géoréférencée pour localiser le
signalement.
</p>
- <div v-if="showGeoRef">
- <p>
- Attention, si vous avez déjà saisi une géométrie, celle issue de
- l'image importée l'écrasera.
- </p>
- <div class="field georef-btn">
- <label>Image (png ou jpeg)</label>
- <label class="ui icon button" for="image_file">
- <i class="file icon"></i>
- <span class="label">{{ geoRefFileLabel }}</span>
- </label>
- <input
- type="file"
- accept="image/jpeg, image/png"
- style="display: none"
- ref="file"
- v-on:change="handleFileUpload()"
- name="image_file"
- class="image_file"
- id="image_file"
- />
- <p class="error-message" style="color: red">
- {{ erreurUploadMessage }}
- </p>
- </div>
- <button
- @click="georeferencement()"
- id="get-geom-from-image-file"
- type="button"
- class="ui positive right labeled icon button"
+
+ <div
+ v-if="showGeoRef"
+ class="ui dimmer modals page transition visible active"
+ style="display: flex !important"
+ >
+ <div
+ class="ui mini modal transition visible active"
+ style="display: block !important"
>
- Importer
- <i class="checkmark icon"></i>
- </button>
+ <i class="close icon" @click="toggleGeoRefModal"></i>
+ <div class="content">
+ <h3>Importer une image géoréférencée</h3>
+ <form
+ id="form-geo-image"
+ class="ui form"
+ enctype="multipart/form-data"
+ >
+ <p>
+ Attention, si vous avez déjà saisi une géométrie, celle
+ issue de l'image importée l'écrasera.
+ </p>
+ <div class="field georef-btn">
+ <label>Image (png ou jpeg)</label>
+ <label class="ui icon button" for="image_file">
+ <i class="file icon"></i>
+ <span class="label">{{ geoRefFileLabel }}</span>
+ </label>
+ <input
+ type="file"
+ accept="image/jpeg, image/png"
+ style="display: none"
+ ref="file"
+ v-on:change="handleFileUpload"
+ name="image_file"
+ class="image_file"
+ id="image_file"
+ />
+ <p class="error-message">
+ {{ erreurUploadMessage }}
+ </p>
+ </div>
+ <button
+ @click="georeferencement"
+ id="get-geom-from-image-file"
+ type="button"
+ :class="[
+ 'ui compact button',
+ file && !erreurUploadMessage ? 'green' : 'disabled',
+ { red: erreurUploadMessage },
+ ]"
+ >
+ <i class="plus icon"></i>
+ Importer
+ </button>
+ </form>
+ </div>
+ </div>
</div>
+
<p v-if="showGeoPositionBtn">
<button
- @click="create_point_geoposition()"
+ @click="create_point_geoposition"
id="create-point-geoposition"
type="button"
class="ui compact button"
@@ -173,7 +198,7 @@
<!-- Extra Fields -->
<div class="ui horizontal divider">DONNÉES MÉTIER</div>
<div
- v-for="(field, index) in extra_form"
+ v-for="(field, index) in orderedCustomFields"
:key="field.field_type + index"
class="field"
>
@@ -282,24 +307,6 @@ export default {
erreurUploadMessage: null,
attachmentDataKey: 0,
linkedDataKey: 0,
- statusChoices: [
- {
- name: "Brouillon",
- value: "draft",
- },
- {
- name: "Publié",
- value: "published",
- },
- {
- name: "Archivé",
- value: "archived",
- },
- {
- name: "En attente de publication",
- value: "pending",
- },
- ],
form: {
title: {
errors: [],
@@ -349,6 +356,7 @@ export default {
"features",
"extra_form",
"linked_features",
+ "statusChoices"
]),
field_title() {
@@ -370,6 +378,10 @@ export default {
);
},
+ orderedCustomFields() {
+ return [...this.extra_form].sort((a, b) => a.position - b.position);
+ },
+
geoRefFileLabel() {
if (this.file) {
return this.file.name;
@@ -391,8 +403,8 @@ export default {
if (this.project) {
const isModerate = this.project.moderation;
const userStatus = this.USER_LEVEL_PROJECTS[this.project.slug];
- const isOwnFeature = this.feature //* prevent undefined feature
- ? this.feature.creator === this.user.id
+ const isOwnFeature = this.feature
+ ? this.feature.creator === this.user.id //* prevent undefined feature
: false; //* si le contributeur est l'auteur du signalement
if (
//* si admin ou modérateur, statuts toujours disponible : Brouillon, Publié, Archivé
@@ -464,6 +476,10 @@ export default {
function error(err) {
this.erreurGeolocalisationMessage = err.message;
+ if (err.message === "User denied geolocation prompt") {
+ this.erreurGeolocalisationMessage =
+ "La géolocalisation a été désactivée par l'utilisateur";
+ }
}
this.erreurGeolocalisationMessage = null;
if (!navigator.geolocation) {
@@ -477,7 +493,17 @@ export default {
}
},
+ toggleGeoRefModal() {
+ if (this.showGeoRef) {
+ //* when popup closes, empty form
+ this.erreurUploadMessage = "";
+ this.file = null;
+ }
+ this.showGeoRef = !this.showGeoRef;
+ },
+
handleFileUpload() {
+ this.erreurUploadMessage = "";
this.file = this.$refs.file.files[0];
},
@@ -487,19 +513,17 @@ export default {
let formData = new FormData();
formData.append("image_file", this.file);
console.log(">> formData >> ", formData);
- let self = this;
axios
.post(url, formData, {
headers: {
"Content-Type": "multipart/form-data",
},
})
- .then(function (response) {
+ .then((response) => {
console.log("SUCCESS!!", response.data);
if (response.data.geom.indexOf("POINT") >= 0) {
let regexp = /POINT\s\((.*)\s(.*)\)/;
- var arr = regexp.exec(response.data.geom);
-
+ let arr = regexp.exec(response.data.geom);
let json = {
type: "Feature",
geometry: {
@@ -508,21 +532,21 @@ export default {
},
properties: {},
};
- self.updateMap(json);
- self.updateGeomField(json);
+ this.updateMap(json);
+ this.updateGeomField(json);
// Set Attachment
- self.addAttachment({
+ this.addAttachment({
title: "Localisation",
info: "",
id: "loc",
- attachment_file: self.file.name,
- fileToImport: self.file,
+ attachment_file: this.file.name,
+ fileToImport: this.file,
});
}
})
- .catch(function (response) {
+ .catch((response) => {
console.log("FAILURE!!");
- self.erreurUploadMessage = response.data.message;
+ this.erreurUploadMessage = response.data.message;
});
},
@@ -962,7 +986,7 @@ export default {
this.initForm();
this.initMap();
this.onFeatureTypeLoaded();
- this.initExtraForms();
+ this.initExtraForms(this.feature);
setTimeout(
function () {
@@ -1008,4 +1032,13 @@ export default {
.ui.segment {
margin: 1rem 0 !important;
}
+
+.error-message {
+ color: red;
+}
+/* override to display buttons under the dimmer of modal */
+.leaflet-top,
+.leaflet-bottom {
+ z-index: 800;
+}
</style>
diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue
index 208a89bf9f3f6632aa24ee4e640abc85d926bd8b..667e974de35c926248f704fa1a6c94f85bf44362 100644
--- a/src/views/feature/Feature_list.vue
+++ b/src/views/feature/Feature_list.vue
@@ -1,6 +1,5 @@
<template>
<div class="fourteen wide column">
- <div class="ui dimmer" :class="[{ active: featureLoading }]"></div>
<script
type="application/javascript"
:src="
@@ -38,7 +37,11 @@
</div>
<div
- v-if="project && feature_types && permissions.can_create_feature"
+ v-if="
+ project &&
+ feature_types.length > 0 &&
+ permissions.can_create_feature
+ "
class="item right"
>
<div
@@ -88,7 +91,6 @@
<div class="field wide four column no-margin-mobile">
<label>Type</label>
<Dropdown
- @update:selection="onFilterTypeChange($event)"
:options="form.type.choices"
:selected="form.type.selected"
:selection.sync="form.type.selected"
@@ -100,8 +102,7 @@
<label>Statut</label>
<!-- //* giving an object mapped on key name -->
<Dropdown
- @update:selection="onFilterStatusChange($event)"
- :options="form.status.choices"
+ :options="statusChoices"
:selected="form.status.selected.name"
:selection.sync="form.status.selected"
:search="true"
@@ -117,7 +118,7 @@
type="text"
name="title"
v-model="form.title"
- @input="onFilterChange()"
+ @input="onFilterChange"
/>
<button
type="button"
@@ -129,7 +130,7 @@
</div>
</div>
</div>
- <!-- map params, updated on map move // todo : brancher sur la carte probablement -->
+ <!-- map params, updated on map move -->
<input type="hidden" name="zoom" v-model="zoom" />
<input type="hidden" name="lat" v-model="lat" />
<input type="hidden" name="lng" v-model="lng" />
@@ -199,7 +200,6 @@ export default {
data() {
return {
modalAllDeleteOpen: false,
- checkedFeatures: [],
form: {
type: {
selected: null,
@@ -233,7 +233,6 @@ export default {
},
geojsonFeatures: [],
- featureLoading: false,
filterStatus: null,
filterType: null,
baseUrl: this.$store.state.configuration.BASE_URL,
@@ -249,7 +248,7 @@ export default {
computed: {
...mapGetters(["project", "permissions"]),
...mapState(["user"]),
- ...mapState("feature", ["features"]),
+ ...mapState("feature", ["features", "checkedFeatures"]),
...mapState("feature_type", ["feature_types"]),
baseMaps() {
@@ -258,15 +257,15 @@ export default {
filteredFeatures() {
let results = this.geojsonFeatures;
- if (this.filterType) {
+ if (this.form.type.selected) {
results = results.filter(
- (el) => el.properties.feature_type.title === this.filterType
+ (el) => el.properties.feature_type.title === this.form.type.selected
);
}
- if (this.filterStatus) {
- console.log("filter by" + this.filterStatus);
+ if (this.form.status.selected.value) {
+ console.log("filter by" + this.form.status.selected.value);
results = results.filter(
- (el) => el.properties.status.value === this.filterStatus
+ (el) => el.properties.status.value === this.form.status.selected.value
);
}
if (this.form.title) {
@@ -281,6 +280,21 @@ export default {
}
return results;
},
+
+ statusChoices() {
+ //* if project is not moderate, remove pending status
+ return this.form.status.choices.filter((el) =>
+ this.project.moderation ? true : el.value !== "pending"
+ );
+ },
+ },
+
+ watch: {
+ filteredFeatures(newValue, oldValue) {
+ if (newValue && newValue !== oldValue) {
+ this.onFilterChange()
+ }
+ }
},
methods: {
@@ -311,30 +325,11 @@ export default {
this.modalAllDelete();
},
- onFilterStatusChange(newvalue) {
- this.filterStatus = null;
- if (newvalue) {
- console.log("filter change", newvalue.value);
- this.filterStatus = newvalue.value;
- }
-
- this.onFilterChange();
- },
-
- onFilterTypeChange(newvalue) {
- this.filterType = null;
- if (newvalue) {
- console.log("filter change", newvalue);
- this.filterType = newvalue;
- }
- this.onFilterChange();
- },
-
onFilterChange() {
- var features = this.filteredFeatures;
- this.featureGroup.clearLayers();
- this.featureGroup = mapUtil.addFeatures(features, {});
- if (features.length > 0) {
+ if (this.featureGroup) {
+ const features = this.filteredFeatures;
+ this.featureGroup.clearLayers();
+ this.featureGroup = mapUtil.addFeatures(features, {});
mapUtil
.getMap()
.fitBounds(this.featureGroup.getBounds(), { padding: [25, 25] });
@@ -365,19 +360,23 @@ export default {
});
// --------- End sidebar events ----------
- if (this.$store.state.map.geojsonFeatures) {
- this.loadFeatures(this.$store.state.map.geojsonFeatures);
- } else {
+ if (this.features && this.features.length > 0) {
+ //* features are updated consistently, then if features exists, we can fetch the geojson version
const url = `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/feature/?output=geojson`;
- this.featureLoading = true;
+ this.$store.commit(
+ "DISPLAY_LOADER",
+ "Récupération des signalements en cours..."
+ );
axios
.get(url)
.then((response) => {
- this.loadFeatures(response.data.features);
- this.featureLoading = false;
+ if (response.status === 200 && response.data.features.length > 0) {
+ this.loadFeatures(response.data.features);
+ }
+ this.$store.commit("DISCARD_LOADER");
})
.catch((error) => {
- this.featureLoading = false;
+ this.$store.commit("DISCARD_LOADER");
throw error;
});
}
@@ -429,6 +428,11 @@ export default {
mounted() {
this.initMap();
},
+
+ destroyed() {
+ //* allow user to change page if ever stuck on loader
+ this.$store.commit("DISCARD_LOADER");
+ },
};
</script>
diff --git a/src/views/feature_type/Feature_type_detail.vue b/src/views/feature_type/Feature_type_detail.vue
index 37a732a06ff1fba6c92e8eeb21af894c752b39a8..e0dbf923db86d99d0daf3ae7b35f62c5396948d3 100644
--- a/src/views/feature_type/Feature_type_detail.vue
+++ b/src/views/feature_type/Feature_type_detail.vue
@@ -35,7 +35,7 @@
<h3 class="ui header">Champs</h3>
<div class="ui divided list">
<div
- v-for="(field, index) in structure.customfield_set"
+ v-for="(field, index) in orderedCustomFields"
:key="field.name + index"
class="item"
>
@@ -154,10 +154,10 @@
}}
</div>
<div>
- Créé le {{ feature.created_on }}
- <span v-if="$store.state.user.is_authenticated">
+ [ Créé le {{ feature.created_on | formatDate }}
+ <span v-if="$store.state.user">
par {{ feature.display_creator }}</span
- >
+ > ]
</div>
</div>
</div>
@@ -204,6 +204,14 @@ export default {
};
},
+ filters: {
+ formatDate(value) {
+ let date = new Date(value);
+ date = date.toLocaleString().replace(",", " Ã ");
+ return date.substr(0, date.length - 3); //* quick & dirty way to remove seconds from date
+ },
+ },
+
computed: {
...mapGetters(["project", "permissions"]),
...mapState("feature", ["features"]),
@@ -226,6 +234,12 @@ export default {
lastFeatures: function () {
return this.feature_type_features.slice(0, 5);
},
+
+ orderedCustomFields() {
+ return [...this.structure.customfield_set].sort(
+ (a, b) => a.position - b.position
+ );
+ },
},
methods: {
diff --git a/src/views/feature_type/Feature_type_edit.vue b/src/views/feature_type/Feature_type_edit.vue
index 691443a6d7d5ce34aa95be04ca40851e3e536a85..8786d6d25fd55758885d54420e66447efed1845d 100644
--- a/src/views/feature_type/Feature_type_edit.vue
+++ b/src/views/feature_type/Feature_type_edit.vue
@@ -153,7 +153,6 @@
<i class="white save icon"></i>
Créer et importer le(s) signalement(s) du geojson
</button>
-
</form>
</div>
</div>
@@ -345,13 +344,14 @@ export default {
},
checkCustomForms() {
+ let is_valid = true;
if (this.$refs.customForms)
for (const customForm of this.$refs.customForms) {
if (customForm.checkCustomForm() === false) {
- return false;
+ is_valid = false;
}
}
- return true; //* fallback if all customForms returned true
+ return is_valid; //* fallback if all customForms returned true
},
checkForms() {
diff --git a/src/views/project/Project_detail.vue b/src/views/project/Project_detail.vue
index 20ce21a52d7cb9a8bbdf0fb92180c47597dbf481..d4a8636f340ea9e0a3189a21f33be644403afac6 100644
--- a/src/views/project/Project_detail.vue
+++ b/src/views/project/Project_detail.vue
@@ -64,7 +64,7 @@
</div>
<div class="ui icon right floated compact buttons">
<a
- v-if="permissions && permissions.can_view_project && isOffline()!=true"
+ v-if="user && permissions && permissions.can_view_project && isOffline()!=true"
id="subscribe-button"
class="ui button button-hover-green"
data-tooltip="S'abonner au projet"
@@ -639,12 +639,7 @@ export default {
else
this.infoMessage =
"Vous ne recevrez plus les notifications de ce projet.";
- setTimeout(
- function () {
- this.infoMessage = "";
- }.bind(this),
- 3000
- );
+ setTimeout(() => (this.infoMessage = ""), 3000);
});
},
},
@@ -675,7 +670,9 @@ export default {
mapUtil
.getMap()
.fitBounds(featureGroup.getBounds(), { padding: [25, 25] });
- self.$store.commit("map/SET_GEOJSON_FEATURES", features);
+ this.$store.commit("map/SET_GEOJSON_FEATURES", features);
+ } else {
+ this.$store.commit("map/SET_GEOJSON_FEATURES", []);
}
})
.catch((error) => {
@@ -690,10 +687,7 @@ export default {
document
.getElementById("message")
.scrollIntoView({ block: "end", inline: "nearest" });
- setTimeout(() => {
- //* hide message after 5 seconds
- this.tempMessage = null;
- }, 5000);
+ setTimeout(() => (this.tempMessage = null), 5000); //* hide message after 5 seconds
}
},
};
diff --git a/src/views/project/Project_members.vue b/src/views/project/Project_members.vue
index a838d755e80c0131efa9de35a3b5b1c63955eea9..dd1fc1c606342a8a6240da3d574f75852a5dca56 100644
--- a/src/views/project/Project_members.vue
+++ b/src/views/project/Project_members.vue
@@ -132,7 +132,12 @@ export default {
},
async populateMembers() {
+ this.$store.commit(
+ "DISPLAY_LOADER",
+ "Récupération des membres en cours..."
+ );
await this.fetchMembers().then((members) => {
+ this.$store.commit("DISCARD_LOADER");
this.projectMembers = members.map((el) => {
return {
userLevel: { name: el.level.display, value: el.level.codename },
@@ -149,5 +154,10 @@ export default {
}
this.populateMembers();
},
+
+ destroyed() {
+ //* allow user to change page if ever stuck on loader
+ this.$store.commit("DISCARD_LOADER");
+ },
};
</script>
\ No newline at end of file