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,75 +1,86 @@
 <template>
+    <div>
+        <ul class="record_actions">
+            <li>
+                <a class="btn btn-sm btn-create" @click="openModal">
+                    {{ $t('activity.create_new_location') }}
+                </a>
+            </li>
+        </ul>
 
-    <ul class="record_actions">
+        <teleport to="body">
-        <li>
+            <modal v-if="modal.showModal"
-            <a class="btn btn-sm btn-create" @click="openModal">
+                :modalDialogClass="modal.modalDialogClass"
-                {{ $t('activity.create_new_location') }}
+                @close="modal.showModal = false">
-            </a>
-        </li>
-    </ul>
 
-    <teleport to="body">
+                <template v-slot:header>
-        <modal v-if="modal.showModal"
+                    <h3 class="modal-title">{{ $t('activity.create_new_location') }}</h3>
-               :modalDialogClass="modal.modalDialogClass"
+                </template>
-               @close="modal.showModal = false">
+                <template v-slot:body>
+                    <form>
+                        <div class="form-floating mb-3">
+                            <p v-if="errors.length">
+                                <b>{{ $t('activity.errors') }}</b>
+                                <ul>
+                                    <li v-for="error in errors">{{ error }}</li>
+                                </ul>
+                            </p>
+                        </div>
 
-            <template v-slot:header>
+                        <div class="form-floating mb-3">
-                <h3 class="modal-title">{{ $t('activity.create_new_location') }}</h3>
+                            <select class="form-select form-select-lg" id="type" required v-model="selectType">
-            </template>
+                                <option selected disabled value="">{{ $t('activity.choose_location_type') }}</option>
-            <template v-slot:body>
+                                <option v-for="t in locationTypes" :value="t.id">
+                                    {{ t.title.fr }}
+                                </option>
+                            </select>
+                            <label>{{ $t('activity.location_fields.type') }}</label>
+                        </div>
 
-                <add-address
+                        <div class="form-floating mb-3">
-                    :context="addAddress.context"
+                            <input class="form-control form-control-lg" id="name" v-model="inputName" placeholder />
-                    :options="addAddress.options"
+                            <label for="name">{{ $t('activity.location_fields.name') }}</label>
-                    :addressChangedCallback="submitNewAddress"
+                        </div>
-                    ref="addAddress">
-                </add-address>
 
-                <div class="form-floating mb-3">
+                        <add-address
-                    <input class="form-control form-control-lg" id="name" v-model="inputName" placeholder />
+                            :context="addAddress.context"
-                    <label for="name">{{ $t('activity.location_fields.name') }}</label>
+                            :options="addAddress.options"
-                </div>
+                            :addressChangedCallback="submitNewAddress"
+                            ref="addAddress">
+                        </add-address>
 
-                <div class="form-floating mb-3">
+                        <div class="form-floating mb-3">
-                    <select class="form-select form-select-lg" id="type" v-model="selectType">
+                            <input class="form-control form-control-lg" id="phonenumber1" v-model="inputPhonenumber1" placeholder />
-                        <option selected disabled value="">{{ $t('activity.choose_location_type') }}</option>
+                            <label for="phonenumber1">{{ $t('activity.location_fields.phonenumber1') }}</label>
-                        <option v-for="t in locationTypes" :value="t.id">
+                        </div>
-                            {{ t.title.fr }}
+                        <div class="form-floating mb-3" v-if="hasPhonenumber1">
-                        </option>
+                            <input class="form-control form-control-lg" id="phonenumber2" v-model="inputPhonenumber2" placeholder />
-                    </select>
+                            <label for="phonenumber2">{{ $t('activity.location_fields.phonenumber2') }}</label>
-                    <label>{{ $t('activity.location_fields.type') }}</label>
+                        </div>
-                </div>
+                        <div class="form-floating mb-3">
+                            <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="saveNewLocation"
+                    >
+                        {{ $t('action.save') }}
+                    </button>
+                </template>
 
-                <div class="form-floating mb-3">
+            </modal>
-                    <input class="form-control form-control-lg" id="phonenumber1" v-model="inputPhonenumber1" placeholder />
+        </teleport>
-                    <label for="phonenumber1">{{ $t('activity.location_fields.phonenumber1') }}</label>
+    </div>
-                </div>
-                <div class="form-floating mb-3" v-if="hasPhonenumber1">
-                    <input class="form-control form-control-lg" id="phonenumber2" v-model="inputPhonenumber2" placeholder />
-                    <label for="phonenumber2">{{ $t('activity.location_fields.phonenumber2') }}</label>
-                </div>
-                <div class="form-floating mb-3">
-                    <input class="form-control form-control-lg" id="email" v-model="inputEmail" placeholder />
-                    <label for="email">{{ $t('activity.location_fields.email') }}</label>
-                </div>
-
-            </template>
-            <template v-slot:footer>
-                <button class="btn btn-save"
-                    @click.prevent="$emit('saveNewLocation', selected); modal.showModal = false;">
-                    {{ $t('action.save') }}
-                </button>
-            </template>
-
-        </modal>
-    </teleport>
 </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;