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

@@ -1,5 +1,5 @@
 <template>
-<div v-if="render === 'bloc'" class="item-bloc">
+  <div v-if="render === 'bloc'" class="item-bloc">
     <section class="chill-entity entity-person">
       <div class="item-row entity-bloc">
 
@@ -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,9 +131,10 @@
           </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" >
+            <div class="box">
               <ul class="list-content fa-ul">
                 <li v-for="(addr, i) in person.current_residential_addresses" :key="i">
                   <i class="fa fa-li fa-map-marker"></i>
@@ -175,10 +179,13 @@
         </div>
 
       </div>
-    </section>
-</div>
 
-<span v-if="render === 'badge'" class="chill-entity entity-person badge-person">
+      <slot name="end-bloc"></slot>
+
+    </section>
+  </div>
+
+  <span v-if="render === 'badge'" class="chill-entity entity-person badge-person">
     <a v-if="options.addLink === true" :href="getUrl">
         <span v-if="options.isHolder" class="fa-stack fa-holder" :title="$t('renderbox.holder')">
             <i class="fa fa-circle fa-stack-1x text-success"></i>
@@ -237,50 +244,50 @@ export default {
     }
   },
   computed: {
-        isMultiline: function() {
-            if(this.options.isMultiline){
+    isMultiline: function () {
+      if (this.options.isMultiline) {
         return this.options.isMultiline
       } else {
         return false
       }
     },
-        getGenderIcon: function() {
+    getGenderIcon: function () {
       return this.person.gender === 'woman' ? 'fa-venus' : this.person.gender === 'man' ? 'fa-mars' : this.person.gender === 'neuter' ? 'fa-neuter' : 'fa-genderless';
     },
-        getGenderTranslation: function() {
+    getGenderTranslation: function () {
       return this.person.gender === 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
     },
     getGender() {
       return this.person.gender === 'woman' ? 'person.gender.woman' : this.person.gender === 'man' ? 'person.gender.man' : this.person.gender === 'neuter' ? 'person.gender.neuter' : 'person.gender.undefined';
     },
-        birthdate: function(){
-            if(this.person.birthdate !== null || this.person.birthdate === "undefined"){
+    birthdate: function () {
+      if (this.person.birthdate !== null || this.person.birthdate === "undefined") {
         return new Date(this.person.birthdate.datetime);
       } else {
         return "";
       }
     },
-        deathdate: function(){
-            if(this.person.deathdate !== null || this.person.birthdate === "undefined"){
+    deathdate: function () {
+      if (this.person.deathdate !== null || this.person.birthdate === "undefined") {
         return new Date(this.person.deathdate.datetime);
       } else {
         return "";
       }
     },
-        altNameLabel: function() {
-            for(let i = 0; i < this.person.altNames.length; i++){
+    altNameLabel: function () {
+      for (let i = 0; i < this.person.altNames.length; i++) {
         return this.person.altNames[i].label
       }
     },
-        altNameKey: function() {
-            for(let i = 0; i < this.person.altNames.length; i++){
+    altNameKey: function () {
+      for (let i = 0; i < this.person.altNames.length; i++) {
         return this.person.altNames[i].key
       }
     },
-        getUrl: function() {
+    getUrl: function () {
       return `/fr/person/${this.person.id}/general`;
     },
-        getCurrentHouseholdUrl: function() {
+    getCurrentHouseholdUrl: function () {
       let returnPath = this.returnPath ? `?returnPath=${this.returnPath}` : ``;
       return `/fr/person/household/${this.person.current_household_id}/summary${returnPath}`
     }
@@ -290,7 +297,7 @@ export default {
 
 <style lang='scss'>
 
-.lastname:before{
+.lastname:before {
   content: " "
 }
 
@@ -300,6 +307,7 @@ div.flex-table {
       div.item-col:first-child {
         width: 33%;
       }
+
       div.item-col:last-child {
         justify-content: flex-start;
 
@@ -308,10 +316,16 @@ div.flex-table {
   }
 }
 
-.age{
+.age {
   margin-left: 0.5em;
-    &:before { content: '('; }
-    &:after { content: ')'; }
+
+  &:before {
+    content: '(';
+  }
+
+  &:after {
+    content: ')';
+  }
 }
 </style>
 

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

@@ -1,5 +1,5 @@
 <template>
-<div class="item-bloc col">
+  <div class="item-bloc col">
     <section class="chill-entity entity-thirdparty">
       <div class="item-row entity-bloc">
 
@@ -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,11 +91,10 @@
             </div>
           </div>
         </div>
-
-
       </div>
+      <slot name="end-bloc"></slot>
     </section>
-</div>
+  </div>
 
 </template>
 
@@ -119,12 +119,13 @@ export default {
       fr: {
         children: "Personnes de contact: ",
         child_of: "Contact de: ",
-        }}
+      }
+    }
   },
   props: ['thirdparty', 'options'],
   computed: {
-        isMultiline: function() {
-            if (this.options.isMultiline){
+    isMultiline: function () {
+      if (this.options.isMultiline) {
         return this.options.isMultiline
       } else {
         return false
@@ -156,10 +157,11 @@ export default {
 </script>
 
 <style lang="scss">
-.name{
-    &:before{
+.name {
+  &:before {
     content: " "
   }
+
   &.tparty-parent {
     font-weight: bold;
     font-variant: all-small-caps;
@@ -170,6 +172,7 @@ export default {
   &::after {
     content: " | ";
   }
+
   &:last-child::after {
     content: ""
   }