From 54da8c04651dde58d382e6199eab3ccade62874e Mon Sep 17 00:00:00 2001 From: Nicolas ROCHE Date: Wed, 25 Jan 2023 19:26:55 +0100 Subject: [PATCH 1/4] toulouse-2022: add json cell to display maelis catalog (#73851) --- static/toulouse-2022/config.json | 11 + .../combo/json/toulouse-maelis-catalog.html | 264 ++++++++++++++++++ 2 files changed, 275 insertions(+) create mode 100644 templates/variants/toulouse-2022/combo/json/toulouse-maelis-catalog.html diff --git a/static/toulouse-2022/config.json b/static/toulouse-2022/config.json index d25a28f4..15f32495 100644 --- a/static/toulouse-2022/config.json +++ b/static/toulouse-2022/config.json @@ -183,6 +183,17 @@ "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"] } } } diff --git a/templates/variants/toulouse-2022/combo/json/toulouse-maelis-catalog.html b/templates/variants/toulouse-2022/combo/json/toulouse-maelis-catalog.html new file mode 100644 index 00000000..13cb9ac4 --- /dev/null +++ b/templates/variants/toulouse-2022/combo/json/toulouse-maelis-catalog.html @@ -0,0 +1,264 @@ +

Catalogue des activité {{ json.meta.reference_year }}-{{ json.meta.reference_year|add:1 }}

+ +
+ +
+ +
+ +
+ + + + -- 2.39.2 From 1ac39102595f85e0182801dc4088ee367bdd5889 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Corentin=20S=C3=A9chet?= Date: Wed, 22 Feb 2023 17:03:30 +0100 Subject: [PATCH 2/4] improved activity catalog --- static/toulouse-2022/_json_cells.scss | 141 +++++-- static/toulouse/config.json | 2 +- .../combo/json/toulouse-maelis-catalog.html | 359 ++++++------------ 3 files changed, 235 insertions(+), 267 deletions(-) diff --git a/static/toulouse-2022/_json_cells.scss b/static/toulouse-2022/_json_cells.scss index 91811755..4d778325 100644 --- a/static/toulouse-2022/_json_cells.scss +++ b/static/toulouse-2022/_json_cells.scss @@ -1,25 +1,5 @@ -.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; - } - +.theme-basket, +.theme-activities { &--item-name, &--item-unit, &--item-location, @@ -43,6 +23,29 @@ &--item-name::before { content: "\f007"; } &--item-location::before { content: "\f041"; } &--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 { display: flex; @@ -84,3 +87,97 @@ @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; + } +} diff --git a/static/toulouse/config.json b/static/toulouse/config.json index 6999e631..83b60765 100644 --- a/static/toulouse/config.json +++ b/static/toulouse/config.json @@ -62,7 +62,7 @@ "cache_duration": 0, "force_async": true, "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": [ {"label": "Identifiant du connecteur", "varname": "slug", "required": true} ] diff --git a/templates/variants/toulouse-2022/combo/json/toulouse-maelis-catalog.html b/templates/variants/toulouse-2022/combo/json/toulouse-maelis-catalog.html index 13cb9ac4..b5a2760a 100644 --- a/templates/variants/toulouse-2022/combo/json/toulouse-maelis-catalog.html +++ b/templates/variants/toulouse-2022/combo/json/toulouse-maelis-catalog.html @@ -1,264 +1,135 @@ -

Catalogue des activité {{ json.meta.reference_year }}-{{ json.meta.reference_year|add:1 }}

- -
-
    - {% for theme_id in json.meta.all_criterias_order %} - {% with theme=json.meta.all_criterias|get:theme_id %} - {% if theme.data %} -
  • - -
      - {% for key in theme.order %} -
    • - -
      • - {% endfor %} -
    -
    • - {% endif %} - {% endwith %} +

    Catalogue des activité {{ json.meta.reference_year }}-{{ json.meta.reference_year|add:1 }}

    +
    +
    + {% for criteria_id in json.meta.all_criterias_order %} + {% with criteria=json.meta.all_criterias|get:criteria_id %} + {% if criteria.data %} +
    + +
    + +
    +
    + {% endif %} + {% endwith %} {% endfor %} -
-
- -
-
    +
