Merge branch '59_parcours_resu_2'

src/Bundle/ChillMainBundle/Resources/public/modules/scratch/custom/_address.scss

@@ -9,6 +9,12 @@ div.chill_address {
             margin: 0 0 0 1.5em;
             text-indent: -1.5em;
         }
+
+        &.chill_address_address--multiline {
+            p {
+                display: block;
+            }
+        }
         
     }
 }

src/Bundle/ChillMainBundle/Resources/public/modules/scratch/custom/_record_actions.scss

@@ -9,6 +9,11 @@ ul.record_actions li {
 ul.record_actions, ul.record_actions_column {
     display: flex;
     justify-content: flex-end;
+
+    &.record_actions--left {
+      justify-content: flex-start;
+    }
+
     padding: 0.5em 0;
     flex-wrap: wrap-reverse;
 

src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss

@@ -1,12 +1,48 @@
 /*
  * NOTE 2021.04
- * scss/chill.scss is the main sass file for the new chill.2
+ * scss/chillmain.scss is the main sass file for the new chill.2
  * scratch will be replaced by bootstrap, please avoid to edit in modules/scratch/_custom.scss
  *
- * when possible, try to use bootstrap class naming
+ * when possible, try to use bootstrap html class
 */
 
+
+/*  [hack]  /!\ Contourne le positionnement problématique du div#content_conainter suivant,
+ *  car sa position: relative le place au-dessus du bandeau et les liens sont incliquables  */
+div.subheader {
+  height: 130px;
+}
+
 /*
+ * Specific rules
+ */
+
+// [scratch] un bouton 'disabled' non clickable
+.sc-button {
+   &.disabled {
+      cursor: default;
+      &.bt-remove {
+         background-color: #d9d9d9;
+      }
+   }
+}
+
+// [debug] un affichage discret pour le debug
+.discret {
+   color: grey;
+   margin-right: 1em;
+}
+
+// reserre la hauteur des rangées de tableau (ul.record_actions prennait trop de place)
+table {
+   ul.record_actions {
+      margin: 0;
+      padding: 0.5em;
+   }
+}
+
+/*
+ *  ACCOMPANYING_COURSE
  *  Header custom for Accompanying Course
  */
 
@@ -25,7 +61,6 @@ div#header-accompanying_course-name {
     }
   }
 }
-
 div#header-accompanying_course-details {
   background: none repeat scroll 0 0 #718596ab;
   color: #FFF;
@@ -33,31 +68,158 @@ div#header-accompanying_course-details {
   padding-bottom: 1em;
 }
 
