location: code refactoring: move saveNewLocation + order of fields

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location.vue

@@ -20,7 +20,7 @@
                     v-model="location">
                 </VueMultiselect>
 
-                <new-location @saveNewLocation="saveNewLocation"></new-location>
+                <new-location v-bind:locations="locations"></new-location>
             </div>
         </div>
     </teleport>
@@ -30,7 +30,7 @@
 import { mapState } from "vuex";
 import VueMultiselect from 'vue-multiselect';
 import NewLocation from './Location/NewLocation.vue';
-import { getLocations, postLocation } from '../api.js';
+import { getLocations } from '../api.js';
 
 export default {
     name: "Location",
@@ -67,29 +67,6 @@ export default {
         },
         customLabel(value) {
             return `${value.locationType.title.fr} ${value.name}`;
-        },
-        saveNewLocation(selected) {
-            console.log('saveNewLocation', selected);
-            let body = {
-                type: 'location',
-                name: selected.name,
-                address: {
-                    id: selected.addressId
-                },
-                locationType: {
-                    id: selected.type,
-                    type: 'location-type'
-                },
-                phonenumber1: selected.phonenumber1,
-                phonenumber2: selected.phonenumber2,
-                email: selected.email,
-            }
-            postLocation(body).then(location => new Promise(resolve => {
-                console.log('postLocation', location);
-                this.locations.push(location);
-                this.$store.dispatch('updateLocation', location);
-                resolve();
-            }));
         }
     }
 }

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location/NewLocation.vue

@@ -1,5 +1,5 @@
 <template>
-
+    <div>
         <ul class="record_actions">
             <li>
                 <a class="btn btn-sm btn-create" @click="openModal">
@@ -17,21 +17,18 @@
                     <h3 class="modal-title">{{ $t('activity.create_new_location') }}</h3>
                 </template>
                 <template v-slot:body>
-
+                    <form>
-                <add-address
-                    :context="addAddress.context"
-                    :options="addAddress.options"
-                    :addressChangedCallback="submitNewAddress"
-                    ref="addAddress">
-                </add-address>
-
                         <div class="form-floating mb-3">
-                    <input class="form-control form-control-lg" id="name" v-model="inputName" placeholder />
+                            <p v-if="errors.length">
-                    <label for="name">{{ $t('activity.location_fields.name') }}</label>
+                                <b>{{ $t('activity.errors') }}</b>
+                                <ul>
+                                    <li v-for="error in errors">{{ error }}</li>
+                                </ul>
+                            </p>
                         </div>
 
                         <div class="form-floating mb-3">
-                    <select class="form-select form-select-lg" id="type" v-model="selectType">
+                            <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">
                                     {{ t.title.fr }}
@@ -40,6 +37,18 @@
                             <label>{{ $t('activity.location_fields.type') }}</label>
                         </div>
 
+                        <div class="form-floating mb-3">
+                            <input class="form-control form-control-lg" id="name" v-model="inputName" placeholder />
+                            <label for="name">{{ $t('activity.location_fields.name') }}</label>
+                        </div>
+
+                        <add-address
+                            :context="addAddress.context"
+                            :options="addAddress.options"
+                            :addressChangedCallback="submitNewAddress"
+                            ref="addAddress">
+                        </add-address>
+
                         <div class="form-floating mb-3">
                             <input class="form-control form-control-lg" id="phonenumber1" v-model="inputPhonenumber1" placeholder />
                             <label for="phonenumber1">{{ $t('activity.location_fields.phonenumber1') }}</label>
@@ -52,24 +61,26 @@
                             <input class="form-control form-control-lg" id="email" v-model="inputEmail" placeholder />
                             <label for="email">{{ $t('activity.location_fields.email') }}</label>
                         </div>
-
+                    </form>
                 </template>
                 <template v-slot:footer>
                     <button class="btn btn-save"
-                    @click.prevent="$emit('saveNewLocation', selected); modal.showModal = false;">
+                        @click.prevent="saveNewLocation"
+                    >
                         {{ $t('action.save') }}
                     </button>
                 </template>
 
             </modal>
         </teleport>
+    </div>
 </template>
 
 <script>
 import Modal from 'ChillMainAssets/vuejs/_components/Modal.vue';
 import AddAddress from "ChillMainAssets/vuejs/Address/components/AddAddress.vue";
 import { mapState } from "vuex";
-import { getLocationTypes } from "../../api";
+import { getLocationTypes, postLocation } from "../../api";
 
 export default {
     name: "NewLocation",
@@ -77,9 +88,10 @@ export default {
         Modal,
         AddAddress,
     },
-    emits: ['saveNewLocation'],
+    props: ['locations'],
     data() {
         return {
+            errors: [],
             selected: {
                 type: {},
                 name: null,
@@ -160,6 +172,18 @@ export default {
         this.getLocationTypesList();
     },
     methods: {
+        checkForm() {
+            console.log('check form')
+            if (this.selected.type) {
+                return true;
+            }
+
+            this.errors = [];
+
+            if (!this.selected.type) {
+                this.errors.push('Type of location required');
+            }
+        },
         getLocationTypesList() {
             getLocationTypes().then(response => new Promise(resolve => {
                 console.log('getLocationTypes', response);
@@ -170,6 +194,31 @@ export default {
         openModal() {
             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;
+            }));
+        },
         submitNewAddress(payload) {
             console.log('submitNewAddress', payload);
             this.selected.addressId = payload.addressId;