prepare vue Location component

src/Bundle/ChillActivityBundle/Form/ActivityType.php

@@ -222,7 +222,7 @@ class ActivityType extends AbstractType
 
         if ($activityType->isVisible('comment')) {
             $builder->add('comment', CommentType::class, [
-                'label' => empty($activityType->getLabel('comment')) 
+                'label' => empty($activityType->getLabel('comment'))
                     ? 'activity.comment' : $activityType->getLabel('comment'),
                 'required' => $activityType->isRequired('comment'),
             ]);
@@ -302,6 +302,19 @@ class ActivityType extends AbstractType
            ;
         }
 
+                /*
+        if ($activityType->isVisible('location')) {
+            $builder
+                ->add('location', HiddenType::class)
+                ->get('location')
+                ->addModelTransformer(new CallbackTransformer(
+                    function () {},
+                    function () {}
+                ))
+            ;
+        }
+                */
+
         if ($activityType->isVisible('emergency')) {
             $builder->add('emergency', CheckboxType::class, [
                 'label' => $activityType->getLabel('emergency'),

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

@@ -73,9 +73,12 @@ export default {
          addPersons: {
             key: 'activity',
             options: {
-               type: ['person', 'thirdparty', 'user'], // TODO add 'user'
+               type: ['person', 'thirdparty', 'user'],
                priority: null,
                uniq: false,
+               button: {
+                   size: 'btn-sm'
+               }
             }
          }
       }

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

@@ -1,15 +1,37 @@
 <template>
     <teleport to="#location">
-        Location in vue
+        <div class="mb-3 row">
+            <label class="col-form-label col-sm-4">
+                Localisation
+            </label>
+            <div class="col-sm-8">
+                <!--
+                <VueMultiselect
+                    name="chooseLocation"
+                    placeholder="Choisissez une localisation">
+                </VueMultiselect>
+                -->
+                <new-location></new-location>
+            </div>
+        </div>
     </teleport>
 </template>
 
 <script>
+import {mapState} from "vuex";
+import VueMultiselect from 'vue-multiselect';
+import NewLocation from './Location/NewLocation.vue';
+
 export default {
-    name: "Location"
+    name: "Location",
+    components: {
+        NewLocation,
+        VueMultiselect
+    },
+    computed: {
+        ...mapState(['activity']),
+    },
+    methods: {
+    }
 }
 </script>
-
-<style scoped>
-
-</style>

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

@@ -0,0 +1,86 @@
+<template>
+
+    <ul class="record_actions">
+        <li>
+            <a class="btn btn-sm btn-create" @click="openModal">
+                Créer une nouvelle localisation
+            </a>
+        </li>
+    </ul>
+
+    <teleport to="body">
+        <modal v-if="modal.showModal"
+               :modalDialogClass="modal.modalDialogClass"
+               @close="modal.showModal = false">
+
+            <template v-slot:header>
+                <h3 class="modal-title">Ajouter une nouvelle localisation</h3>
+            </template>
+            <template v-slot:body>
+                * select type
+                * input name
+
+                <add-address
+                    :context="addAddress.context"
+                    :options="addAddress.options"
+                    :addressChangedCallback="submitNewAddress"
+                    ref="addAddress">
+                </add-address>
+
+            </template>
+            <template v-slot:footer>
+                <button class="btn btn-save">Enregistrer</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";
+
+export default {
+    name: "NewLocation",
+    components: {
+        Modal,
+        AddAddress,
+    },
+    data() {
+        return {
+            modal: {
+                showModal: false,
+                modalDialogClass: "modal-dialog-scrollable modal-xl"
+            },
+            addAddress: {
+                options: {
+                    button: {
+                        text:  { create: 'Créer une adresse' },
+                        size: 'btn-sm'
+                    },
+                    title: { create: 'Créer une adresse' },
+                },
+                context: {
+                    target: { //name, id
+                        },
+                    edit: false,
+                    addressId: null
+                }
+            }
+        }
+    },
+    computed: {
+        ...mapState(['activity']),
+
+    },
+    methods: {
+        openModal() {
+            this.modal.showModal = true;
+        },
+        submitNewAddress(payload) {
+            console.log('submitNewAddress', payload);
+        }
+    }
+}
+</script>

src/Bundle/ChillActivityBundle/Resources/views/Activity/editAccompanyingCourse.html.twig

@@ -6,10 +6,10 @@
 
 {% block content %}
 <div class="activity-edit">
-            
+
-            <div id="activity"></div> {# <=== vue component #}
+    <div id="activity"></div> {# <=== vue component #}
-            {% include 'ChillActivityBundle:Activity:edit.html.twig' %}
+    {% include 'ChillActivityBundle:Activity:edit.html.twig' %}
-            
+
 </div>
 {% endblock %}
 
@@ -18,10 +18,10 @@
     {{ encore_entry_link_tags('mod_async_upload') }}
     <script type="text/javascript">
         window.addEventListener('DOMContentLoaded', function (e) {
-            chill.displayAlertWhenLeavingModifiedForm('form[name="{{ edit_form.vars.form.vars.name }}"]', 
+            chill.displayAlertWhenLeavingModifiedForm('form[name="{{ edit_form.vars.form.vars.name }}"]',
             '{{ "You are going to leave a page with unsubmitted data. Are you sure you want to leave ?"|trans }}');
         });
-        window.activity = {{ activity_json|json_encode|raw }}; 
+        window.activity = {{ activity_json|json_encode|raw }};
     </script>
     {{ encore_entry_script_tags('vue_activity') }}
 {% endblock %}

src/Bundle/ChillActivityBundle/Resources/views/Activity/editPerson.html.twig

@@ -22,10 +22,10 @@
 
 {% block personcontent %}
 <div class="activity-edit">
-            
+
-            <div id="activity"></div> {# <=== vue component #}
+    <div id="activity"></div> {# <=== vue component #}
-            {% include 'ChillActivityBundle:Activity:edit.html.twig' %}
+    {% include 'ChillActivityBundle:Activity:edit.html.twig' %}
-            
+
 </div>
 {% endblock %}
 
@@ -33,7 +33,7 @@
     {{ encore_entry_link_tags('mod_async_upload') }}
     <script type="text/javascript">
         window.addEventListener('DOMContentLoaded', function (e) {
-            chill.displayAlertWhenLeavingModifiedForm('form[name="{{ edit_form.vars.form.vars.name }}"]', 
+            chill.displayAlertWhenLeavingModifiedForm('form[name="{{ edit_form.vars.form.vars.name }}"]',
             '{{ "You are going to leave a page with unsubmitted data. Are you sure you want to leave ?"|trans }}');
         });
         window.activity = {{ activity_json|json_encode|raw }};

src/Bundle/ChillActivityBundle/Resources/views/Activity/newPerson.html.twig

@@ -6,10 +6,10 @@
 
 {% block personcontent %}
 <div class="activity-new">
-            
+
-            <div id="activity"></div> {# <=== vue component #}
+    <div id="activity"></div> {# <=== vue component #}
-            {% include 'ChillActivityBundle:Activity:new.html.twig' with {'context': 'person'} %}
+    {% include 'ChillActivityBundle:Activity:new.html.twig' with {'context': 'person'} %}
-            
+
 </div>
 {% endblock %}
 
@@ -17,7 +17,7 @@
     {{ encore_entry_link_tags('mod_async_upload') }}
     <script type="text/javascript">
         window.addEventListener('DOMContentLoaded', function (e) {
-            chill.displayAlertWhenLeavingUnsubmittedForm('form[name="{{ form.vars.form.vars.name }}"]', 
+            chill.displayAlertWhenLeavingUnsubmittedForm('form[name="{{ form.vars.form.vars.name }}"]',
             '{{ "You are going to leave a page with unsubmitted data. Are you sure you want to leave ?"|trans }}');
         });
         window.activity = {{ activity_json|json_encode|raw }};