From 982c704f6cd979840895f003a35272a70ed8426f Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Sun, 1 Aug 2021 20:21:39 +0200
Subject: [PATCH] improve activity list

---
 .../Resources/public/chill/chillactivity.scss | 199 ++++++-----
 .../Resources/views/Activity/list.html.twig   | 316 ++++++++----------
 .../Activity/listAccompanyingCourse.html.twig |  22 ++
 .../views/Activity/listPerson.html.twig       |  22 ++
 .../views/Activity/selectType.html.twig       |  46 +--
 .../views/AccompanyingCourse/index.html.twig  |  17 +-
 6 files changed, 327 insertions(+), 295 deletions(-)

diff --git a/src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss b/src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss
index 1d271abfe..fc492c7bc 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss
+++ b/src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss
@@ -1,14 +1,105 @@
 // Access to Bootstrap variables and mixins
 @import '~ChillMainAssets/module/bootstrap/shared';
 
-//@import '~ChillMainSass/custom/mixins/entity';
+// activity creation first step: select type page
+div.new-activity-select-type {
+   div.activity-row {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 12px;
 
-//.chill-entity.chill-entity__activity-reason {
-//    @include entity($chill-pink, white);
-//}
+      div.bloc {
+         width: 200px;
+         align-self: flex-end;
+         height: 140px;
+         display: flex;
+         justify-content: center;
+         align-items: center;
+      }
+   }
+}
 
