Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-12 21:34:25 +00:00
Code Issues Actions Projects Releases Wiki Activity

improve activity list

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-08-01 20:21:39 +02:00
parent 9f5086e9c1
commit 982c704f6c
6 changed files with 327 additions and 295 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss
View File

@ -1,14 +1,105 @@
// Access to Bootstrap variables and mixins // Access to Bootstrap variables and mixins
@import '~ChillMainAssets/module/bootstrap/shared'; @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 { div.bloc {
// @include entity($chill-pink, white); width: 200px;
//} align-self: flex-end;
height: 140px;
display: flex;
justify-content: center;
align-items: center;
}
}
}
.activity { // exceptions for flex-table in list-records
//color: $chill-green; 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 // exceptions for flex-bloc in concerned-groups
@ -22,7 +113,7 @@ div.flex-bloc.concerned-groups {
li { li {
margin-bottom: 0.2em; margin-bottom: 0.2em;
a { a {
color: white; color: $white;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #ffffffab; 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;
}
}

316
src/Bundle/ChillActivityBundle/Resources/views/Activity/list.html.twig
View File

@ -1,189 +1,163 @@
{% set person_id = null %} <div class="activity-list context-{{ context }}">
{% if person %}
{% set person_id = person.id %}
{% endif %}
{% set accompanying_course_id = null %} {% if activities|length == 0 %}
{% if accompanyingCourse %} <p class="chill-no-data-statement">
{% set accompanying_course_id = accompanyingCourse.id %} {{ "There isn't any activities."|trans }}
{% endif %} <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 %} {% if activity.date %}
<p class="chill-no-data-statement"> <h3>{{ activity.date|format_date('long') }}</h3>
{{ "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 %}
{% endif %} {% endif %}
</li>
<li> <div class="duration">
<b>{{ 'location'|trans ~ ': ' }}</b> {% if t.durationTimeVisible > 0 %}
Domicile de l'usager <p>
{# <i class="fa fa-fw fa-hourglass-end"></i>
{% if activity.location %}{{ activity.location }}{% endif %} {{ activity.durationTime|date('H:i') }}
#} </p>
</li> {% 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 -%} {% if context == 'person' and activity.accompanyingPeriod is not empty %}
<li> <div class="accompanyingPeriodLink" style="margin-top: 1rem">
{%- if activity.reasons is empty -%} <a href="{{ chill_path_add_return_path(
<span class="chill-no-data-statement">{{ 'No reason associated'|trans }}</span> "chill_person_accompanying_course_index",
{%- else -%} { 'accompanying_period_id': activity.accompanyingPeriod.id }
{% for r in activity.reasons %} ) }}">
{{ r|chill_entity_render_box }} <i class="fa fa-random"></i>
{% endfor %} {{ activity.accompanyingPeriod.id }}
{%- endif -%} </a>
</li> </div>
{% endif %} {% endif %}
{%- if t.socialIssuesVisible %} </div>
<li class="social-issues"> <div class="item-col">
{%- if activity.socialIssues is empty -%} <ul class="list-content">
<span class="chill-no-data-statement">{{ 'No social issues associated'|trans }}</span> {% if activity.user and t.userVisible %}
{%- else -%} <li>
{% for r in activity.socialIssues %} <b>{{ 'by'|trans }}{{ activity.user.usernameCanonical }}</b>
{{ r|chill_entity_render_box }} </li>
{% endfor %} {% endif %}
{%- endif -%}
</li>
{% endif %}
{%- if t.socialActionsVisible -%} <li>
<li class="social-actions"> <b>{{ activity.type.name | localize_translatable_string }}</b>
{%- if activity.socialActions is empty -%}
<span class="chill-no-data-statement">{{ 'No social actions associated'|trans }}</span> {% if activity.attendee is not null and t.attendeeVisible %}
{%- else -%} {% if activity.attendee %}
{% for r in activity.socialActions %} {{ '→ ' ~ 'present'|trans|capitalize }}
<span class="badge bg-primary">{{ r.title|localize_translatable_string }}</span> {% else %}
{% endfor %} {{ '→ ' ~ 'not present'|trans|capitalize }}
{%- endif -%} {% endif %}
</li> {% 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>
<ul class="record_actions"> <ul class="record_actions">
<li> <li>
<a href="{{ path('chill_activity_activity_show', { 'id': activity.id, 'person_id': person_id, 'accompanying_period_id': accompanying_course_id }) }}" <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> class="btn btn-sm btn-show "></a>
</li> </li>
{# TOOD {# TOOD
{% if is_granted('CHILL_ACTIVITY_UPDATE', activity) %} {% if is_granted('CHILL_ACTIVITY_UPDATE', activity) %}
#} #}
<li> <li>
<a href="{{ path('chill_activity_activity_edit', { 'id': activity.id, 'person_id': person_id, 'accompanying_period_id': accompanying_course_id }) }}" <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> class="btn btn-sm btn-update "></a>
</li> </li>
{# TOOD {# TOOD
{% endif %} {% endif %}
{% if is_granted('CHILL_ACTIVITY_DELETE', activity) %} {% if is_granted('CHILL_ACTIVITY_DELETE', activity) %}
#} #}
<li> <li>
<a href="{{ path('chill_activity_activity_delete', { 'id': activity.id, 'person_id' : person_id, 'accompanying_period_id': accompanying_course_id } ) }}" <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> class="btn btn-sm btn-delete "></a>
</li> </li>
{# {#
{% endif %} {% endif %}
#} #}
</ul> </ul>
</div> </div>
</div> </div>
{% if activity.comment.comment is not empty {% if activity.comment.comment is not empty
or activity.persons|length > 0 or activity.persons|length > 0
or activity.thirdParties|length > 0 or activity.thirdParties|length > 0
or activity.users|length > 0 or activity.users|length > 0
%} %}
<div class="item-row details"> <div class="item-row details">
<div class="item-col"> <div class="item-col">
{% include 'ChillActivityBundle:Activity:concernedGroups.html.twig' with {'context': context, 'with_display': 'row', 'entity': activity } %} {% include 'ChillActivityBundle:Activity:concernedGroups.html.twig' with {'context': context, 'with_display': 'row', 'entity': activity } %}
</div> </div>
{% if activity.comment.comment is not empty %} {% if activity.comment.comment is not empty %}
<div class="item-col"> <div class="item-col">
{{ activity.comment|chill_entity_render_box({ {{ activity.comment|chill_entity_render_box({
'disable_markdown': false, 'disable_markdown': false,
'limit_lines': 3, 'limit_lines': 3,
'metadata': false, 'metadata': false,
}) }} }) }}
</div> </div>
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}
</div>
{% endfor %}
</div> </div>
{% endfor %} {% endif %}
</div>
{% endif %}
{% if context != 'person' %} </div>
{# 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 %}

22
src/Bundle/ChillActivityBundle/Resources/views/Activity/listAccompanyingCourse.html.twig
View File

@ -5,5 +5,27 @@
{% block title %}{{ 'Activity list' |trans }}{% endblock title %} {% block title %}{{ 'Activity list' |trans }}{% endblock title %}
{% block content %} {% 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'} %} {% 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 %} {% endblock %}

22
src/Bundle/ChillActivityBundle/Resources/views/Activity/listPerson.html.twig
View File

@ -21,5 +21,27 @@
{% block title %}{{ 'Activity list' |trans }}{% endblock title %} {% block title %}{{ 'Activity list' |trans }}{% endblock title %}
{% block personcontent %} {% 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'} %} {% 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 %} {% endblock %}

46
src/Bundle/ChillActivityBundle/Resources/views/Activity/selectType.html.twig
View File

@ -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 %} {% for row in data %}
<h3>{{ row.activityTypeCategory.name|localize_translatable_string }}</h3> <h3>{{ row.activityTypeCategory.name|localize_translatable_string }}</h3>
<div class="activity-row"> <div class="activity-row">
{% for activityType in row.activityTypes %} {% for activityType in row.activityTypes %}
{% set person_id = null %} {% set person_id = null %}
{% if person %} {% if person %}
{% set person_id = person.id %} {% set person_id = person.id %}
{% endif %} {% endif %}
{% set accompanying_course_id = null %} {% set accompanying_course_id = null %}
{% if accompanyingCourse %} {% if accompanyingCourse %}
{% set accompanying_course_id = accompanyingCourse.id %} {% set accompanying_course_id = accompanyingCourse.id %}
{% endif %} {% 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"> <div class="bloc btn btn-primary btn-lg btn-block">
{{ activityType.name|localize_translatable_string }} {{ activityType.name|localize_translatable_string }}
</div> </div>
</a> </a>
{% endfor %} {% endfor %}
</div> </div>
{% endfor %} {% endfor %}
</div>

17
src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/index.html.twig
View File

@ -29,6 +29,8 @@
</div> </div>
{% endif %} {% endif %}
<h1>{{ 'Resume Accompanying Course'|trans }}</h1>
<div class="associated-persons mb-5"> <div class="associated-persons mb-5">
<h2 class="mb-3">{{ 'Associated peoples'|trans }}</h2> <h2 class="mb-3">{{ 'Associated peoples'|trans }}</h2>
<div class="flex-table mb-3"> <div class="flex-table mb-3">
@ -119,8 +121,21 @@
</div> </div>
{% block contentActivity %} {% block contentActivity %}
<div class="activity mb-5"> <div class="activities mb-5">
{% set person = null %} {% 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' } %} {% include 'ChillActivityBundle:Activity:list.html.twig' with { 'context': 'accompanyingCourse' } %}
</div> </div>
{% endblock %} {% endblock %}