address refactoring: resolve lack of flexibility for many implementations (modal/not, overriding, options, etc. )

address creation/edition is unchanged
many variables are renamed to improve logic and readability

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

@@ -1,149 +1,58 @@
 <template>
-   <div class="chill-entity entity-address">
 
-      <h2 v-if="!edit">{{ $t('create_a_new_address') }}</h2>
-      <h2 v-else>{{ $t('edit_address') }}</h2>
-
-      <show-address
-         v-if="address"
-         v-bind:address="address">
-      </show-address>
-
-      <add-address
-         modalAddTitle="add_an_address_title"
-         modalEditTitle="edit_an_address_title"
-         @addNewAddress="addNewAddress">
-      </add-address>
-   </div>
-
-   <div v-if="!edit" class='person-address__valid'>
-      <h2>{{ $t('date') }}</h2>
-
-      <div class="input-group mb-3">
-         <span class="input-group-text" id="validFrom"><i class="fa fa-fw fa-calendar"></i></span>
-         <input type="date" class="form-control form-control-lg" name="validFrom"
-            v-bind:placeholder="$t('validFrom')"
-            v-model="validFrom"
-            aria-describedby="validFrom" />
-      </div>
-
-      <div v-if="errors.length > 0">
-         {{ errors }}
-      </div>
-      <div v-if="loading">
-            {{ $t('loading') }}
-      </div>
-      <div v-if="success">
-            {{ $t('person_address_creation_success') }}
-      </div>
-   </div>
-
-   <ul class="record_actions sticky-form-buttons">
-      <li class="cancel">
-         <a :href="backUrl" class="btn btn-cancel">{{ $t('back_to_the_list') }}</a>
-      </li>
-      <li v-if="!edit">
-         <button type="submit" class="btn btn-update" @click="addToPerson">
-            {{ $t('add_an_address_to_person') }}
-         </button>
-      </li>
-   </ul>
+   <add-address
+      v-bind:context="context"
+      v-bind:key="addAddress.key"
+      v-bind:options="addAddress.options"
+      @submitAddress="submitAddress"
+      ref="addAddress">
+   </add-address>
 </template>
 
 <script>
 import AddAddress from './components/AddAddress.vue';
-import ShowAddress from './components/ShowAddress.vue';
 
 export default {
-   name: 'App',
+   name: "App",
    components: {
-      AddAddress,
-      ShowAddress
+      AddAddress
    },
    data() {
       return {
-         edit: window.mode === 'edit',
-         personId: window.personId,
-         addressId: window.addressId,
-         backUrl: `/fr/person/${window.personId}/address/list`, //TODO better way to pass this
-         validFrom: new Date().toISOString().split('T')[0]
-      }
-   },
-   computed: {
-      address() {
-         return this.$store.state.address;
-      },
-      errors() {
-         return this.$store.state.errorMsg;
-      },
-      loading() {
-         return this.$store.state.loading;
-      },
-      success() {
-         return this.$store.state.success;
+         context: {
+            edit: window.mode === 'edit',
+            personId: window.personId,
+            addressId: window.addressId,
+            backUrl: `/fr/person/${window.personId}/address/list`, //TODO better way to pass this
+            validFrom: new Date().toISOString().split('T')[0]
+         },
+         addAddress: {
+            key: 'person',
+            options: {
+               /// Options override default
+
+               /// First button text if create or edit address (trans chain, see i18n)
+               //textButton: { create: 'bim', edit: 'bam' },
+
+               /// Modal title text if create or edit address (trans chain, see i18n)
+               //title: { create: 'boum', edit: 'pan' },
+
+               /// Display each step in page or Modal
+               //bindModal: { step1: false, step2: false } //TODO true-false must not be possible
+            }
+         }
       }
    },
    methods: {
-      addNewAddress({ address, modal }) {
-         console.log('@@@ CLICK button addNewAdress', address);
+      submitAddress({ submited, flag }) {
+         console.log('@@@ CLICK button submitAddress');
 
-         let newAddress = {
-            'isNoAddress': address.isNoAddress,
-            'street': address.isNoAddress ? '' : address.street,
-            'streetNumber': address.isNoAddress ? '' : 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
-         };
+         console.log('address to post:', submited);
+         console.log('datas by refs: ', this.$refs.addAddress.entity.address.text);
 
-         if (address.selected.address.point !== undefined){
-            newAddress = Object.assign(newAddress, {
-               'point': address.selected.address.point.coordinates
-            });
-         }
-
-         if (address.writeNewPostalCode){
-            let newPostalCode = address.newPostalCode;
-            newPostalCode = Object.assign(newPostalCode, {
-                'country': {'id': address.selected.country.id },
-            });
-            newAddress = Object.assign(newAddress, {
-               'newPostalCode': newPostalCode
-            });
-         }
-
-         if (this.edit){
-            this.$store.dispatch('updateAddress', {
-               addressId: this.addressId,
-               newAddress: newAddress
-            });
-         } else {
-            this.$store.dispatch('addAddress', newAddress);
-         }
-
-         modal.showModal = false;
-      },
-      addToPerson() {
-         this.$store.dispatch('addDateToAddressAndAddressToPerson', {
-            personId: this.personId,
-            addressId: this.$store.state.address.address_id,
-            body: { validFrom: {datetime: `${this.validFrom}T00:00:00+0100`}},
-            backUrl: this.backUrl
-         })
-      },
-      getEditAddress() {
-         this.$store.dispatch('getEditAddress', this.addressId);
+         this.$refs.addAddress.initForm(); // to cast child method
+         flag.showPane = false;
       }
-   },
-   mounted() {
-      if (this.edit) {
-         this.getEditAddress();
-      }
-   },
-};
+   }
+}
 </script>