From f4bd55262a52a50c23266bf63ce576b6a2cbe1a4 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Wed, 3 Nov 2021 11:59:06 +0100
Subject: [PATCH] location: client-side form validation

---
 .../components/Location/NewLocation.vue       | 75 ++++++++++---------
 .../Resources/public/vuejs/Activity/i18n.js   |  1 +
 2 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location/NewLocation.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location/NewLocation.vue
index 2515e37fc..2db928b3b 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location/NewLocation.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location/NewLocation.vue
@@ -22,7 +22,7 @@
                             <p v-if="errors.length">
                                 <b>{{ $t('activity.errors') }}</b>
                                 <ul>
-                                    <li v-for="error in errors">{{ error }}</li>
+                                    <li v-for="error in errors" :key="error">{{ error }}</li>
                                 </ul>
                             </p>
                         </div>
@@ -30,7 +30,7 @@
                         <div class="form-floating mb-3">
                             <select class="form-select form-select-lg" id="type" required v-model="selectType">
                                 <option selected disabled value="">{{ $t('activity.choose_location_type') }}</option>
-                                <option v-for="t in locationTypes" :value="t.id">
+                                <option v-for="t in locationTypes" :value="t.id" :key="t.id">
                                     {{ t.title.fr }}
                                 </option>
                             </select>
@@ -93,7 +93,7 @@ export default {
         return {
             errors: [],
             selected: {
-                type: {},
+                type: null,
                 name: null,
                 addressId: null,
                 phonenumber1: null,
@@ -129,7 +129,7 @@ export default {
                 return this.selected.type;
             },
             set(value) {
-                this.selected.type = value
+                this.selected.type = value;
             }
         },
         inputName: {
@@ -173,16 +173,20 @@ export default {
     },
     methods: {
         checkForm() {
-            console.log('check form')
-            if (this.selected.type) {
-                return true;
-            }
-
+            let cond = true;
+            console.log('check form');
             this.errors = [];
-
-            if (!this.selected.type) {
-                this.errors.push('Type of location required');
+            console.log(this.selected.type)
+            if (this.selected.type) {
+                //TODO conditional requirements for field
+                //if (this.selected.type.addressRequired = 'required') ...
+                cond = true;
+            } else {
+                this.errors.push('Type de localisation requis');
+                cond = false;
             }
+
+            return cond;
         },
         getLocationTypesList() {
             getLocationTypes().then(response => new Promise(resolve => {
@@ -195,29 +199,30 @@ export default {
             this.modal.showModal = true;
         },
         saveNewLocation() {
-            this.checkForm();
-            console.log('saveNewLocation', this.selected);
-            let body = {
-                type: 'location',
-                name: this.selected.name,
-                address: {
-                    id: this.selected.addressId
-                },
-                locationType: {
-                    id: this.selected.type,
-                    type: 'location-type'
-                },
-                phonenumber1: this.selected.phonenumber1,
-                phonenumber2: this.selected.phonenumber2,
-                email: this.selected.email,
-            }
-            postLocation(body).then(location => new Promise(resolve => {
-                console.log('postLocation', location);
-                this.locations.push(location);
-                this.$store.dispatch('updateLocation', location);
-                resolve();
-                this.modal.showModal = false;
-            }));
+            if (this.checkForm()) {
+                console.log('saveNewLocation', this.selected);
+                let body = {
+                    type: 'location',
+                    name: this.selected.name,
+                    address: {
+                        id: this.selected.addressId
+                    },
+                    locationType: {
+                        id: this.selected.type,
+                        type: 'location-type'
+                    },
+                    phonenumber1: this.selected.phonenumber1,
+                    phonenumber2: this.selected.phonenumber2,
+                    email: this.selected.email,
+                };
+                postLocation(body).then(location => new Promise(resolve => {
+                    console.log('postLocation', location);
+                    this.locations.push(location);
+                    this.$store.dispatch('updateLocation', location);
+                    resolve();
+                    this.modal.showModal = false;
+                }));
+            };
         },
         submitNewAddress(payload) {
             console.log('submitNewAddress', payload);
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
index c5ee23cec..37b9b356e 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/i18n.js
@@ -4,6 +4,7 @@ const activityMessages = {
    fr: {
       activity: {
          //
+         errors: "Le formulaire contient des erreurs",
          social_issues: "Problématiques sociales",
          choose_other_social_issue: "Ajouter une autre problématique sociale...",
          social_actions: "Actions d'accompagnement",