Refactor address vue app and create a PickAddressType

src/Bundle/ChillMainBundle/Form/Type/DataTransformer/AddressToIdDataTransformer.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace Chill\MainBundle\Form\Type\DataTransformer;
+
+use Chill\MainBundle\Repository\AddressRepository;
+use Symfony\Component\Form\DataTransformerInterface;
+use Symfony\Component\Form\Exception\TransformationFailedException;
+
+final class AddressToIdDataTransformer implements DataTransformerInterface
+{
+    private AddressRepository $addressRepository;
+
+    public function __construct(AddressRepository $addressRepository)
+    {
+        $this->addressRepository = $addressRepository;
+    }
+
+    public function reverseTransform($value)
+    {
+        if (NULL === $value || '' === $value) {
+            return null;
+        }
+
+        $address = $this->addressRepository->find($value);
+
+        if (NULL === $address) {
+            $failure = new TransformationFailedException(sprintf("Address with id %s does not exists", $value));
+            $failure
+                ->setInvalidMessage("The given {{ value }} is not a valid address id", [ '{{ value }}' => $value]);
+
+            throw $failure;
+        }
+
+        return $address;
+    }
+
+    public function transform($value)
+    {
+        if (NULL === $value) {
+            return '';
+        }
+
+        return $value->getId();
+    }
+}

src/Bundle/ChillMainBundle/Form/Type/PickAddressType.php

@@ -0,0 +1,52 @@
+<?php
+
+namespace Chill\MainBundle\Form\Type;
+
+use Chill\MainBundle\Entity\Address;
+use Chill\MainBundle\Form\Type\DataTransformer\AddressToIdDataTransformer;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\HiddenType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormView;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+final class PickAddressType extends AbstractType
+{
+    private AddressToIdDataTransformer $addressToIdDataTransformer;
+
+    public function __construct(AddressToIdDataTransformer $addressToIdDataTransformer)
+    {
+        $this->addressToIdDataTransformer = $addressToIdDataTransformer;
+    }
+
+    public function buildForm(FormBuilderInterface $builder, array $options)
+    {
+        $builder->addModelTransformer($this->addressToIdDataTransformer);
+    }
+
+    public function buildView(FormView $view, FormInterface $form, array $options)
+    {
+        $view->vars['uniqid'] = $view->vars['attr']['data-input-address'] =\uniqid('input_address_');
+        $view->vars['attr']['data-use-valid-from'] = $options['useValidFrom'];
+        $view->vars['attr']['data-use-valid-to'] = $options['useValidTo'];
+    }
+
+    public function configureOptions(OptionsResolver $resolver)
+    {
+        $resolver->setDefaults([
+            'class' => Address::class,
+            'useValidFrom' => false,
+            'useValidTo' => false,
+
+            // reset default from hidden type
+            'required' => true,
+            'error_bubbling' => false,
+        ]);
+    }
+
+    public function getParent()
+    {
+        return HiddenType::class;
+    }
+}

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue

@@ -17,7 +17,8 @@ export default {
    components: {
       AddAddress
    },
-   props: ['addAddress'],
+   props: ['addAddress', 'callback'],
+   emits: ['addressEdited', 'addressCreated'],
    computed: {
       context() {
          return this.addAddress.context;
@@ -46,6 +47,7 @@ export default {
 
             // address is already linked, just finish !
             this.$refs.addAddress.afterLastPaneAction({});
+            this.$emit('addressEdited', payload);
 
          // New created address
          } else {
@@ -57,6 +59,8 @@ export default {
       *  Post new created address to targetEntity
       */
       postAddressTo(payload) {
+         this.$emit('addressCreated', payload);
+
          console.log('postAddress', payload.addressId, 'To', payload.target, payload.targetId);
          switch (payload.target) {
             case 'household':

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/mod_input_address_index.js

@@ -0,0 +1,87 @@
+import {createApp} from 'vue';
+import {_createI18n} from 'ChillMainAssets/vuejs/_js/i18n';
+import {addressMessages} from './i18n';
+import App from './App.vue';
+
+const i18n = _createI18n(addressMessages);
+
+let inputs = document.querySelectorAll('input[type="hidden"][data-input-address]');
+
+const isNumeric = function(v) { return !isNaN(v); };
+
+inputs.forEach(el => {
+    let
+        addressId = el.value,
+        uniqid = el.dataset.inputAddress,
+        container = document.querySelector('div[data-input-address-container="' + uniqid + '"]'),
+        currentTarget = el,
+        i = 0,
+        isEdit = addressId !== '',
+        addressIdInt = addressId !== '' ? parseInt(addressId) : null
+    ;
+
+    if (container === null) {
+        throw Error("no container");
+    }
+
+    const app = createApp({
+        template: `<app v-bind:addAddress="this.addAddress" @address-created="associateToInput"></app>`,
+        data() {
+            return {
+                addAddress: {
+                    context: {
+                        // for legacy ? can be remove ?
+                        target: {
+                            name: 'input-address',
+                            id: addressIdInt,
+                        },
+                        edit: isEdit,
+                        addressId: addressIdInt,
+                    },
+                    options: {
+                        /// Options override default.
+                        /// null value take default component value defined in AddAddress data()
+                        button: {
+                            text: {
+                                create: null,
+                                edit: null,
+                            },
+                            size: null,
+                            displayText: false
+                        },
+
+                        /// Modal title text if create or edit address (trans chain, see i18n)
+                        title: {
+                            create: null,
+                            edit: null,
+                        },
+
+                        /// Display panes in Modal for step123
+                        openPanesInModal: true,
+
+                        /// Display actions buttons of panes in a sticky-form-button navbar
+                        stickyActions: false,
+
+                        /// Use Date fields
+                        useDate: {
+                            validFrom: el.dataset.useValidFrom === 'true',  //boolean, default: false
+                            validTo: el.dataset.useValidTo === 'true'       //boolean, default: false
+                        },
+
+                        /// Don't display show renderbox Address: showPane display only a button
+                        onlyButton: false,
+                    }
+                }
+            }
+        },
+        methods: {
+            associateToInput(payload) {
+                console.log(payload);
+                el.value = payload.addressId;
+            }
+        }
+    })
+        .use(i18n)
+        .component('app', App)
+        .mount(container);
+});

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

@@ -60,6 +60,7 @@ module.exports = function(encore, entries)
     encore.addEntry('mod_ckeditor5', __dirname + '/Resources/public/module/ckeditor5/index.js');
     encore.addEntry('mod_disablebuttons', __dirname + '/Resources/public/module/disable-buttons/index.js');
 
+    encore.addEntry('mod_input_address', __dirname + '/Resources/public/vuejs/Address/mod_input_address_index.js');
     // Vue entrypoints
     encore.addEntry('vue_address', __dirname + '/Resources/public/vuejs/Address/index.js');
     encore.addEntry('vue_onthefly', __dirname + '/Resources/public/vuejs/OnTheFly/index.js');

src/Bundle/ChillMainBundle/config/services/form.yaml

@@ -1,4 +1,5 @@
 services:
+
     chill.main.form.type.translatable.string:
         class: Chill\MainBundle\Form\Type\TranslatableStringFormType
         arguments:
@@ -128,3 +129,11 @@ services:
         tags:
             - { name: form.type }
 
+
+    Chill\MainBundle\Form\Type\PickAddressType:
+        autoconfigure: true
+        autowire: true
+
+    Chill\MainBundle\Form\DataTransform\AddressToIdDataTransformer:
+        autoconfigure: true
+        autowire: true