Merge remote-tracking branch 'origin/master' into fix-person-tests

src/Bundle/ChillPersonBundle/Controller/AccompanyingCourseController.php

@@ -72,7 +72,7 @@ class AccompanyingCourseController extends Controller
         $em->persist($period);
         $em->flush();
 
-        return $this->redirectToRoute('chill_person_accompanying_course_show', [
+        return $this->redirectToRoute('chill_person_accompanying_course_edit', [
             'accompanying_period_id' => $period->getId()
         ]);
          
@@ -92,17 +92,16 @@ class AccompanyingCourseController extends Controller
     }
 
     /**
-     * Show page of Accompanying Course section
+     * Edit page of Accompanying Course section
      *
-     * the page show all blocks except one active edit block, managed by vuejs component
-     * that's why title of page is 'edit accompanying course'
+     * the page edit all blocks managed by vuejs component
      *
-     * @Route("/{_locale}/parcours/{accompanying_period_id}/show", name="chill_person_accompanying_course_show")
+     * @Route("/{_locale}/parcours/{accompanying_period_id}/edit", name="chill_person_accompanying_course_edit")
      * @ParamConverter("accompanyingCourse", options={"id": "accompanying_period_id"})
      */
-    public function showAction(AccompanyingPeriod $accompanyingCourse): Response
+    public function editAction(AccompanyingPeriod $accompanyingCourse): Response
     {
-        return $this->render('@ChillPerson/AccompanyingCourse/show.html.twig', [
+        return $this->render('@ChillPerson/AccompanyingCourse/edit.html.twig', [
             'accompanyingCourse' => $accompanyingCourse
         ]);
     }

src/Bundle/ChillPersonBundle/Entity/Person.php

@@ -421,6 +421,31 @@ class Person implements HasCenterInterface
         return $this->accompanyingPeriodParticipations;
     }
 
+    /** 
+     * Return a collection of participation, where the participation
+     * is still opened, not a draft, and the period is still opened
+     */
+    public function getOpenedParticipations(): Collection
+    {
+        // create a criteria for filtering easily
+        $criteria = Criteria::create();
+        $criteria
+            ->andWhere(Criteria::expr()->eq('endDate', NULL))
+            ->orWhere(Criteria::expr()->gt('endDate', new \DateTime('now')))
+            ;
+
+        return $this->getAccompanyingPeriodParticipations()
+            ->matching($criteria)
+            ->filter(function (AccompanyingPeriodParticipation $app) {
+                $period = $app->getAccompanyingPeriod();
+                return (
+                        NULL === $period->getClosingDate() 
+                            || new \DateTime('now') < $period->getClosingDate()
+                    ) 
+                    && AccompanyingPeriod::STEP_DRAFT !== $period->getStep();
+            });
+    }
+
     /**
      * Get the accompanying periods of a give person with the chronological order.
      */

src/Bundle/ChillPersonBundle/Menu/AccompanyingCourseMenuBuilder.php

@@ -43,7 +43,7 @@ class AccompanyingCourseMenuBuilder implements LocalMenuBuilderInterface
         ->setExtras(['order' => 10]);
         
         $menu->addChild($this->translator->trans('Edit Accompanying Course'), [
-            'route' => 'chill_person_accompanying_course_show',
+            'route' => 'chill_person_accompanying_course_edit',
             'routeParameters' => [
                 'accompanying_period_id' => $period->getId()
         ]])

src/Bundle/ChillPersonBundle/Resources/public/index.js

@@ -1 +1,2 @@
-require('./sass/person.scss');
+require('./sass/person.scss');
+require('./sass/person_with_period.scss');

src/Bundle/ChillPersonBundle/Resources/public/sass/index.js

@@ -1,5 +1,5 @@
 require('./phone-alt-solid.svg');
 require('./mobile-alt-solid.svg');
 require('./person_by_phonenumber.scss');
-
+require('./person_with_period.scss');
 

src/Bundle/ChillPersonBundle/Resources/public/sass/person_with_period.scss

@@ -0,0 +1,50 @@
+/// complete and overwrite flex-table in chillmain.scss
+div.list-with-period { 
+   div.person {
+      ul.record_actions {
+         li {
+            margin-right: 0 !important;
+         }
+      }
+   }
+   div.periods {
+      div.header, 
+      div.list-content {
+         width: calc(100% - 40px);
+         margin-left: 40px;
+      }
+      div.header {
+         position: relative;
+         a.sc-button {
+            position: absolute;
+            width: 30px; 
+            height: 30px;
+            top: 10px; 
+            left: -40px;
+            padding: 0;
+            i {
+               padding: 5px;
+            }
+         }
+         abbr.referrer { 
+            font-size: 70%; 
+         }
+         span.user {
+            margin-left: 1em;
+         }
+      }
+      div.list-content {
+         span.more {
+            font-style: italic;
+         }
+      }
+   }
+}
+
+.chill-entity__person {
+   .chill-entity__person__first-name,
+   .chill-entity__person__last-name {
+      font-size: 1.3em;
+      font-weight: 700;
+   }
+}

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

@@ -3,45 +3,47 @@
    
    <h2><a name="section-20"></a>{{ $t('requestor.title') }}</h2>
    
-   <div v-if="accompanyingCourse.requestor">
+   <div v-if="accompanyingCourse.requestor" class="flex-table">
+      
       <label>
          <input type="checkbox" v-model="isAnonymous" :value="value" />
          {{ $t('requestor.is_anonymous') }}
       </label>
       
-      <dt>{{ $t('requestor.type') }}</dt>   
-      <dd>{{ accompanyingCourse.requestor.type }}</dd>
-      <dt>{{ $t('requestor.text') }}</dt>   
-      <dd>{{ accompanyingCourse.requestor.text }}</dd>
-      <dt>{{ $t('requestor.is_anonymous') }}</dt>
-      <dd>{{ accompanyingCourse.requestorAnonymous }}</dd>
+      <div class="item-bloc">
+         <h4>
+            <span class="badge badge-pill badge-secondary">{{ accompanyingCourse.requestor.type }}</span>
+            {{ accompanyingCourse.requestor.text }}
+         </h4>   
          
-      <div v-if="accompanyingCourse.requestor.type === 'person'">
-         <dt>{{ $t('requestor.person_id') }}</dt>   
-         <dd>{{ accompanyingCourse.requestor.person_id }}</dd>
-         <dt>{{ $t('requestor.birthdate') }}</dt>   
-         <dd>{{ $d(accompanyingCourse.requestor.birthdate.datetime, 'short') }}</dd>
-         <dt>{{ $t('requestor.center') }}</dt>   
-         <dd>{{ accompanyingCourse.requestor.center.name }}</dd>
-         <dt>{{ $t('requestor.firstName') }}</dt>   
-         <dd>{{ accompanyingCourse.requestor.firstName }}</dd>
-         <dt>{{ $t('requestor.lastName') }}</dt>   
-         <dd>{{ accompanyingCourse.requestor.lastName }}</dd>
-         <dt>{{ $t('requestor.phonenumber') }}</dt>   
-         <dd>{{ accompanyingCourse.requestor.phonenumber }}</dd>
-         <dt>{{ $t('requestor.mobilenumber') }}</dt>   
-         <dd>{{ accompanyingCourse.requestor.mobilenumber }}</dd>
-         <dt>{{ $t('requestor.altNames') }}</dt>   
-         <dd>{{ accompanyingCourse.requestor.altNames }}</dd>
-      </div>
-      
-      <div v-if="accompanyingCourse.requestor.type === 'thirdparty'">
-         <dt>{{ $t('requestor.person_id') }}</dt>   
-         <dd>{{ accompanyingCourse.requestor.thirdparty_id }}</dd>
-         <dt>{{ $t('requestor.address') }}</dt>
-         <dd>{{ accompanyingCourse.requestor.address.text }}</dd>
-         <dt>{{ $t('requestor.location') }}</dt>
-         <dd>{{ accompanyingCourse.requestor.address.postcode.name }}</dd>
+         <dl class="content-bloc" v-if="accompanyingCourse.requestor.type === 'person'">
+            
+            <dt>{{ $t('requestor.birthdate') }}</dt>   
+            <dd>{{ $d(accompanyingCourse.requestor.birthdate.datetime, 'short') }}</dd>
+            
+            <dt>{{ $t('requestor.center') }}</dt>   
+            <dd>{{ accompanyingCourse.requestor.center.name }}</dd>
+            
+            <dt>{{ $t('requestor.phonenumber') }}</dt>   
+            <dd>{{ accompanyingCourse.requestor.phonenumber }}</dd>
+            <dt>{{ $t('requestor.mobilenumber') }}</dt>   
+            <dd>{{ accompanyingCourse.requestor.mobilenumber }}</dd>
+         </dl>
+         
+         <dl class="content-bloc" v-if="accompanyingCourse.requestor.type === 'thirdparty'">
+            
+            <dt>{{ $t('requestor.address') }}</dt>
+            <dd>{{ accompanyingCourse.requestor.address.text }}</dd>
+            
+            <dt>{{ $t('requestor.location') }}</dt>
+            <dd>{{ accompanyingCourse.requestor.address.postcode.name }}</dd>
+         </dl>
+
+         <ul class="record_actions">
+            <li>
+               <a class="sc-button bt-show" :title="$t('action.show')" target="_blank" :href="url.show"></a>
+            </li>
+         </ul>
       </div>
 
       <ul class="record_actions">
@@ -53,6 +55,7 @@
             </button>
          </li>
       </ul>
+      
    </div> 
    <div v-else>
       <label>{{ $t('requestor.counter') }}</label>
@@ -104,6 +107,13 @@ export default {
          get() {
             return this.$store.state.accompanyingCourse.requestorAnonymous;
          }
+      },
+      url() {
+         return (this.accompanyingCourse.requestor.type === 'person') ? {
+            show: `/fr/person/${this.accompanyingCourse.requestor.id}/general`,
+         } : {
+            show: `/fr/thirdparty/thirdparty/${this.accompanyingCourse.requestor.id}/show`,
+         }
       }
    },
    methods: {
@@ -120,3 +130,28 @@ export default {
    }
 }
 </script>
+
+<style lang="scss" scoped>
+
+div.flex-table {
+   margin: 1em 0 0 !important;
+   & > label, 
+   & > ul.record_actions {
+      margin: 1em 3em 0 !important;
+   }
+   div.item-bloc {
+      background-color: white !important;
+      border: 1px solid #000;
+      padding: 1em;
+      margin-top: 1em;
+      .content-bloc {
+         font-size: 100%;
+      }
+      ul.record_actions {
+         margin-right: 2em;
+      }
+   }
+   
+}
+   
+</style>

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

@@ -184,7 +184,7 @@ div#navmap {
    }
 }
 @media only screen and (max-width: 768px) {
-   div.sticky-section {
+   div#navmap {
       display: none;
    }
 }

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/index.js