-.activity {
-    //color: $chill-green;
+// exceptions for flex-table in list-records
+div.activity-list {
+   div.flex-table {
+      div.item-bloc {
+         div.item-row.main {
+            div.item-col {
+               &:first-child {
+                  flex-basis: 27%;
+               }
+               ul.list-content {
+                  li.social-issues, li.social-actions {
+                     .badge-primary {
+                        font-variant: small-caps;
+                        font-weight: bold;
+                        font-size: 88%;
+                        margin-bottom: 0.2em;
+                     }
+                  }
+                  li.social-issues .badge-primary {
+                     background-color: $orange;
+                  }
+                  li.social-actions .badge-primary {
+                     background-color: $green;
+                  }
+               }
+            }
+         }
+         div.item-row.details {
+            flex-direction: row;
+            & > div.item-col {
+               justify-content: flex-start;
+               align-self: center;
+               &:nth-child(1) {
+                  flex-grow: 1; flex-shrink: 0; flex-basis: 30%;
+               }
+               &:nth-child(2) {
+                  flex-grow: 0; flex-shrink: 1; flex-basis: 70%;
+               }
+
+               &:only-child {
+                  flex-grow: 0; flex-shrink: 0; flex-basis: 100%;
+                  & > div.concerned-groups {
+                     flex-grow: 0; flex-shrink: 0; flex-basis: 100%;
+                     display: flex;
+                     flex-direction: column; // TODO pas fini
+                     div.group {
+                        flex-grow: 1; flex-shrink: 0; flex-basis: 30%;
+                        h4 {}
+                        ul.list-content {
+                           li {
+                              display: inline;
+                           }
+                        }
+                     }
+                  }
+               }
+            }
+            div.concerned-groups {
+               font-size: 85%;
+               h4 {
+                  text-transform: uppercase;
+               }
+            }
+         }
+         ul.list-content {
+            list-style-type: none;
+            padding-left: 1em;
+            margin: 0 0;
+            li {
+               margin-bottom: 0.2em;
+            }
+         }
+      }
+      div.duration {
+         font-size: smaller;
+         padding-left: 1em;
+         margin-top: 1em;
+      }
+   }
 }
 
 // exceptions for flex-bloc in concerned-groups
@@ -22,7 +113,7 @@ div.flex-bloc.concerned-groups {
          li {
             margin-bottom: 0.2em;
             a {
-               color: white;
+               color: $white;
                cursor: pointer;
                &:hover {
                   color: #ffffffab;
@@ -36,97 +127,3 @@ div.flex-bloc.concerned-groups {
    }
 }
 
-// exceptions for flex-table in list-records
-div.flex-table.list-records {
-   div.item-bloc {
-      div.item-row.main {
-         div.item-col {
-            &:first-child {
-               flex-basis: 27%;
-            }
-            ul.list-content {
-               li.social-issues, li.social-actions {
-                  .badge-primary {
-                     font-variant: small-caps;
-                     font-weight: bold;
-                     font-size: 88%;
-                     margin-bottom: 0.2em;
-                  }
-               }
-               li.social-issues .badge-primary {
-                  background-color: var(--chill-orange);
-               }
-               li.social-actions .badge-primary {
-                  background-color: var(--chill-green);
-               }
-            }
-         }
-      }
-      div.item-row.details {
-         flex-direction: row;
-         & > div.item-col {
-            justify-content: flex-start;
-            align-self: center;
-            &:nth-child(1) {
-               flex-grow: 1; flex-shrink: 0; flex-basis: 30%;
-            }
-            &:nth-child(2) {
-               flex-grow: 0; flex-shrink: 1; flex-basis: 70%;
-            }
-
-            &:only-child {
-               flex-grow: 0; flex-shrink: 0; flex-basis: 100%;
-               & > div.concerned-groups {
-                  flex-grow: 0; flex-shrink: 0; flex-basis: 100%;
-                  display: flex;
-                  flex-direction: column; // TODO pas fini
-                  div.group {
-                     flex-grow: 1; flex-shrink: 0; flex-basis: 30%;
-                     h4 {}
-                     ul.list-content {
-                        li {
-                           display: inline;
-                        }
-                     }
-                  }
-               }
-            }
-         }
-         div.concerned-groups {
-            font-size: 85%;
-            h4 {
-               text-transform: uppercase;
-            }
-         }
-      }
-      ul.list-content {
-         list-style-type: none;
-         padding-left: 1em;
-         margin: 0 0;
-         li {
-            margin-bottom: 0.2em;
-         }
-      }
-   }
-   div.duration {
-      font-size: smaller;
-      padding-left: 1em;
-      margin-top: 1em;
-   }
-}
-
-div.activity-row {
-   display: flex;
-   flex-direction: row;
-   flex-wrap: wrap;
-   justify-content: center;
-   gap: 12px;
-   div.bloc {
-      width: 200px;
-      align-self: flex-end;
-      height: 140px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-   }
-}
diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/list.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/list.html.twig
index a312b3858..35d39f609 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/list.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/list.html.twig
@@ -1,189 +1,163 @@
-{% set person_id = null %}
-{% if person %}
-    {% set person_id = person.id %}
-{% endif %}
+<div class="activity-list context-{{ context }}">
 
-{% set accompanying_course_id = null %}
-{% if accompanyingCourse %}
-    {% set accompanying_course_id = accompanyingCourse.id %}
-{% endif %}
+    {% if activities|length == 0 %}
+        <p class="chill-no-data-statement">
+            {{ "There isn't any activities."|trans }}
+            <a href="{{ path('chill_activity_activity_new', {'person_id': person_id, 'accompanying_period_id': accompanying_course_id}) }}" class="btn btn-sm btn-create"></a>
+        </p>
 
-<h2>{{ 'Activity list' |trans }}</h2>
+    {% else %}
+        <div class="flex-table">
+            {% for activity in activities %}
+                {% set t = activity.type %}
+                <div class="item-bloc">
+                    <div class="item-row main">
+                        <div class="item-col">
 
-{% if activities|length == 0 %}
-    <p class="chill-no-data-statement">
-        {{ "There isn't any activities."|trans }}
-        <a href="{{ path('chill_activity_activity_new', {'person_id': person_id, 'accompanying_period_id': accompanying_course_id}) }}" class="btn btn-create button-small"></a>
-    </p>
-{% else %}
-
-<div class="flex-table list-records context-{{ context }}">
-
-    {% for activity in activities %}
-        {% set t = activity.type %}
-        <div class="item-bloc">
-            <div class="item-row main">
-                <div class="item-col">
-
-                    {% if activity.date %}
-                        <h3>{{ activity.date|format_date('long') }}</h3>
-                    {% endif %}
-
-                    <div class="duration">
-                        {% if t.durationTimeVisible > 0 %}
-                            <p>
-                                <i class="fa fa-fw fa-hourglass-end"></i>
-                                {{ activity.durationTime|date('H:i') }}
-                            </p>
-                        {% endif %}
-                        {% if activity.travelTime and t.travelTimeVisible %}
-                            <p>
-                                <i class="fa fa-fw fa-car"></i>
-                                {{ activity.travelTime|date('H:i') }}
-                            </p>
-                        {% endif %}
-                    </div>
-
-                    {% if context == 'person' and activity.accompanyingPeriod is not empty %}
-                    <div class="accompanyingPeriodLink" style="margin-top: 1rem">
-                        <a href="{{ chill_path_add_return_path(
-                                "chill_person_accompanying_course_index",
-                                { 'accompanying_period_id': activity.accompanyingPeriod.id }
-                            ) }}">
-                            <i class="fa fa-random"></i>
-                            {{ activity.accompanyingPeriod.id }}
-                        </a>
-                    </div>
-                    {% endif %}
-
-                </div>
-                <div class="item-col">
-                    <ul class="list-content">
-                        {% if activity.user and t.userVisible %}
-                        <li>
-                            <b>{{ 'by'|trans }}{{ activity.user.usernameCanonical }}</b>
-                        </li>
-                        {% endif %}
-
-                        <li>
-                            <b>{{ activity.type.name | localize_translatable_string }}</b>
-
-                            {% if activity.attendee is not null and t.attendeeVisible %}
-                                {% if activity.attendee %}
-                                    {{ '→ ' ~ 'present'|trans|capitalize }}
-                                {% else %}
-                                    {{ '→ ' ~ 'not present'|trans|capitalize }}
-                                {% endif %}
+                            {% if activity.date %}
+                                <h3>{{ activity.date|format_date('long') }}</h3>
                             {% endif %}
-                        </li>
 
-                        <li>
-                            <b>{{ 'location'|trans ~ ': ' }}</b>
-                            Domicile de l'usager
-                            {#
-                                {% if activity.location %}{{ activity.location }}{% endif %}
-                            #}
-                        </li>
+                            <div class="duration">
+                                {% if t.durationTimeVisible > 0 %}
+                                    <p>
+                                        <i class="fa fa-fw fa-hourglass-end"></i>
+                                        {{ activity.durationTime|date('H:i') }}
+                                    </p>
+                                {% endif %}
+                                {% if activity.travelTime and t.travelTimeVisible %}
+                                    <p>
+                                        <i class="fa fa-fw fa-car"></i>
+                                        {{ activity.travelTime|date('H:i') }}
+                                    </p>
+                                {% endif %}
+                            </div>
 
-                        {%- if t.reasonsVisible -%}
-                        <li>
-                            {%- if activity.reasons is empty -%}
-                                <span class="chill-no-data-statement">{{ 'No reason associated'|trans }}</span>
-                            {%- else -%}
-                                {% for r in activity.reasons %}
-                                    {{ r|chill_entity_render_box }}
-                                {% endfor %}
-                            {%- endif -%}
-                        </li>
-                        {% endif %}
+                            {% if context == 'person' and activity.accompanyingPeriod is not empty %}
+                                <div class="accompanyingPeriodLink" style="margin-top: 1rem">
+                                    <a href="{{ chill_path_add_return_path(
+                                        "chill_person_accompanying_course_index",
+                                        { 'accompanying_period_id': activity.accompanyingPeriod.id }
+                                    ) }}">
+                                        <i class="fa fa-random"></i>
+                                        {{ activity.accompanyingPeriod.id }}
+                                    </a>
+                                </div>
+                            {% endif %}
 
