Create address on the fly field in event form

src/Bundle/ChillEventBundle/Controller/EventController.php

@@ -41,6 +41,7 @@ use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\HttpFoundation\StreamedResponse;
 use Symfony\Component\HttpKernel\Exception\AccessDeniedHttpException;
 use Symfony\Component\Security\Core\Security;
+use Symfony\Component\Serializer\SerializerInterface;
 use Symfony\Contracts\Translation\TranslatorInterface;
 
 /**
@@ -59,6 +60,8 @@ final class EventController extends AbstractController
         private readonly PaginatorFactory $paginator,
         private readonly Security $security,
         private readonly \Doctrine\Persistence\ManagerRegistry $managerRegistry,
+        private readonly SerializerInterface $serializer,
+
     ) {}
 
     #[\Symfony\Component\Routing\Annotation\Route(path: '/{_locale}/event/event/{event_id}/delete', name: 'chill_event__event_delete', requirements: ['event_id' => '\d+'], methods: ['GET', 'POST', 'DELETE'])]
@@ -202,9 +205,12 @@ final class EventController extends AbstractController
             return $this->redirectToRoute('chill_event__event_show', ['event_id' => $entity->getId()]);
         }
 
+        $entity_array = $this->serializer->normalize($entity, 'json', ['groups' => 'read']);
+
         return $this->render('@ChillEvent/Event/new.html.twig', [
             'entity' => $entity,
             'form' => $form->createView(),
+            'entity_json' => $entity_array,
         ]);
     }
 

src/Bundle/ChillEventBundle/Entity/Event.php

@@ -27,6 +27,7 @@ use Doctrine\Common\Collections\ArrayCollection;
 use Doctrine\Common\Collections\Collection;
 use Doctrine\ORM\Mapping as ORM;
 use Symfony\Component\Validator\Constraints as Assert;
+use Symfony\Component\Serializer\Annotation as Serializer;
 
 /**
  * Class Event.
@@ -58,6 +59,7 @@ class Event implements HasCenterInterface, HasScopeInterface, TrackCreationInter
     private ?User $moderator = null;
 
     #[Assert\NotBlank]
+    #[Serializer\Groups(['read'])]
     #[ORM\Column(type: \Doctrine\DBAL\Types\Types::STRING, length: 150)]
     private ?string $name = null;
 
@@ -65,13 +67,19 @@ class Event implements HasCenterInterface, HasScopeInterface, TrackCreationInter
      * @var Collection<int, Participation>
      */
     #[ORM\OneToMany(mappedBy: 'event', targetEntity: Participation::class)]
+    #[Serializer\Groups(['read'])]
     private Collection $participations;
 
     #[Assert\NotNull]
+    #[Serializer\Groups(['read'])]
     #[ORM\ManyToOne(targetEntity: EventType::class)]
     private ?EventType $type = null;
 
+    /**
+     * @var Collection<int, EventTheme>
+     */
     #[ORM\ManyToMany(targetEntity: EventTheme::class)]
+    #[Serializer\Groups(['read'])]
     #[ORM\JoinTable('chill_event_eventtheme')]
     private Collection $themes;
 
@@ -79,6 +87,7 @@ class Event implements HasCenterInterface, HasScopeInterface, TrackCreationInter
     private CommentEmbeddable $comment;
 
     #[ORM\ManyToOne(targetEntity: Location::class)]
+    #[Serializer\Groups(['read'])]
     #[ORM\JoinColumn(nullable: true)]
     private ?Location $location = null;
 

src/Bundle/ChillEventBundle/Form/EventType.php

@@ -14,29 +14,27 @@ namespace Chill\EventBundle\Form;
 use Chill\DocStoreBundle\Entity\StoredObject;
 use Chill\DocStoreBundle\Form\StoredObjectType;
 use Chill\EventBundle\Entity\Event;
-use Chill\EventBundle\Entity\EventTheme;
 use Chill\EventBundle\Form\Type\PickEventThemeType;
 use Chill\EventBundle\Form\Type\PickEventTypeType;
-use Chill\EventBundle\Repository\EventThemeRepository;
 use Chill\MainBundle\Entity\Center;
