mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
Display first associated persons in the banner of an accompanying course
This commit is contained in:
parent
3f7c136d6b
commit
21274155b5
6
.changes/unreleased/Feature-20250123-211322.yaml
Normal file
6
.changes/unreleased/Feature-20250123-211322.yaml
Normal file
@ -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
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
uniq(array) {
|
||||
return [...new Set(array)];
|
||||
},
|
||||
personsByHousehold() {
|
||||
let households = [];
|
||||
this.persons.forEach((p) => {
|
||||
households.push(p.current_household_id);
|
||||
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);
|
||||
});
|
||||
|
||||
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;
|
||||
return households;
|
||||
},
|
||||
householdExists(id) {
|
||||
return id !== 0;
|
||||
},
|
||||
methods: {
|
||||
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);
|
||||
|
||||
@ -5,6 +5,7 @@ import { ontheflyMessages } from "ChillMainAssets/vuejs/OnTheFly/i18n";
|
||||
|
||||
const appMessages = {
|
||||
fr: {
|
||||
more_x: "et {x} de plus",
|
||||
course: {
|
||||
id: "id",
|
||||
title: {
|
||||
|
||||
@ -2,14 +2,23 @@
|
||||
<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">
|
||||
<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 #}
|
||||
<div class="col-md-3 mt-3 mb-1 my-md-3" id="banner-flags"></div>
|
||||
@ -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">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user