accourse banner: use bootstrap carousel to display vue_accourse social-issues and associated-persons as slides

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

@@ -29,13 +29,15 @@
    </teleport>
 
    <teleport to="#header-accompanying_course-details #banner-social-issues">
-      <div class="col-12">
-         <social-issue
-            v-for="issue in accompanyingCourse.socialIssues"
-            v-bind:key="issue.id"
-            v-bind:issue="issue">
-         </social-issue>
-      </div>
+      <social-issue
+         v-for="issue in accompanyingCourse.socialIssues"
+         v-bind:key="issue.id"
+         v-bind:issue="issue">
+      </social-issue>
+   </teleport>
+
+   <teleport to="#header-accompanying_course-details #banner-persons-associated">
+      <persons-associated :accompanyingCourse="accompanyingCourse"></persons-associated>
    </teleport>
 
 </template>
@@ -43,12 +45,14 @@
 <script>
 import ToggleFlags from './Banner/ToggleFlags';
 import SocialIssue from './Banner/SocialIssue.vue';
+import PersonsAssociated from './Banner/PersonsAssociated.vue';
 
 export default {
    name: 'Banner',
    components: {
       ToggleFlags,
-      SocialIssue
+      SocialIssue,
+      PersonsAssociated
    },
    computed: {
       accompanyingCourse() {

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

@@ -0,0 +1,74 @@
+<template>
+   <span v-for="h in personsByHousehold()" :class="{ 'household': householdExists(h.id), 'no-household': !householdExists(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 })"></i>
+      </a>
+      <span v-for="person in h.persons" class="me-1">
+         <on-the-fly :type="person.type" :id="person.id" :buttonText="person.text" :displayBadge="'true' === 'true'" action="show"></on-the-fly>
+      </span>
+   </span>
+</template>
+
+<script>
+import OnTheFly from 'ChillMainAssets/vuejs/OnTheFly/components/OnTheFly'
+
+export default {
+   name: "PersonsAssociated",
+   components: {
+      OnTheFly
+   },
+   props: [ 'accompanyingCourse' ],
+   computed: {
+      participations() {
+         return this.accompanyingCourse.participations.filter(p => p.endDate === null)
+      },
+      persons() {
+         return this.participations.map(p => p.person)
+      },
+      resources() {
+         return this.accompanyingCourse.resources
+      },
+      requestor() {
+         return this.accompanyingCourse.requestor
+      }
+   },
+   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`
+      }
+   }
+}
+</script>
+
+<style lang="scss" scoped>
+span.household {
+   border-top: 1px solid rgba(255, 255, 255, 0.3);
+   background-color: rgba(255, 255, 255, 0.1);
+   border-radius: 10px;
+   margin-right: 0.3em;
+   padding: 5px;
+}
+</style>