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/components/ShowAddress.vue

@@ -1,17 +1,25 @@
 <template>
-   <div class="address multiline">
-      <p v-if="address.text"
-         class="street">
-         {{ address.text }}
-      </p>
-      <p v-if="address.postcode"
-         class="postcode">
-         {{ address.postcode.name }}
-      </p>
-      <p v-if="address.country"
-         class="country">
-         {{ address.country.name.fr }}
-      </p>
+   <div class="chill-entity entity-address">
+
+      <div v-if="insideModal == false" class="loading">
+         <i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
+         <span class="sr-only">Loading...</span>
+      </div>
+
+      <div class="address multiline">
+         <p v-if="address.text"
+            class="street">
+            {{ address.text }}
+         </p>
+         <p v-if="address.postcode"
+            class="postcode">
+            {{ address.postcode.code }} {{ address.postcode.name }}
+         </p>
+         <p v-if="address.country"
+            class="country">
+            {{ address.country.name.fr }}
+         </p>
+      </div>
 
       <div v-if="address.floor">
          <span class="floor">
@@ -48,17 +56,60 @@
             <b>{{ $t('distribution') }}</b>: {{ address.distribution }}
          </span>
       </div>
+
    </div>
+
+   <ul v-if="insideModal == false"
+      class="record_actions sticky-form-buttons">
+      <li class="cancel">
+         <a class="btn btn-cancel" v-bind:href="context.backUrl">
+            {{ $t('back_to_the_list') }}</a>
+      </li>
+      <li>
+         <a @click.prevent="$emit('openEditPane')"
+            class="btn btn-update">
+            {{ $t('action.edit')}}
+         </a>
+      </li>
+      <li>
+         <a class="btn btn-save"
+            @click.prevent="$emit('submitAddress', { getSubmited , flag })">
+            {{ $t('action.save')}}
+         </a>
+      </li>
+   </ul>
 </template>
 
 <script>
 
 export default {
    name: 'ShowAddress',
-   props: ['address'],
-   data() {
-      return {
+   props: [
+      'context',
+      'options',
+      'default',
+      'flag',
+      'entity',
+      'errorMsg',
+      'insideModal'
+   ],
+   emits: ['openEditPane', 'submitAddress'],
+   computed: {
+      address() {
+         return this.entity.address;
+      },
+      loaded() {
+         return this.entity.loaded;
+      },
+      selected() {
+         return this.entity.selected;
+      },
+      addressMap() {
+         return this.entity.addressMap;
+      },
+      getSubmited() {
+         return this.entity.address;
       }
-   },
+   }
 };
 </script>