WIP: toulouse-2022: add json cell to display maelis catalog (#73851) #142
|
@ -1,25 +1,5 @@
|
||||||
.theme-basket {
|
.theme-basket,
|
||||||
&--item {
|
.theme-activities {
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
border-bottom: $cell-entry-border;
|
|
||||||
|
|
||||||
@media(max-width: $very-small-limit) {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&--item-details {
|
|
||||||
width: 100%;
|
|
||||||
flex-grow: 1;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--item-activity {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--item-name,
|
&--item-name,
|
||||||
&--item-unit,
|
&--item-unit,
|
||||||
&--item-location,
|
&--item-location,
|
||||||
|
@ -43,6 +23,29 @@
|
||||||
&--item-name::before { content: "\f007"; }
|
&--item-name::before { content: "\f007"; }
|
||||||
&--item-location::before { content: "\f041"; }
|
&--item-location::before { content: "\f041"; }
|
||||||
&--item-date::before { content: "\f133"; }
|
&--item-date::before { content: "\f133"; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-basket {
|
||||||
|
&--item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-bottom: $cell-entry-border;
|
||||||
|
|
||||||
|
@media(max-width: $very-small-limit) {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--item-details {
|
||||||
|
width: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--item-activity {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
&--item-summary {
|
&--item-summary {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -84,3 +87,101 @@
|
||||||
@extend .cancel-button;
|
@extend .cancel-button;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.theme-activities {
|
||||||
|
&--search {
|
||||||
|
display: grid;
|
||||||
|
grid-auto-rows: auto;
|
||||||
|
align-items: center;
|
||||||
|
grid-template-columns: auto auto;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
|
||||||
|
@media($max-mobile-viewport) {
|
||||||
|
grid-template-columns: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--criteria-label {
|
||||||
|
margin: 1rem 1rem 0.5rem 0;
|
||||||
|
|
||||||
|
@media($max-mobile-viewport) {
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--items {
|
||||||
|
display: grid;
|
||||||
|
grid-auto-rows: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--item {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: right;
|
||||||
|
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
border-top: 1px solid $cell-entry-border-color;
|
||||||
|
|
||||||
|
@media($max-mobile-viewport) {
|
||||||
|
align-items: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.filtered) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--item-label {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-right: calc(#{$title-font-size} + 0.5rem);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
top: -1rem;
|
||||||
|
right: 0;
|
||||||
|
font-size: $title-font-size;
|
||||||
|
margin: 0 0.5rem;
|
||||||
|
font-family: FontAwesome;
|
||||||
|
color: $title-color;
|
||||||
|
content: $cell-close-foldable-icon;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--item.collapsed &--item-label::after {
|
||||||
|
content: $cell-open-foldable-icon;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--item-type {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--item-summary {
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
@media($min-desktop-viewport) {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--item.collapsed &--item-details {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--pagination {
|
||||||
|
@extend .cell-items-pagination;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--criteria-option[aria-disabled=true] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -183,6 +183,17 @@
|
||||||
"url": "{{passerelle_url}}toulouse-maelis/{{ slug }}/validate-basket?{% if foyer_id %}family_id={{ foyer_id }}{% else %}NameID={{ user_nameid }}{% endif %}"
|
"url": "{{passerelle_url}}toulouse-maelis/{{ slug }}/validate-basket?{% if foyer_id %}family_id={{ foyer_id }}{% else %}NameID={{ user_nameid }}{% endif %}"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
"toulouse-maelis-catalog": {
|
||||||
|
"cache_duration": 0,
|
||||||
|
"force_async": true,
|
||||||
|
"name": "Toulouse - Maelis : Catalogue des activités",
|
||||||
|
"url": "{{ passerelle_url }}toulouse-maelis/{{ slug }}/read-activity-list?ref_date={% now 'Y-m-d' %}",
|
||||||
|
"form": [
|
||||||
|
{"label": "Slug du connecteur", "varname": "slug", "required": true},
|
||||||
|
{"label": "URL de la démarche d'inscription", "varname": "form_url", "required": true}
|
||||||
|
],
|
||||||
|
"varnames": ["q"]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -62,7 +62,7 @@
|
||||||
"cache_duration": 0,
|
"cache_duration": 0,
|
||||||
"force_async": true,
|
"force_async": true,
|
||||||
"name": "DUI (Teamnet Axel) : Activités auxquelles l'enfant est inscrit·e",
|
"name": "DUI (Teamnet Axel) : Activités auxquelles l'enfant est inscrit·e",
|
||||||
"url": "{{passerelle_url}}toulouse-axel/{{slug}}/clae_children_activities_info?NameID={{user_nameid}}&booking_date={% now \"Y-m-d\" %}",
|
"url": "{{ passerelle_url }}toulouse-maelis/{{ slug }}/read-activity-list?ref_date={% now 'Y-m-d' %}"",
|
||||||
"form": [
|
"form": [
|
||||||
{"label": "Identifiant du connecteur", "varname": "slug", "required": true}
|
{"label": "Identifiant du connecteur", "varname": "slug", "required": true}
|
||||||
]
|
]
|
||||||
|
|
|
@ -0,0 +1,167 @@
|
||||||
|
<h2 class="cell--title">Catalogue des activité {{ json.meta.reference_year }}-{{ json.meta.reference_year|add:1 }}</h2>
|
||||||
|
<div class="cell--body" data-cell-id="{{ cell.id }}">
|
||||||
|
<div class="theme-activities--search">
|
||||||
|
{% for criteria_id in json.meta.all_criterias_order %}
|
||||||
|
{% with criteria=json.meta.all_criterias|get:criteria_id %}
|
||||||
|
{% if criteria.data %}
|
||||||
|
<div class="theme-activites--criteria">
|
||||||
|
<label class="theme-activities--criteria-label">
|
||||||
|
{{ criteria.text }} :
|
||||||
|
</label>
|
||||||
|
<div class="theme-activities--criteria-choices">
|
||||||
|
<select data-autocomplete="true" multiple="true" data-criteria="{{criteria_id}}">
|
||||||
|
{% for value_id in criteria.order %}
|
||||||
|
<option value={{value_id}}>
|
||||||
|
{{ criteria.data|get:value_id }}
|
||||||
|
</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% endwith %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
<div class="theme-activities--items">
|
||||||
|
{% for item in json.data %}
|
||||||
|
<div class="theme-activities--item filtered collapsed"
|
||||||
|
{% for criteria_id, criterias in item.criterias.items %}
|
||||||
|
data-criteria-{{ criteria_id }}="{{ criterias.order|join:',' }}"
|
||||||
|
{% endfor %}
|
||||||
|
>
|
||||||
|
<div class="theme-activities--item-label" role="button" aria-label="Voir les détails" title="Détails">{{ item.text }}</div>
|
||||||
|
<div class="theme-activities--item-summary">
|
||||||
|
<div class="theme-activities--item-type">{{ item.criterias.type.data|get:item.criterias.type.order.0 }}</div>
|
||||||
|
<div class="theme-activities--item-location">{{ item.place.text }}</div>
|
||||||
|
<div class="theme-activities--item-date">Du {{ item.unit.dateStart|date:"d/m/Y" }} au {{ item.unit.dateEnd|date:"d/m/Y" }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="theme-activities--item-details">
|
||||||
|
<p class"theme-activities--item-description">{% lorem %}</p>
|
||||||
|
<p class"theme-activities--item-audience">
|
||||||
|
Public :
|
||||||
|
{% for key in item.criterias.public.order %}
|
||||||
|
{{ item.criterias.public.data|get:key }}
|
||||||
|
{% if not forloop.last %}, {% endif %}
|
||||||
|
{% endfor %}.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a class="pk-button"
|
||||||
|
href="{{ eservices_url }}{{ form_url }}tryauth?activity_id={{ activity.activity_id}}&unit_id={{ activity.uniœt_id }}&place_id={{ activity.place_id }}">
|
||||||
|
Inscription
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
<div class="theme-activities--pagination">
|
||||||
|
<button class="theme-activities--pagination-prev">←</a>
|
||||||
|
<button class="theme-activities--pagination-next">→</a>
|
||||||
|
</div>
|
||||||
|
<div class="theme-activities--no-result" hidden>
|
||||||
|
<p class="infonotice">Aucun Résultat</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="{{portal_url}}/static/xstatic/select2.min.css">
|
||||||
|
<script src="{{portal_url}}/static/xstatic/select2.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(() => {
|
||||||
|
const $cell = $('[data-cell-id="{{ cell.id }}"')
|
||||||
|
const $pagination = $cell.find('.theme-activities--pagination')
|
||||||
|
const $paginationPrev = $cell.find('.theme-activities--pagination-prev')
|
||||||
|
const $paginationNext = $cell.find('.theme-activities--pagination-next')
|
||||||
|
const paginateBy = 4;
|
||||||
|
|
||||||
|
function updatePagination(step) {
|
||||||
|
const items = $cell.find('.theme-activities--item.filtered')
|
||||||
|
|
||||||
|
const maxPageIndex = Math.ceil(items.length / paginateBy);
|
||||||
|
let pageIndex = $pagination.data('page_index') || 0
|
||||||
|
pageIndex = Math.max(0, Math.min(pageIndex + step, maxPageIndex - 1));
|
||||||
|
|
||||||
|
$pagination.prop('hidden', maxPageIndex <= 1);
|
||||||
|
$paginationPrev.prop('disabled', pageIndex === 0);
|
||||||
|
$paginationNext.prop('disabled', pageIndex === maxPageIndex - 1)
|
||||||
|
|
||||||
|
const startItem = paginateBy * pageIndex;
|
||||||
|
|
||||||
|
items.hide();
|
||||||
|
items.slice(startItem, startItem + paginateBy).show();
|
||||||
|
$pagination.data('page_index', pageIndex);
|
||||||
|
};
|
||||||
|
|
||||||
|
$paginationPrev.click(() => updatePagination(-1))
|
||||||
|
$paginationNext.click(() => updatePagination(1))
|
||||||
|
updatePagination(0)
|
||||||
|
|
||||||
|
const queryParams = (new URL(document.location)).searchParams;
|
||||||
|
|
||||||
|
$cell.find('select[data-criteria]').on('change', evt => {
|
||||||
|
let selectedCriterias = []
|
||||||
|
|
||||||
|
for(const select of $cell.find('select[data-criteria]')) {
|
||||||
|
if(select.selectedOptions.length === 0) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
selectedCriterias.push([
|
||||||
|
select.dataset.criteria,
|
||||||
|
new Set([...select.selectedOptions].map(option => option.value))
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
$cell.find(`.theme-activities--item`).each((_, element) => {
|
||||||
|
element.classList.add('filtered')
|
||||||
|
for ([criteriaId, filteredValues] of selectedCriterias) {
|
||||||
|
const elementValues = element.getAttribute(`data-criteria-${criteriaId}`)
|
||||||
|
|
||||||
|
if (elementValues !== undefined &&
|
||||||
|
!elementValues.split(',').some(value => filteredValues.has(value))) {
|
||||||
|
element.classList.remove('filtered')
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
for(const select of $cell.find('select[data-criteria]')) {
|
||||||
|
const criteriaId = select.dataset.criteria
|
||||||
|
const availableValues = new Set()
|
||||||
|
for(const item of $cell.find(`.theme-activities--item.filtered[data-criteria-${criteriaId}]`)) {
|
||||||
|
const criteriaValues = item.getAttribute(`data-criteria-${criteriaId}`).split(',')
|
||||||
|
for (const value of criteriaValues) {
|
||||||
|
availableValues.add(value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const option of select.options) {
|
||||||
|
option.disabled = !availableValues.has(option.value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const filteredResults = $cell.find(`.theme-activities--item.filtered`)
|
||||||
|
$cell.find(".theme-activities--no-result").prop('hidden', filteredResults.length !== 0)
|
||||||
|
|
||||||
|
updatePagination(0)
|
||||||
|
})
|
||||||
|
|
||||||
|
$cell.find('select[data-criteria]').each((_, element) => {
|
||||||
|
const $element = $(element)
|
||||||
|
$element.select2({
|
||||||
|
templateResult: (data, container) => {
|
||||||
|
container.classList.add('theme-activities--criteria-option')
|
||||||
|
return data.text
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const criteriaValues = queryParams.get(element.dataset.criteria)
|
||||||
|
if (criteriaValues !== null) {
|
||||||
|
$element.val(criteriaValues.split(','))
|
||||||
|
$element.trigger('change')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
$cell.find('.theme-activities--item-label').on('click', evt => {
|
||||||
|
$(evt.target).closest('.theme-activities--item').toggleClass('collapsed')
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
Loading…
Reference in New Issue