From 0cbcd91c3f1d694dd07d697cd7c26555df33dab6 Mon Sep 17 00:00:00 2001
From: Julie Lenaerts <julielenaerts@gmail.com>
Date: Fri, 22 Apr 2022 17:49:57 +0200
Subject: [PATCH] closed periods in accordeon + styling

---
 .../public/chill/scss/flex_table.scss         |   2 +
 .../views/Person/list_with_period.html.twig   | 319 +++++++++---------
 2 files changed, 165 insertions(+), 156 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/flex_table.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/flex_table.scss
index 2383e43b1..30cac9c85 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/flex_table.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/flex_table.scss
@@ -30,6 +30,7 @@ div.list-with-period {
 
     // override wrap-list
     div.wrap-list.periods-list {
+        padding-right: 1rem;
         div.wl-row {
             flex-wrap: nowrap;
             div.wl-col {
@@ -63,6 +64,7 @@ div.list-with-period {
     }
 
     div.periods-list {
+        padding-right: 1rem;
         div.title {
             text-align: right;
             div.date {}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig
index b9928bfe1..e2c06accb 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Person/list_with_period.html.twig
@@ -12,154 +12,153 @@
 
 {% macro accompanying_period(acp, person) %}
     {% set app = person.findParticipationForPeriod(acp) %}
-    <div class="item-row separator">
-        <div class="wrap-list periods-list">
-            <div class="wl-row">
-                <div class="wl-col title">
-                    <h3 class="courseid mb-2">
-                            <i class="fa fa-random fa-fw"></i>
-                            {{ 'Course number'|trans }} {{ acp.id }}
-                    </h3>
-                </div>
-                <div class="wl-col list">
-                    <div class="d-flex flex-column justify-content-center">
-                        {% if app != null %}
-                            <div class="date">
-                                {{ 'Since %date%'|trans({'%date%': app.startDate|format_date('medium') }) }}
-                            </div>
-                        {% endif %}
-
-                        {% set notif_counter = chill_count_notifications('Chill\\PersonBundle\\Entity\\AccompanyingPeriod', acp.id) %}
-                        {% if notif_counter.total > 0 %}
-                            {{ chill_counter_notifications('Chill\\PersonBundle\\Entity\\AccompanyingPeriod', acp.id) }}
-                        {% endif %}
-                    </div>
-                    <div class="ms-auto">
-                        {% if acp.requestoranonymous == false and acp.requestorPerson is same as(person) %}
-                            <span class="as-requestor badge bg-info" title="{{ 'Requestor'|trans|e('html_attr') }}">
-                                {{ 'Requestor'|trans({'gender': person.gender}) }}
-                            </span>
-                        {% endif %}
-
-                        {% if acp.emergency %}
-                            <span class="badge rounded-pill bg-danger">{{- 'Emergency'|trans|upper -}}</span>
-                        {% endif %}
-
-                        {% if acp.confidential %}
-                            <span class="badge rounded-pill bg-confidential">{{- 'Confidential'|trans|upper -}}</span>
-                        {% endif %}
-
-                        {% if acp.step == 'DRAFT' %}
-                            <span class="badge bg-secondary" style="font-size: 85%;" title="{{ 'course.draft'|trans }}">{{ 'course.draft'|trans }}</span>
-                        {% endif %}
-
-                        {% if acp.step == 'CLOSED' %}
-                            <span class="badge bg-secondary" style="font-size: 85%;" title="{{ 'course.closed'|trans }}">{{ 'course.closed'|trans }}</span>
-                        {% endif %}
-                    </div>
-                </div>
-            </div>
-
-            {% if acp.user is not null %}
+        <div class="item-row separator">
+            <div class="wrap-list periods-list">
                 <div class="wl-row">
                     <div class="wl-col title">
-                        <h3 class="referrer">{{ 'Referrer'|trans }}</h3>
-                    </div>
-                    <div class="wl-col list">
-                        <div class="user">
-                            {{ acp.user|chill_entity_render_box }}
-                        </div>
-                    </div>
-                </div>
-            {% endif %}
-
-            {% if acp.socialIssues|length > 0  %}
-                <div class="wl-row">
-                    <div class="wl-col title">
-                        <h3>{{ 'Social issues'|trans }}</h3>
-                    </div>
-                    <div class="wl-col list">
-                        {% for issue in acp.socialIssues %}
-                            {{ issue|chill_entity_render_box }}
-                        {% endfor %}
-                    </div>
-                </div>
-            {% endif %}
-
-            {% if acp.currentParticipations|length > 1 %}
-                <div class="wl-row">
-                    <div class="wl-col title">
-                        <h3 class="participants">
-                            {{ 'Participants'|trans }}
+                        <h3 class="courseid mb-2">
+                                <i class="fa fa-random fa-fw"></i>
+                                {{ 'Course number'|trans }} {{ acp.id }}
                         </h3>
                     </div>
                     <div class="wl-col list">
-                        {% set participating = false %}
-                        {% for part in acp.currentParticipations  %}
-                            {% if part.person.id != person.id %}
-                                {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
-                                    targetEntity: { name: 'person', id: part.person.id },
-                                    action: 'show',
-                                    displayBadge: true,
-                                    buttonText: part.person|chill_entity_render_string,
-                                    isDead: part.person.deathdate is not null
-                                } %}
-                            {% else %}
-                                {% set participating = true %}
+                        <div class="d-flex flex-column justify-content-center">
+                            {% if app != null %}
+                                <div class="date">
+                                    {{ 'Since %date%'|trans({'%date%': app.startDate|format_date('medium') }) }}
+                                </div>
                             {% endif %}
-                        {% endfor %}
-                        {% if participating %}
-                            {{ 'person.and_himself'|trans({'gender': person.gender}) }}
-                        {% endif %}
+
+                            {% set notif_counter = chill_count_notifications('Chill\\PersonBundle\\Entity\\AccompanyingPeriod', acp.id) %}
+                            {% if notif_counter.total > 0 %}
+                                {{ chill_counter_notifications('Chill\\PersonBundle\\Entity\\AccompanyingPeriod', acp.id) }}
+                            {% endif %}
+                        </div>
+                        <div class="ms-auto">
+                            {% if acp.requestoranonymous == false and acp.requestorPerson is same as(person) %}
+                                <span class="as-requestor badge bg-info" title="{{ 'Requestor'|trans|e('html_attr') }}">
+                                    {{ 'Requestor'|trans({'gender': person.gender}) }}
+                                </span>
+                            {% endif %}
+
+                            {% if acp.emergency %}
+                                <span class="badge rounded-pill bg-danger">{{- 'Emergency'|trans|upper -}}</span>
+                            {% endif %}
+
+                            {% if acp.confidential %}
+                                <span class="badge rounded-pill bg-confidential">{{- 'Confidential'|trans|upper -}}</span>
+                            {% endif %}
+
+                            {% if acp.step == 'DRAFT' %}
+                                <span class="badge bg-secondary" style="font-size: 85%;" title="{{ 'course.draft'|trans }}">{{ 'course.draft'|trans }}</span>
+                            {% endif %}
+
+                            {% if acp.step == 'CLOSED' %}
+                                <span class="badge bg-secondary" style="font-size: 85%;" title="{{ 'course.closed'|trans }}">{{ 'course.closed'|trans }}</span>
+                            {% endif %}
+                        </div>
                     </div>
                 </div>
-            {% endif %}
 
-            {% if acp.requestoranonymous == false %}
-                {% if (acp.requestorPerson is not null and acp.requestorPerson.id != person.id) or acp.requestorThirdParty is not null %}
+                {% if acp.user is not null %}
                     <div class="wl-row">
                         <div class="wl-col title">
-                            <h3>
-                                {% if acp.requestorPerson is not null %}
-                                    {{ 'Requestor'|trans({'gender': acp.requestorPerson.gender}) }}
-                                {% else %}
-                                    {{ 'Requestor'|trans({'gender': 'other'})}}
-                                {% endif %}
+                            <h3 class="referrer">{{ 'Referrer'|trans }}</h3>
+                        </div>
+                        <div class="wl-col list">
+                            <div class="user">
+                                {{ acp.user|chill_entity_render_box }}
+                            </div>
+                        </div>
+                    </div>
+                {% endif %}
+
+                {% if acp.socialIssues|length > 0  %}
+                    <div class="wl-row">
+                        <div class="wl-col title">
+                            <h3>{{ 'Social issues'|trans }}</h3>
+                        </div>
+                        <div class="wl-col list">
+                            {% for issue in acp.socialIssues %}
+                                {{ issue|chill_entity_render_box }}
+                            {% endfor %}
+                        </div>
+                    </div>
+                {% endif %}
+
+                {% if acp.currentParticipations|length > 1 %}
+                    <div class="wl-row">
+                        <div class="wl-col title">
+                            <h3 class="participants">
+                                {{ 'Participants'|trans }}
                             </h3>
                         </div>
                         <div class="wl-col list">
-                            {% if acp.requestorThirdParty is not null %}
-                                {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
-                                    targetEntity: { name: 'thirdparty', id: acp.requestorThirdParty.id },
-                                    action: 'show',
-                                    displayBadge: true,
-                                    buttonText: acp.requestorThirdParty|chill_entity_render_string
-                                } %}
-                            {% else %}
-                                {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
-                                    targetEntity: { name: 'person', id: acp.requestorPerson.id },
-                                    action: 'show',
-                                    displayBadge: true,
-                                    buttonText: acp.requestorPerson|chill_entity_render_string,
-                                    isDead: acp.requestorPerson.deathdate is not null
-                                } %}
+                            {% set participating = false %}
+                            {% for part in acp.currentParticipations  %}
+                                {% if part.person.id != person.id %}
+                                    {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
+                                        targetEntity: { name: 'person', id: part.person.id },
+                                        action: 'show',
+                                        displayBadge: true,
+                                        buttonText: part.person|chill_entity_render_string,
+                                        isDead: part.person.deathdate is not null
+                                    } %}
+                                {% else %}
+                                    {% set participating = true %}
+                                {% endif %}
+                            {% endfor %}
+                            {% if participating %}
+                                {{ 'person.and_himself'|trans({'gender': person.gender}) }}
                             {% endif %}
                         </div>
                     </div>
                 {% endif %}
-            {% endif %}
 
-            <ul class="record_actions record_actions_column">
-                <li>
-                    <a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': acp.id }) }}"
-                        class="btn btn-sm btn-outline-primary" title="{{ 'See accompanying period'|trans }}">
-                        <i class="fa fa-random fa-fw"></i>
-                    </a>
-                </li>
-            </ul>
+                {% if acp.requestoranonymous == false %}
+                    {% if (acp.requestorPerson is not null and acp.requestorPerson.id != person.id) or acp.requestorThirdParty is not null %}
+                        <div class="wl-row">
+                            <div class="wl-col title">
+                                <h3>
+                                    {% if acp.requestorPerson is not null %}
+                                        {{ 'Requestor'|trans({'gender': acp.requestorPerson.gender}) }}
+                                    {% else %}
+                                        {{ 'Requestor'|trans({'gender': 'other'})}}
+                                    {% endif %}
+                                </h3>
+                            </div>
+                            <div class="wl-col list">
+                                {% if acp.requestorThirdParty is not null %}
+                                    {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
+                                        targetEntity: { name: 'thirdparty', id: acp.requestorThirdParty.id },
+                                        action: 'show',
+                                        displayBadge: true,
+                                        buttonText: acp.requestorThirdParty|chill_entity_render_string
+                                    } %}
+                                {% else %}
+                                    {% include '@ChillMain/OnTheFly/_insert_vue_onthefly.html.twig' with {
+                                        targetEntity: { name: 'person', id: acp.requestorPerson.id },
+                                        action: 'show',
+                                        displayBadge: true,
+                                        buttonText: acp.requestorPerson|chill_entity_render_string,
+                                        isDead: acp.requestorPerson.deathdate is not null
+                                    } %}
+                                {% endif %}
+                            </div>
+                        </div>
+                    {% endif %}
+                {% endif %}
 
+                <ul class="record_actions record_actions_column">
+                    <li>
+                        <a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': acp.id }) }}"
+                            class="btn btn-sm btn-outline-primary" title="{{ 'See accompanying period'|trans }}">
+                            <i class="fa fa-random fa-fw"></i>
+                        </a>
+                    </li>
+                </ul>
+            </div>
         </div>
-    </div>
 {% endmacro %}
 
 <div class="list-with-period">
@@ -218,46 +217,54 @@
 
                     {#- 'acps' is for AcCompanyingPeriodS #}
                     {%- set acps = [] %}
+                    {%- set acpsClosed = [] %}
                     {%- for acp in person.accompanyingPeriodInvolved %}
                         {%- if is_granted('CHILL_PERSON_ACCOMPANYING_PERIOD_SEE', acp) %}
-                            {%- set acps = acps|merge([acp]) %}
+                            {% if acp.step == 'CLOSED' %}
+                                {%- set acpsClosed = acpsClosed|merge([acp]) %}
+                            {% else %}
+                                {%- set acps = acps|merge([acp]) %}
+                            {% endif %}
                         {%- endif %}
                     {%- endfor %}
                     {# add as requestor #}
 
                     {% if acps|length > 0 %}
                         {% for acp in acps %}
-                            {% if acp.step == 'CLOSED' %}
-                                <div class="accordion" id="member_{{ acp.id }}">
-                                    <div class="accordion-item">
-                                        <h2 class="accordion-header" id="heading_{{ acp.id }}">
-                                            <button
-                                                class="accordion-button collapsed"
-                                                type="button"
-                                                data-bs-toggle="collapse"
-                                                data-bs-target="#collapse_{{ acp.id }}"
-                                                aria-expanded="false"
-                                                aria-controls="collapse_{{ acp.id }}">
-                                                <span class="folded">{{ 'Show closed parcours of %name%'|trans({'%name%': person.firstName ~ " " ~ person.lastName }) }} ({{ 'budget.number of elements'|trans({ 'nb_items': 1 }) }})</span>
-                                                <span class="unfolded text-secondary">{{ 'Hide closed parcours of %name%'|trans({'%name%': person.firstName ~ " " ~ person.lastName }) }}</span>
-                                            </button>
-                                        </h2>
-
-                                        <div id="collapse_{{ acp.id }}"
-                                            class="accordion-collapse collapse"
-                                            aria-labelledby="heading_{{ acp.id }}"
-                                            data-bs-parent="#nonCurrent">
-
-                                            {{ _self.accompanying_period(acp, person) }}
-                                        </div>
-                                    </div>
-                                </div>
-                            {% else %}
-                                {{ _self.accompanying_period(acp, person) }}
-                            {% endif %}
+                            {{ _self.accompanying_period(acp, person) }}
                         {% endfor %}
                     {% endif %}
 
+                    {% if acpsClosed|length > 0 %}
+                        <div class="accordion" id="member_{{ person.id }}">
+                            <div class="accordion-item">
+                                <h2 class="accordion-header" id="heading_{{ person.id }}">
+                                    <button
+                                        class="accordion-button collapsed"
+                                        type="button"
+                                        data-bs-toggle="collapse"
+                                        data-bs-target="#collapse_{{ person.id }}"
+                                        aria-expanded="false"
+                                        aria-controls="collapse_{{ person.id }}">
+                                        <span class="folded">{{ 'Show closed parcours of %name%'|trans({'%name%': person.firstName ~ " " ~ person.lastName }) }} ({{ 'budget.number of elements'|trans({ 'nb_items': 1 }) }})</span>
+                                        <span class="unfolded text-secondary">{{ 'Hide closed parcours of %name%'|trans({'%name%': person.firstName ~ " " ~ person.lastName }) }}</span>
+                                    </button>
+                                </h2>
+
+                                <div id="collapse_{{ person.id }}"
+                                    class="accordion-collapse collapse"
+                                    aria-labelledby="heading_{{ person.id }}"
+                                    data-bs-parent="#nonCurrent">
+                                    {% for acp in acpsClosed %}
+
+                                            {{ _self.accompanying_period(acp, person) }}
+                                    {% endfor %}
+                                </div>
+                            </div>
+                        </div>
+                    {% endif %}
+
+
                 </div>
             {% endfor %}
         </div>