vue_activity location: add NewLocation fields, submit activity form with hidden field (+)

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/api.js

@@ -36,9 +36,28 @@ const getLocationTypes = () => {
         });
 };
 
+/*
+*   Post a Location
+ */
+const postLocation = (body) => {
+    const url = `/api/1.0/main/location.json`;
+    return fetch(url, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json;charset=utf-8'
+        },
+        body: JSON.stringify(body)
+    })
+    .then(response => {
+        if (response.ok) { return response.json(); }
+        throw Error('Error with request resource response');
+    });
+};
+
 export {
    getSocialIssues,
    getSocialActionByIssue,
    getLocations,
-   getLocationTypes
+   getLocationTypes,
+   postLocation
 };

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

@@ -21,7 +21,7 @@
                 </VueMultiselect>
                 <!--
                 -->
-                <new-location></new-location>
+                <new-location @saveNewLocation="saveNewLocation"></new-location>
             </div>
         </div>
     </teleport>
@@ -31,7 +31,7 @@
 import { mapState } from "vuex";
 import VueMultiselect from 'vue-multiselect';
 import NewLocation from './Location/NewLocation.vue';
-import { getLocations } from '../api.js';
+import { getLocations, postLocation } from '../api.js';
 
 export default {
     name: "Location",
@@ -51,7 +51,7 @@ export default {
                 return this.activity.location;
             },
             set(value) {
-                this.$store.commit('updateLocation', value);
+                this.$store.dispatch('updateLocation', value);
             }
         }
     },
@@ -62,13 +62,40 @@ export default {
         getLocationsList() {
             getLocations().then(response => new Promise(resolve => {
                 console.log('getLocations', response);
-                this.locations = response.results;
+                this.locations = response.results.filter(l => l.availableForUsers === true);
                 resolve();
             }))
         },
         customLabel(value) {
             return `${value.locationType.title.fr} ${value.name}`;
+        },
+        saveNewLocation(selected) {
+            console.log('saveNewLocation', selected);
+            console.log('post location')
+            let body = {
+                type: 'location',
+                name: selected.name,
+                address: { id: selected.addressId },
+                locationtype: { id: selected.type },
+                email: selected.email,
+                phonenumber1: selected.phonenumber1,
+                phonenumber2: selected.phonenumber2,
+            }
+            //this.$store.dispatch('addLocationSelected', body);
+            postLocation(body).then(location => new Promise(resolve => {
+                this.locations.push(location);
+                this.location.set(location);
+                resolve();
+            }));
         }
     }
 }
+
+/*
+*
+* TODO
+*  - multiselect, n'affiche pas l'item choisi
+*  - addAddress, les multiselect pays/localité/adresse ne se remplissent pas
+*
+*/
 </script>

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

@@ -40,9 +40,22 @@
                     <label>Type</label>
                 </div>
 
+                <div class="form-floating mb-3">
+                    <input class="form-control form-control-lg" id="phonenumber1" v-model="inputPhonenumber1" placeholder="edit me" />
+                    <label for="phonenumber1">Téléphone</label>
+                </div>
+                <div class="form-floating mb-3" v-if="hasPhonenumber1">
+                    <input class="form-control form-control-lg" id="phonenumber2" v-model="inputPhonenumber2" placeholder="edit me" />
+                    <label for="phonenumber2">Autre téléphone</label>
+                </div>
+                <div class="form-floating mb-3">
+                    <input class="form-control form-control-lg" id="email" v-model="inputEmail" placeholder="edit me" />
+                    <label for="email">Adresse courriel</label>
+                </div>
+
             </template>
             <template v-slot:footer>
-                <button class="btn btn-save">Enregistrer</button>
+                <button class="btn btn-save" @click.prevent="$emit('saveNewLocation', selected)">Enregistrer</button>
             </template>
 
         </modal>
@@ -61,12 +74,16 @@ export default {
         Modal,
         AddAddress,
     },
+    emits: ['saveNewLocation'],
     data() {
         return {
             selected: {
                 type: {},
                 name: null,
-                addressId: null
+                addressId: null,
+                phonenumber1: null,
+                phonenumber2: null,
+                email: null,
             },
             locationTypes: [],
             modal: {
@@ -76,10 +93,10 @@ export default {
             addAddress: {
                 options: {
                     button: {
-                        text:  { create: 'Créer une adresse' },
+                        text:  { create: 'Créer une adresse', edit: "Modifier l'adresse" },
                         size: 'btn-sm'
                     },
-                    title: { create: 'Créer une adresse' },
+                    title: { create: 'Créer une adresse', edit: "Modifier l'adresse" },
                 },
                 context: {
                     target: { //name, id
@@ -107,6 +124,33 @@ export default {
             set(value) {
                 this.selected.name = value;
             }
+        },
+        inputEmail: {
+            get() {
+                return this.selected.email;
+            },
+            set(value) {
+                this.selected.email = value;
+            }
+        },
+        inputPhonenumber1: {
+            get() {
+                return this.selected.phonenumber1;
+            },
+            set(value) {
+                this.selected.phonenumber1 = value;
+            }
+        },
+        inputPhonenumber2: {
+            get() {
+                return this.selected.phonenumber2;
+            },
+            set(value) {
+                this.selected.phonenumber2 = value;
+            }
+        },
+        hasPhonenumber1() {
+            return this.selected.phonenumber1 !== null && this.selected.phonenumber1 !== "";
         }
     },
     mounted() {
@@ -116,7 +160,7 @@ export default {
         getLocationTypesList() {
             getLocationTypes().then(response => new Promise(resolve => {
                 console.log('getLocationTypes', response);
-                this.locationTypes = response.results;
+                this.locationTypes = response.results.filter(t => t.availableForUsers === true);
                 resolve();
             }))
         },
@@ -125,6 +169,9 @@ export default {
         },
         submitNewAddress(payload) {
             console.log('submitNewAddress', payload);
+            this.selected.addressId = payload.addressId;
+            this.addAddress.context.addressId = payload.addressId;
+            this.addAddress.context.edit = true;
         }
     }
 }

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/store.js

@@ -177,6 +177,12 @@ const store = createStore({
           break;
       };
       commit('removePersonInvolved', payload);
+    },
+    updateLocation({ commit }, value) {
+        console.log('### action: updateLocation', value);
+        let hiddenLocation = document.getElementById("chill_activitybundle_activity_location");
+        hiddenLocation.value = value.id;
+        commit('updateLocation', value);
     }
   }
 });