address form: add the possibility to create a new address

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

@@ -33,20 +33,25 @@ export default {
    methods: {
       addNewAddress({ address, modal }) {
          console.log('@@@ CLICK button addNewAdress', address);
-         const newAddress = {
+
+         let newAddress = {
             'isNoAddress': address.isNoAddress,
             'street': address.selected.address.street,
             'streetNumber': address.selected.address.streetNumber,
-            'postcode': {'id': address.selected.address.postcode.id},
+            '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,
-            'point': address.selected.address.point.coordinates
+            '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;
       }

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

@@ -6,6 +6,7 @@ const addressMessages = {
       select_country: 'Choisir le pays',
       select_city: 'Choisir une localité',
       select_address: 'Choisir une adresse',
+      create_address: 'Appuyer sur "Enter" pour créer une nouvelle adresse',
       isNoAddress: 'Pas d\'adresse complète',
       floor: 'Étage',
       corridor: 'Couloir',

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress/AddressSelection.vue

@@ -7,7 +7,11 @@
          track-by="id"
          label="value"
          :custom-label="transName"
+         :taggable="true"
+         :multiple="false"
+         @tag="addAddress"
          :placeholder="$t('select_address')"
+         :tagPlaceholder="$t('create_address')"
          :options="addresses">
       </VueMultiselect>
    </div>
@@ -25,18 +29,25 @@ export default {
          value: null
       }
    },
+   computed: {
+      addresses() {
+         return this.address.loaded.addresses;
+      }
+   },
    methods: {
       transName(value) {
-         return `${value.street}, ${value.streetNumber}`
+         return value.streetNumber === undefined ? value.street : `${value.street}, ${value.streetNumber}`
       },
       selectAddress(value) {
          this.address.selected.address = value;
          this.updateMapCenter(value.point);
       },
-   },
-   computed: {
-      addresses() {
-         return this.address.loaded.addresses;
+      addAddress (newAddress) {
+         const address = {
+            street: newAddress
+         };
+         this.value = address;
+         this.address.selected.address = address;
       }
    }
 };