household address: init vue component for household address

src/Bundle/ChillPersonBundle/Controller/HouseholdController.php

@@ -8,8 +8,6 @@ use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Annotation\Route;
 use Sensio\Bundle\FrameworkExtraBundle\Configuration\ParamConverter;
 use Chill\PersonBundle\Entity\Household\Household;
-use Chill\MainBundle\Form\Type\AddressType;
-use Chill\MainBundle\Entity\Address;
 
 /**
  * @Route("/{_locale}/person/household")
@@ -71,29 +69,6 @@ class HouseholdController extends AbstractController
     }
 
 
-   /**
-     *
-     * @param Household $household
-     * @param Address $address
-     * @return \Symfony\Component\Form\Form
-     */
-    protected function createCreateForm(Household $household, Address $address)
-    {
-        $form = $this->createForm(AddressType::class, $address, array(
-           'method' => 'POST',
-           'action' => $this->generateUrl('chill_person_address_create', array(
-              'person_id' => $household->getId()
-           )),
-           'has_no_address' => true
-        ));
-
-        $form->add('submit', SubmitType::class, array(
-           'label' => 'Submit'
-        ));
-
-        return $form;
-    }
-
     /**
      * @Route(
      *      "/{household_id}/address/move",
@@ -106,15 +81,9 @@ class HouseholdController extends AbstractController
     {
         // TODO ACL
 
-
-        $address = new HouseholdAddress();
-
-        $form = $this->createCreateForm($household, $address);
-
         return $this->render('@ChillPerson/Household/address_move.html.twig',
             [
-                'household' => $household,
-                'form' => $form->createView()
+                'household' => $household
             ]
         );
     }

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/App.vue

@@ -0,0 +1,56 @@
+<template>
+   <div v-if="address.text">
+      {{ address.text }}
+   </div>
+   <div v-if="address.postcode">
+      {{ address.postcode.name }}
+   </div>
+   <add-address
+      @addNewAddress="addNewAddress">
+   </add-address>
+</template>
+
+<script>
+
+import AddAddress from 'ChillMainAssets/vuejs/_components/AddAddress.vue';
+
+export default {
+   name: 'App',
+   components: {
+      AddAddress
+   },
+   computed: {
+      address() {
+         return this.$store.state.address;
+      }
+   },
+   methods: {
+      addNewAddress({ address, modal }) {
+         console.log('@@@ CLICK button addNewAdress', address);
+
+         let newAddress = {
+            'isNoAddress': address.isNoAddress,
+            'street': address.selected.address.street,
+            'streetNumber': address.selected.address.streetNumber,
+            'postcode': {'id': address.selected.city.id },
+            'floor': address.floor,
+            'corridor': address.corridor,
+            'steps': address.steps,
+            'flat': address.flat,
+            'buildingName': address.buildingName,
+            'distribution': address.distribution,
+            'extra': address.extra
+         };
+
+         if (address.selected.address.point !== undefined){
+            newAddress = Object.assign(newAddress, {'point': address.selected.address.point.coordinates});
+         }
+
+         this.$store.dispatch('addAddress', newAddress);
+         modal.showModal = false;
+      }
+   }
+};
+
+</script>
+

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/index.js

@@ -0,0 +1,25 @@
+import { createApp } from 'vue'
+import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
+import { appMessages } from './js/i18n'
+import { store } from './store'
+
+import App from './App.vue';
+
+const root = window.vueRootComponent;
+
+/*
+*  Load all App component, for Household edition page
+*/
+
+const i18n = _createI18n(appMessages);
+
+const app = createApp({
+   template: `<app></app>`,
+})
+.use(store)
+.use(i18n)
+.component('app', App)
+.mount('#household-address');
+
+
+

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/js/i18n.js

@@ -0,0 +1,12 @@
+import { addressMessages } from 'ChillMainAssets/vuejs/Address/js/i18n'
+
+const appMessages = {
+   fr: {
+   }
+};
+
+Object.assign(appMessages.fr, addressMessages.fr);
+
+export {
+   appMessages
+};

src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/store/index.js

@@ -0,0 +1,41 @@
+import 'es6-promise/auto';
+import { createStore } from 'vuex';
+
+import { postAddress } from 'ChillMainAssets/vuejs/_api/AddAddress'
+
+const debug = process.env.NODE_ENV !== 'production';
+
+const store = createStore({
+   strict: debug,
+   state: {
+      address: {},
+      errorMsg: []
+   },
+   getters: {
+   },
+   mutations: {
+      catchError(state, error) {
+         state.errorMsg.push(error);
+      },
+      addAddress(state, address) {
+         console.log('@M addAddress address', address);
+         state.address = address;
+      }
+   },
+   actions: {
+      addAddress({ commit }, payload) {
+         console.log('@A addAddress payload', payload);
+
+         postAddress(payload)
+            .then(address => new Promise((resolve, reject) => {
+               commit('addAddress', address);
+               resolve();
+            }))
+            .catch((error) => {
+               commit('catchError', error);
+            });
+      }
+   }
+});
+
+export { store };

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

@@ -9,14 +9,17 @@
 
     <div>
         <h2>Select an existing address</h2>
-        TODO: select of existing address !?
+        TODO: select of existing address ?
     </div>
 
     <div>
         <h2>Create a new address</h2>
         <div id="address"></div>
+    </div>
 
-
+    <div>
+        <h2>Add the address to the household</h2>
+        <div id="household-address"></div>
     </div>
 
     {% block stylesheets %}
@@ -24,7 +27,11 @@
     {% endblock %}
 
     {% block js %}
-        {{ encore_entry_script_tags('address') }}
+       <script type="text/javascript">
+            window.householdId = {{ household.id|e('js') }};
+            window.vueRootComponent = 'app';
+        </script>
+        {{ encore_entry_script_tags('household_address') }}
     {% endblock %}
 
 

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

@@ -7,6 +7,7 @@ module.exports = function(encore, entries)
     encore.addAliases({
         ChillPersonAssets: __dirname + '/Resources/public'
     });
-    
+
     encore.addEntry('accompanying_course', __dirname + '/Resources/public/vuejs/AccompanyingCourse/index.js');
+    encore.addEntry('household_address', __dirname + '/Resources/public/vuejs/HouseholdAddress/index.js');
 };