-/*  /!\  Contourne le positionnement problématique du div#content_conainter suivant,
+/*
- *  car sa position: relative le place au-dessus du bandeau et les liens sont incliquables  */
+*  FLEX RESPONSIVE TABLE/BLOCK PRESENTATION
-div.subheader {
+*/
-  height: 130px;
+div.flex-bloc, 
+div.flex-table {
+   h2, h3, h4, dl, p {
+      margin: 0;
+   }
+   h2, h3, h4 {
+      color: var(--chill-blue);
+   }
 }
 
-//// SCRATCH BUTTONS
+/*
-.sc-button {
+* Bloc appearance
-   &.disabled {
+*/
-      cursor: default;
+div.flex-bloc {
-      &.bt-remove {
+   box-sizing: border-box; 
-         background-color: #d9d9d9;
+   display: flex;
+   flex-direction: row;
+   flex-wrap: wrap;
+   align-items: stretch;
+   align-content: stretch;
+   
+   div.item-bloc {
+      flex-grow: 0; flex-shrink: 1; flex-basis: 50%;
+      
+      margin: 0;
+      border: 1px solid #000;
+      padding: 1em;
+      
+      border-top: 0;
+      &:nth-child(1), &:nth-child(2) { 
+         border-top: 1px solid #000;
+      }
+      border-left: 0;
+      &:nth-child(odd) {
+         border-left: 1px solid #000;
+      }
+      
+      //background-color: #e6e6e6;
+      display: flex;
+      flex-direction: column;
+         
+      div.item-row {
+         flex-grow: 1; flex-shrink: 1; flex-basis: auto;
+         display: flex;
+         flex-direction: column;
+         
+         div.item-col {
+            &:first-child {
+               flex-grow: 0; flex-shrink: 0; flex-basis: auto;
+            }
+            &:last-child {
+               flex-grow: 1; flex-shrink: 1; flex-basis: auto;
+               display: flex;
+               
+               .list-content { // ul, dl, or div
+               }
+               ul.record_actions {
+                  margin: 0;
+                  align-self: flex-end;
+                  flex-grow: 1; flex-shrink: 0; flex-basis: auto;
+                  li {
+                     margin-right: 5px;
+                  }
+               }            
+            }
+         }
+      }
+   }
+   @media only screen and (max-width: 945px) { margin: auto -0.2em; }
+   @media only screen and (max-width: 935px) { margin: auto -0.5em; }
+   @media only screen and (max-width: 920px) { margin: auto -0.9em; }
+   @media only screen and (max-width: 900px) {
+      flex-direction: column;
+      margin: auto 0;
+      div.item-bloc {
+         border-left: 1px solid #000;
+         &:nth-child(2) { 
+            border-top: 0;
+         }
       }
    }
 }
 
-//// à ranger
+/*
-.discret {
+* Table appearance
-   color: grey;
+*/ 
-   margin-right: 1em;
+div.flex-table {
-}
+   display: flex;
+   flex-direction: column;
+   align-items: stretch;
+   align-content: stretch;
+   
+   div.item-bloc {
+      display: flex;
+      flex-direction: column;
+      padding: 1em;
+      border: 1px solid #000;
+      border-top: 0;
+      &:first-child {
+         border-top: 1px solid #000;
+      }
+      &:nth-child(even) {
+         background-color: #e6e6e6;         
+      }
 
-table {
+      div.item-row {
-   ul.record_actions {
+         display: flex;
-      margin: 0;
+         flex-direction: row;
-      padding: 0.5em;
+         &:not(:first-child) {
+            margin-top: 0.5em;
+            border-top: 1px dotted #0000004f;
+            padding-top: 0.5em;
+            flex-direction: column;
+         }
+         
+         div.item-col {
+            &:first-child {
+               flex-grow: 0; flex-shrink: 0; flex-basis: 33%;
+            }
+            &:last-child {
+               flex-grow: 1; flex-shrink: 1; flex-basis: auto;
+               display: flex;
+               justify-content: flex-end;
+               
+               .list-content { // ul, dl, or div
+               }
+               ul.record_actions {
+                  margin: 0;
+                  align-self: flex-start;
+                  flex-grow: 1; flex-shrink: 0; flex-basis: auto;
+                  li {
+                     margin-right: 5px;
+                  }
+               }            
+            }
+         }
+         @media only screen and (max-width: 900px) {
+            flex-direction: column;
+            div.item-col {
+               &:last-child {
+                  ul.record_actions {
+                     align-self: flex-end;
+                  }
+               }
+            }
+         }
+         
+         // neutralize 
+         div.chill_address div.chill_address_address p { text-indent: 0; }
+      }
    }
-}
+}      

src/Bundle/ChillMainBundle/Resources/views/Address/entity_render.html.twig

@@ -0,0 +1,16 @@
+<div class="chill_address">
+    {% if options['has_no_address'] == true and address.isNoAddress == true %}
+        <div class="chill_address_is_noaddress">{{ 'address.consider homeless'|trans }}</div>
+    {% endif %}
+    <div class="chill_address_address {% if options['multiline'] %}chill_address_address--multiline{% endif %}">
+    {% if address.street is not empty %}<p class="street street1">{{ address.street }}</p>{% endif %}
+    {% if address.streetNumber is not empty %}<p class="street street2">{{ address.streetNumber }}</p>{% endif %}
+    {% if address.postCode is not empty %}
+    <p class="postalCode"><span class="code">{{ address.postCode.code }}</span> <span class="name">{{ address.postCode.name }}</span></p>
+    <p class="country">{{ address.postCode.country.name|localize_translatable_string }}</p>
+    {% endif %}
+    </div>
+{%- if options['with_valid_from'] == true -%}
+<span class="address_since">{{ 'Since %date%'|trans( { '%date%' : address.validFrom|format_date('long') } ) }}</span>
+{%- endif -%}
+</div>

src/Bundle/ChillMainBundle/Resources/views/Address/macro.html.twig

@@ -1,11 +1,12 @@
 {%- macro _render(address, options) -%}
     {%- set options = { 'with_valid_from' : true  }|merge(options|default({})) -%}
     {%- set options = { 'has_no_address'  : false }|merge(options|default({})) -%}
+    {%- set options = { 'with_icon' : false }|merge(options|default({})) -%}
     <div class="chill_address">
         {% if options['has_no_address'] == true and address.isNoAddress == true %}
             <div class="chill_address_is_noaddress">{{ 'address.consider homeless'|trans }}</div>
         {% endif %}
-        <div class="chill_address_address">
+        <div class="chill_address_address">{% if options['with_icon'] == true %}<i class="fa fa-fw fa-map-marker"></i>{% endif %}
         {% if address.street is not empty %}<p class="street street1">{{ address.street }}</p>{% endif %}
         {% if address.streetNumber is not empty %}<p class="street street2">{{ address.streetNumber }}</p>{% endif %}
         {% if address.postCode is not empty %}

src/Bundle/ChillMainBundle/Templating/Entity/AddressRender.php

@@ -0,0 +1,67 @@
+<?php
+
+namespace Chill\MainBundle\Templating\Entity;
+
+use Symfony\Component\Templating\EngineInterface;
+use Chill\MainBundle\Entity\Address;
+
+class AddressRender implements ChillEntityRenderInterface
+{
+    private EngineInterface $templating;
+
+    public const DEFAULT_OPTIONS = [
+        'with_valid_from' => true,
+        'has_no_address' => false,
+        'multiline' => true,
+    ];
+
+    public function __construct(EngineInterface $templating)
+    {
+        $this->templating = $templating;
+    }
+    
+    /**
+     * {@inheritDoc}
+     */
+    public function supports($entity, array $options): bool
+    {
+        return $entity instanceof Address;
+    }
+
+    /**
+     * @param Address addr
+     */
+    public function renderString($addr, array $options): string
+    {
+        $lines = [];
+        if (!empty($addr->getStreet())) {
+            $lines[0] = $addr->getStreet();
+        }
+        if (!empty($addr->getStreetNumber())) {
+            $lines[0] .= ", ".$addr->getStreetNumber();
+        }
+        if (!empty($addr->getPostcode())) {
+            $lines[1] = \strtr("{postcode} {label}", [
+                '{postcode}' => $addr->getPostcode()->getCode(),
+                '{label}' => $addr->getPostcode()->getName()
+            ]);
+        }
+
+        return implode(" - ", $lines);
+    }
+
+    /**
+     * {@inheritDoc}
+     * @param Address addr
+     */
+    public function renderBox($addr, array $options): string
+    {
+        $options = \array_merge(self::DEFAULT_OPTIONS, $options); 
+
+        return $this->templating
+            ->render('@ChillMain/Address/entity_render.html.twig', [
+                'address' => $addr,
+                'options' => $options
+            ]);
+    }
+}

src/Bundle/ChillMainBundle/Tests/Templating/Entity/AddressRenderTest.php

@@ -0,0 +1,55 @@
+<?php
+
+namespace Chill\MainBundle\Tests\Templating\Entity;
+
+use Chill\MainBundle\Entity\Country;
+use Chill\MainBundle\Entity\PostalCode;
+use Chill\MainBundle\Templating\Entity\AddressRender;
+use Chill\MainBundle\Entity\Address;
+use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
+use Symfony\Component\Templating\EngineInterface;
+
+class AddressRenderTest extends KernelTestCase
+{
+
+    protected function setUp()
+    {
+        self::bootKernel();
+    }
+
+    /**
+     * @dataProvider addressDataProvider
+     */
+    public function testRenderString(Address $addr, string $expectedString): void
+    {
+        $engine = self::$container->get(EngineInterface::class);
+        $renderer = new AddressRender($engine);
+
+        $this->assertEquals($expectedString, $renderer->renderString($addr, []));
+        return;
+        $this->assertIsString($renderer->renderBox($addr, []));
+    } 
+
+
+    public function addressDataProvider(): \Iterator
+    {
+        $addr = new Address();
+        $country = (new Country())
+            ->setName([ "fr" => "Pays" ])
+            ->setCountryCode("BE")
+            ;
+        $postCode = new PostalCode();
+        $postCode->setName("Locality")
+            ->setCode("012345")
+            ->setCountry($country)
+            ;
+
+        $addr->setStreet("Rue ABC")
+            ->setStreetNumber("5")
+            ->setPostcode($postCode)
+            ;
+
+        yield[ $addr, "Rue ABC, 5 - 012345 Locality"];
+    }
+    
+}

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

@@ -41,3 +41,10 @@ services:
     Chill\MainBundle\Templating\ChillMarkdownRenderExtension:
         tags:
             - { name: twig.extension }
+
+    Chill\MainBundle\Templating\Entity\AddressRender:
+        arguments:
+            - '@Symfony\Component\Templating\EngineInterface'
+        tags:
+            - { name: 'chill.render_entity' }
+            

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
+     * the page edit all blocks managed by vuejs component
-     * that's why title of page is 'edit accompanying course'
      *
-     * @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>   
+      <div class="item-bloc">
-      <dd>{{ accompanyingCourse.requestor.type }}</dd>
+         <h4>
-      <dt>{{ $t('requestor.text') }}</dt>   
+            <span class="badge badge-pill badge-secondary">{{ accompanyingCourse.requestor.type }}</span>
-      <dd>{{ accompanyingCourse.requestor.text }}</dd>
+            {{ accompanyingCourse.requestor.text }}
-      <dt>{{ $t('requestor.is_anonymous') }}</dt>
+         </h4>   
-      <dd>{{ accompanyingCourse.requestorAnonymous }}</dd>
          
-      <div v-if="accompanyingCourse.requestor.type === 'person'">
+         <dl class="content-bloc" v-if="accompanyingCourse.requestor.type === 'person'">
-         <dt>{{ $t('requestor.person_id') }}</dt>   
+            
-         <dd>{{ accompanyingCourse.requestor.person_id }}</dd>
+            <dt>{{ $t('requestor.birthdate') }}</dt>   
-         <dt>{{ $t('requestor.birthdate') }}</dt>   
+            <dd>{{ $d(accompanyingCourse.requestor.birthdate.datetime, 'short') }}</dd>
-         <dd>{{ $d(accompanyingCourse.requestor.birthdate.datetime, 'short') }}</dd>
+            
-         <dt>{{ $t('requestor.center') }}</dt>   
+            <dt>{{ $t('requestor.center') }}</dt>   
-         <dd>{{ accompanyingCourse.requestor.center.name }}</dd>
+            <dd>{{ accompanyingCourse.requestor.center.name }}</dd>
-         <dt>{{ $t('requestor.firstName') }}</dt>   
+            
-         <dd>{{ accompanyingCourse.requestor.firstName }}</dd>
+            <dt>{{ $t('requestor.phonenumber') }}</dt>   
-         <dt>{{ $t('requestor.lastName') }}</dt>   
+            <dd>{{ accompanyingCourse.requestor.phonenumber }}</dd>
-         <dd>{{ accompanyingCourse.requestor.lastName }}</dd>
+            <dt>{{ $t('requestor.mobilenumber') }}</dt>   
-         <dt>{{ $t('requestor.phonenumber') }}</dt>   
+            <dd>{{ accompanyingCourse.requestor.mobilenumber }}</dd>
-         <dd>{{ accompanyingCourse.requestor.phonenumber }}</dd>
+         </dl>
-         <dt>{{ $t('requestor.mobilenumber') }}</dt>   
+         
-         <dd>{{ accompanyingCourse.requestor.mobilenumber }}</dd>
+         <dl class="content-bloc" v-if="accompanyingCourse.requestor.type === 'thirdparty'">
-         <dt>{{ $t('requestor.altNames') }}</dt>   
+            
-         <dd>{{ accompanyingCourse.requestor.altNames }}</dd>
+            <dt>{{ $t('requestor.address') }}</dt>
-      </div>
+            <dd>{{ accompanyingCourse.requestor.address.text }}</dd>
-      
+            
-      <div v-if="accompanyingCourse.requestor.type === 'thirdparty'">
+            <dt>{{ $t('requestor.location') }}</dt>
-         <dt>{{ $t('requestor.person_id') }}</dt>   
+            <dd>{{ accompanyingCourse.requestor.address.postcode.name }}</dd>
-         <dd>{{ accompanyingCourse.requestor.thirdparty_id }}</dd>
+         </dl>
-         <dt>{{ $t('requestor.address') }}</dt>
+
-         <dd>{{ accompanyingCourse.requestor.address.text }}</dd>
+         <ul class="record_actions">
-         <dt>{{ $t('requestor.location') }}</dt>
+            <li>
-         <dd>{{ accompanyingCourse.requestor.address.postcode.name }}</dd>
+               <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);
+*  Load all App component, for AccompanyingCourse edition page
-
+*/
-   const i18n = _createI18n(appMessages);
+if (root === 'app') {
-  
-   const app = createApp({
-      template: `<app></app>`,
-   })
-   .use(store)
-   .use(i18n)
-   .component('app', App)
-   .mount('#accompanying-course');
    
-});
+   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,59 @@
 
     <h1>{{ block('title') }}</h1>
 
-    <pre>
+    {# start test flex-table #}
-{{ accompanyingCourse.id }}
+    <div class="flex-table">
-{{ accompanyingCourse.openingDate|format_date('short') }}
+        {% for p in accompanyingCourse.participations %}
-{{ accompanyingCourse.closingDate|format_date('short') }}
+        <div class="item-bloc">
-{{ accompanyingCourse.closingMotive|chill_entity_render_box }}
+            <div class="item-row">
-{{ accompanyingCourse.remark|raw }}
+                <div class="item-col">
-{{ accompanyingCourse.user }}
+                    <h3>
-usagers:
+                        <a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">
-{% for p in accompanyingCourse.participations %}
+                            {{ p.person.firstname ~ ' ' ~ p.person.lastname }}
-    {{ 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') }}
+                        </a>
-{% endfor %}
+                    </h3>
-    </pre>
+                    <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 #}
 
-    {{ dump() }}
 
+    {#  ==> 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 %}
+    {% if 'DRAFT' == accompanyingCourse.step %}
-  <div class="grid-8 centered error flash_message">
+        <div class="grid-8 centered error flash_message">
-      <span>
+            <span>
-        {{ 'This accompanying course is still a draft'|trans }} 
+                {{ 'This accompanying course is still a draft'|trans }}
-        <a href="{{ path('chill_person_accompanying_course_show', { 'accompanying_period_id': accompanyingCourse.id } ) }}">
+                <a href="{{ path('chill_person_accompanying_course_edit', { 'accompanying_period_id': accompanyingCourse.id } ) }}">
-        {{ 'Edit & activate accompanying course'|trans }}
+                    {{ 'Edit & activate accompanying course'|trans }}
-        </a>
+                </a>
-      </span>
+            </span>
-  </div>
+        </div>
-  {% endif %}
+    {% 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>
+    <h2>{{ 'Resources'|trans }}</h2>
-  
+    <div class="flex-bloc">
-  <h1>{{ 'Last events on accompanying course'|trans }}</h1>
+    {% 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/person.html.twig

@@ -0,0 +1,15 @@
+<span class="chill-entity chill-entity__person">
+  {%- if addLink and is_granted('CHILL_PERSON_SEE', person) -%}
+    {%- set showLink = true -%}<a href="{{ chill_path_add_return_path('chill_person_view', { 'person_id': person.id }) }}">{%- endif -%}
+    <span class="chill-entity__person__first-name">{{ person.firstName }}</span>
+    <span class="chill-entity__person__last-name">{{ person.lastName }}</span>
+    {%- if addAltNames -%}
+      {%- for n in person.altNames -%}
+        {%- if loop.first -%}({% else %} {%- endif -%}
+          <span class="chill-entity__person__alt-name chill-entity__person__altname--{{ n.key }}">
+            {{ n.label }}
+          </span>
+        {%- if loop.last %}) {% endif -%}
+      {%- endfor -%}
+    {%- endif -%}
+  {%- if showLink is defined -%}</a>{%- endif -%}</span>

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/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

@@ -19,5 +19,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%'
@@ -170,6 +172,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

src/Bundle/parcours.html

@@ -0,0 +1,72 @@
+Controleur:
+
+activity_json = $this->serializer->serialize($activity, 'json', []);
+
+return render('@ChillActivity/...', [
+  'activity' => $activity,
+  'activity_json' => $activity_json
+])
+
+
+{# template twig de activity #}
+
+{{ form(activity) }}
+
+{% block js %}
+<script>
+{# window.activity = {{ activity_json|e('json') }}; #}
+window.activity = {
+  "type": "activity",
+  "persons": [
+    { type: person, id: xxx, ...}
+    { ...}
+  ],
+  ""
+};
+</script>
+{{ encore_entry_script_tags('activity_form') }}
+{% endblock %}
+
+
+{# -----
+   dans le fichier app.js: #}
+<script type="text/javascript">
+
+
+
+const store = createStore({
+   strict: debug,
+   state(): return {
+     activity: window.activity
+   },
+   getters: {
+
+   },
+   mutations: {
+      addPerson(state, payload) {
+
+      }
+   },
+   actions: {
+      addPerson() {
+        let el = document.getElementById('form['activity']['xxx']['xxxx']');
+        let option = document.createElement('option');
+        option.value = person.id;
+        el.appendChild(option);
+        commit('addPerson', payload)
+     }
+  }
+});
+
+const i18n = _createI18n(appMessages);
+
+const app = createApp({
+   template: `<app></app>`,
+})
+.use(store)
+.use(i18n)
+.component('app', App)
+.mount('#activity');
+
+
+</script>