improve activity list

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

View File

@ -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;
}
}

View File

@ -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>

View File

@ -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 %}

View File

@ -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 %}

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 %}
<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>

View File

@ -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 %}