+
{% for item in json.data %} -
  • -

    {{ item.text }}

    - {{ item.place.text }} / - du {{ item.unit.dateStart|date:"d/m/Y" }} au {{ item.unit.dateEnd|date:"d/m/Y" }} / - {{ item.criterias.type.data|get:item.criterias.type.order.0 }} / - {{ item.place.text }} --- - 🔍 Voir - 📝 Inscription - -

    Description :

    - {% lorem %} -

    Public :

    - {% for key in item.criterias.public.order %} - {{ item.criterias.public.data|get:key }} - {% if not forloop.last %}, {% endif %} - {% endfor %}. -

    -
    • + {% endfor %} - +
    +
    + +
    - + + -- 2.39.2 From 2a3f4aea4728e03d44abaa3ddff657c14814f187 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Corentin=20S=C3=A9chet?= Date: Wed, 8 Mar 2023 12:29:19 +0100 Subject: [PATCH 3/4] support defining filters in url --- .../combo/json/toulouse-maelis-catalog.html | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/templates/variants/toulouse-2022/combo/json/toulouse-maelis-catalog.html b/templates/variants/toulouse-2022/combo/json/toulouse-maelis-catalog.html index b5a2760a..75e3d6e6 100644 --- a/templates/variants/toulouse-2022/combo/json/toulouse-maelis-catalog.html +++ b/templates/variants/toulouse-2022/combo/json/toulouse-maelis-catalog.html @@ -94,7 +94,17 @@ $(() => { $paginationNext.click(() => updatePagination(1)) updatePagination(0) - $cell.find('select[data-criteria]').each((_, elem) => $(elem).select2()) + const queryParams = (new URL(document.location)).searchParams; + $cell.find('select[data-criteria]').each((_, element) => { + const $element = $(element) + $element.select2() + const criteriaValues = queryParams.get(element.dataset.criteria) + if (criteriaValues !== null) { + $element.val(criteriaValues.split(',')) + $element.trigger('change') + } + }) + $cell.find('select[data-criteria]').on('change', evt => { let selectedCriterias = [] @@ -131,5 +141,6 @@ $(() => { $cell.find('.theme-activities--item-label').on('click', evt => { $(evt.target).closest('.theme-activities--item').toggleClass('collapsed') }) + }) -- 2.39.2 From 82c803d424554e3ad4e37571b2f376d2aec6d079 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Corentin=20S=C3=A9chet?= Date: Wed, 8 Mar 2023 15:13:50 +0100 Subject: [PATCH 4/4] remove unavailable criterias values when updating filtered items --- static/toulouse-2022/_json_cells.scss | 4 ++ .../combo/json/toulouse-maelis-catalog.html | 41 ++++++++++++++----- 2 files changed, 35 insertions(+), 10 deletions(-) diff --git a/static/toulouse-2022/_json_cells.scss b/static/toulouse-2022/_json_cells.scss index 4d778325..ec2cb050 100644 --- a/static/toulouse-2022/_json_cells.scss +++ b/static/toulouse-2022/_json_cells.scss @@ -180,4 +180,8 @@ &--pagination { @extend .cell-items-pagination; } + + &--criteria-option[aria-disabled=true] { + display: none; + } } diff --git a/templates/variants/toulouse-2022/combo/json/toulouse-maelis-catalog.html b/templates/variants/toulouse-2022/combo/json/toulouse-maelis-catalog.html index 75e3d6e6..3724b9d7 100644 --- a/templates/variants/toulouse-2022/combo/json/toulouse-maelis-catalog.html +++ b/templates/variants/toulouse-2022/combo/json/toulouse-maelis-catalog.html @@ -95,15 +95,6 @@ $(() => { updatePagination(0) const queryParams = (new URL(document.location)).searchParams; - $cell.find('select[data-criteria]').each((_, element) => { - const $element = $(element) - $element.select2() - const criteriaValues = queryParams.get(element.dataset.criteria) - if (criteriaValues !== null) { - $element.val(criteriaValues.split(',')) - $element.trigger('change') - } - }) $cell.find('select[data-criteria]').on('change', evt => { let selectedCriterias = [] @@ -132,15 +123,45 @@ $(() => { } }) + 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') }) - }) -- 2.39.2