Skip to content
Snippets Groups Projects
Commit 56f8a9e1 authored by Timothee P's avatar Timothee P :sunflower:
Browse files

validate forms for feature_edit (attachment & linkedFeatures)

parent 962dbdc4
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/feature/FeatureAttachmentForm.vue
+ 47
− 11
View file @ 56f8a9e1
......@@ -11,7 +11,7 @@
<i class="ui times icon"></i>
</button>
</h4>
{{ form.errors }}
<!-- {{ form.errors }} -->
<div class="visible-fields">
<div class="two fields">
<div class="required field">
......@@ -25,7 +25,11 @@
v-model="form.title.value"
@change="updateStore"
/>
{{ form.title.errors }}
<ul :id="form.title.id_for_error" class="errorlist">
<li v-for="error in form.title.errors" :key="error">
{{ error }}
</li>
</ul>
</div>
<div class="required field">
<label>Fichier (PDF, PNG, JPEG)</label>
......@@ -46,7 +50,11 @@
:name="form.attachment_file.html_name"
:id="'attachment_file' + attachmentForm.dataKey"
/>
{{ form.attachment_file.errors }}
<ul :id="form.attachment_file.id_for_error" class="errorlist">
<li v-for="error in form.attachment_file.errors" :key="error">
{{ error }}
</li>
</ul>
</div>
</div>
<div class="field">
......@@ -57,7 +65,7 @@
v-model="form.info.value"
@change="updateStore"
></textarea>
{{ form.info.errors }}
<!-- {{ form.info.errors }} -->
</div>
</div>
</div>
......@@ -75,7 +83,8 @@ export default {
fileToImport: null,
form: {
title: {
errors: null,
errors: [],
id_for_error: `errorlist-title-${this.attachmentForm.dataKey}`,
id_for_label: "titre",
field: {
max_length: 30, // todo : vérifier dans django
......@@ -85,10 +94,11 @@ export default {
value: "",
},
attachment_file: {
errors: null,
errors: [],
id_for_error: `errorlist-file-${this.attachmentForm.dataKey}`,
html_name: "titre",
label: "Titre",
value: "",
value: null,
},
info: {
value: "",
......@@ -109,19 +119,22 @@ export default {
initForm(attachmentForm) {
for (let el in attachmentForm) {
if (el && this.form[el]) {
this.form[el].value =
el === "attachment_file"
? attachmentForm[el].split("/").pop() //* keep only the file name, not the path
: attachmentForm[el];
if (el === "attachment_file" && attachmentForm[el]) {
this.form[el].value = attachmentForm[el].split("/").pop(); //* keep only the file name, not the path
} else {
this.form[el].value = attachmentForm[el];
}
}
}
},
removeAttachmentFormset() {
this.$store.commit(
"feature/REMOVE_ATTACHMENT_FORM",
this.attachmentForm.dataKey
);
},
updateStore() {
this.$store.commit("feature/UPDATE_ATTACHMENT_FORM", {
dataKey: this.attachmentForm.dataKey,
......@@ -131,6 +144,7 @@ export default {
fileToImport: this.fileToImport,
});
},
onFileChange(e) {
const files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
......@@ -138,6 +152,28 @@ export default {
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();
},
checkForm() {
let isValid = true;
if (this.form.title.value === "") {
this.form.title.errors = ["Veuillez compléter ce champ."];
document
.getElementById(this.form.title.id_for_error)
.scrollIntoView({ block: "start", inline: "nearest" });
isValid = false;
} else if (this.form.attachment_file.value === null) {
this.form.attachment_file.errors = ["Veuillez compléter ce champ."];
this.form.title.errors = [];
document
.getElementById(this.form.attachment_file.id_for_error)
.scrollIntoView({ block: "start", inline: "nearest" });
isValid = false;
} else {
this.form.title.errors = [];
this.form.attachment_file.errors = [];
}
return isValid;
},
},
mounted() {
......
src/components/feature/FeatureLinkedForm.vue
+ 21
− 4
View file @ 56f8a9e1
......@@ -10,7 +10,9 @@
<i class="ui times icon"></i>
</button>
</h4>
{{ form.errors }}
<ul id="errorlist-links" class="errorlist">
<li v-for="error in form.errors" :key="error" v-html="error"></li>
</ul>
<div class="visible-fields">
<div class="two fields">
<div class="required field">
......@@ -53,8 +55,10 @@ export default {
},
computed: {
featureOptions: function() {
return this.features.map(el=> `${el.title} (${el.display_creator} - ${el.created_on})`)
featureOptions: function () {
return this.features.map(
(el) => `${el.title} (${el.display_creator} - ${el.created_on})`
);
},
selected_relation_type: {
// getter
......@@ -92,7 +96,7 @@ export default {
},
html_name: "relation_type",
label: "Type de liaison",
value: "",
value: "Doublon",
},
feature_to: {
errors: null,
......@@ -118,6 +122,19 @@ export default {
feature_to: this.form.feature_to.value,
});
},
checkForm() {
if (this.form.feature_to.value === "") {
this.form.errors = [
"<strong>Choisir un signalement lié</strong><br/> Pourriez-vous choisir un signalement pour la nouvelle liaison ?",
];
document
.getElementById("errorlist-links")
.scrollIntoView({ block: "start", inline: "nearest" });
return false;
}
this.form.errors = [];
return true;
},
},
};
</script>
\ No newline at end of file
src/components/feature_type/FeatureTypeCustomForm.vue
+ 0
− 2
View file @ 56f8a9e1
......@@ -271,8 +271,6 @@ export default {
return string.replace(/\s*,\s*/gi, ",");
},
checkCustomForm() {
console.log("checkCustomForm");
console.log(this.form);
if (this.form.label.value === null) {
this.form.label.errors = ["Veuillez compléter ce champ."];
return false;
......
src/views/feature/Feature_edit.vue
+ 57
− 34
View file @ 56f8a9e1
......@@ -30,7 +30,7 @@
v-model="form.title.value"
@blur="updateStore"
/>
<ul id="errorlist" class="errorlist">
<ul id="errorlist-title" class="errorlist">
<li v-for="error in form.title.errors" :key="error">
{{ error }}
</li>
......@@ -45,11 +45,6 @@
:selected="selected_status.name"
:selection.sync="selected_status"
/>
<ul id="errorlist" class="errorlist">
<li v-for="error in form.status.errors" :key="error">
{{ error }}
</li>
</ul>
</div>
</div>
<div class="field">
......@@ -62,7 +57,6 @@
v-model="form.description.value"
@blur="updateStore"
></textarea>
{{ form.description.errors }}
</div>
<!-- Geom Field -->
......@@ -145,8 +139,11 @@
<br />
</span>
</div>
{{ form.geom.errors }}
<ul id="errorlist-geom" class="errorlist">
<li v-for="error in form.geom.errors" :key="error">
{{ error }}
</li>
</ul>
<!-- Map -->
<input
type="hidden"
......@@ -179,14 +176,12 @@
<!-- Pièces jointes -->
<div class="ui horizontal divider">PIÈCES JOINTES</div>
<!-- {{ attachment_formset.non_form_errors }} -->
<div id="formsets-attachment">
<!-- {{ attachment_formset.management_form }} -->
<FeatureAttachmentForm
v-for="form in attachmentFormset"
:key="form.dataKey"
:attachmentForm="form"
ref="attachementForm"
/>
</div>
......@@ -201,15 +196,13 @@
<!-- Signalements liés -->
<div class="ui horizontal divider">SIGNALEMENTS LIÉS</div>
<!-- {{ linked_formset.non_form_errors }} -->
<div id="formsets-link">
<!-- {{ linked_formset.management_form }} -->
<FeatureLinkedForm
v-for="form in linkedFormset"
:key="form.dataKey"
:linkedForm="form"
:features="features"
ref="linkedForm"
/>
</div>
<button
......@@ -282,7 +275,7 @@ export default {
],
form: {
title: {
errors: null,
errors: [],
id_for_label: "name",
field: {
max_length: 30,
......@@ -292,7 +285,6 @@ export default {
value: "",
},
status: {
errors: null,
id_for_label: "status",
html_name: "status",
label: "Statut",
......@@ -302,13 +294,14 @@ export default {
},
},
description: {
errors: null,
errors: [],
id_for_label: "description",
html_name: "description",
label: "Description",
value: "",
},
geom: {
errors: [],
label: "Localisation",
value: null,
},
......@@ -339,12 +332,10 @@ export default {
selected_status: {
get() {
console.log(this.form.status.value);
return this.form.status.value;
},
set(newValue) {
this.form.status.value = newValue;
console.log(this.form.status.value);
this.updateStore();
},
},
......@@ -484,29 +475,63 @@ export default {
});
},
checkForms() {
checkFormTitle() {
if (this.form.title.value) {
this.form.title.errors = [];
return this.checkCustomForms(); //* if customForms are ok, validate, if get out function
return true;
} else if (
!this.form.title.errors.includes("Veuillez compléter ce champ.") // TODO : Gérer les autres champs
!this.form.title.errors.includes("Veuillez compléter ce champ.")
) {
this.form.title.errors.push("Veuillez compléter ce champ.");
document
.getElementById("errorlist")
.getElementById("errorlist-title")
.scrollIntoView({ block: "end", inline: "nearest" });
}
return false;
},
checkFormGeom() {
if (this.form.geom.value) {
this.form.geom.errors = [];
return true;
} else if (
!this.form.geom.errors.includes("Valeur géométrique non valide.")
) {
this.form.geom.errors.push("Valeur géométrique non valide.");
document
.getElementById("errorlist-geom")
.scrollIntoView({ block: "end", inline: "nearest" });
}
return false;
},
checkAddedForm() {
let isValid = true; //* fallback if all customForms returned true
if (this.$refs.attachementForm) {
for (const attachementForm of this.$refs.attachementForm) {
if (attachementForm.checkForm() === false) {
isValid = false;
}
}
}
if (this.$refs.linkedForm) {
for (const linkedForm of this.$refs.linkedForm) {
if (linkedForm.checkForm() === false) {
isValid = false;
}
}
}
return isValid;
},
postForm() {
if (!this.checkForms()) return;
this.$store.dispatch("feature/SEND_FEATURE", this.currentRouteName);
// if (this.form.title.value) {
// this.form.title.errors = null;
// } else {
// this.form.title.errors = "Veuillez compléter ce champ.";
// }
if (
this.checkFormTitle() &&
this.checkFormGeom() &&
this.checkAddedForm()
) {
this.$store.dispatch("feature/SEND_FEATURE", this.currentRouteName);
}
},
onFeatureTypeLoaded() {
......@@ -788,8 +813,8 @@ export default {
"feature_type/SET_CURRENT_FEATURE_TYPE_SLUG",
this.$route.params.slug_type_signal
);
// todo : mutualize in store with feature_detail.vue
// todo : mutualize in store with feature_detail.vue
if (this.$route.params.slug_signal) {
featureAPI
.getFeatureAttachments(this.$route.params.slug_signal)
......@@ -805,8 +830,6 @@ export default {
this.initMap();
},
};
// TODO : add script from django and convert:
</script>
<style>
......
src/views/feature_type/Feature_type_edit.vue
+ 2
− 2
View file @ 56f8a9e1
......@@ -308,7 +308,7 @@ export default {
// * find feature_type and fill form values
if (this.form[el]) this.form[el].value = formData[el];
}
//! add custom fields using ONLY this function, incrementing dataKey for Vue updating correctly components
//! add custom fields using ONLY this function, incrementing dataKey for Vue to correctly update components
formData.customfield_set.forEach((el) => this.addCustomForm(el));
this.updateStore();
},
......@@ -341,7 +341,7 @@ export default {
this.form.title.errors = [];
return this.checkCustomForms(); //* if customForms are ok, validate, if get out function
} else if (
!this.form.title.errors.includes("Veuillez compléter ce champ.") // TODO : Gérer les autres champs
!this.form.title.errors.includes("Veuillez compléter ce champ.")
) {
this.form.title.errors.push("Veuillez compléter ce champ.");
document
......
src/views/project/Project_edit.vue
+ 0
− 4
View file @ 56f8a9e1
......@@ -303,9 +303,6 @@ export default {
checkForm() {
for (const key in this.errors) {
console.log(key);
console.log(this.form[key]);
console.log(this.form[key].value);
if ((key === "title" && this.form[key]) || this.form[key].value) {
this.errors[key] = [];
} else if (!this.errors[key].length) {
......@@ -314,7 +311,6 @@ export default {
? "Veuillez compléter ce champ."
: "Sélectionnez un choix valide. Ce choix ne fait pas partie de ceux disponibles."
);
console.log(`errorlist-${key}`);
document
.getElementById(`errorlist-${key}`)
.scrollIntoView({ block: "end", inline: "nearest" });
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment