Display first associated persons in the banner of an accompanying course

.changes/unreleased/Feature-20250123-211322.yaml

@@ -0,0 +1,6 @@
+kind: Feature
+body: Show the first 3 persons directly in the accompanying period's banner
+time: 2025-01-23T21:13:22.926870961+01:00
+custom:
+    Issue: "320"
+    SchemaChange: No schema change

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

@@ -80,6 +80,13 @@
     </span>
   </teleport>
 
+  <teleport to="#header-accompanying_course-name #persons-associated-shortlist">
+    <persons-associated
+      :accompanyingCourse="accompanyingCourse"
+      :shortlist="true"
+    ></persons-associated>
+  </teleport>
+
   <teleport to="#header-accompanying_course-details #banner-social-issues">
     <social-issue
       v-for="issue in accompanyingCourse.socialIssues"
@@ -89,7 +96,10 @@
   </teleport>
 
   <teleport to="#header-accompanying_course-details #banner-persons-associated">
-    <persons-associated :accompanying-course="accompanyingCourse" />
+    <persons-associated
+      :accompanying-course="accompanyingCourse"
+      :shortlist="false"
+    />
   </teleport>
 </template>
 

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

@@ -1,26 +1,45 @@
 <template>
-  <span
-    v-for="h in personsByHousehold()"
-    :class="{
-      household: householdExists(h.id),
-      'no-household': !householdExists(h.id),
-    }"
-    :key="h.id"
-  >
-    <a v-if="householdExists(h.id)" :href="householdLink(h.id)">
-      <i
-        class="fa fa-home fa-fw text-light"
-        :title="$t('persons_associated.show_household_number', { id: h.id })"
-      />
-    </a>
-    <span v-for="person in h.persons" class="me-1" :key="person.id">
+  <span v-if="shortlist">
+    <span v-for="person in firstPersons" class="me-1" :key="person.id">
       <on-the-fly
         :type="person.type"
         :id="person.id"
-        :button-text="person.textAge"
-        :display-badge="'true' === 'true'"
+        :buttonText="person.textAge"
+        :displayBadge="'true' === 'true'"
         action="show"
-      />
+      ></on-the-fly>
+    </span>
+    <span v-if="hasMoreThanShortListPerson">
+      <a
+        class="showMore carousel-control"
+        role="button"
+        data-bs-target="#ACHeaderSlider"
+        data-bs-slide="next"
+        >{{ $t("more_x", { x: countMoreThanShortListPerson }) }}</a
+      >
+    </span>
+  </span>
+  <span v-else>
+    <span
+      v-for="([pk, persons], h) in personsByHousehold"
+      :class="{ household: pk > -1, 'no-household': pk === -1 }"
+      :key="h.id"
+    >
+      <a v-if="pk !== -1" :href="householdLink(h)">
+        <i
+          class="fa fa-home fa-fw text-light"
+          :title="$t('persons_associated.show_household_number', { id: h })"
+        ></i>
+      </a>
+      <span v-for="person in persons" class="me-1" :key="person.id">
+        <on-the-fly
+          :type="person.type"
+          :id="person.id"
+          :buttonText="person.textAge"
+          :displayBadge="true"
+          action="show"
+        ></on-the-fly>
+      </span>
     </span>
   </span>
 </template>
@@ -33,7 +52,14 @@ export default {
   components: {
     OnTheFly,
   },
-  props: ["accompanyingCourse"],
+  props: ["accompanyingCourse", "shortlist"],
+  data() {
+    return {
+      showAllPersons: false,
+      maxTotalPersons: 2,
+      nbShortList: 3,
+    };
+  },
   computed: {
     participations() {
       return this.accompanyingCourse.participations.filter(
@@ -43,36 +69,37 @@ export default {
     persons() {
       return this.participations.map((p) => p.person);
     },
+    firstPersons() {
+      return this.participations.slice(0, 3).map((p) => p.person);
+    },
+    hasMoreThanShortListPerson() {
+      return this.participations.length > 3;
+    },
+    countMoreThanShortListPerson() {
+      return this.participations.length - 3;
+    },
     resources() {
       return this.accompanyingCourse.resources;
     },
     requestor() {
       return this.accompanyingCourse.requestor;
     },
+    personsByHousehold() {
+      const households = new Map();
+      this.accompanyingCourse.participations
+        .filter((p) => p.endDate === null)
+        .map((p) => p.person)
+        .forEach((person) => {
+          if (!households.has(person.current_household_id || -1)) {
+            households.set(person.current_household_id || -1, []);
+          }
+          households.get(person.current_household_id || -1).push(person);
+        });
+
+      return households;
+    },
   },
   methods: {
-    uniq(array) {
-      return [...new Set(array)];
-    },
-    personsByHousehold() {
-      let households = [];
-      this.persons.forEach((p) => {
-        households.push(p.current_household_id);
-      });
-
-      let personsByHousehold = [];
-      this.uniq(households).forEach((h) => {
-        personsByHousehold.push({
-          id: h !== null ? h : 0,
-          persons: this.persons.filter((p) => p.current_household_id === h),
-        });
-      });
-      //console.log(personsByHousehold)
-      return personsByHousehold;
-    },
-    householdExists(id) {
-      return id !== 0;
-    },
     householdLink(id) {
       return `/fr/person/household/${id}/summary`;
     },
@@ -81,6 +108,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.showMore {
+  cursor: pointer;
+  color: white;
+}
 span.household {
   display: inline-block;
   border-top: 1px solid rgba(255, 255, 255, 0.3);

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

@@ -5,6 +5,7 @@ import { ontheflyMessages } from "ChillMainAssets/vuejs/OnTheFly/i18n";
 
 const appMessages = {
   fr: {
+    more_x: "et {x} de plus",
     course: {
       id: "id",
       title: {

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

@@ -2,13 +2,22 @@
 	<div id="header-accompanying_course-name" class="header-name">
 		<div class="container-xxl">
 			<div class="row">
-
 				<div class="col-md-6 ps-md-5 ps-xxl-0">
-					<h1>
-						<i class="fa fa-random fa-fw"></i>
-						{{ 'Accompanying Course'|trans }}
-						<span class="id-number">{{ accompanyingCourse.id }}</span>
-					</h1>
+                    <div class="row">
+                        <div class="col-12">
+                            <h1>
+                                <i class="fa fa-random fa-fw"></i>
+                                {{ 'Accompanying Course'|trans }}
+                                <span class="id-number">{{ accompanyingCourse.id }}</span>
+                            </h1>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-12">
+                            <div id="persons-associated-shortlist"></div>
+                        </div>
+                    </div>
+
 				</div>
 
 				{# vue teleport fragment here #}
@@ -24,12 +33,10 @@
 	<div id="header-accompanying_course-details" class="header-details">
 		<div class="container-xxl">
 			<div class="row">
-
                 <div class="col-md-12 px-md-5 px-xxl-0">
                     <div id="ACHeaderSlider" class="carousel carousel-dark slide" data-bs-ride="carousel">
                         <div class="carousel-inner">
                             <div class="carousel-item active">
-                                {# vue teleport fragment here #}
                                 <div id="banner-social-issues" class="col-11"></div>
                             </div>
                             <div class="carousel-item">