+use Chill\MainBundle\Form\DataTransformer\IdToLocationDataTransformer;
 use Chill\MainBundle\Form\Type\ChillCollectionType;
 use Chill\MainBundle\Form\Type\ChillDateTimeType;
 use Chill\MainBundle\Form\Type\CommentType;
 use Chill\MainBundle\Form\Type\PickUserDynamicType;
-use Chill\MainBundle\Form\Type\PickUserLocationType;
 use Chill\MainBundle\Form\Type\ScopePickerType;
-use Chill\MainBundle\Templating\TranslatableStringHelperInterface;
-use Symfony\Bridge\Doctrine\Form\Type\EntityType;
 use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\HiddenType;
 use Symfony\Component\Form\Extension\Core\Type\MoneyType;
 use Symfony\Component\Form\Extension\Core\Type\TextType;
 use Symfony\Component\Form\FormBuilderInterface;
 use Symfony\Component\OptionsResolver\OptionsResolver;
-use Symfony\Contracts\Translation\TranslatorInterface;
 
 class EventType extends AbstractType
 {
-    public function __construct(private readonly EventThemeRepository $eventThemeRepository, private readonly TranslatorInterface $translator, private readonly TranslatableStringHelperInterface $translatableStringHelper) {}
+    public function __construct(
+        private readonly IdToLocationDataTransformer $idToLocationDataTransformer,
+    ) {}
 
     public function buildForm(FormBuilderInterface $builder, array $options)
     {
@@ -63,9 +61,6 @@ class EventType extends AbstractType
             ->add('moderator', PickUserDynamicType::class, [
                 'label' => 'Pick a moderator',
             ])
-            ->add('location', PickUserLocationType::class, [
-                'label' => 'event.fields.location',
-            ])
             ->add('comment', CommentType::class, [
                 'label' => 'Comment',
                 'required' => false,
@@ -85,6 +80,10 @@ class EventType extends AbstractType
                 'label' => 'event.fields.organizationCost',
                 'help' => 'event.form.organisationCost_help',
             ]);
+
+        $builder->add('location', HiddenType::class)
+            ->get('location')
+            ->addModelTransformer($this->idToLocationDataTransformer);
     }
 
     public function configureOptions(OptionsResolver $resolver)
@@ -103,6 +102,7 @@ class EventType extends AbstractType
      */
     public function getBlockPrefix()
     {
-        return 'chill_eventbundle_event';
+        // as the js shares some hardcoded items from the activity bundle, we have to rewrite block prefix
+        return 'chill_activitybundle_activity';
     }
 }

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 %}
+{% extends '@ChillEvent/layout.html.twig' %}
-{{ encore_entry_script_tags("mod_async_upload") }}
-{{ encore_entry_script_tags("mod_pickentity_type") }}
 
-{% 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 %}

src/Bundle/ChillEventBundle/chill.webpack.config.js

@@ -1,3 +1,10 @@
 module.exports = function (encore, entries) {
   entries.push(__dirname + "/Resources/public/chill/index.js");
+
+  encore.addEntry(
+    "vue_event",
+    __dirname + "/Resources/public/vuejs/index.js",
+  );
 };
+
+

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue

@@ -21,10 +21,10 @@
         >
             <template #header>
                 <h2 class="modal-title">
-                    {{ $t(getTextTitle) }}
+                    {{ trans(getTextTitle) }}
                     <span v-if="flag.loading" class="loading">
                         <i class="fa fa-circle-o-notch fa-spin fa-fw" />
-                        <span class="sr-only">{{ $t("loading") }}</span>
+                        <span class="sr-only">{{ trans(ADDRESS_LOADING) }}</span>
                     </span>
                 </h2>
             </template>
@@ -43,7 +43,7 @@
 
             <template #footer>
                 <button @click="openEditPane" class="btn btn-create">
-                    {{ $t("create_a_new_address") }}
+                    {{ trans(CREATE_A_NEW_ADDRESS) }}
                 </button>
             </template>
         </modal>
@@ -62,13 +62,13 @@
             >
                 <template #before v-if="!bypassFirstStep">
                     <a class="btn btn-cancel" @click="resetPane">
