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

src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/index.js

@@ -8,3 +8,38 @@ require('./bootstrap.scss');
 import Dropdown from 'bootstrap/js/src/dropdown';
 import Modal from 'bootstrap/js/dist/modal';
 import Collapse from 'bootstrap/js/src/collapse';
+import Carousel from 'bootstrap/js/src/carousel';
+
+//
+// ACHeaderSlider is a small slider used in banner of AccompanyingCourse Section
+// Initialize options, and show/hide controls in first/last slides
+//
+let ACHeaderSlider = document.querySelector('#ACHeaderSlider'),
+    controlPrev = ACHeaderSlider.querySelector('button[data-bs-slide="prev"]'),
+    controlNext = ACHeaderSlider.querySelector('button[data-bs-slide="next"]'),
+    length = ACHeaderSlider.querySelectorAll('.carousel-item').length,
+    last = length-1,
+    carousel = new Carousel(ACHeaderSlider, {
+        interval: false,
+        wrap: false,
+        ride: false,
+        keyboard: false,
+        touch: true
+    })
+;
+ACHeaderSlider.addEventListener('slid.bs.carousel', (e) => {
+    //console.log('from slide', e.direction, e.relatedTarget, e.from, e.to );
+    switch (e.to) {
+        case 0:
+            controlPrev.classList.add('visually-hidden');
+            controlNext.classList.remove('visually-hidden');
+            break;
+        case last:
+            controlPrev.classList.remove('visually-hidden');
+            controlNext.classList.add('visually-hidden');
+            break;
+        default:
+            controlPrev.classList.remove('visually-hidden');
+            controlNext.classList.remove('visually-hidden');
+    }
+})

src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss

@@ -127,3 +127,32 @@ div.activity-list {
         }
     }
 }
+
+/// AccompanyingCourse: HeaderSlider Carousel
+div#header-accompanying_course-details {
+    button.carousel-control-prev,
+    button.carousel-control-next {
+        width: 8%;
+        opacity: inherit;
+    }
+    span.to-social-issues,
+    span.to-persons-associated {
+        display: inline-block;
+        border-radius: 15px;
+        width: 24px;
+        height: 24px;
+        box-shadow: 0 0 3px 0 grey;
+        opacity: 0.8;
+        &:hover {
+            opacity: 1;
+        }
+    }
+    span.to-social-issues {
+        background-color: #4bafe8;
+        border-left: 8px solid #32749a;
+    }
+    span.to-persons-associated {
+        background-color: #16d9b4;
+        border-right: 8px solid #ffffff;
+    }
+}

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

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

@@ -23,11 +23,28 @@
 	</div>
 	<div id="header-accompanying_course-details" class="header-details">
 		<div class="container-xxl">
-			<div
+			<div class="row">
-				class="row justify-content-md-right">
 
+                <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 class="col-md-10 ps-md-5 ps-xxl-0" id="banner-social-issues"></div>
+                                <div id="banner-social-issues" class="col-11"></div>
+                            </div>
+                            <div class="carousel-item">
+                                {# vue teleport fragment here #}
+                                <div id="banner-persons-associated" class="col-11 offset-1 text-end"></div>
+                            </div>
+                        </div>
+                        <button class="carousel-control-prev justify-content-start visually-hidden" type="button" data-bs-target="#ACHeaderSlider" data-bs-slide="prev">
+                            <span class="to-social-issues" title="{{ 'see social issues'|trans }}"></span>
+                        </button>
+                        <button class="carousel-control-next justify-content-end" type="button" data-bs-target="#ACHeaderSlider" data-bs-slide="next">
+                            <span class="to-persons-associated" title="{{ 'see persons associated'|trans }}"></span>
+                        </button>
+                    </div>
+                </div>
 
 			</div>
 		</div>

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

@@ -23,32 +23,6 @@
 {% block content %}
 <div class="accompanyingcourse-resume row">
 
-    <div class="associated-persons mb-5">
-        {% for h in participationsByHousehold %}
-            {% set householdClass = (h.household is not null) ? 'household-' ~ h.household.id : 'no-household alert alert-warning' %}
-            {% set householdTitle = (h.household is not null) ?
-                'household.Household number'|trans({'household_num': h.household.id }) : 'household.Never in any household'|trans %}
-            <span class="household {{ householdClass }}" title="{{ householdTitle }}">
-                {% if h.household is not null %}
-                    <a href="{{ path('chill_person_household_summary', { 'household_id': h.household.id }) }}"
-                       title="{{ 'household.Household number'|trans({'household_num': h.household.id }) }}"
-                    ><i class="fa fa-home fa-fw"></i></a>
-                {% endif %}
-                {% for p in h.members %}
-
-                    {# include vue_onthefly component #}
-                    {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
-                        targetEntity: { name: 'person', id: p.person.id },
-                        action: 'show',
-                        displayBadge: true,
-                        buttonText: p.person|chill_entity_render_string
-                    } %}
-
-                {% endfor %}
-            </span>
-        {% endfor %}
-    </div>
-
     {% if 'DRAFT' == accompanyingCourse.step %}
         <div class="col-md-6 warnings mb-5">
             {% include '@ChillPerson/AccompanyingCourse/_still_draft.html.twig' %}

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

@@ -430,3 +430,5 @@ accompanying_course_work:
 Person addresses: Adresses de résidence
 Household addresses: Adresses de domicile
 Insert an address: Insérer une adresse
+see social issues: Voir les problématiques sociales
+see persons associated: Voir les usagers concernés