mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
accourse banner: use bootstrap carousel to display vue_accourse social-issues and associated-persons as slides
This commit is contained in:
parent
aba47600ff
commit
af339aa7f0
@ -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');
|
||||
}
|
||||
})
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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>
|
||||
@ -23,11 +23,28 @@
|
||||
</div>
|
||||
<div id="header-accompanying_course-details" class="header-details">
|
||||
<div class="container-xxl">
|
||||
<div
|
||||
class="row justify-content-md-right">
|
||||
<div class="row">
|
||||
|
||||
{# vue teleport fragment here #}
|
||||
<div class="col-md-10 ps-md-5 ps-xxl-0" id="banner-social-issues"></div>
|
||||
<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">
|
||||
{# 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>
|
||||
|
||||
@ -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' %}
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user