-                        {{ $t("action.cancel") }}
+                        {{ trans(CANCEL) }}
                     </a>
                 </template>
                 <template #action>
                     <li>
                         <button @click="openEditPane" class="btn btn-create">
-                            {{ $t("create_a_new_address") }}
+                            {{ trans(CREATE_A_NEW_ADDRESS) }}
                         </button>
                     </li>
                 </template>
@@ -85,10 +85,10 @@
         >
             <template #header>
                 <h2 class="modal-title">
-                    {{ $t(getTextTitle) }}
+                    {{ trans(getTextTitle) }}
                     <span v-if="flag.loading" class="loading">
                         <i class="fa fa-circle-o-notch fa-spin fa-fw" />
-                        <span class="sr-only">{{ $t("loading") }}</span>
+                        <span class="sr-only">{{ trans(ADDRESS_LOADING) }}</span>
                     </span>
                 </h2>
             </template>
@@ -108,17 +108,17 @@
             </template>
 
             <template #footer>
-                <!--<button class="btn btn-cancel change-icon" @click="resetPane">{{ $t('action.cancel') }}</button>-->
+                <!--<button class="btn btn-cancel change-icon" @click="resetPane">{{ trans(CANCEL) }}</button>-->
                 <button
                     v-if="!this.context.edit && this.useDatePane"
                     class="btn btn-update change-icon"
                     @click="closeEditPane"
                 >
-                    {{ $t("nav.next") }}
+                    {{ trans(NEXT) }}
                     <i class="fa fa-fw fa-arrow-right" />
                 </button>
                 <button v-else class="btn btn-save" @click="closeEditPane">
-                    {{ $t("action.save") }}
+                    {{ trans(SAVE) }}
                 </button>
             </template>
         </modal>
@@ -139,7 +139,7 @@
             >
                 <template #before>
                     <a class="btn btn-cancel" @click="resetPane">
-                        {{ $t("action.cancel") }}
+                        {{ trans(CANCEL) }}
                     </a>
                 </template>
                 <template #action>
@@ -148,13 +148,13 @@
                             class="btn btn-update change-icon"
                             @click="closeEditPane"
                         >
-                            {{ $t("nav.next") }}
+                            {{ trans(NEXT) }}
                             <i class="fa fa-fw fa-arrow-right" />
                         </button>
                     </li>
                     <li v-else>
                         <button class="btn btn-save" @click="closeEditPane">
-                            {{ $t("action.save") }}
+                            {{ trans(SAVE) }}
                         </button>
                     </li>
                 </template>
@@ -171,10 +171,10 @@
         >
             <template #header>
                 <h2 class="modal-title">
-                    {{ $t(getTextTitle) }}
+                    {{ trans(getTextTitle) }}
                     <span v-if="flag.loading" class="loading">
                         <i class="fa fa-circle-o-notch fa-spin fa-fw" />
-                        <span class="sr-only">{{ $t("loading") }}</span>
+                        <span class="sr-only">{{ trans(ADDRESS_LOADING) }}</span>
                     </span>
                 </h2>
             </template>
@@ -193,10 +193,10 @@
             <template #footer>
                 <button class="btn btn-misc" @click="openEditPane">
                     <i class="fa fa-fw fa-arrow-left" />
-                    {{ $t("nav.previous") }}
+                    {{ trans(PREVIOUS) }}
                 </button>
                 <button class="btn btn-save" @click="closeDatePane">
-                    {{ $t("action.save") }}
+                    {{ trans(SAVE) }}
                 </button>
                 <!-- -->
             </template>
@@ -216,13 +216,13 @@
                 <template #before>
                     <button class="btn btn-misc" @click="openEditPane">
                         <i class="fa fa-fw fa-arrow-left" />
-                        {{ $t("nav.previous") }}
+                        {{ trans(PREVIOUS) }}
                     </button>
                 </template>
                 <template #action>
                     <li>
                         <button class="btn btn-save" @click="closeDatePane">
-                            {{ $t("action.save") }}
+                            {{ trans(SAVE) }}
                         </button>
                     </li>
                 </template>
