template accompanying period list: buttons, flex-table (wip)

This commit is contained in:
Mathieu Jaumotte 2021-08-01 13:47:08 +02:00
parent 4c47105de1
commit c4a8b85be5
3 changed files with 124 additions and 113 deletions

View File

@ -62,10 +62,10 @@ $chill-theme-buttons: (
&.btn-view::before,
&.btn-save::before,
&.btn-duplicate::before,
&.btn-not-duplicate::before,
&.btn-submit::before,
&.btn-reset::before,
&.btn-action::before,
// &.btn-not-duplicate::before,
// &.btn-submit::before,
// &.btn-reset::before,
// &.btn-action::before,
&.btn-delete::before,
&.btn-remove::before,
&.btn-cancel::before {
@ -101,3 +101,13 @@ $chill-theme-buttons: (
color: $light;
}
}
/// allow to hide icon (herited from scratch)
.btn {
&.change-icon {
&::before {
content: '';
margin-right: 0;
}
}
}

View File

@ -1,39 +1,28 @@
{% block content %}
<div class="flex-table accompanyingcourse-list">
{% for accompanying_period in accompanying_periods %}
<div class="flex-table">
<div class="item-bloc">
<div class="item-row">
<div class="item-col">
{{'period'|trans}} <b>#{{ accompanying_period.id }}</b>
<b>#{{ accompanying_period.id }}</b>
{% if accompanying_period.emergency %}
&nbsp;
<span class="badge bg-primary">
{{- 'Emergency'|trans|upper -}}
</span>
<span class="badge bg-primary">{{- 'Emergency'|trans|upper -}}</span>
{% endif %}
{% if accompanying_period.confidential %}
&nbsp;
<span class="badge bg-primary">
{{- 'Confidential'|trans|upper -}}
</span>
<span class="badge bg-primary">{{- 'Confidential'|trans|upper -}}</span>
{% endif %}
{% if accompanying_period.step == 'DRAFT' %}
&nbsp;
<span class="badge bg-primary">
{{- 'Draft'|trans|upper -}}
</span>
<span class="badge bg-primary">{{- 'Draft'|trans|upper -}}</span>
{% else %}
<span class="badge bg-primary">
{{- 'Confirmed'|trans|upper -}}
</span>
<span class="badge bg-primary">{{- 'Confirmed'|trans|upper -}}</span>
{% endif %}
</div>
<div class="item-col">
{% if chill_accompanying_periods.fields.user == 'visible' %}
{% if accompanying_period.user %}
{{ accompanying_period.user.username }}
{{ accompanying_period.user.username }}
{% else %}
<span class="chill-no-data-statement">{{ 'No accompanying user'|trans }}</span>
{% endif %}
@ -42,6 +31,7 @@
</div>
<div class="item-row">
{% if accompanying_period.closingDate == null %}
{{ 'accompanying_period.dates_from_%opening_date%'|trans({ '%opening_date%': accompanying_period.openingDate|format_date('long') } ) }}
{% else %}
@ -49,92 +39,95 @@
'%opening_date%': accompanying_period.openingDate|format_date('long'),
'%closing_date%': accompanying_period.closingDate|format_date('long')}
) }}
{% if accompanying_period.isOpen == false %}
<dl class="chill_view_data">
<dt>{{ 'Closing motive'|trans }}&nbsp;:</dt>
<dd>{{ accompanying_period.closingMotive|chill_entity_render_box }}</dd>
</dl>
{% endif %}
{% endif %}
</div>
<div class="item-col">
<h3>{{ 'Participants'|trans }}</h3>
{% if accompanying_period.participations.count > 0 %}
{% for p in accompanying_period.participations %}
<p>
<a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">
{{ p.person.firstname ~ ' ' ~ p.person.lastname }}
</a>
</p>
{% endfor %}
{% else %}
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
{% endif %}
</div>
<div class="item-col">
<h3>{{ 'Requestor'|trans }}</h3>
{% if accompanying_period.requestorPerson is not null or accompanying_period.requestorThirdParty is not null %}
{% if accompanying_period.requestorPerson is not null %}
<p>{{ accompanying_period.requestorPerson.firstname ~ ' ' ~ accompanying_period.requestorPerson.lastname }}</p>
{% endif %}
{% if accompanying_period.requestorThirdParty is not null %}
<p>{{ accompanying_period.requestorThirdParty.name }}</p>
{% endif %}
{% else %}
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
{% endif %}
</div>
<div class="item-col">
<h3>{{ 'Social issues'|trans }}</h3>
{% if accompanying_period.socialIssues.count > 0 %}
{% for si in accompanying_period.socialIssues %}
<p>{{ si.title|localize_translatable_string }}</p>
{% endfor %}
{% else %}
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
{% endif %}
</div>
<div class="item-row">
<h3>{{ 'Participants'|trans }}</h3>
{% if accompanying_period.participations.count > 0 %}
{% for p in accompanying_period.participations %}
<p>
<a href="{{ path('chill_person_accompanying_period_list', { person_id: p.person.id }) }}">
{{ p.person.firstname ~ ' ' ~ p.person.lastname }}
</a>
</p>
{% endfor %}
{% else %}
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
{% endif %}
</div>
<div class="item-row">
<h3>{{ 'Requestor'|trans }}</h3>
{% if accompanying_period.requestorPerson is not null or accompanying_period.requestorThirdParty is not null %}
{% if accompanying_period.requestorPerson is not null %}
<p>{{ accompanying_period.requestorPerson.firstname ~ ' ' ~ accompanying_period.requestorPerson.lastname }}</p>
{% endif %}
{% if accompanying_period.requestorThirdParty is not null %}
<p>{{ accompanying_period.requestorThirdParty.name }}</p>
{% endif %}
{% else %}
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
{% endif %}
</div>
<div class="item-row">
<h3>{{ 'Social issues'|trans }}</h3>
{% if accompanying_period.socialIssues.count > 0 %}
{% for si in accompanying_period.socialIssues %}
<p>{{ si.title|localize_translatable_string }}</p>
{% endfor %}
{% else %}
<span class="chill-no-data-statement">{{ 'No data given'|trans }}</span>
{% endif %}
</div>
<div class="item-row">
<ul class="record_actions">
{# TODO if enable_accompanying_course_with_multiple_persons is true ... #}
<li>
<a href="{{ path('chill_person_accompanying_course_index', { 'accompanying_period_id': accompanying_period.id }) }}"
class="btn btn-primary" title="{{ 'See accompanying period'|trans }}">
<i class="fa fa-random"></i>
<i class="fa fa-fw fa-random"></i>
{{ 'See this period'|trans }}
</a>
</li>
{#
<li>
<a href="{{ path('chill_person_accompanying_period_update', {'person_id' : person.id, 'period_id' : accompanying_period.id } ) }}" class="btn btn-update no-content"></a>
<a href="{{ path('chill_person_accompanying_period_update', {'person_id' : person.id, 'period_id' : accompanying_period.id } ) }}"
class="btn btn-update" title="{{ 'Edit Accompanying Course'|trans }}"></a>
</li>
{% if accompanying_period.isOpen == true %}
<li>
<a href="{{ path('chill_person_accompanying_period_close', {'person_id' : person.id}) }}" class="btn btn-update has-hidden change-icon">
<i class="fa fa-lock" aria-hidden="true"></i><span class="show-on-hover">{{'Close accompanying period'|trans }}</span>
</a>
</li>
<li>
<a href="{{ path('chill_person_accompanying_period_close', {'person_id' : person.id}) }}"
class="btn btn-update change-icon">
<i class="fa fa-fw fa-lock" aria-hidden="true"></i>
{{'Close accompanying period'|trans }}
</a>
</li>
{% endif %}
{% if accompanying_period.canBeReOpened(person) == true %}
<li>
<a href="{{ path('chill_person_accompanying_period_re_open', {'person_id' : person.id, 'period_id' : accompanying_period.id } ) }}" class="btn btn-create change-icon has-hidden">
<i class="fa fa-unlock" aria-hidden="true"></i><span class="show-on-hover">{{'Re-open accompanying period'|trans }}</span>
</a>
</li>
<li>
<a href="{{ path('chill_person_accompanying_period_re_open', {'person_id' : person.id, 'period_id' : accompanying_period.id } ) }}"
class="btn btn-create change-icon">
<i class="fa fa-fw fa-unlock" aria-hidden="true"></i>
{{'Re-open accompanying period'|trans }}
</a>
</li>
{% endif %}
#}
</ul>
</div>
</div>
</div>
<p></p>
{% endfor %}
</div>
{% endblock content %}

View File

@ -5,36 +5,44 @@
{% block title %}{{ 'Person accompanying period - %name%'|trans({ '%name%' : person.__toString}) }}{% endblock title %}
{% block personcontent %}
<h1>{{ 'Accompanying period list'|trans }}</h1>
<div class="accompanyingcourse-list">
{% include 'ChillPersonBundle:AccompanyingPeriod:_list.html.twig' %}
<h1>{{ 'Accompanying period list'|trans }}</h1>
<ul class="record_actions sticky-form-buttons">
<li class="cancel">
<a href="{{ path ('chill_person_view', {'person_id' : person.id } ) }}" class="btn btn-cancel">
{{ 'Person details'|trans }}
</a>
</li>
<li>
<a href="{{ path ('chill_person_accompanying_course_new', {'person_id' : [ person.id ] } ) }}" class="btn btn-create">
{{ 'Create an accompanying period'|trans }}
</a>
</li>
{#
<li>
<a href="{{ path ('chill_person_accompanying_period_create', {'person_id' : person.id } ) }}" class="btn btn-create has-hidden">
<span class="show-on-hover">{{ 'Add an accompanying period in the past'|trans }}</span>
</a>
</li>
{% if person.isOpen == false %}
<li>
<a href="{{ path('chill_person_accompanying_period_open', {'person_id' : person.id} ) }}" class="btn btn-create change-icon has-hidden">
<i class="fa fa-unlock" aria-hidden="true"></i>
<span class="show-on-hover">{{'Begin a new accompanying period'|trans }}</span>
</a>
</li>
{% endif %}
#}
</ul>
{% include 'ChillPersonBundle:AccompanyingPeriod:_list.html.twig' %}
<ul class="record_actions sticky-form-buttons">
<li class="cancel">
<a href="{{ path ('chill_person_view', {'person_id' : person.id } ) }}"
class="btn btn-cancel">{{ 'Person details'|trans }}
</a>
</li>
<li class="dropdown">
<a class="btn btn-create change-icon dropdown-toggle"
href="#" role="button" id="newAccompanyingPeriod" data-bs-toggle="dropdown" aria-expanded="false">
{{ 'Create an accompanying period'|trans }}
</a>
<ul class="dropdown-menu" aria-labelledby="newAccompanyingPeriod">
<li>
<a class="dropdown-item" href="{{ path ('chill_person_accompanying_course_new', {'person_id' : [ person.id ] } ) }}">
<i class="fa fa-fw fa-plus"></i> {{ 'Create an accompanying period'|trans }}
</a>
</li>
<li>
<a class="dropdown-item" href="{{ path ('chill_person_accompanying_period_create', {'person_id' : person.id } ) }}">
<i class="fa fa-fw fa-reply"></i> {{ 'Add an accompanying period in the past'|trans }}
</a>
</li>
{% if person.isOpen == false %}
<li>
<a class="dropdown-item" href="{{ path('chill_person_accompanying_period_open', {'person_id' : person.id} ) }}">
<i class="fa fa-fw fa-unlock"></i> {{'Begin a new accompanying period'|trans }}
</a>
</li>
{% endif %}
</ul>
</li>
</ul>
</div>
{% endblock %}