household resume page, improve ux

This commit is contained in:
Mathieu Jaumotte 2021-09-10 12:29:06 +02:00
parent ff7cb6ca79
commit c89e2662b1
7 changed files with 210 additions and 141 deletions

View File

@ -192,3 +192,9 @@
{% endif %}
{% endfor %}
{% endblock %}
{% block comment_widget %}
{% for entry in form %}
{{ form_widget(entry) }}
{% endfor %}
{% endblock comment_widget %}

View File

@ -185,6 +185,29 @@ div.banner {
}
}
div.household-resume {
display: flex;
flex-direction: row;
align-items: center;
div.col-address {
font-size: 120%;
padding-left: 1em;
}
div.col-comment {
//padding: 0;
margin-bottom: 1rem;
display: flex;
flex-direction: column;
> * > * {
& > .chill-user-quote {
margin: 1.5em -1.67em 0;
}
}
}
}
/*
* BADGES, MARKS, PINS
* for chill person theme

View File

@ -9,6 +9,9 @@
* modalTitle twig translated chain
* buttonText twig translated chain
* buttonSize bootstrap class like 'btn-sm'
* buttonDisplayText bool
* binModalStep1 bool
* binModalStep2 bool
#}
<div id="address"></div>

View File

@ -31,7 +31,7 @@
<li>
<a class="btn btn-sm btn-edit"
title="{{ 'household.Update membership'|trans }}"
title="{{ 'household.Edit member household'|trans }}"
href="{{ chill_path_add_return_path('chill_person_household_member_edit', { 'id': member.id }) }}"></a>
</li>

View File

@ -17,4 +17,8 @@
'layout': '@ChillPerson/menu.html.twig',
'args' : { 'household': household }
}) }}
{% block block_post_menu %}
{% endblock %}
{% endblock %}

View File

@ -2,40 +2,95 @@
{% block title 'household.Household summary'|trans %}
{% block block_post_menu %}
<div class="block-post-menu"></div>
{% endblock %}
{% block content %}
<div class="household-summary">
<h1>{{ block('title') }}</h1>
{#
<h1>{{ block('title') }}</h1>
<h2>{{ 'household.Current address'|trans }}</h2>
#}
<h2>{{ 'household.Current address'|trans }}</h2>
{% set address = household.currentAddress %}
{% set address = household.currentAddress %}
{% if address is empty %}
{% if address is empty %}
<p class="chill-no-data-statement">{{ 'household.Household does not have any address currently'|trans }}</p>
{% else %}
<div class="flex-table">
<div class="item-bloc">
{% else %}
<div class="row household-resume">
<div class="item-bloc col-5 col-address">
<h2>{{ 'Address'|trans }}</h2>
{{ address|chill_entity_render_box({'multiline': true}) }}
</div>
</div>
{% endif %}
<h2>{{ 'household.Household members'|trans }}</h2>
<ul class="list-inline text-right mt-2">
<li class="list-inline-item">
{# include vue_address component #}
{% include '@ChillPerson/Address/_insert_vue_address.html.twig' with {
mode: 'create',
buttonSize: 'btn-sm',
buttonText: 'Move household',
modalTitle: 'Move household',
buttonDisplayText: false
} %}
</li>
<li class="list-inline-item">
<a class="btn btn-secondary btn-sm" title="{{ "Addresses history"|trans }}"
href="{{ path('chill_person_household_addresses', { 'household_id': household.id } ) }}">
<i class="fa fa-list fa-fw"></i>
</a>
</li>
</ul>
</div>
<div class="item-bloc col-7 col-comment">
{% if form is null %}
{% if household.waitingForBirth or not household.commentMembers.isEmpty() %}
<div class="p-4 bg-light">
{% if household.waitingForBirth %}
<i class="fa fa-check-square-o pe-2"></i>
{% if household.waitingForBirthDate is not null %}
{{ 'household.Expecting for birth on date'|trans({ 'date': household.waitingForBirthDate|format_date('long') }) }}
{% else %}
{{ 'household.Expecting for birth'|trans }}
{% endif %}
{% endif %}
{% if not household.commentMembers.isEmpty() %}
{{ household.commentMembers|chill_entity_render_box }}
{% endif %}
</div>
{% endif %}
{% if not household.commentMembers.isEmpty() %}
<a href="{{ chill_path_add_return_path('chill_person_household_summary', { 'household_id': household.id, 'edit': 1 }) }}"
class="btn btn-edit btn-block">
{{ 'household.Edit comment and expecting birth'|trans }}
</a>
{% else %}
<a href="{{ chill_path_add_return_path('chill_person_household_summary', { 'household_id': household.id, 'edit': 1 }) }}"
class="btn btn-create btn-block">
{{ 'household.New comment and expecting birth'|trans }}
</a>
{% endif %}
{% else %}
{% if form is not null %}
{{ form_start(form) }}
{{ form_row(form.commentMembers) }}
<div id="waitingForBirthContainer">
{{ form_row(form.waitingForBirth) }}
{{ form_widget(form.waitingForBirth) }}
</div>
<div id="waitingForBirthDateContainer">
{{ form_row(form.waitingForBirthDate) }}
{{ form_widget(form.waitingForBirthDate) }}
</div>
<div class="mt-3">
{{ form_widget(form.commentMembers) }}
</div>
<ul class="record_actions">
<li>
<button type="submit" class="btn btn-save">
@ -43,40 +98,18 @@
</button>
</li>
</ul>
{{ form_end(form) }}
{% else %}
{% if not household.commentMembers.isEmpty() %}
{{ household.commentMembers|chill_entity_render_box }}
{% endif %}
{% if household.waitingForBirth %}
{% if household.waitingForBirthDate is not null %}
{{ 'household.Expecting for birth on date'|trans({ 'date': household.waitingForBirthDate|format_date('long') }) }}
{% else %}
{{ 'household.Expecting for birth'|trans }}
{% endif %}
{% else %}
<p class="chill-no-data-statement">
{{ 'household.Any expecting birth'|trans }}
</p>
</div>
</div>
{% endif %}
<ul class="record_actions">
<li>
<a href="{{ chill_path_add_return_path('chill_person_household_summary', { 'household_id': household.id, 'edit': 1 }) }}"
class="btn btn-edit">
{{ 'household.Comment and expecting birth'|trans }}
</a>
</li>
</ul>
<h2 class="my-5">{{ 'household.Household members'|trans }}</h2>
{% endif %}
{% for p in positions %}
<div class="mb-5">
{% for p in positions %}
<div class="mb-5">
<h3>{{ p.label|localize_translatable_string }}
{% if false == p.shareHousehold %}
<i class="chill-help-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true"
@ -89,8 +122,7 @@
{% macro customButtons(member, household) %}
<li>
<a href="{{ chill_path_add_return_path('chill_person_household_members_editor', {'persons': [ member.person.id ], 'allow_leave_without_household': true } ) }}"
class="btn btn-sm btn-unlink" title="{{ 'household.person.leave'|trans }}">
{{ 'household.Leave'|trans }}</a>
class="btn btn-sm btn-unlink" title="{{ 'household.person.leave'|trans }}"></a>
</li>
<li>
<a href="{{ chill_path_add_return_path('chill_person_household_members_editor', {'persons': [ member.person.id ], 'household': household.id} ) }}"
@ -148,17 +180,17 @@
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% endfor %}
<ul class="record_actions">
<ul class="record_actions">
<li>
<a href="{{ chill_path_add_return_path('chill_person_household_members_editor', {'household': household.id }) }}"
class="btn btn-create">
{{ 'household.Add a member'|trans }}
</a>
</li>
</ul>
</ul>
</div>
{% endblock %}

View File

@ -43,7 +43,7 @@ household:
Current household members: Membres actuels
Household summary: Résumé du ménage
Accompanying period: Parcours d'accompagnement
Addresses: Adresses
Addresses: Historique adresse
Current address: Adresse actuelle
Household does not have any address currently: Le ménage n'a pas d'adresse renseignée actuellement
Edit household members: Modifier l'appartenance au ménage
@ -56,7 +56,8 @@ household:
Expecting for birth on date: Naissance attendue pour le {date}
Expecting for birth: Naissance attendue (date inconnue)
Any expecting birth: Aucune naissance proche n'a été renseignée.
Comment and expecting birth: Mettre à jour le commentaire
New comment and expecting birth: Écrire un commentaire
Edit comment and expecting birth: Mettre à jour le commentaire
Edit member metadata: Données supplémentaires
comment_membership: Commentaire général sur les membres
expecting_birth: Naissance attendue ?