-                        {%- if t.socialIssuesVisible %}
-                            <li class="social-issues">
-                                {%- if activity.socialIssues is empty -%}
-                                    <span class="chill-no-data-statement">{{ 'No social issues associated'|trans }}</span>
-                                {%- else -%}
-                                    {% for r in activity.socialIssues %}
-                                      {{ r|chill_entity_render_box }}
-                                    {% endfor %}
-                                {%- endif -%}
-                            </li>
-                        {% endif %}
+                        </div>
+                        <div class="item-col">
+                            <ul class="list-content">
+                                {% if activity.user and t.userVisible %}
+                                    <li>
+                                        <b>{{ 'by'|trans }}{{ activity.user.usernameCanonical }}</b>
+                                    </li>
+                                {% endif %}
 
-                        {%- if t.socialActionsVisible -%}
-                            <li class="social-actions">
-                                {%- if activity.socialActions is empty -%}
-                                    <span class="chill-no-data-statement">{{ 'No social actions associated'|trans }}</span>
-                                {%- else -%}
-                                    {% for r in activity.socialActions %}
-                                        <span class="badge bg-primary">{{ r.title|localize_translatable_string }}</span>
-                                    {% endfor %}
-                                {%- endif -%}
-                            </li>
-                        {% endif %}
+                                <li>
+                                    <b>{{ activity.type.name | localize_translatable_string }}</b>
+
+                                    {% if activity.attendee is not null and t.attendeeVisible %}
+                                        {% if activity.attendee %}
+                                            {{ '→ ' ~ 'present'|trans|capitalize }}
+                                        {% else %}
+                                            {{ '→ ' ~ 'not present'|trans|capitalize }}
+                                        {% endif %}
+                                    {% endif %}
+                                </li>
+
+                                <li>
+                                    <b>{{ 'location'|trans ~ ': ' }}</b>
+                                    Domicile de l'usager
+                                    {#
+                                    {% if activity.location %}{{ activity.location }}{% endif %}
+                                    #}
+                                </li>
+
+                                {%- if t.reasonsVisible -%}
+                                    <li>
+                                        {%- if activity.reasons is not empty -%}
+                                            {% for r in activity.reasons %}
+                                                {{ r|chill_entity_render_box }}
+                                            {% endfor %}
+                                        {%- endif -%}
+                                    </li>
+                                {% endif %}
+
+                                {%- if t.socialIssuesVisible %}
+                                    <li class="social-issues">
+                                        {%- if activity.socialIssues is not empty -%}
+                                            {% for r in activity.socialIssues %}
+                                                {{ r|chill_entity_render_box }}
+                                            {% endfor %}
+                                        {%- endif -%}
+                                    </li>
+                                {% endif %}
+
+                                {%- if t.socialActionsVisible -%}
+                                    <li class="social-actions">
+                                        {%- if activity.socialActions is not empty -%}
+                                            {% for r in activity.socialActions %}
+                                                <span class="badge bg-primary">{{ r.title|localize_translatable_string }}</span>
+                                            {% endfor %}
+                                        {%- endif -%}
+                                    </li>
+                                {% endif %}
 
 
-                    </ul>
-                    <ul class="record_actions">
-                        <li>
-                            <a href="{{ path('chill_activity_activity_show', { 'id': activity.id, 'person_id': person_id, 'accompanying_period_id': accompanying_course_id }) }}"
-                               class="btn btn-sm btn-show "></a>
-                        </li>
-                        {# TOOD
+                            </ul>
+                            <ul class="record_actions">
+                                <li>
+                                    <a href="{{ path('chill_activity_activity_show', { 'id': activity.id, 'person_id': person_id, 'accompanying_period_id': accompanying_course_id }) }}"
+                                       class="btn btn-sm btn-show "></a>
+                                </li>
+                                {# TOOD
                         {% if is_granted('CHILL_ACTIVITY_UPDATE', activity) %}
-                        #}
-                        <li>
-                            <a href="{{ path('chill_activity_activity_edit', { 'id': activity.id, 'person_id': person_id, 'accompanying_period_id': accompanying_course_id }) }}"
-                               class="btn btn-sm btn-update "></a>
-                        </li>
-                        {# TOOD
+                                #}
+                                <li>
+                                    <a href="{{ path('chill_activity_activity_edit', { 'id': activity.id, 'person_id': person_id, 'accompanying_period_id': accompanying_course_id }) }}"
+                                       class="btn btn-sm btn-update "></a>
+                                </li>
+                                {# TOOD
                         {% endif %}
                         {% if is_granted('CHILL_ACTIVITY_DELETE', activity) %}
-                        #}
-                        <li>
-                            <a href="{{ path('chill_activity_activity_delete', { 'id': activity.id, 'person_id' : person_id, 'accompanying_period_id': accompanying_course_id } ) }}"
-                               class="btn btn-sm btn-delete "></a>
-                        </li>
-                        {#
-                        {% endif %}
-                        #}
-                    </ul>
-                </div>
-            </div>
+                                #}
+                                <li>
+                                    <a href="{{ path('chill_activity_activity_delete', { 'id': activity.id, 'person_id' : person_id, 'accompanying_period_id': accompanying_course_id } ) }}"
+                                       class="btn btn-sm btn-delete "></a>
+                                </li>
+                                {#
+                                {% endif %}
+                                #}
+                            </ul>
+                        </div>
+                    </div>
 
-            {%  if activity.comment.comment is not empty
-                or activity.persons|length > 0
-                or activity.thirdParties|length > 0
-                or activity.users|length > 0
-            %}
-            <div class="item-row details">
-                <div class="item-col">
-                    {% include 'ChillActivityBundle:Activity:concernedGroups.html.twig' with {'context': context, 'with_display': 'row', 'entity': activity } %}
-                </div>
+                    {%  if activity.comment.comment is not empty
+                        or activity.persons|length > 0
+                        or activity.thirdParties|length > 0
+                        or activity.users|length > 0
+                    %}
+                        <div class="item-row details">
+                            <div class="item-col">
+                                {% include 'ChillActivityBundle:Activity:concernedGroups.html.twig' with {'context': context, 'with_display': 'row', 'entity': activity } %}
+                            </div>
 
-                {% if activity.comment.comment is not empty %}
-                <div class="item-col">
-                    {{ activity.comment|chill_entity_render_box({
-                        'disable_markdown': false,
-                        'limit_lines': 3,
-                        'metadata': false,
-                    }) }}
-                </div>
-                {% endif %}
-            </div>
-            {% endif %}
+                            {% if activity.comment.comment is not empty %}
+                                <div class="item-col">
+                                    {{ activity.comment|chill_entity_render_box({
+                                        'disable_markdown': false,
+                                        'limit_lines': 3,
+                                        'metadata': false,
+                                    }) }}
+                                </div>
+                            {% endif %}
+                        </div>
+                    {% endif %}
 
+                </div>
+            {% endfor %}
         </div>
-    {% endfor %}
-</div>
-{% endif %}
+    {% endif %}
 
-{% if context != 'person' %}
-{# TODO set this condition in configuration #}
-  <ul class="record_actions">
-      <li>
-          <a href="{{ path('chill_activity_activity_new', {'person_id': person_id, 'accompanying_period_id': accompanying_course_id}) }}" class="btn btn-create">
-              {{ 'Add a new activity' | trans }}
-          </a>
-      </li>
-  </ul>
-{% endif %}
+</div>
diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/listAccompanyingCourse.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/listAccompanyingCourse.html.twig
index 53e7ec86e..a988debfd 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/listAccompanyingCourse.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/listAccompanyingCourse.html.twig
@@ -5,5 +5,27 @@
 {% block title %}{{ 'Activity list' |trans }}{% endblock title %}
 
 {% block content %}
+
+    {% set person_id = null %}
+    {% if person %}
+        {% set person_id = person.id %}
+    {% endif %}
+
+    {% set accompanying_course_id = null %}
+    {% if accompanyingCourse %}
+        {% set accompanying_course_id = accompanyingCourse.id %}
+    {% endif %}
+
+    <h1>{{ 'Activity list' |trans }}</h1>
+
     {% include 'ChillActivityBundle:Activity:list.html.twig' with {'context': 'accompanyingCourse'} %}
+
+    <ul class="record_actions">
+        <li>
+            <a href="{{ path('chill_activity_activity_new', {'person_id': person_id, 'accompanying_period_id': accompanying_course_id}) }}" class="btn btn-create">
+                {{ 'Add a new activity' | trans }}
+            </a>
+        </li>
+    </ul>
+
 {% endblock %}
diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/listPerson.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/listPerson.html.twig
index 649821dc7..5a9f0125f 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/listPerson.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/listPerson.html.twig
@@ -21,5 +21,27 @@
 {% block title %}{{ 'Activity list' |trans }}{% endblock title %}
 
 {% block personcontent %}
+
+    {% set person_id = null %}
+    {% if person %}
+        {% set person_id = person.id %}
+    {% endif %}
+
+    {% set accompanying_course_id = null %}
+    {% if accompanyingCourse %}
+        {% set accompanying_course_id = accompanyingCourse.id %}
+    {% endif %}
+
+    <h1>{{ 'Activity list' |trans }}</h1>
+
     {% include 'ChillActivityBundle:Activity:list.html.twig' with {'context': 'person'} %}
+
+    <ul class="record_actions">
+        <li>
+            <a href="{{ path('chill_activity_activity_new', {'person_id': person_id, 'accompanying_period_id': accompanying_course_id}) }}"
+               class="btn btn-create disabled" tabindex="-1" role="button" aria-disabled="true">{{ 'Add a new activity' | trans }}
+            </a>
+        </li>
+    </ul>
+
 {% endblock %}
diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/selectType.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/selectType.html.twig
index 484deb55a..996d95b0f 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/selectType.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/selectType.html.twig
@@ -1,28 +1,30 @@
-<h2 class="chill-red">{{ "Activity creation"|trans }}</h2>
+<div class="new-activity-select-type">
+    <h2 class="chill-red">{{ "Activity creation"|trans }}</h2>
 
-{# TODO: refaire l'html css des tuilles #}
+    {# TODO: refaire l'html css des tuilles #}
 
-{% for row in data %}
-    <h3>{{ row.activityTypeCategory.name|localize_translatable_string }}</h3>
-    <div class="activity-row">
-        {% for activityType in row.activityTypes %}
+    {% for row in data %}
+        <h3>{{ row.activityTypeCategory.name|localize_translatable_string }}</h3>
+        <div class="activity-row">
+            {% for activityType in row.activityTypes %}
 
-            {% set person_id = null %}
-            {% if person %}
-                {% set person_id = person.id %}
-            {% endif %}
+                {% set person_id = null %}
+                {% if person %}
+                    {% set person_id = person.id %}
+                {% endif %}
 
-            {% set accompanying_course_id = null %}
-            {% if accompanyingCourse %}
-                {% set accompanying_course_id = accompanyingCourse.id %}
-            {% endif %}
+                {% set accompanying_course_id = null %}
+                {% if accompanyingCourse %}
+                    {% set accompanying_course_id = accompanyingCourse.id %}
+                {% endif %}
 
-            <a href="{{ path('chill_activity_activity_new', {'person_id': person_id, 'activityType_id': activityType.id, 'accompanying_period_id': accompanying_course_id }) }}">
+                <a href="{{ path('chill_activity_activity_new', {'person_id': person_id, 'activityType_id': activityType.id, 'accompanying_period_id': accompanying_course_id }) }}">
 
-                <div class="bloc btn btn-primary btn-lg btn-block">
-                    {{ activityType.name|localize_translatable_string }}
-                </div>
-            </a>
-        {% endfor %}
-    </div>
-{% endfor %}
+                    <div class="bloc btn btn-primary btn-lg btn-block">
+                        {{ activityType.name|localize_translatable_string }}
+                    </div>
+                </a>
+            {% endfor %}
+        </div>
+    {% endfor %}
+</div>
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
index d488c2684..ea2fcd710 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
@@ -29,6 +29,8 @@
         </div>
     {% endif %}
 
+    <h1>{{ 'Resume Accompanying Course'|trans }}</h1>
+
     <div class="associated-persons mb-5">
         <h2 class="mb-3">{{ 'Associated peoples'|trans }}</h2>
         <div class="flex-table mb-3">
@@ -119,8 +121,21 @@
     </div>
 
     {% block contentActivity %}
-    <div class="activity mb-5">
+    <div class="activities mb-5">
         {% set person = null %}
+
+        {% set person_id = null %}
+        {% if person %}
+            {% set person_id = person.id %}
+        {% endif %}
+
+        {% set accompanying_course_id = null %}
+        {% if accompanyingCourse %}
+            {% set accompanying_course_id = accompanyingCourse.id %}
+        {% endif %}
+
+        <h2>{{ 'Activity list' |trans }}</h2>
+
         {% include 'ChillActivityBundle:Activity:list.html.twig' with { 'context': 'accompanyingCourse' } %}
     </div>
     {% endblock %}