Create address on the fly field in event form

src/Bundle/ChillEventBundle/Resources/public/vuejs/App.vue

@@ -0,0 +1,14 @@
+<template>
+    <location />
+</template>
+
+<script>
+import Location from "ChillActivityAssets/vuejs/Activity/components/Location.vue";
+
+export default {
+    name: "App",
+    components: {
+        Location,
+    },
+};
+</script>

src/Bundle/ChillEventBundle/Resources/public/vuejs/index.js

@@ -0,0 +1,6 @@
+import { createApp } from "vue";
+
+import App from "./App.vue";
+import store from "./store";
+
+createApp(App).use(store).mount("#event");

src/Bundle/ChillEventBundle/Resources/public/vuejs/store.js

@@ -0,0 +1,79 @@
+import "es6-promise/auto";
+import { createStore } from "vuex";
+
+import prepareLocations from "ChillActivityAssets/vuejs/Activity/store.locations";
+import {whoami} from "ChillMainAssets/lib/api/user";
+import {mapEntity} from "ChillCalendarAssets/vuejs/Calendar/store/utils";
+import {postLocation} from "ChillActivityAssets/vuejs/Activity/api";
+
+const debug = process.env.NODE_ENV !== "production";
+
+const store = createStore({
+  strict: debug,
+  state: {
+    activity: window.entity, // activity is the event entity in this case (re-using component from activity bundle)
+    currentEvent: null,
+    availableLocations: [],
+    me: null,
+  },
+  getters: {
+
+  },
+  actions: {
+    addAvailableLocationGroup({ commit }, payload) {
+      commit("addAvailableLocationGroup", payload);
+    },
+    updateLocation({ commit }, value) {
+      // console.log("### action: updateLocation", value);
+      let hiddenLocation = document.getElementById(
+        "chill_activitybundle_activity_location",
+      );
+      if (value.onthefly) {
+        const body = {
+          type: "location",
+          name:
+            value.name === "__AccompanyingCourseLocation__" ? null : value.name,
+          locationType: {
+            id: value.locationType.id,
+            type: "location-type",
+          },
+        };
+        if (value.address.id) {
+          Object.assign(body, {
+            address: {
+              id: value.address.id,
+            },
+          });
+        }
+        postLocation(body)
+          .then((location) => (hiddenLocation.value = location.id))
+          .catch((err) => {
+            console.log(err.message);
+          });
+      } else {
+        hiddenLocation.value = value.id;
+      }
+      commit("updateLocation", value);
+    },
+  },
+  mutations: {
+    setWhoAmiI(state, me) {
+      state.me = me;
+    },
+    addAvailableLocationGroup(state, group) {
+      state.availableLocations.push(group);
+    },
+    updateLocation(state, value) {
+      // console.log("### mutation: updateLocation", value);
+      state.activity.location = value;
+    },
+  }
+});
+
+whoami().then((me) => {
+  store.commit("setWhoAmiI", me);
+});
+
+prepareLocations(store);
+
+export default store;

src/Bundle/ChillEventBundle/Resources/views/Event/new.html.twig

@@ -1,19 +1,19 @@
-{% extends '@ChillEvent/layout.html.twig' %} {% block js %}
-{{ encore_entry_script_tags("mod_async_upload") }}
-{{ encore_entry_script_tags("mod_pickentity_type") }}
+{% extends '@ChillEvent/layout.html.twig' %}
 
-{% endblock %} {% block css %}
+{% block css %}
 {{ encore_entry_link_tags("mod_async_upload") }}
 {{ encore_entry_link_tags("mod_pickentity_type") }}
+{{ encore_entry_link_tags('vue_event') }}
+{% endblock %}
 
-{% endblock %} {% block title 'Event creation'|trans %} {% block event_content
--%}
+{% block title 'Event creation'|trans %}
+
+{% block event_content -%}
 <div class="col-10">
     <h1>{{ "Event creation" | trans }}</h1>
 
     {{ form_start(form) }}
     {{ form_errors(form) }}
-{#    {{ form_row(form.circle) }}#}
     {{ form_row(form.name) }}
     {{ form_row(form.circle) }}
     {{ form_row(form.date) }}
@@ -21,6 +21,7 @@
     {{ form_row(form.themes) }}
     {{ form_row(form.moderator) }}
     {{ form_row(form.location) }}
+    <div id="location"></div>
     {{ form_row(form.organizationCost) }}
     {{ form_row(form.comment) }}
     {{ form_row(form.documents) }}
@@ -42,5 +43,18 @@
     </ul>
 
     {{ form_end(form) }}
+
+    <div id="event"></div>
+
 </div>
 {% endblock %}
+
+{% block js %}
+    {{ encore_entry_script_tags("mod_async_upload") }}
+    {{ encore_entry_script_tags("mod_pickentity_type") }}
+    {{ encore_entry_script_tags('vue_event') }}
+    <script type="text/javascript">
+        window.entity = {{ entity_json|json_encode|raw }};
+        {% if app.user.currentLocation is not null %}window.default_location_id = {{ app.user.currentLocation.id }};{% endif %}
+    </script>
+{% endblock %}