add file ShowAdressPane that contains ShowAddress, because ShowAddress must be called in several files

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/AddAddress.vue

@@ -24,7 +24,7 @@
          </template>
 
          <template v-slot:body>
-            <show-address
+            <show-address-pane
                v-bind:context="this.context"
                v-bind:options="this.options"
                v-bind:default="this.default"
@@ -32,7 +32,7 @@
                v-bind:valid="this.valid"
                v-bind:flag="this.flag"
                ref="showAddress">
-            </show-address>
+            </show-address-pane>
          </template>
 
          <template v-slot:footer>
@@ -50,7 +50,7 @@
    </teleport>
    <div class="mt-4" v-else>
 
-      <show-address v-if="flag.showPane"
+      <show-address-pane v-if="flag.showPane"
          v-bind:context="this.context"
          v-bind:options="this.options"
          v-bind:default="this.default"
@@ -60,7 +60,7 @@
          ref="showAddress"
          v-bind:insideModal="false" @openEditPane="openEditPane"
          @submitAddress="$emit('submitAddress')">
-      </show-address>
+      </show-address-pane>
    </div>
 
    <!-- step 2 -->
@@ -79,7 +79,7 @@
          </template>
 
          <template v-slot:body>
-            <edit-address
+            <edit-address-pane
                v-bind:context="this.context"
                v-bind:options="this.options"
                v-bind:default="this.default"
@@ -87,7 +87,7 @@
                v-bind:flag="this.flag"
                @getCities="getCities"
                @getReferenceAddresses="getReferenceAddresses">
-            </edit-address>
+            </edit-address-pane>
          </template>
 
          <template v-slot:footer>
@@ -104,7 +104,7 @@
    </teleport>
    <div class="mt-4" v-else>
 
-      <edit-address v-if="flag.editPane"
+      <edit-address-pane v-if="flag.editPane"
          v-bind:context="this.context"
          v-bind:options="this.options"
          v-bind:default="this.default"
@@ -113,7 +113,7 @@
          v-bind:insideModal="false" @closeEditPane="closeEditPane"
          @getCities="getCities"
          @getReferenceAddresses="getReferenceAddresses">
-      </edit-address>
+      </edit-address-pane>
    </div>
 
 </template>
@@ -122,8 +122,8 @@
 import Modal from 'ChillMainAssets/vuejs/_components/Modal';
 import { getAddress, fetchCountries, fetchCities, fetchReferenceAddresses, patchAddress, postAddress, postPostalCode } from '../api';
 import { postAddressToPerson, postAddressToHousehold } from "ChillPersonAssets/vuejs/_api/AddAddress.js";
-import ShowAddress from './ShowAddress.vue';
+import ShowAddressPane from './ShowAddressPane.vue';
-import EditAddress from './EditAddress.vue';
+import EditAddressPane from './EditAddressPane.vue';
 
 export default {
    name: "AddAddress",
@@ -131,8 +131,8 @@ export default {
    emits: ['submitAddress'],
    components: {
       Modal,
-      ShowAddress,
+      ShowAddressPane,
-      EditAddress,
+      EditAddressPane,
    },
    data() {
       return {

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/EditAddressPane.vue

@@ -85,7 +85,7 @@ import AddressMap from './AddAddress/AddressMap';
 import AddressMore from './AddAddress/AddressMore'
 
 export default {
-   name: "EditAddress",
+   name: "EditAddressPane",
    components: {
       CountrySelection,
       CitySelection,

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddress.vue

@@ -1,17 +1,5 @@
 <template>
    <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">{{ $t('loading') }}</span>
-      </div>
-      <div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
-         {{ errorMsg }}
-      </div>
-      <div v-if="flag.success" class="alert alert-success">
-         {{ $t(getSuccessText) }}
-      </div>
-
       <div class="address multiline">
          <p v-if="address.text"
             class="street">
@@ -64,96 +52,13 @@
          </div>
       </div>
 
-      <div v-if="!context.edit" class='address-valid date-since'>
-         <h3>{{ $t(getValidFromDateText) }}</h3>
-         <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(getValidFromDateText)"
-               v-model="validFrom"
-               aria-describedby="validFrom"
-            />
-         </div>
-      </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')">
-            {{ $t('action.save')}}
-         </a>
-      </li>
-   </ul>
 </template>
 
 <script>
-import { dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';
-
 export default {
-   name: 'ShowAddress',
+   name: "ShowAddress",
-   props: [
+   props: ['address']
-      'context',
+}
-      'options',
-      'default',
-      'flag',
-      'entity',
-      'valid',
-      '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;
-      },
-      validFrom: {
-         set(value) {
-            this.valid.from = ISOToDate(value);
-         },
-         get() {
-            return dateToISO(this.valid.from);
-         }
-      },
-      getValidFromDateText() {
-         return (this.context.entity.type === 'household') ? 'move_date' : 'validFrom';
-      },
-      getSuccessText() {
-         switch (this.context.entity.type) {
-            /*
-            case 'household':
-               return (this.context.edit) ? 'household_address_edit_success' : 'household_address_move_success';
-            case 'person':
-               return (this.context.edit) ? 'person_address_edit_success' : 'person_address_creation_success';
-            */
-            default:
-               return (this.context.edit) ? 'address_edit_success' : 'address_new_success';
-         }
-      }
-   }
-};
 </script>

src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/components/ShowAddressPane.vue

@@ -0,0 +1,98 @@
+<template>
+
+   <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">{{ $t('loading') }}</span>
+   </div>
+   <div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
+      {{ errorMsg }}
+   </div>
+   <div v-if="flag.success" class="alert alert-success">
+      {{ $t(getSuccessText) }}
+   </div>
+
+   <show-address :address="address"></show-address>
+
+   <div v-if="!context.edit" class='address-valid date-since'>
+      <h3>{{ $t(getValidFromDateText) }}</h3>
+      <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(getValidFromDateText)"
+                v-model="validFrom"
+                aria-describedby="validFrom"
+         />
+      </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')">
+            {{ $t('action.save')}}
+         </a>
+      </li>
+   </ul>
+</template>
+
+<script>
+import { dateToISO, ISOToDate, ISOToDatetime } from 'ChillMainAssets/chill/js/date.js';
+import ShowAddress from './ShowAddress.vue';
+
+export default {
+   name: 'ShowAddressPane',
+   components: {
+      ShowAddress
+   },
+   props: [
+      'context',
+      'options',
+      'default',
+      'flag',
+      'entity',
+      'valid',
+      'errorMsg',
+      'insideModal'
+   ],
+   emits: ['openEditPane', 'submitAddress'], //?
+   computed: {
+      address() {
+         return this.entity.address;
+      },
+      validFrom: {
+         set(value) {
+            this.valid.from = ISOToDate(value);
+         },
+         get() {
+            return dateToISO(this.valid.from);
+         }
+      },
+      getValidFromDateText() {
+         return (this.context.entity.type === 'household') ? 'move_date' : 'validFrom';
+      },
+      getSuccessText() {
+         switch (this.context.entity.type) {
+            /*
+            case 'household':
+               return (this.context.edit) ? 'household_address_edit_success' : 'household_address_move_success';
+            case 'person':
+               return (this.context.edit) ? 'person_address_edit_success' : 'person_address_creation_success';
+            */
+            default:
+               return (this.context.edit) ? 'address_edit_success' : 'address_new_success';
+         }
+      }
+   }
+};
+</script>