twig pass arguments to vue_address with dataset attributes

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

@@ -2,21 +2,13 @@
    <add-address
       v-bind:key="context.entity.type"
       v-bind:context="context"
-      v-bind:options="addAddress.options"
+      v-bind:options="options"
-      v-bind:result="addAddress.result"
       v-bind:addressChanged="submitAddress"
       ref="addAddress">
    </add-address>
 </template>
 
 <script>
-/*
-*  Address component is a uniq component for many contexts.
-*  Allow to create/attach/edit an address to
-*  - a person (new or edit address),
-*  - a household (move or edit address)
-*
-* */
 import AddAddress from './components/AddAddress.vue';
 import { patchAddress } from "./api";
 import { postAddressToHousehold, postAddressToPerson } from "ChillPersonAssets/vuejs/_api/AddAddress";
@@ -26,49 +18,19 @@ export default {
    components: {
       AddAddress
    },
-   data() {
+   props: ['addAddress'],
-      return {
+   computed: {
-         context: {
+      context() {
-            edit: window.mode === 'edit',
+         return this.addAddress.context;
-            entity: {
+      },
-               type: window.entityType,
+      options() {
-               id: window.entityId
+         return this.addAddress.options;
-            },
-            addressId: window.addressId | null,
-            backUrl: window.backUrl,
-            valid: {
-               from: new Date()
-            },
-         },
-         addAddress: {
-            options: {
-
-               /// Options override default.
-               /// null value take default component value defined in AddAddress data()
-               button: {
-                  text:  {
-                     create: window.buttonText || null,
-                     edit: window.buttonText || null
-                  },
-                  size: window.buttonSize || null,
-                  displayText: window.buttonDisplayText   //boolean, default: true
-               },
-
-               /// Modal title text if create or edit address (trans chain, see i18n)
-               title: {
-                  create: window.modalTitle || null,
-                  edit: window.modalTitle || null
-               },
-
-               /// Display each step in page or Modal
-               bindModal: {
-                  step1: window.binModalStep1,  //boolean, default: true
-                  step2: window.binModalStep2   //boolean, default: true
-               }
-            }
-         }
       }
    },
+   mounted() {
+      console.log('AddAddress: data context', this.context);
+      console.log('AddAddress: data options', this.options);
+   },
    methods: {
       displayErrors() {
          return this.$refs.addAddress.errorMsg;

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

@@ -1,13 +1,61 @@
 import { createApp } from 'vue';
-import App from './App.vue';
 import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
 import { addressMessages } from './i18n';
+import App from './App.vue';
 
 const i18n = _createI18n( addressMessages );
 
-const app = createApp({
+let containers = document.querySelectorAll('.address-container');
-    template: `<app></app>`,
+containers.forEach((container) => {
-})
+    const app = createApp({
-.use(i18n)
+        template: `<app v-bind:addAddress="this.addAddress" ></app>`,
-.component('app', App)
+        data() {
-.mount('#address');
+            return {
+                addAddress: {
+                    context: {
+                        edit: container.dataset.mode === 'edit',
+                        entity: {
+                            type: container.dataset.targetEntityName,
+                            id: container.dataset.targetEntityId
+                        },
+                        addressId: container.dataset.addressId | null,
+                        backUrl: container.dataset.backUrl,
+                        valid: {
+                            from: new Date()
+                        },
+                    },
+                    options: {
+
+                        /// Options override default.
+                        /// null value take default component value defined in AddAddress data()
+                        button: {
+                            text:  {
+                                create: container.dataset.buttonText || null,
+                                edit: container.dataset.buttonText || null
+                            },
+                            size: container.dataset.buttonSize || null,
+                            displayText: container.dataset.buttonDisplayText   //boolean, default: true
+                        },
+
+                        /// Modal title text if create or edit address (trans chain, see i18n)
+                        title: {
+                            create: container.dataset.modalTitle || null,
+                            edit: container.dataset.modalTitle || null
+                        },
+
+                        /// Display each step in page or Modal
+                        bindModal: {
+                            step1: container.dataset.bindModalStep1,  //boolean, default: true
+                            step2: container.dataset.bindModalStep2   //boolean, default: true
+                        }
+                    }
+                }
+            }
+        }
+    })
+    .use(i18n)
+    .component('app', App)
+    .mount(container);
+
+    console.log('container dataset', container.dataset);
+});

src/Bundle/ChillMainBundle/Resources/views/Address/_insert_vue_address.html.twig

@@ -14,54 +14,51 @@
     * buttonText    twig translated chain
     * buttonSize    bootstrap class like 'btn-sm'
     * buttonDisplayText     bool
-    * binModalStep1         bool
+    * bindModalStep1         bool
-    * binModalStep2         bool
+    * bindModalStep2         bool
 
 #}
-<div id="address"></div>
+<div class="address-container"
 
-<script type="text/javascript">
+     data-target-entity-name="{{ targetEntity.name|e('html_attr') }}"
-    window.vueRootComponent = 'app';
+     data-target-entity-id="{{ targetEntity.id|e('html_attr') }}"
-
-    window.entityType = '{{ targetEntity.name|e('js') }}';
-    window.entityId = '{{ targetEntity.id|e('js') }}';
 
     {% if 'edit' in app.request.get('_route') %}
-        window.mode = 'edit';
+        data-mode="edit"
-        window.addressId = {{ app.request.get('address_id')|e('js') }};
+        data-address-id="{{ app.request.get('address_id')|e('html_attr') }}"
     {% elseif mode is defined and mode == 'edit' %}
-        window.mode = 'edit';
+        data-mode="edit"
-        window.addressId = {{ addressId|e('js') }};
+        data-address-id="{{ addressId|e('html_attr') }}"
     {% endif %}
 
     {% if backUrl is defined %}
-        window.backUrl = '{{ backUrl|e('js') }}';
+        data-back-url="{{ backUrl|e('html_attr') }}"
     {% endif %}
 
     {% if modalTitle is defined %}
-        window.modalTitle = '{{ modalTitle|trans|e('js') }}';
+        data-modal-title="{{ modalTitle|trans|e('html_attr') }}"
     {% endif %}
 
     {% if buttonText is defined %}
-        window.buttonText = '{{ buttonText|trans|e('js') }}';
+        data-button-text="{{ buttonText|trans|e('html_attr') }}"
     {% endif %}
 
     {% if buttonSize is defined %}
-        window.buttonSize = '{{ buttonSize|e('js') }}';
+        data-button-size="{{ buttonSize|e('html_attr') }}"
     {% endif %}
 
     {% if buttonDisplayText is defined and buttonDisplayText == false %}
-        window.buttonDisplayText = false;
+        data-button-display-text=false
     {% endif %}
 
-    {% if binModalStep1 is defined and binModalStep1 == false %}
+    {% if bindModalStep1 is defined and bindModalStep1 == false %}
-        window.binModalStep1 = false;
+        data-bind-modal-step1=false
     {% endif %}
 
-    {% if binModalStep2 is defined and binModalStep2 == false %}
+    {% if bindModalStep2 is defined and bindModalStep2 == false %}
-        window.binModalStep2 = false;
+        data-bind-modal-step2=false
     {% endif %}
-</script>
+></div>
 
 {{ encore_entry_script_tags('vue_address') }}
 {{ encore_entry_link_tags('vue_address') }}

src/Bundle/ChillPersonBundle/Resources/views/Address/edit.html.twig

@@ -30,8 +30,8 @@
         {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
             targetEntity: { name: 'person', id: person.id },
             backUrl: path('chill_person_address_list', { 'person_id': person.id }),
-            binModalStep1: false,
+            bindModalStep1: false,
-            binModalStep2: false,
+            bindModalStep2: false,
         } %}
 
     {% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig

@@ -74,8 +74,8 @@
                             backUrl: path('chill_person_address_list', { 'person_id': person.id }),
                             mode: 'edit',
                             addressId: address.id,
-                            binModalStep1: false,
+                            bindModalStep1: false,
-                            binModalStep2: false,
+                            bindModalStep2: false,
                         } %}
                     #}
 
@@ -90,8 +90,8 @@
                             backUrl: path('chill_person_address_list', { 'person_id': person.id }),
                             mode: 'edit',
                             addressId: address.id,
-                            binModalStep1: false,
+                            bindModalStep1: false,
-                            binModalStep2: false,
+                            bindModalStep2: false,
                         } %}
                     #}
 

src/Bundle/ChillPersonBundle/Resources/views/Address/new.html.twig

@@ -30,8 +30,8 @@
         {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
             targetEntity: { name: 'person', id: person.id },
             backUrl: path('chill_person_address_list', { 'person_id': person.id }),
-            binModalStep1: false,
+            bindModalStep1: false,
-            binModalStep2: false,
+            bindModalStep2: false,
         } %}
 
     {% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/Household/address_edit.html.twig

@@ -10,8 +10,8 @@
         {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
             targetEntity: { name: 'household', id: household.id },
             backUrl: path('chill_person_household_addresses', { 'household_id': household.id })
-            binModalStep1: false,
+            bindModalStep1: false,
-            binModalStep2: false,
+            bindModalStep2: false,
         } %}
     </div>
 

src/Bundle/ChillPersonBundle/Resources/views/Household/address_move.html.twig

@@ -10,8 +10,8 @@
         {% include '@ChillMain/Address/_insert_vue_address.html.twig' with {
             targetEntity: { name: 'household', id: household.id },
             backUrl: path('chill_person_household_addresses', { 'household_id': household.id })
-            binModalStep1: false,
+            bindModalStep1: false,
-            binModalStep2: false,
+            bindModalStep2: false,
         } %}
     </div>