Feature: [address reference] adapt vue app AccompanyingCourse to allow to open address details modal

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue

@@ -15,7 +15,8 @@
       :person="participation.person"
       :returnPath="getAccompanyingCourseReturnPath">
 
-      <template v-slot:record-actions>
+      <template v-slot:end-bloc>
+        <div class="item-row separator">
           <ul class="record_actions">
             <button-location
                 v-if="hasCurrentHouseholdAddress"
@@ -38,10 +39,12 @@
               </button>
             </li>
           </ul>
+        </div>
 
       </template>
    </person-render-box>
 
+
    <teleport to="body">
       <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
          <template v-slot:header>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue

@@ -12,7 +12,8 @@
          hLevel : 3,
          isConfidential : true
       }">
-      <template v-slot:record-actions>
+      <template v-slot:end-bloc>
+        <div class="item-row separator">
           <ul class="record_actions">
             <li>
               <write-comment
@@ -46,6 +47,7 @@
               </button>
             </li>
           </ul>
+        </div>
       </template>
    </person-render-box>
 
@@ -59,7 +61,8 @@
          addInfo: false,
          hLevel: 3
       }">
-      <template v-slot:record-actions>
+      <template v-slot:end-bloc>
+        <div class="item-row separator">
           <ul class="record_actions">
             <li>
               <write-comment
@@ -93,6 +96,7 @@
               </button>
             </li>
           </ul>
+        </div>
       </template>
    </third-party-render-box>
 </template>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue

@@ -43,7 +43,8 @@
                 {{ $t(getGenderTranslation) + ' ' + $d(birthdate, 'text') }}
               </time>
 
-                    <time v-else-if="person.birthdate && person.deathdate" :datetime="person.deathdate" :title="person.deathdate">
+              <time v-else-if="person.birthdate && person.deathdate" :datetime="person.deathdate"
+                    :title="person.deathdate">
                 {{ $d(birthdate) }} - {{ $d(deathdate) }}
               </time>
 
@@ -51,7 +52,9 @@
                 {{ $t('renderbox.deathdate') + ' ' + deathdate }}
               </time>
 
-                    <span v-if="options.addAge && person.birthdate" class="age">{{ $tc('renderbox.years_old', person.age) }}</span>
+              <span v-if="options.addAge && person.birthdate" class="age">{{
+                  $tc('renderbox.years_old', person.age)
+                }}</span>
             </p>
           </div>
         </div>
@@ -128,7 +131,8 @@
           </div>
         </div>
 
-        <div class="item-col mx-3" v-if="this.showResidentialAddresses && (person.current_residential_addresses || []).length > 0">
+        <div class="item-col mx-3"
+             v-if="this.showResidentialAddresses && (person.current_residential_addresses || []).length > 0">
           <div class="float-button bottom">
             <div class="box">
               <ul class="list-content fa-ul">
@@ -175,6 +179,9 @@
         </div>
 
       </div>
+
+      <slot name="end-bloc"></slot>
+
     </section>
   </div>
 
@@ -300,6 +307,7 @@ div.flex-table {
       div.item-col:first-child {
         width: 33%;
       }
+
       div.item-col:last-child {
         justify-content: flex-start;
 
@@ -310,8 +318,14 @@ div.flex-table {
 
 .age {
   margin-left: 0.5em;
-    &:before { content: '('; }
+
-    &:after { content: ')'; }
+  &:before {
+    content: '(';
+  }
+
+  &:after {
+    content: ')';
+  }
 }
 </style>
 

src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue

@@ -59,7 +59,8 @@
                     <ul class="list-content fa-ul">
                       <li v-if="thirdparty.address">
                         <i class="fa fa-li fa-map-marker"></i>
-                                <address-render-box :address="thirdparty.address" :isMultiline="isMultiline"></address-render-box>
+                        <address-render-box :address="thirdparty.address"
+                                            :isMultiline="isMultiline"></address-render-box>
                       </li>
                       <li v-if="thirdparty.telephone">
                         <i class="fa fa-li fa-mobile"></i>
@@ -90,9 +91,8 @@
             </div>
           </div>
         </div>
-
-
       </div>
+      <slot name="end-bloc"></slot>
     </section>
   </div>
 
@@ -119,7 +119,8 @@ export default {
       fr: {
         children: "Personnes de contact: ",
         child_of: "Contact de: ",
-        }}
+      }
+    }
   },
   props: ['thirdparty', 'options'],
   computed: {
@@ -160,6 +161,7 @@ export default {
   &:before {
     content: " "
   }
+
   &.tparty-parent {
     font-weight: bold;
     font-variant: all-small-caps;
@@ -170,6 +172,7 @@ export default {
   &::after {
     content: " | ";
   }
+
   &:last-child::after {
     content: ""
   }