@@ -4,20 +4,47 @@ import { appMessages } from './js/i18n'
 import { initPromise } from './store'
 
 import App from './App.vue';
+import Banner from './components/Banner.vue';
 
-initPromise.then(store => {
+const root = window.vueRootComponent;
 
-   //console.log('store in create_store', store);
-   //console.log('store accompanyingCourse', store.state.accompanyingCourse);
-
-   const i18n = _createI18n(appMessages);
-  
-   const app = createApp({
-      template: `<app></app>`,
-   })
-   .use(store)
-   .use(i18n)
-   .component('app', App)
-   .mount('#accompanying-course');
+/*
+*  Load all App component, for AccompanyingCourse edition page
+*/
+if (root === 'app') {
    
-});
+   initPromise.then(store => {
+      
+      const i18n = _createI18n(appMessages);
+      
+      const app = createApp({
+         template: `<app></app>`,
+      })
+      .use(store)
+      .use(i18n)
+      .component('app', App)
+      .mount('#accompanying-course');
+      
+   });
+}
+
+/*
+*  Load only Banner sub-component, for all others AccompanyingCourse page
+*/
+if (root === 'banner') {
+
+   initPromise.then(store => {
+      
+      const i18n = _createI18n(appMessages);
+      
+      const app = createApp({
+         template: `<banner></banner>`,
+      })
+      .use(store)
+      .use(i18n)
+      .component('banner', Banner)
+      .mount('#accompanying-course');
+      
+   });
+   
+}

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js

