diff --git a/src/components/feature_type/FeatureTypeCustomForm.vue b/src/components/feature_type/FeatureTypeCustomForm.vue index fa70cbfd986c21ef88b08497b2e583f80e48c683..fcdf282ddc87b864f5ade32573d867e6c2cf2455 100644 --- a/src/components/feature_type/FeatureTypeCustomForm.vue +++ b/src/components/feature_type/FeatureTypeCustomForm.vue @@ -24,7 +24,11 @@ @blur="updateStore" /> <small>{{ form.label.help_text }}</small> - {{ form.label.errors }} + <ul id="errorlist" class="errorlist"> + <li v-for="error in form.label.errors" :key="error"> + {{ error }} + </li> + </ul> </div> <div class="required field"> @@ -39,9 +43,14 @@ @blur="updateStore" /> <small>{{ form.name.help_text }}</small> - {{ form.name.errors }} + <ul id="errorlist" class="errorlist"> + <li v-for="error in form.name.errors" :key="error"> + {{ error }} + </li> + </ul> </div> </div> + <div class="three fields"> <div class="required field"> <label :for="form.position.id_for_label">{{ @@ -58,8 +67,13 @@ /> </div> <small>{{ form.position.help_text }}</small> - {{ form.position.errors }} + <ul id="errorlist" class="errorlist"> + <li v-for="error in form.position.errors" :key="error"> + {{ error }} + </li> + </ul> </div> + <div class="required field"> <label :for="form.field_type.id_for_label">{{ form.field_type.label @@ -70,7 +84,13 @@ :selected="selectedFieldType" :selection.sync="selectedFieldType" /> + <ul id="errorlist" class="errorlist"> + <li v-for="error in form.field_type.errors" :key="error"> + {{ error }} + </li> + </ul> </div> + <div v-if="selectedFieldType === 'Liste de valeurs'" class="field field-list-options required field" @@ -87,7 +107,11 @@ class="options-field" /> <small>{{ form.help_text }}</small> - {{ form.options.errors }} + <ul id="errorlist" class="errorlist"> + <li v-for="error in form.options.errors" :key="error"> + {{ error }} + </li> + </ul> </div> </div> </div> @@ -120,7 +144,7 @@ export default { form: { dataKey: 0, label: { - errors: null, + errors: [], id_for_label: "label", label: "Label", help_text: "Nom en language naturel du champ", @@ -131,7 +155,7 @@ export default { value: null, }, name: { - errors: null, + errors: [], id_for_label: "name", label: "Nom", html_name: "name", @@ -143,7 +167,7 @@ export default { value: null, }, position: { - errors: null, + errors: [], id_for_label: "position", label: "Position", min_value: 0, // ! check if good values (not found) @@ -153,10 +177,10 @@ export default { field: { max_length: 128, // ! check if good values (not found) }, - value: 0, + value: this.customForm.dataKey - 1, }, field_type: { - errors: null, + errors: [], id_for_label: "field_type", label: "Type de champ", html_name: "field_type", @@ -164,10 +188,10 @@ export default { field: { max_length: 50, }, - value: null, //* field to send to the backend + value: "boolean", }, options: { - errors: null, + errors: [], id_for_label: "options", label: "Options", html_name: "options", @@ -246,6 +270,21 @@ export default { // TODO : supprimer les espaces pour chaque option au début et à la fin QUE à la validation 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; + } else if (this.form.name.value === null) { + this.form.name.errors = ["Veuillez compléter ce champ."]; + this.form.label.errors = []; + return false; + } + this.form.label.errors = []; + this.form.name.errors = []; + return true; + }, }, beforeDestroy() { diff --git a/src/views/feature_type/Feature_type_edit.vue b/src/views/feature_type/Feature_type_edit.vue index 8b81dd4148a43bd90cb330e00373e11d8654a387..bfe55b1a5a732bb51a80cde5b85a6503c1885020 100644 --- a/src/views/feature_type/Feature_type_edit.vue +++ b/src/views/feature_type/Feature_type_edit.vue @@ -25,6 +25,7 @@ <p v-if="action === 'create'"> Ces champs par défaut existent pour tous les types de signalement: </p> + <div class="two fields"> <div class="required field"> <label :for="form.title.id_for_label">{{ form.title.label }}</label> @@ -43,6 +44,7 @@ </li> </ul> </div> + <div class="required field"> <label :for="form.geom_type.id_for_label">{{ form.geom_type.label @@ -109,6 +111,7 @@ :key="form.dataKey" :dataKey="form.dataKey" :customForm="form" + ref="customForms" /> </div> @@ -211,7 +214,7 @@ export default { max_length: 128, // ! Vérifier la valeur dans django }, html_name: "geom_type", - value: "Point", + value: "point", }, }, reservedKeywords: [ @@ -324,10 +327,19 @@ export default { }); }, - checkForm() { + checkCustomForms() { + for (const customForm of this.$refs.customForms) { + if (customForm.checkCustomForm() === false) { + return false; + } + } + return true; //* fallback if all customForms returned true + }, + + checkForms() { if (this.form.title.value) { this.form.title.errors = []; - return true; + 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 ) { @@ -352,7 +364,7 @@ export default { sendFeatureType() { // * si édition d'une feature_type déja existante, faire un put const requestType = this.action === "edit" ? "put" : "post"; - if (this.checkForm()) { + if (this.checkForms()) { this.$store .dispatch("feature_type/SEND_FEATURE_TYPE", requestType) .then(({ status }) => { @@ -389,7 +401,7 @@ export default { async postFeatureTypeThenFeatures() { const requestType = this.action === "edit" ? "put" : "post"; - if (this.checkForm()) { + if (this.checkForms()) { await this.$store .dispatch("feature_type/SEND_FEATURE_TYPE", requestType) .then(({ feature_type_slug }) => {