@@ -244,9 +244,16 @@ import {
     postPostalCode,
 } from "../api";
 import {
-    postAddressToPerson,
+    CREATE_A_NEW_ADDRESS,
-    postAddressToHousehold,
+    ADDRESS_LOADING,
-} from "ChillPersonAssets/vuejs/_api/AddAddress.js";
+    ACTIVITY_CREATE_ADDRESS,
+    ACTIVITY_EDIT_ADDRESS,
+    CANCEL,
+    SAVE,
+    PREVIOUS,
+    NEXT,
+    trans,
+} from "translator";
 import ShowPane from "./ShowPane.vue";
 import SuggestPane from "./SuggestPane.vue";
 import EditPane from "./EditPane.vue";
@@ -254,6 +261,17 @@ import DatePane from "./DatePane.vue";
 
 export default {
     name: "AddAddress",
+    setup() {
+        return {
+            trans,
+            CREATE_A_NEW_ADDRESS,
+            ADDRESS_LOADING,
+            CANCEL,
+            SAVE,
+            PREVIOUS,
+            NEXT
+        };
+    },
     props: ["context", "options", "addressChangedCallback"],
     components: {
         Modal,
@@ -373,9 +391,11 @@ export default {
                 (this.options.title.edit !== null ||
                     this.options.title.create !== null)
             ) {
+                console.log('this.options.title', this.options.title)
+
                 return this.context.edit
-                    ? this.options.title.edit
+                    ? ACTIVITY_EDIT_ADDRESS
-                    : this.options.title.create;
+                    : ACTIVITY_CREATE_ADDRESS;
             }
             return this.context.edit
                 ? this.defaultz.title.edit

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressMore.vue

@@ -1,6 +1,6 @@
 <template>
     <h4 class="h3">
-        {{ $t("fill_an_address") }}
+        {{ trans(ADDRESS_FILL_AN_ADDRESS) }}
     </h4>
     <div class="row my-3">
         <div class="col-lg-6" v-if="!isNoAddress">
@@ -9,40 +9,40 @@
                     class="form-control"
                     type="text"
                     name="floor"
-                    :placeholder="$t('floor')"
+                    :placeholder="trans(ADDRESS_FLOOR)"
                     v-model="floor"
                 />
-                <label for="floor">{{ $t("floor") }}</label>
+                <label for="floor">{{ trans(ADDRESS_FLOOR) }}</label>
             </div>
             <div class="form-floating my-1">
                 <input
                     class="form-control"
                     type="text"
                     name="corridor"
-                    :placeholder="$t('corridor')"
+                    :placeholder="trans(ADDRESS_CORRIDOR)"
                     v-model="corridor"
                 />
-                <label for="corridor">{{ $t("corridor") }}</label>
+                <label for="corridor">{{ trans(ADDRESS_CORRIDOR) }}</label>
             </div>
             <div class="form-floating my-1">
                 <input
                     class="form-control"
                     type="text"
                     name="steps"
-                    :placeholder="$t('steps')"
+                    :placeholder="trans(ADDRESS_STEPS)"
                     v-model="steps"
                 />
-                <label for="steps">{{ $t("steps") }}</label>
+                <label for="steps">{{ trans(ADDRESS_STEPS) }}</label>
             </div>
             <div class="form-floating my-1">
                 <input
                     class="form-control"
                     type="text"
                     name="flat"
-                    :placeholder="$t('flat')"
+                    :placeholder="trans(ADDRESS_FLAT)"
                     v-model="flat"
                 />
-                <label for="flat">{{ $t("flat") }}</label>
+                <label for="flat">{{ trans(ADDRESS_FLAT) }}</label>
             </div>
         </div>
         <div :class="isNoAddress ? 'col-lg-12' : 'col-lg-6'">
@@ -52,10 +52,10 @@
                     type="text"
                     name="buildingName"
                     maxlength="255"
-                    :placeholder="$t('buildingName')"
+                    :placeholder="trans(ADDRESS_BUILDING_NAME)"
                     v-model="buildingName"
                 />
-                <label for="buildingName">{{ $t("buildingName") }}</label>
+                <label for="buildingName">{{ trans(ADDRESS_BUILDING_NAME) }}</label>
             </div>
             <div class="form-floating my-1">
                 <input
@@ -63,10 +63,10 @@
                     type="text"
                     name="extra"
                     maxlength="255"
-                    :placeholder="$t('extra')"
+                    :placeholder="trans(ADDRESS_EXTRA)"
                     v-model="extra"
                 />
-                <label for="extra">{{ $t("extra") }}</label>
+                <label for="extra">{{ trans(ADDRESS_EXTRA) }}</label>
             </div>
             <div class="form-floating my-1" v-if="!isNoAddress">
                 <input
@@ -74,18 +74,46 @@
                     type="text"
                     name="distribution"
                     maxlength="255"
-                    :placeholder="$t('distribution')"
+                    :placeholder="trans(ADDRESS_DISTRIBUTION)"
                     v-model="distribution"
                 />
-                <label for="distribution">{{ $t("distribution") }}</label>
+                <label for="distribution">{{ trans(ADDRESS_DISTRIBUTION) }}</label>
             </div>
         </div>
     </div>
 </template>
 
 <script>
+import {
+    ADDRESS_STREET,
+    ADDRESS_STREET_NUMBER,
+    ADDRESS_FLOOR,
+    ADDRESS_CORRIDOR,
+    ADDRESS_STEPS,
+    ADDRESS_FLAT,
+    ADDRESS_BUILDING_NAME,
+    ADDRESS_DISTRIBUTION,
+    ADDRESS_EXTRA,
+    ADDRESS_FILL_AN_ADDRESS,
+    trans,
+} from "translator";
 export default {
     name: "AddressMore",
+    setup() {
+        return {
+            ADDRESS_STREET,
+            ADDRESS_STREET_NUMBER,
+            ADDRESS_FLOOR,
+            ADDRESS_CORRIDOR,
+            ADDRESS_STEPS,
+            ADDRESS_FLAT,
+            ADDRESS_BUILDING_NAME,
+            ADDRESS_DISTRIBUTION,
+            ADDRESS_EXTRA,
+            ADDRESS_FILL_AN_ADDRESS,
+            trans,
+        };
+    },
     props: ["entity", "isNoAddress"],
     computed: {
         floor: {

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/AddressSelection.vue

@@ -1,16 +1,16 @@
 <template>
     <div class="my-1">
         <label class="col-form-label" for="addressSelector">{{
-            $t("address")
+            trans(ADDRESS_ADDRESS)
         }}</label>
         <VueMultiselect
             id="addressSelector"
             v-model="value"
-            :placeholder="$t('select_address')"
+            :placeholder="trans(ADDRESS_SELECT_ADDRESS)"
-            :tag-placeholder="$t('create_address')"
+            :tag-placeholder="trans(ADDRESS_CREATE_ADDRESS)"
-            :select-label="$t('multiselect.select_label')"
+            :select-label="trans(MULTISELECT_SELECT_LABEL)"
-            :deselect-label="$t('create_address')"
+            :deselect-label="trans(ADDRESS_CREATE_ADDRESS)"
-            :selected-label="$t('multiselect.selected_label')"
+            :selected-label="trans(MULTISELECT_SELECTED_LABEL)"
             @search-change="listenInputSearch"
             :internal-search="false"
             ref="addressSelector"
@@ -42,10 +42,10 @@
                     class="form-control"
                     type="text"
                     name="street"
-                    :placeholder="$t('street')"
+                    :placeholder="trans(ADDRESS_STREET)"
                     v-model="street"
                 />
-                <label for="street">{{ $t("street") }}</label>
+                <label for="street">{{ trans(ADDRESS_STREET) }}</label>
             </div>
         </div>
         <div class="col-2">
@@ -54,10 +54,10 @@
                     class="form-control"
                     type="text"
                     name="streetNumber"
-                    :placeholder="$t('streetNumber')"
+                    :placeholder="trans(ADDRESS_STREET_NUMBER)"
                     v-model="streetNumber"
                 />
-                <label for="streetNumber">{{ $t("streetNumber") }}</label>
+                <label for="streetNumber">{{ trans(ADDRESS_STREET_NUMBER) }}</label>
             </div>
         </div>
     </div>
@@ -69,10 +69,32 @@ import {
     searchReferenceAddresses,
     fetchReferenceAddresses,
 } from "../../api.js";
+import {
+    ADDRESS_STREET,
+    ADDRESS_STREET_NUMBER,
+    ADDRESS_ADDRESS,
+    MULTISELECT_SELECTED_LABEL,
+    MULTISELECT_SELECT_LABEL,
+    ADDRESS_SELECT_ADDRESS,
+    ADDRESS_CREATE_ADDRESS,
+    trans,
+} from "translator";
 
 export default {
     name: "AddressSelection",
     components: { VueMultiselect },
+    setup() {
+        return {
+            ADDRESS_STREET,
+            ADDRESS_STREET_NUMBER,
+            ADDRESS_ADDRESS,
+            MULTISELECT_SELECTED_LABEL,
+            MULTISELECT_SELECT_LABEL,
+            ADDRESS_SELECT_ADDRESS,
+            ADDRESS_CREATE_ADDRESS,
+            trans,
+        };
+    },
     props: ["entity", "context", "updateMapCenter", "flag", "checkErrors"],
     data() {
         return {

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CitySelection.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="my-1">
-        <label class="col-form-label">{{ $t("city") }}</label>
+        <label class="col-form-label">{{ trans(ADDRESS_CITY) }}</label>
         <VueMultiselect
             id="citySelector"
             v-model="value"
@@ -12,15 +12,15 @@
             track-by="id"
             label="value"
             :custom-label="transName"
-            :placeholder="$t('select_city')"
+            :placeholder="trans(ADDRESS_SELECT_CITY)"
-            :select-label="$t('multiselect.select_label')"
+            :select-label="trans(MULTISELECT_SELECT_LABEL)"
-            :deselect-label="$t('create_postal_code')"
+            :deselect-label="trans(ADDRESS_CREATE_POSTAL_CODE)"
-            :selected-label="$t('multiselect.selected_label')"
+            :selected-label="trans(MULTISELECT_SELECTED_LABEL)"
             :taggable="true"
             :multiple="false"
             :internal-search="false"
             @tag="addPostcode"
-            :tag-placeholder="$t('create_postal_code')"
+            :tag-placeholder="trans(ADDRESS_CREATE_POSTAL_CODE)"
             :loading="isLoading"
             :options="cities"
         />
@@ -36,10 +36,10 @@
                     class="form-control"
                     type="text"
                     id="code"
-                    :placeholder="$t('postalCode_code')"
+                    :placeholder="trans(ADDRESS_POSTAL_CODE_CODE)"
                     v-model="code"
                 />
-                <label for="code">{{ $t("postalCode_code") }}</label>
+                <label for="code">{{ trans(ADDRESS_POSTAL_CODE_CODE) }}</label>
             </div>
         </div>
         <div class="col-8">
@@ -48,10 +48,10 @@
                     class="form-control"
                     type="text"
                     id="name"
-                    :placeholder="$t('postalCode_name')"
+                    :placeholder="trans(ADDRESS_POSTAL_CODE_NAME)"
                     v-model="name"
                 />
-                <label for="name">{{ $t("postalCode_name") }}</label>
+                <label for="name">{{ trans(ADDRESS_POSTAL_CODE_NAME) }}</label>
             </div>
         </div>
     </div>
@@ -60,10 +60,32 @@
 <script>
 import VueMultiselect from "vue-multiselect";
 import { searchCities, fetchCities } from "../../api.js";
+import {
+    MULTISELECT_SELECTED_LABEL,
+    MULTISELECT_SELECT_LABEL,
+    ADDRESS_POSTAL_CODE_CODE,
+    ADDRESS_POSTAL_CODE_NAME,
+    ADDRESS_CREATE_POSTAL_CODE,
+    ADDRESS_CITY,
+    ADDRESS_SELECT_CITY,
+    trans,
+} from "translator";
 
 export default {
     name: "CitySelection",
     components: { VueMultiselect },
+    setup() {
+        return {
+            MULTISELECT_SELECTED_LABEL,
+            MULTISELECT_SELECT_LABEL,
+            ADDRESS_CITY,
+            ADDRESS_SELECT_CITY,
+            ADDRESS_POSTAL_CODE_CODE,
+            ADDRESS_POSTAL_CODE_NAME,
+            ADDRESS_CREATE_POSTAL_CODE,
+            trans,
+        };
+    },
     props: [
         "entity",
         "context",

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress/CountrySelection.vue

@@ -1,19 +1,19 @@
 <template>
     <div class="my-1">
         <label class="col-form-label" for="countrySelect">{{
-            $t("country")
+            trans(ADDRESS_COUNTRY)
         }}</label>
         <VueMultiselect
             id="countrySelect"
             label="name"
             track-by="id"
             :custom-label="transName"
-            :placeholder="$t('select_country')"
+            :placeholder="trans(ADDRESS_SELECT_COUNTRY)"
             :options="sortedCountries"
             v-model="value"
-            :select-label="$t('multiselect.select_label')"
+            :select-label="trans(MULTISELECT_SELECT_LABEL)"
-            :deselect-label="$t('multiselect.deselect_label')"
+            :deselect-label="trans(MULTISELECT_DESELECT_LABEL)"
-            :selected-label="$t('multiselect.selected_label')"
+            :selected-label="trans(MULTISELECT_SELECTED_LABEL)"
             @select="selectCountry"
             @remove="remove"
         />
@@ -22,10 +22,28 @@
 
 <script>
 import VueMultiselect from "vue-multiselect";
+import {
+    MULTISELECT_SELECTED_LABEL,
+    MULTISELECT_SELECT_LABEL,
+    MULTISELECT_DESELECT_LABEL,
+    ADDRESS_COUNTRY,
+    ADDRESS_SELECT_COUNTRY,
+    trans,
+} from "translator";
 
 export default {
     name: "CountrySelection",
     components: { VueMultiselect },
+    setup() {
+        return {
+            MULTISELECT_SELECTED_LABEL,
+            MULTISELECT_SELECT_LABEL,
+            MULTISELECT_DESELECT_LABEL,
+            ADDRESS_COUNTRY,
+            ADDRESS_SELECT_COUNTRY,
+            trans,
+        };
+    },
     props: ["context", "entity", "flag", "checkErrors"],
     emits: ["getCities"],
     data() {

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditPane.vue

@@ -18,7 +18,7 @@
         </div>
 
         <h4 class="h3">
-            {{ $t("select_an_address_title") }}
+            {{ trans(ADDRESS_SELECT_AN_ADDRESS_TITLE) }}
         </h4>
         <div class="row my-3">
             <div class="col-lg-6">
@@ -31,7 +31,7 @@
                         :value="valueConfidential"
                     />
                     <label class="form-check-label" for="isConfidential">
-                        {{ $t("isConfidential") }}
+                        {{ trans(ADDRESS_IS_CONFIDENTIAL) }}
                     </label>
                 </div>
                 <div class="form-check">
@@ -43,7 +43,7 @@
                         :value="value"
                     />
                     <label class="form-check-label" for="isNoAddress">
-                        {{ $t("isNoAddress") }}
+                        {{ trans(ADDRESS_IS_NO_ADDRESS) }}
                     </label>
                 </div>
 
@@ -108,6 +108,13 @@ import AddressSelection from "./AddAddress/AddressSelection";
 import AddressMap from "./AddAddress/AddressMap";
 import AddressMore from "./AddAddress/AddressMore";
 import ActionButtons from "./ActionButtons.vue";
+import {
+    ADDRESS_SELECT_AN_ADDRESS_TITLE,
+    ADDRESS_IS_CONFIDENTIAL,
+    ADDRESS_IS_NO_ADDRESS,
+    trans,
+} from "translator";
+
 
 export default {
     name: "EditPane",
@@ -119,6 +126,14 @@ export default {
         AddressMore,
         ActionButtons,
     },
+    setup() {
+        return {
+            trans,
+            ADDRESS_SELECT_AN_ADDRESS_TITLE,
+            ADDRESS_IS_CONFIDENTIAL,
+            ADDRESS_IS_NO_ADDRESS
+        };
+    },
     props: [
         "context",
         "options",

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowPane.vue

@@ -5,7 +5,7 @@
                 v-if="flag.loading"
                 class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"
             />
-            <span class="sr-only">{{ $t("loading") }}</span>
+            <span class="sr-only">{{ trans(ADDRESS_LOADING) }}</span>
         </div>
 
         <div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
@@ -13,8 +13,8 @@
         </div>
 
         <div v-if="flag.success" class="alert alert-success">
-            {{ $t(getSuccessText) }}
+            {{ trans(getSuccessText) }}
-            <span v-if="forceRedirect">{{ $t("wait_redirection") }}</span>
+            <span v-if="forceRedirect">{{ trans(ADDRESS_WAIT_REDIRECTION) }}</span>
         </div>
 
         <div
@@ -28,7 +28,7 @@
             <div class="no-address-yet">
                 <i class="fa fa-map-marker" aria-hidden="true" />
                 <p class="chill-no-data-statement">
-                    {{ $t("not_yet_address") }}
+                    {{ trans(ADDRESS_NOT_YET_ADDRESS) }}
                 </p>
 
                 <action-buttons
@@ -43,10 +43,10 @@
                             :class="getClassButton"
                             type="button"
                             name="button"
-                            :title="$t(getTextButton)"
+                            :title="trans(getTextButton)"
                         >
                             <span v-if="displayTextButton">{{
-                                $t(getTextButton)
+                                trans(getTextButton)
                             }}</span>
                         </button>
                     </template>
@@ -71,10 +71,10 @@
                         :class="getClassButton"
                         type="button"
                         name="button"
-                        :title="$t(getTextButton)"
+                        :title="trans(getTextButton)"
                     >
                         <span v-if="displayTextButton">{{
-                            $t(getTextButton)
+                            trans(getTextButton)
                         }}</span>
                     </button>
                 </template>
@@ -95,11 +95,11 @@
                     :class="getClassButton"
                     type="button"
                     name="button"
-                    :title="$t(getTextButton)"
+                    :title="trans(getTextButton)"
                 >
                     <span v-if="displayTextButton">{{
-                        $t(getTextButton)
+                            trans(getTextButton)
-                    }}</span>
+                        }}</span>
                 </button>
             </template>
         </action-buttons>
@@ -109,13 +109,37 @@
 <script>
 import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";
 import ActionButtons from "./ActionButtons.vue";
+import {
+    ACTIVITY_CREATE_ADDRESS,
+    ACTIVITY_EDIT_ADDRESS,
+    ADDRESS_NOT_YET_ADDRESS,
+    ADDRESS_WAIT_REDIRECTION,
+    ADDRESS_LOADING,
+    ADDRESS_ADDRESS_EDIT_SUCCESS,
+    ADDRESS_ADDRESS_NEW_SUCCESS,
+    trans,
+} from "translator";
 
 export default {
     name: "ShowPane",
+    methods: {
+    },
     components: {
         AddressRenderBox,
         ActionButtons,
     },
+    setup() {
+        return {
+            trans,
+            ACTIVITY_CREATE_ADDRESS,
+            ACTIVITY_EDIT_ADDRESS,
+            ADDRESS_NOT_YET_ADDRESS,
+            ADDRESS_WAIT_REDIRECTION,
+            ADDRESS_LOADING,
+            ADDRESS_ADDRESS_NEW_SUCCESS,
+            ADDRESS_ADDRESS_EDIT_SUCCESS
+        };
+    },
     props: [
         "context",
         "defaultz",
@@ -156,18 +180,20 @@ export default {
                 (this.options.button.text.edit !== null ||
                     this.options.button.text.create !== null)
             ) {
+                // console.log('this.options.button.text', this.options.button.text)
                 return this.context.edit
-                    ? this.options.button.text.edit
+                    ? ACTIVITY_CREATE_ADDRESS
-                    : this.options.button.text.create;
+                    : ACTIVITY_EDIT_ADDRESS;
             }
+            console.log('defaultz', this.defaultz);
             return this.context.edit
                 ? this.defaultz.button.text.edit
                 : this.defaultz.button.text.create;
         },
         getSuccessText() {
             return this.context.edit
-                ? "address_edit_success"
+                ? ADDRESS_ADDRESS_EDIT_SUCCESS
-                : "address_new_success";
+                : ADDRESS_ADDRESS_NEW_SUCCESS;
         },
         onlyButton() {
             return typeof this.options.onlyButton !== "undefined"