@@ -191,8 +191,9 @@ let initPromise = getAccompanyingCourse(id)
                //console.log('## action: confirmAccompanyingCourse');
                confirmAccompanyingCourse(id)
                .then(response => new Promise((resolve, reject) => {
+                  window.location.replace(`/fr/parcours/${id}`);
+                  console.log('fetch resolve');
                   commit('confirmAccompanyingCourse', response);
-                  console.log('fetch resolve'); // redirection with #top anchor
                   resolve();
                })).catch((error) => { commit('catchError', error) });
             }

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/edit.html.twig

@@ -10,13 +10,10 @@
    <div id="accompanying-course"></div> {#  <== insert accompanyingCourse vue component  #}
 {% endblock %}
 
-{% block css %}
-   {{ encore_entry_link_tags('accompanying_course') }}
-{% endblock %}
-
 {% block js %}
    <script type="text/javascript">
       window.accompanyingCourseId = {{ accompanyingCourse.id|e('js') }};
+      window.vueRootComponent = 'app';
    </script>
    {{ encore_entry_script_tags('accompanying_course') }}
 {% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/history.html.twig

@@ -8,19 +8,67 @@
 
     <h1>{{ block('title') }}</h1>
 
-    <pre>
-{{ accompanyingCourse.id }}
-{{ accompanyingCourse.openingDate|format_date('short') }}
-{{ accompanyingCourse.closingDate|format_date('short') }}
-{{ accompanyingCourse.closingMotive|chill_entity_render_box }}
-{{ accompanyingCourse.remark|raw }}
-{{ accompanyingCourse.user }}
-usagers:
-{% for p in accompanyingCourse.participations %}
-    {{ p.person.id }} | <a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">{{ p.person.fullnamecanonical }}</a> | {{ p.startdate|format_date('short') }} | {{ p.enddate|format_date('short') }}
-{% endfor %}
-    </pre>
+    <p>
+        A CONFIRMER<br>
+        Cette page serait en réalité l'historique des mouvements dans la section parcours,
+        comme dans le contexte personne, à la page timeline.<br>
+        Il faudrait peut-être modifier son adresse comme ceci: `/fr/parcours/{id}/timeline`
+    </p>
 
-    {{ dump() }}
+    {# start test flex-table 
+    
+    <div class="flex-table">
+        {% for p in accompanyingCourse.participations %}
+        <div class="item-bloc">
+            <div class="item-row">
+                <div class="item-col">
+                    <h3>
+                        <a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">
+                            {{ p.person.firstname ~ ' ' ~ p.person.lastname }}
+                        </a>
+                    </h3>
+                    <p>
+                        <i class="fa fa-fw fa-venus" title="Femme"></i>
+                        {{ 'Née le ' ~ p.person.birthdate|format_date('short') }}
+                    </p>
+                </div>
+                <div class="item-col">
+                    <ul class="list-content fa-ul">
+                        <li><i class="fa fa-li fa-calendar"></i>
+                            {{ p.startdate|format_date('short') }} → {{ p.enddate|format_date('short') }}
+                        </li>
+                        <li><i class="fa fa-li fa-mobile"></i>
+                            +32 488 660 685
+                        </li>
+                        <li><i class="fa fa-li fa-envelope-o"></i>
+                            robert@brisefeuille.fake.co
+                        </li>
+                        <li><i class="fa fa-li fa-map-marker"></i>
+                            59, avenue Fernandez 79, boulevard Laurence Levy 1210 Saint-josse-ten-noode Belgique
+                        </li>
+                    </ul>
+                    <ul class="record_actions">
+                        <li><button type="button" class="sc-button bt-show"></button></li>
+                        <li><button type="button" class="sc-button bt-edit"></button></li>
+                    </ul>
+                </div>
+                
+            </div>
+            <div class="item-row">
+                Lorem ipsum dolor sit amet, incididunt ut labore et dolore magna aliqua. 
+            </div>
+            <div class="item-row">
+                Rhoncus est pellentesque elit eu ultrices vitae auctor. 
+            </div>
+            <div class="item-row">
+                Facilisis gravida neque convallis a cras semper auctor neque.  
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+    #}
+    {# end test flex-table #}
 
+    {#  ==> insert accompanyingCourse vue component  #}
+    <div id="accompanying-course"></div> 
 {% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig

@@ -1,4 +1,5 @@
 {% extends 'ChillPersonBundle:AccompanyingCourse:layout.html.twig' %}
+{% import '@ChillMain/Address/macro.html.twig' as address %}
 
 {% block title %}
     {{ 'Resume Accompanying Course'|trans }}
@@ -6,23 +7,172 @@
 
 {% block content %}
 
-  {% if 'DRAFT' == accompanyingCourse.step %}
-  <div class="grid-8 centered error flash_message">
-      <span>
-        {{ 'This accompanying course is still a draft'|trans }} 
-        <a href="{{ path('chill_person_accompanying_course_show', { 'accompanying_period_id': accompanyingCourse.id } ) }}">
-        {{ 'Edit & activate accompanying course'|trans }}
-        </a>
-      </span>
-  </div>
-  {% endif %}
+    {% if 'DRAFT' == accompanyingCourse.step %}
+        <div class="grid-8 centered error flash_message">
+            <span>
+                {{ 'This accompanying course is still a draft'|trans }}
+                <a href="{{ path('chill_person_accompanying_course_edit', { 'accompanying_period_id': accompanyingCourse.id } ) }}">
+                    {{ 'Edit & activate accompanying course'|trans }}
+                </a>
+            </span>
+        </div>
+    {% endif %}
 
-  <h1>{{ 'Associated peoples'|trans }}</h1>
+    <h2>{{ 'Associated peoples'|trans }}</h2>
+    <div class="flex-table">
+    {% for p in accompanyingCourse.participations %}
+        {% if p.enddate is null %}
+            <div class="item-bloc">
+                <div class="item-row">
+                    <div class="item-col">
+                        <h3>{{ p.person.firstname ~ ' ' ~ p.person.lastname }}</h3>
+                        <p>
+                            {% set born = (p.person.gender == 'woman') ? 'née': 'né' %}
+                            {% set gender = (p.person.gender == 'woman') ? 'fa-venus' : 
+                                (p.person.gender == 'man') ? 'fa-mars' : 'fa-neuter' %}
+                            {% set genderTitle = (p.person.gender == 'woman') ? 'femme' : 
+                                (p.person.gender == 'homme') ? 'fa-mars' : 'neutre' %}
+                            <i class="fa fa-fw {{ gender }}" title="{{ genderTitle }}"></i>{{ born ~ ' le ' ~ p.person.birthdate|format_date('short') }}
+                        </p>
+                    </div>
+                    <div class="item-col">
+                        <ul class="list-content fa-ul">
+                            <li>
+                                {% if p.person.mobilenumber %}
+                                    <i class="fa fa-li fa-mobile"></i><a href="{{ 'tel:' ~ p.person.mobilenumber }}">{{ p.person.mobilenumber }}</a>
+                                {% else %}
+                                    <i class="fa fa-li fa-phone"></i>
+                                    {% if p.person.phonenumber %}
+                                        <a href="{{ 'tel:' ~ p.person.phonenumber }}">{{ p.person.phonenumber }}</a>
+                                    {% else %}
+                                        <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
+                                    {% endif %}
+                                {% endif %}
+                            </li>
+                            <li>
+                                <i class="fa fa-li fa-map-marker"></i>
+                                {%- if p.person.lastAddress is not empty -%}
+                                    {{ p.person.getLastAddress|chill_entity_render_box({'with_valid_from': false}) }}
+                                {%- else -%}
+                                    <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
+                                {%- endif -%}
+                            </li>
+                        </ul>
+                        <ul class="record_actions">
+                            <li>
+                                <a href="{{ path('chill_person_view', { person_id: p.person.id }) }}" class="sc-button bt-show" target="_blank" title="Voir"></a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        {% endif %}
+    {% endfor %}
+    </div>
 
-  <h1>{{ 'Resources'|trans }}</h1>
 
-  <h1>{{ 'Social actions'|trans }}</h1>
-  
-  <h1>{{ 'Last events on accompanying course'|trans }}</h1>
+    <h2>{{ 'Resources'|trans }}</h2>
+    <div class="flex-bloc">
+    {% for r in accompanyingCourse.resources %}
+        <div class="item-bloc">
+        {% if r.person %}
+            
+            <div class="item-row">
+                <div class="item-col">
+                    <h3>
+                        {{ r.person.firstname ~ ' ' ~ r.person.lastname }}
+                        <span class="badge badge-pill badge-secondary">{{ 'Usager' }}</span>
+                    </h3>
+                    <p>
+                        {% set born = (r.person.gender == 'woman') ? 'née': 'né' %}
+                        {% set gender = (r.person.gender == 'woman') ? 'fa-venus' : 
+                            (r.person.gender == 'man') ? 'fa-mars' : 'fa-neuter' %}
+                        {% set genderTitle = (r.person.gender == 'woman') ? 'femme' : 
+                            (r.person.gender == 'homme') ? 'fa-mars' : 'neutre' %}
+                        <i class="fa fa-fw {{ gender }}" title="{{ genderTitle }}"></i>{{ born ~ ' le ' ~ r.person.birthdate|format_date('short') }}
+                    </p>
+                </div>
+                <div class="item-col">
+                    <ul class="list-content fa-ul">
+                        <li>
+                            {% if r.person.mobilenumber %}
+                                <i class="fa fa-li fa-mobile"></i><a href="{{ 'tel:' ~ r.person.mobilenumber }}">{{ r.person.mobilenumber }}</a>
+                            {% else %}
+                                <i class="fa fa-li fa-phone"></i>
+                                {% if r.person.phonenumber %}
+                                    <a href="{{ 'tel:' ~ r.person.phonenumber }}">{{ r.person.phonenumber }}</a>
+                                {% else %}
+                                    <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
+                                {% endif %}
+                            {% endif %}
+                        </li>
+                        <li>
+                            <i class="fa fa-li fa-map-marker"></i>
+                            {%- if r.person.lastAddress is not empty -%}
+                                {{ r.person.getLastAddress|chill_entity_render_box({'with_valid_from': false}) }}
+                            {%- else -%}
+                                <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
+                            {%- endif -%}
+                        </li>
+                    </ul>
+                    <ul class="record_actions">
+                        <li>
+                            <a href="{{ path('chill_person_view', { person_id: r.person.id }) }}" class="sc-button bt-show" target="_blank" title="Voir"></a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            
+        {% endif %}
+        {% if r.thirdParty %}
+        
+            <div class="item-row">
+                <div class="item-col">
+                    <h3>
+                        {{ r.thirdParty.name }}
+                        <span class="badge badge-pill badge-secondary">{{ 'Tiers' }}</span>
+                    </h3>
+                </div>
+                <div class="item-col">
+                    <ul class="list-content fa-ul">
+                        <li><i class="fa fa-li fa-envelope-o"></i>
+                            <a href="{{ 'mailto:' ~ r.thirdParty.email }}">
+                                {{ r.thirdParty.email|chill_print_or_message("thirdparty.No_email") }}
+                            </a>
+                        </li>
+                        <li><i class="fa fa-li fa-phone"></i>
+                            {% if r.thirdParty.telephone %}
+                                <a href="{{ 'tel:' ~ r.thirdParty.telephone }}">{{ r.thirdParty.telephone }}</a>
+                            {% else %}
+                                <span class="chill-no-data-statement">{{ 'thirdparty.No_phonenumber'|trans }}</span>
+                            {% endif %}
+                        </li>
+                        <li><i class="fa fa-li fa-map-marker"></i>
+                            {%- if r.thirdParty.address is not empty -%}
+                                {{ r.thirdParty.getAddress|chill_entity_render_box({'with_valid_from': false}) }}
+                            {%- else -%}
+                                <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
+                            {%- endif -%}
+                        </li>
+                    </ul>
+                    <ul class="record_actions">
+                        <li>
+                            <a href="{{ path('chill_3party_3party_show', { thirdparty_id: r.thirdParty.id }) }}" class="sc-button bt-show" target="_blank" title="Voir"></a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            
+        {% endif %}
+        </div>
+    {% endfor %}
+    </div>
 
+    <h2>{{ 'Social actions'|trans }}</h2>
+
+    <h2>{{ 'Last events on accompanying course'|trans }}</h2>
+
+
+    {#  ==> insert accompanyingCourse vue component  #}
+    <div id="accompanying-course"></div> 
 {% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/layout.html.twig

@@ -16,7 +16,13 @@
 {% endblock %}
 
 {% block css %}
+    {{ encore_entry_link_tags('accompanying_course') }}
 {% endblock %}
 
 {% block js %}
+    <script type="text/javascript">
+       window.accompanyingCourseId = {{ accompanyingCourse.id|e('js') }};
+       window.vueRootComponent = 'banner';
+    </script>
+    {{ encore_entry_script_tags('accompanying_course') }}
 {% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/Entity/social_issue.html.twig

@@ -0,0 +1,13 @@
+{% set reversed_parents = parents|reverse %}
+<span class="chill-entity chill-entity__social-issue">
+  <span class="badge badge-primary">
+    {%- for p in reversed_parents %}
+    <span class="chill-entity__social-issue__parent--{{ loop.revindex0 }}">
+      {{ p.title|localize_translatable_string }}{{ options['default.separator'] }}
+    </span>
+    {%- endfor -%}
+    <span class="chill-entity__social-issue__child">
+      {{ socialIssue.title|localize_translatable_string }}
+    </span>
+  </span>
+</span>

src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig

@@ -0,0 +1,178 @@
+<h2>{{ title|default('Person search results')|trans }}</h2>
+
+<p>
+    {{ '%total% persons matching the search pattern:'|transchoice( total, { '%total%' : total}) }}
+    <a href="{{ path('chill_main_advanced_search', { "name": search_name, "q": pattern } ) }}" class="sc-button button-small">
+        <i class="fa fa-fw fa-search" aria-hidden="true"></i> {{ pattern }}
+    </a>
+</p>
+
+<p>{{ 'Results %start%-%end% of %total%'|trans({ '%start%' : start, '%end%': start + persons|length, '%total%' : total } ) }}</p>
+
+<ul class="record_actions">
+    {% if is_granted('CHILL_PERSON_CREATE') %}
+        <li>
+            <a href="{{ path('chill_person_new') }}" class="sc-button bt-create">
+                {{ 'Add a person'|trans }}
+            </a>
+        </li>
+    {% endif %}
+    {% if search_name != "person_similarity" %}
+        <li>
+            <a href="{{ path('chill_main_advanced_search', { "name": search_name, "q": pattern } ) }}" class="sc-button bt-action">
+                <i class="fa fa-fw fa-search" aria-hidden="true"></i>
+                {{ 'Advanced search'|trans }}
+            </a>
+        </li>
+    {% endif %}
+    {% if preview == true and persons | length < total %}
+        <li>
+            <a href="{{ path('chill_main_search', { "name": search_name|default('abcd'), "q" : pattern }) }}" class="sc-button">
+                {{ 'See all results'|trans }}
+            </a>
+        </li>
+    {% endif %}
+</ul>
+
+
+{% if persons|length > 0 %}
+
+    <div class="flex-table list-with-period">
+        {% for person in persons %}
+      
+            <div class="item-bloc">
+                <div class="item-row person">
+                    
+                    <div class="item-col box-person">
+                        <div>{{ person|chill_entity_render_box({'addLink': true}) }}</div>
+                        <div>{{ 'Born the %date%'|transchoice(person.genderNumeric, { '%date%': person.birthdate|format_date("medium") }) }}</div>
+                    </div>
+                    
+                    <div class="item-col box-where">
+                        <ul class="list-content fa-ul">
+                            <li><i class="fa fa-li fa-long-arrow-right"></i>
+                                {{ person.center }}
+                            </li>
+                            
+                            <li>
+                            {% if person.mobilenumber is not empty %}
+                                <i class="fa fa-li fa-mobile"></i> <a href="{{ 'tel:' ~ person.mobilenumber }}">{{ person.mobilenumber|chill_format_phonenumber }}</a>
+                            {% else %}
+                                <i class="fa fa-li fa-phone"></i>
+                                {% if person.phonenumber is not empty %}
+                                    <a href="{{ 'tel:' ~ person.phonenumber }}">{{ person.phonenumber|chill_format_phonenumber }}</a>
+                                {% else %}
+                                    <span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
+                                {% endif %}
+                            {% endif %}
+                            </li>
+                            
+                            <li>
+                                <i class="fa fa-li fa-map-marker"></i>
+                                {% if person.getLastAddress is not null %}
+                                    {{ person.getLastAddress|chill_entity_render_box({'with_valid_from': false}) }}
+                                {% else %}
+                                    <span class="chill-no-data-statement">{{ 'No address'|trans }}</span>
+                                {% endif %}
+                            </li>
+                            
+                        </ul>
+                        <ul class="record_actions">
+                        <li>
+                            <a href="{{ path('chill_person_view', { 'person_id' : person.id }) }}" class="sc-button blue" />
+                                <i class="fa fa-folder-open-o"></i> {{ 'Open person file'|trans }}
+                            </a>
+                        </li>
+                        <li>
+                            <a href="{{ path('chill_person_accompanying_period_list', { 'person_id' : person.id }) }}" class="sc-button green" title="{{ 'See accompanying periods'|trans }}"/>
+                            <i class="fa fa-random"></i></a>
+                        </li>
+                    </ul>
+                    </div>
+                    
+                </div>
+
+                {#- 'apps' is for AccompanyingPeriodParticipationS #}
+                {#- filter using acl -#}
+                {%- set apps = [] %}
+                {%- for app in person.openedParticipations %}
+                    {%- if is_granted('CHILL_PERSON_ACCOMPANYING_PERIOD_SEE', app.accompanyingPeriod) %}
+                        {%- set apps = apps|merge([app]) %}
+                    {%- endif %}
+                {%- endfor %}
+                
+                {% if apps|length > 0 %}
+                    {% for app in apps %}
+                    <div class="item-row periods">
+                        
+                        <div class="header">
+                            <a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': app.accompanyingPeriod.id }) }}" 
+                                class="sc-button green" title="{{ 'See accompanying period'|trans }}">
+                                <i class="fa fa-fw fa-random"></i>
+                            </a>
+                            <span>{{ 'Since %date%'|trans({'%date%': app.startDate|format_date('medium') }) }}</span>
+                            {% if app.accompanyingPeriod.user is not null %}
+                                <span class="user">
+                                    <abbr class="referrer" title="{{ 'Referrer'|trans }}">ref:</abbr> 
+                                    {{ app.accompanyingPeriod.user|chill_entity_render_box }}
+                                </span>
+                            {% endif %}
+                        </div>
+                        
+                        <div class="list-content">
+                            {% for issue in app.accompanyingPeriod.socialIssues|slice(0,2) %}
+                            <span>{{ issue|chill_entity_render_box }}</span>
+                            {% endfor %}
+                            
+                            {% if app.accompanyingPeriod.socialIssues|length > 2 %}
+                            <span class="more">{{ 'and %number% other'|transchoice(app.accompanyingPeriod.socialIssues|length-2) }}</span>
+                            {% endif %}
+                        </div>
+                            
+                    </div>
+                    {% endfor %}
+                
+                {% endif %}
+            
+            </div>
+
+        {% endfor %}
+    </div>
+
+    <ul class="record_actions">
+        {% if is_granted('CHILL_PERSON_CREATE') %}
+        <li>
+            <a href="{{ path('chill_person_new') }}" class="sc-button bt-create">
+                {{ 'Add a person'|trans }}
+            </a>
+        </li>
+        {% endif %}
+        {% if search_name != "person_similarity" %}
+        <li>
+            <a href="{{ path('chill_main_advanced_search', { "name": search_name, "q": pattern } ) }}" class="sc-button bt-action">
+                <i class="fa fa-fw fa-search" aria-hidden="true"></i> {{ 'Advanced search'|trans }}
+            </a>
+        </li>
+        {% endif %}
+        {% if preview == true and persons|length < total %}
+        <li>
+            <a href="{{ path('chill_main_search', { "name": search_name|default('abcd'), "q" : pattern }) }}" class="sc-button">
+                {{ 'See all results'|trans }}
+            </a>
+        </li>
+        {% endif %}
+    </ul>
+            
+{% else %}
+    <ul class="record_actions">
+        <li>
+            <a href="{{ path('chill_main_advanced_search', { "name": search_name, "q": pattern } ) }}" class="sc-button bt-action">
+                <i class="fa fa-fw fa-search" aria-hidden="true"></i> {{ 'Advanced search'|trans }}
+            </a>
+        </li>
+    </ul>
+{% endif %}
+
+{% if preview == false %}
+    {{ chill_pagination(paginator) }}
+{% endif %}

src/Bundle/ChillPersonBundle/Search/PersonSearch.php

@@ -120,7 +120,7 @@ class PersonSearch extends AbstractSearch implements ContainerAwareInterface,
         $paginator = $this->paginatorFactory->create($total);
 
         if ($format === 'html') {
-            return $this->container->get('templating')->render('ChillPersonBundle:Person:list.html.twig',
+            return $this->container->get('templating')->render('@ChillPerson/Person/list_with_period.html.twig',
                     array(
                         'persons' => $this->search($terms, $start, $limit, $options),
                         'pattern' => $this->recomposePattern($terms, array('nationality',

src/Bundle/ChillPersonBundle/Serializer/Normalizer/SocialIssueNormalizer.php

@@ -14,14 +14,10 @@ class SocialIssueNormalizer implements NormalizerInterface, NormalizerAwareInter
 
     use NormalizerAwareTrait;
 
-    /**
-     * @param SocialIssueRender $render
-     */
     public function __construct(SocialIssueRender $render)
     {
         $this->render = $render;
     }
-    
 
     public function normalize($socialIssue, string $format = null, array $context = [])
     {

src/Bundle/ChillPersonBundle/Templating/Entity/SocialIssueRender.php

@@ -5,10 +5,12 @@ namespace Chill\PersonBundle\Templating\Entity;
 use Chill\MainBundle\Templating\Entity\ChillEntityRenderInterface;
 use Chill\PersonBundle\Entity\SocialWork\SocialIssue;
 use Chill\MainBundle\Templating\TranslatableStringHelper;
+use Symfony\Component\Templating\EngineInterface;
 
 class SocialIssueRender implements ChillEntityRenderInterface
 {
     private TranslatableStringHelper $translatableStringHelper;
+    private EngineInterface $engine;
 
     public const SEPARATOR_KEY = 'default.separator';
 
@@ -16,14 +18,15 @@ class SocialIssueRender implements ChillEntityRenderInterface
        self::SEPARATOR_KEY => ' > ',
    ];
 
-    public function __construct(TranslatableStringHelper $translatableStringHelper)
+    public function __construct(TranslatableStringHelper $translatableStringHelper, EngineInterface $engine)
     {
         $this->translatableStringHelper = $translatableStringHelper;
+        $this->engine = $engine;
     }
 
     public function supports($entity, array $options): bool
     {
-        return $entity instanceof SocialIssueRender;
+        return $entity instanceof SocialIssue;
     }
     
     public function renderString($socialIssue, array $options): string
@@ -42,9 +45,27 @@ class SocialIssueRender implements ChillEntityRenderInterface
 
         return $str;
     }
-    
-    public function renderBox($entity, array $options): string
+
+    protected function buildParents($socialIssue): array
     {
-        return "renderBox not implemented for social issue";
+        $parents = [];
+        while ($socialIssue->hasParent()) {
+            $socialIssue = $parents[] = $socialIssue->getParent();
+        }
+
+        return $parents;
+    } 
+    
+    public function renderBox($socialIssue, array $options): string
+    {
+        $options = \array_merge(self::DEFAULT_ARGS, $options); 
+        // give some help to twig: an array of parents
+        $parents = $this->buildParents($socialIssue);
+
+        return $this->engine->render('@ChillPerson/Entity/social_issue.html.twig', [
+            'socialIssue' => $socialIssue,
+            'parents' => $parents,
+            'options' => $options
+        ]);
     }
 }

src/Bundle/ChillPersonBundle/config/services/templating.yaml

@@ -20,5 +20,6 @@ services:
     Chill\PersonBundle\Templating\Entity\SocialIssueRender:
         arguments:
             $translatableStringHelper: '@Chill\MainBundle\Templating\TranslatableStringHelper'
+            $engine: '@Symfony\Component\Templating\EngineInterface'
         tags:
             - 'chill.render_entity'

src/Bundle/ChillPersonBundle/translations/messages.fr.yml

@@ -46,7 +46,7 @@ Add new phone: Ajouter un numéro de téléphone
 Remove phone: Supprimer
 'Notes on contact information': 'Remarques sur les informations de contact'
 'Remarks': 'Remarques'
-'{0} Born the %date% | {1} Born the %date%': '{0} Né le %date% | {1} Née le %date%'
+'Born the %date%': '{0} Né le %date% | {1} Née le %date%'
 'Spoken languages': 'Langues parlées'
 'Unknown spoken languages': 'Langues parlées inconnues'
 Male: Homme
@@ -125,6 +125,8 @@ Reset: 'Remise à zéro'
 'Person search results': 'Recherche de personnes'
 Person search results by phonenumber: Recherche de personnes par numéro de téléphone
 'Search within persons': 'Recherche parmi les personnes'
+Open person file: Ouvrir
+and %number% other: '{0} et aucun autre| {1} et une autre |]1, Inf] et %number% autres'
 '%total% persons matching the search pattern:': '{0} Aucune personne ne correspond aux termes de recherche : | {1} Une personne a été trouvée par la recherche : | ]1,Inf] %total% personnes correspondent aux termes de recherche :'
 'Last opening since %last_opening%': 'Dernière ouverture le %last_opening%.'
 'Person accompanying period - %name%': 'Historique du dossier - %name%'
@@ -173,6 +175,9 @@ Resources: Interlocuteurs privilégiés
 Social actions: Actions d'accompagnement
 Last events on accompanying course: Dernières actions de suivi
 Edit & activate accompanying course: Modifier et valider
+See accompanying periods: Voir les périodes d'accompagnement
+See accompanying period: Voir cette période d'accompagnement
+Referrer: Référent
 
 # pickAPersonType
 Pick a person: Choisir une personne