address: write new address (separate street and streetNumber)

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

@@ -105,6 +105,7 @@ export default {
             modalDialogClass: "modal-dialog-scrollable modal-xl"
          },
          address: {
+            writeNewAddress: false,
             loaded: {
                countries: [],
                cities: [],
@@ -120,6 +121,8 @@ export default {
                zoom: 12
             },
             isNoAddress: false,
+            street: null,
+            streetNumber: null,
             floor: null,
             corridor: null,
             steps: null,
@@ -198,6 +201,16 @@ export default {
          this.address.loaded.cities = [];
          this.address.selected.city = {};
          this.address.selected.country = {};
+         this.address.street = null;
+         this.address.streetNumber = null;
+         this.address.floor = null;
+         this.address.corridor = null;
+         this.address.steps = null;
+         this.address.flat = null;
+         this.address.buildingName = null;
+         this.address.distribution = null;
+         this.address.extra = null;
+         this.address.writeNewAddress = false;
          console.log('cities and addresses', this.address.loaded.cities, this.address.loaded.addresses);
       }
    }

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

@@ -15,6 +15,18 @@
          :options="addresses">
       </VueMultiselect>
    </div>
+   <div v-if="writeNewAddress">
+      <input
+         type="text"
+         name="street"
+         :placeholder="$t('street')"
+         v-model="street"/>
+      <input
+         type="text"
+         name="streetNumber"
+         :placeholder="$t('streetNumber')"
+         v-model="streetNumber"/>
+   </div>
 </template>
 
 <script>
@@ -30,9 +42,28 @@ export default {
       }
    },
    computed: {
+      writeNewAddress() {
+         return this.address.writeNewAddress;
+      },
       addresses() {
          return this.address.loaded.addresses;
-      }
+      },
+      street: {
+         set(value) {
+            this.address.street = value;
+         },
+         get() {
+            return this.address.street;
+         }
+      },
+      streetNumber: {
+         set(value) {
+            this.address.streetNumber = value;
+         },
+         get() {
+            return this.address.streetNumber;
+         }
+      },
    },
    methods: {
       transName(value) {
@@ -40,14 +71,12 @@ export default {
       },
       selectAddress(value) {
          this.address.selected.address = value;
+         this.address.street = value.street;
+         this.address.streetNumber = value.streetNumber;
          this.updateMapCenter(value.point);
       },
-      addAddress (newAddress) {
-         const address = {
-            street: newAddress
-         };
-         this.value = address;
-         this.address.selected.address = address;
+      addAddress() {
+         this.address.writeNewAddress = true;
       }
    }
 };