Refactor address vue app and create a PickAddressType

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);
+});