address history: improve template, insert buttons with validFrom/validTo difference

src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss

@@ -40,6 +40,9 @@ div.flex-bloc {
             div.item-col {
                 &:first-child {
                     flex-grow: 0; flex-shrink: 0; flex-basis: auto;
+                    padding-bottom: 0.5em;
+                    border-bottom: 1px dotted #0000004f;
+                    margin-bottom: 0.5em;
                 }
                 &:last-child {
                     flex-grow: 1; flex-shrink: 1; flex-basis: auto;

src/Bundle/ChillMainBundle/Resources/public/chill/scss/render_box.scss

@@ -83,7 +83,9 @@ section.chill-entity {
             }
         }
 
-        .noaddress {}
+        .noaddress {
+            font-style: italic;
+        }
 
         span.address-since,
         span.address-until {}

src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss

@@ -159,85 +159,4 @@ div.household-members {
    }
 }
 
-/*
-*  ADDRESS HISTORY
-*  context person / household
-*/
-div.address-timeline.grid {
-   display: grid;
-   grid-template-rows: auto auto auto;
-   grid-template-columns: auto 120px auto;
 
-   @media only screen and (max-width: 750px) {
-      grid-template-columns: auto 1em auto;
-   }
-
-   div.top {
-      grid-column: 2;
-      text-align: center;
-      color: lightgrey;
-      margin-bottom: -20px;
-   }
-   div.col-a {
-      grid-column: 1;
-      text-align: right;
-   }
-   div.col-b,
-   div.date {
-      grid-column: 2;
-      position: relative;
-      &:after {
-         position: absolute;
-         content: '';
-         top: 0; bottom: 0;
-         left: 50%;
-         margin: auto -5px;
-         width: 10px;
-         height: 100%;
-         background-color: lightgrey;
-         z-index: -5;
-      }
-   }
-   div.col-c {
-      grid-column: 3;
-   }
-
-   div.col-b,
-   div.action,
-   div.content {
-      min-height: 30px;
-      padding: 1em;
-   }
-   div.content {
-      margin: 0.3em;
-      border: 1px dashed #00000045;
-      &.row1 { // current address
-         border: 1px solid #000;
-      }
-      div.address {
-         font-variant: small-caps;
-      }
-   }
-   div.date {
-      text-align: center;
-      background-color: lightgrey;
-      padding: 0.5em;
-      border-radius: 0.3em;
-   }
-
-   div.span2 { grid-row: span 3; }
-   div.span3 { grid-row: span 5; }
-   div.span4 { grid-row: span 7; }
-   div.span5 { grid-row: span 9; }
-
-   ul.record_actions {
-      margin: 0;
-   }
-   .fake {
-      &:after {
-         content: 'fake, just to test.. ';
-         color: lightgrey;
-         font-style: italic;
-      }
-   }
-}

src/Bundle/ChillPersonBundle/Resources/public/chill/index.js

@@ -8,6 +8,7 @@ require('./scss/household_banner.scss');
 require('./scss/accompanying_period_work.scss');
 require('./scss/person_by_phonenumber.scss');
 require('./scss/render_box.scss');
+require('./scss/address_history.scss');
 
 require('./svg/phone-alt-solid.svg');
 require('./svg/mobile-alt-solid.svg');

src/Bundle/ChillPersonBundle/Resources/public/chill/scss/address_history.scss

@@ -0,0 +1,88 @@
+/*
+*  ADDRESS HISTORY
+*  context person / household
+*/
+div.address-timeline.grid {
+    display: grid;
+    grid-template-rows: auto auto auto;
+    grid-template-columns: auto 120px auto;
+
+    div.household-address & {
+        // no col-a in this context !
+        grid-template-columns: 0 120px auto;
+    }
+
+    @media only screen and (max-width: 750px) {
+        grid-template-columns: auto 1em auto;
+    }
+
+    div.top {
+        grid-column: 2;
+        text-align: center;
+        color: lightgrey;
+        margin-bottom: -20px;
+    }
+    div.col-a {
+        grid-column: 1;
+        text-align: right;
+    }
+    div.col-b,
+    div.date {
+        grid-column: 2;
+        position: relative;
+        &:after {
+            position: absolute;
+            content: '';
+            top: 0; bottom: 0;
+            left: 50%;
+            margin: auto -5px;
+            width: 10px;
+            height: 100%;
+            background-color: lightgrey;
+            z-index: -5;
+        }
+    }
+    div.col-c {
+        grid-column: 3;
+    }
+
+    div.col-b,
+    div.action,
+    div.content {
+        min-height: 30px;
+        padding: 1em;
+    }
+    div.content {
+        margin: 0.3em;
+        border: 1px dashed #00000045;
+        &.row1 { // current address
+            border: 1px solid #000;
+        }
+        div.address {
+            font-variant: small-caps;
+        }
+    }
+    div.date {
+        text-align: center;
+        background-color: lightgrey;
+        padding: 0.5em;
+        border-radius: 0.3em;
+    }
+
+    div.span2 { grid-row: span 3; }
+    div.span3 { grid-row: span 5; }
+    div.span4 { grid-row: span 7; }
+    div.span5 { grid-row: span 9; }
+
+    ul.record_actions {
+        margin: 0;
+    }
+    .fake {
+        &:after {
+            content: 'fake, just to test.. ';
+            color: lightgrey;
+            font-style: italic;
+        }
+    }
+}
+

src/Bundle/ChillPersonBundle/Resources/views/Address/list.html.twig

@@ -21,10 +21,19 @@
 {% block title %}{{ 'Addresses history for %name%'|trans({ '%name%': person.firstName ~ ' ' ~ person.lastName } ) }}{% endblock %}
 
 {% block personcontent %}
-<div class="person-addresses">
+<div class="person-address">
 
     <h1>{{ 'Addresses history'|trans }}</h1>
 
+    <ul class="record_actions my-3">
+        <li style="margin: auto;">
+            <a class="btn btn-lg btn-create"
+               href="{{ path('chill_person_address_new', { 'person_id' : person.id } ) }}">
+                {{ 'Add an address'|trans }}
+            </a>
+        </li>
+    </ul>
+
     <div class="address-timeline grid">
 
         {% if person.addresses|length == 0 %}
@@ -33,29 +42,51 @@
             <div class="top"><i class="fa fa-caret-up fa-3x"></i></div>
         {% endif %}
 
+        <div class="col-a">
+            <h3 class="mb-5">{{ 'Person addresses'|trans }}</h3>
+        </div>
+        <div class="col-b"></div>
+        <div class="col-c">
+            <h3 class="mb-5">{{ 'Household addresses'|trans }}</h3>
+        </div>
+
+        {% set row = 0 %}
+        {% set previousRowFrom = null %}
+
         {% for address in person.addresses %}
 
-            {# if person address #}
+            {% set row = row + 1 %}
-            <div class="col-a content{{ ' row' ~ loop.index }}">
+            {% if address.validTo is not empty and address.validTo < previousRowFrom %}
-                <div class="address">
+                <div class="{{ 'row' ~ row ~ ' ' }}col-a action">
-                    {% if address.isNoAddress == true %}
+                    <a href="" class="btn btn-sm btn-create">{{ 'Insert an address'|trans }}</a></div>
-                        <div class="chill_address_is_noaddress">{{ 'address.consider homeless'|trans }}</div>
+                <div class="{{ 'row' ~ row ~ ' ' }}col-b"></div>
-                    {% else %}
+                <div class="{{ 'row' ~ row ~ ' ' }}col-c action">
-                        {{ address|chill_entity_render_box({
+                    <a href="" class="btn btn-sm btn-create">{{ 'Insert an address'|trans }}</a></div>
-                            'multiline': false, 'with_valid_from': false
+                <div class="date">
-                        }) }}
+                    {% if address.validTo is not empty %}
+                        {{ address.validTo|format_date('short') }}
                     {% endif %}
+                </div>
 
+                {% set row = row + 1 %}
+            {% endif %}
+
+
+            {# if person address #}
+                <div class="{{ 'row' ~ row ~ ' ' }}col-a content">
+                    {{ address|chill_entity_render_box({
+                        'render': 'bloc',
+                        'multiline': true,
+                        'extended_infos': true,
+                        'has_no_address': true
+                    }) }}
                     <ul class="record_actions">
-                        <li>
+                        <li><a href="{{ path('chill_person_address_edit', { 'person_id': person.id, 'address_id' : address.id } ) }}" class="btn btn-edit"></a></li>
-                            <a href="{{ path('chill_person_address_edit', { 'person_id': person.id, 'address_id' : address.id } ) }}" class="btn btn-edit"></a>
-                        </li>
                     </ul>
                 </div>
-            </div>
             {# endif #}
 
-            <div class="col-b"></div>
+            <div class="{{ 'row' ~ row ~ ' ' }}col-b"></div>
 
             {# if household address #}{#
                 <div class="col-c content rowXX">
@@ -65,10 +96,11 @@
 
             <div class="date">
                 {% if address.validFrom is not empty %}
-                    {{ address.validFrom|format_date('long') }}
+                    {{ address.validFrom|format_date('short') }}
                 {% endif %}
             </div>
 
+            {% set previousRowFrom = address.validFrom %}
         {% endfor %}
 
         {# TEST HOUSEHOLD POSITION
@@ -86,7 +118,7 @@
                 <ul class="record_actions"><li><a href="" class="btn btn-edit"></a></li></ul>
             </div>
         </div>
-        <div class="date">01 janvier 1970</div>
+        <div class="date">01/01/1970</div>
         {# END TEST #}
 
     </div>
@@ -104,6 +136,5 @@
             </a>
         </li>
     </ul>
-
 </div>
 {% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/Household/addresses.html.twig

@@ -5,68 +5,83 @@
 {% block content %}
 <div class="household-address">
 
-<h1>{{ block('title') }}</h1>
+    <h1>{{ block('title') }}</h1>
 
-<div class="address-timeline grid">
+    <ul class="record_actions my-3">
+        <li style="margin: auto;">
+            <a class="btn btn-lg btn-create"
+               href="{{ chill_path_add_return_path('chill_person_household_address_move', { 'household_id': household.id }) }}">
+                {{ 'Move household'|trans }}
+            </a>
+        </li>
+    </ul>
 
-    {% if household.addresses|length == 0 %}
+    <div class="address-timeline grid">
-        <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
-    {% else %}
-        <div class="top"><i class="fa fa-caret-up fa-3x"></i></div>
-    {% endif %}
 
-    {% for address in household.addresses %}
+        {% if household.addresses|length == 0 %}
+            <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
+        {% else %}
+            <div class="top"><i class="fa fa-caret-up fa-3x"></i></div>
+        {% endif %}
 
-        <div class="col-b"></div>
+        {% set row = 0 %}
+        {% set previousRowFrom = null %}
 
-        <div class="col-c content{{ ' row' ~ loop.index }}">
+        {% for address in household.addresses %}
-            <div class="address">
+
-                {% if address.isNoAddress == true %}
+            {% set row = row + 1 %}
-                    <div class="chill_address_is_noaddress">{{ 'address.consider homeless'|trans }}</div>
+            {% if address.validTo is not empty and address.validTo < previousRowFrom %}
-                {% else %}
+
-                    {% if address.street is not empty %}
+                <div class="{{ 'row' ~ row ~ ' ' }}col-b"></div>
-                    <div class="street">
+                <div class="{{ 'row' ~ row ~ ' ' }}col-c action">
-                        <span class="streetNumber">{{ address.street }}</span>
+                    <a href="" class="btn btn-sm btn-create">{{ 'Insert an address'|trans }}</a></div>
-                        {% if address.streetNumber is not empty %}
+                <div class="date">
-                            <span class="streetNumber">, {{ address.streetNumber }}</span>
+                    {% if address.validTo is not empty %}
-                        {% endif %}
+                        {{ address.validTo|format_date('short') }}
-                    </div>
-                    {% endif %}
-                    {% if address.postCode is not empty %}
-                        <div class="postCode">
-                            <span>{{ address.postCode.code }}</span> <span>{{ address.postCode.name }}</span>
-                            <span class="country">({{ address.postCode.country.name|localize_translatable_string }})</span>
-                        </div>
                     {% endif %}
+                </div>
 
+                {% set row = row + 1 %}
+            {% endif %}
+
+            <div class="{{ 'row' ~ row ~ ' ' }}col-b"></div>
+            <div class="{{ 'row' ~ row ~ ' ' }}col-c content">
+                {{ address|chill_entity_render_box({
+                    'render': 'bloc',
+                    'multiline': true,
+                    'extended_infos': true,
+                    'has_no_address': true
+                }) }}
+                <ul class="record_actions">
+                    <li>
+                        <a href="{{ path('chill_person_household_address_edit', { 'household_id': household.id, 'address_id' : address.id } ) }}" class="btn btn-edit"></a>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="date">
+                {% if address.validFrom is not empty %}
+                    {{ address.validFrom|format_date('short') }}
                 {% endif %}
             </div>
 
-            <ul class="record_actions">
+            {% set previousRowFrom = address.validFrom %}
-                <li>
+        {% endfor %}
-                    <a href="{{ path('chill_person_household_address_edit', { 'household_id': household.id, 'address_id' : address.id } ) }}" class="btn btn-edit"></a>
+    </div>
-                </li>
-            </ul>
-        </div>
 
-        <div class="date">
+    <ul class="record_actions sticky-form-buttons">
-            {% if address.validFrom is not empty %}
+        <li class="cancel">
-                {{ address.validFrom|format_date('long') }}
+            <a href="{{ path('chill_person_household_summary', { 'household_id' : household.id } ) }}" class="btn btn-cancel">
-            {% endif %}
+                {{ 'Back to household'|trans }}
-        </div>
+            </a>
-
+        </li>
-    {% endfor %}
+        <li>
-
+            <a class="btn btn-create"
-</div>
+            href="{{ chill_path_add_return_path('chill_person_household_address_move', { 'household_id': household.id }) }}">
-
+            {{ 'Move household'|trans }}
-<ul class="record_actions">
+            </a>
-    <li>
+        </li>
-        <a class="btn btn-create"
+    </ul>
-        href="{{ chill_path_add_return_path('chill_person_household_address_move', { 'household_id': household.id }) }}">
-        {{ 'Move household'|trans }}
-        </a>
-    </li>
-</ul>
 
 </div>
 {% endblock %}

src/Bundle/ChillPersonBundle/translations/messages.fr.yml

@@ -353,6 +353,7 @@ Household accompanying period: Parcours d'accompagnement du ménage
 Household summary: Résumé du ménage
 Edit household address: Modifier l'adresse du ménage
 Show household: Voir le ménage
+Back to household: Revenir au ménage
 
 # accompanying course work
 Accompanying Course Actions: Actions d'accompagnements
@@ -370,3 +371,8 @@ accompanying_course_work:
     results: Résultats - orientations
     goal: Objectif - motif - dispositif
     Any work: Aucune action d'accompagnement
+
+#
+Person addresses: Adresses de résidence
+Household addresses: Adresses de domicile
+Insert an address: Insérer une adresse

src/Bundle/ChillThirdPartyBundle/Resources/views/Entity/thirdparty.html.twig

@@ -66,11 +66,12 @@
         </div>
         <div class="item-col">
             <ul class="list-content fa-ul">
-                <li><i class="fa fa-li fa-envelope-o"></i>
+                {{ thirdparty.getAddress|chill_entity_render_box({
-                    <a href="{{ 'mailto:' ~ thirdparty.email }}">
+                    'render': 'list',
-                        {{ thirdparty.email|chill_print_or_message("thirdparty.No_email") }}
+                    'with_picto': true,
-                    </a>
+                    'multiline': false,
-                </li>
+                    'with_valid_from': false
+                }) }}
                 <li><i class="fa fa-li fa-phone"></i>
                     {% if thirdparty.telephone %}
                         <a href="{{ 'tel:' ~ thirdparty.telephone }}">{{ thirdparty.telephone|chill_format_phonenumber }}</a>
@@ -78,12 +79,10 @@
                         <span class="chill-no-data-statement">{{ 'thirdparty.No_phonenumber'|trans }}</span>
                     {% endif %}
                 </li>
-                <li><i class="fa fa-li fa-map-marker"></i>
+                <li><i class="fa fa-li fa-envelope-o"></i>
-                    {%- if thirdparty.address is not empty -%}
+                    <a href="{{ 'mailto:' ~ thirdparty.email }}">
-                        {{ thirdparty.getAddress|chill_entity_render_box({'with_valid_from': false}) }}
+                        {{ thirdparty.email|chill_print_or_message("thirdparty.No_email") }}
-                    {%- else -%}
+                    </a>
-                        <span class="chill-no-data-statement">{{ 'No address given'|trans }}</span>
-                    {%- endif -%}
                 </li>
             </ul>
             <ul class="record_actions">