design UX for duplicate person feature

src/Bundle/ChillPersonBundle/Resources/views/PersonDuplicate/_sidepane.html.twig

@@ -0,0 +1,45 @@
+{%- macro details(person, options) -%}
+
+{% import '@ChillMain/Address/macro.html.twig' as address %}
+
+<ul>
+    <li><b>{{ 'gender'|trans }}</b>:
+        {{ person.gender|trans }}</li>
+    <li><b>{{ 'maritalStatus'|trans }}</b>:
+        {% if person.maritalStatus.name %}{{ person.maritalStatus.name|localize_translatable_string }}{% endif %}</li>
+    <li><b>{{ 'birthdate'|trans }}</b>:
+        {% if person.birthdate is not null %}{{ person.birthdate|format_date('short') }}{% endif %}</li>
+    <li><b>{{ 'placeOfBirth'|trans }}</b>:
+        {% if person.placeOfBirth is not empty %}{{ person.placeOfBirth }}{% endif %}</li>
+    <li><b>{{ 'countryOfBirth'|trans }}</b>:
+        {% if person.countryOfBirth %}{{ person.countryOfBirth.name|localize_translatable_string }}{% endif %}</li>
+    <li><b>{{ 'nationality'|trans }}</b>:
+        {% if person.nationality %}{{ person.nationality.name|localize_translatable_string }}{% endif %}</li>
+    <li><b>{{ 'phonenumber'|trans }}</b>:
+        {{ person.phonenumber }}</li>
+    <li><b>{{ 'mobilenumber'|trans }}</b>:
+        {{ person.mobilenumber }}</li>
+    <li><b>{{ 'email'|trans }}</b>:
+        {{ person.email }}</li>
+    <li><b>{{ 'memo'|trans }}</b>:
+        {{ person.memo }}</li>
+    <li><b>{{ 'address'|trans }}</b>:
+        {%- if person.lastAddress is not empty -%}{{ address._render(person.lastAddress, {'with_valid_from': false}) }}{% endif %}</li>
+    <li><b>{{ 'spokenLanguages'|trans }}</b>:
+        {% for lang in person.spokenLanguages %}{{ lang.name|localize_translatable_string }}{% if not loop.last %},{% endif %}{% endfor %}</li>
+    <li><b>{{ 'contactInfo'|trans }}</b>:
+        {% if person.contactInfo is not empty %}{{ person.contactInfo|nl2br }}{% endif %}</li>
+
+</ul>
+{% endmacro %}
+
+{%- macro links(person, options) -%}
+<ul>
+    {# TODO suivre toutes les jointures #}
+    <li>compteur activités</li>
+    <li>compteur tâches</li>
+    <li>compteur rapports</li>
+    <li>compteur événements</li>
+    <li>compteur documents</li>
+</ul>
+{% endmacro %}

src/Bundle/ChillPersonBundle/Resources/views/PersonDuplicate/confirm.html.twig

@@ -1,31 +1,94 @@
-{% extends "@ChillPerson/layout.html.twig"  %}
+{% extends "@ChillMain/layout.html.twig"  %}
 
 {% set activeRouteKey = 'chill_person_duplicate' %}
+{% import '@ChillPerson/PersonDuplicate/_sidepane.html.twig' as sidepane %}
 
 {% block title %}{{ 'Person duplicate'|trans|capitalize ~ ' ' ~ person.firstName|capitalize ~
 ' ' ~ person.lastName }}{% endblock %}
 
-{% block personcontent %}
-    <h2>{{ 'Old person'|trans }}</h2>
-    {{ person2 }}
-    <a class="sc-button bt-show" target="_blank" href="{{ path('chill_person_view', { person_id : person2.id }) }}"></a>
+{% block content %}
+<style>
+    div.duplicate-content {
+        margin: 0 2rem;
+    }
+    div.col {
+        padding: 1em;
+        border: 3px solid #cccccc;
+    }
+    div.border {
+        border: 4px solid #3c9f8d;
+    }
 
 
-    <h2>{{ 'New person'|trans }}</h2>
-    {{ person }}
-    <a class="sc-button bt-show" target="_blank" href="{{ path('chill_person_view', { person_id : person.id }) }}"></a>
+</style>
+<div class="container content"><div class="duplicate-content">
+
+    <h1>{{ 'Merge duplicate persons folders'|trans }}</h1>
+
+    <div class="grid-6 grid-tablet-12 gid-mobile-12">
+        <p><b>{{ 'Old person'|trans }}</b>:
+            {{ 'Old person explain'|trans }}
+        </p>
+        <div class="col">
+
+            <h1><span><a class="sc-button bt-show" target="_blank" title="{{ 'Open in another window'|trans }}" href="{{ path('chill_person_view', { person_id : person2.id }) }}"></a></span>
+                {{ person2 }}
+            </h1>
+
+            <h4>{{ 'Deleted datas'|trans ~ ':' }}</h4>
+            {{ sidepane.details(person2) }}
+
+            <h4>{{ 'Moved datas'|trans ~ ':' }}</h4>
+            {{ sidepane.links(person2) }}
+        </div>
+    </div>
+
+    <div class="grid-6 grid-tablet-12 gid-mobile-12">
+        <p><b>{{ 'New person'|trans }}</b>:
+            {{ 'New person explain'|trans }}
+        </p>
+        <div class="col border">
+
+            <h1><span><a class="sc-button bt-show" target="_blank" title="{{ 'Open in another window'|trans }}" href="{{ path('chill_person_view', { person_id : person.id }) }}"></a></span>
+                {{ person }}
+            </h1>
+
+            <h4>{{ 'Keeped datas'|trans ~ ':' }}</h4>
+            {{ sidepane.details(person) }}
+
+            <h4>{{ 'Keeped datas'|trans ~ ':' }}</h4>
+            {{ sidepane.links(person) }}
+        </div>
+    </div>
 
     {{ form_start(form) }}
 
-    {{ form_rest(form) }}
+    <div class="grid-4 grid-tablet-12 gid-mobile-12 centered">
 
-    <ul class="grid-12 sticky-form-buttons record_actions ">
+        <div class="container" style="padding-top: 1em;">
+            <div class="grid-1 clear" style="padding-top: 10px;">
+                {{ form_widget(form.confirm) }}
+            </div>
+            <div class="grid-11">
+                {{ form_label(form.confirm) }}
+            </div>
+        </div>
+    </div>
+
+    <ul class="grid-12 record_actions">
         <li class="cancel">
             <a href="{{ app.request.headers.get('referer') }}" class="sc-button grey center margin-5">
                 <i class="fa fa-arrow-left"></i>
                 {{ 'Return'|trans }}
             </a>
         </li>
+        <li class="cancel">
+            <a  href="{{ path('chill_person_duplicate_confirm', { person1_id : person2.id, person2_id : person.id }) }}"
+                class="sc-button bt-action">
+                <i class="fa fa-exchange"></i>
+                {{ 'Invert'|trans }}
+            </a>
+        </li>
         <li>
             <button class="sc-button bt-save" type="submit">{{ 'Confirm'|trans }}</button>
         </li>
@@ -33,4 +96,5 @@
 
     {{ form_end(form) }}
 
+</div></div>
 {% endblock %}

src/Bundle/ChillPersonBundle/Resources/views/PersonDuplicate/find_manually.html.twig

@@ -8,19 +8,20 @@
 
 {% block personcontent %}
 
+    <h1>Désigner un dossier doublon</h1>
+    
     {{ form_start(form) }}
-
     {{ form_rest(form) }}
 
-    <ul class="grid-12 sticky-form-buttons record_actions ">
+    <ul class="grid-12 record_actions ">
         <li class="cancel">
-            <a href="{{ path('chill_person_duplicate_view',  {'person_id' : person.id}) }}" class="sc-button grey center margin-5">
+            <a href="{{ path('chill_person_duplicate_view',  {'person_id' : person.id}) }}" class="sc-button">
                 <i class="fa fa-arrow-left"></i>
                 {{ 'Return'|trans }}
             </a>
         </li>
         <li>
-            <button class="sc-button bt-save" type="submit">{{ 'Confirm'|trans }}</button>
+            <button class="sc-button bt-save" type="submit">{{ 'Next'|trans }}</button>
         </li>
     </ul>
 

src/Bundle/ChillPersonBundle/Resources/views/PersonDuplicate/view.html.twig

@@ -11,13 +11,14 @@
 
 
 {% if duplicatePersons|length > 0 %}
-    <h2>{{ title|default('Person duplicate')|trans }}</h2>
+    <h1>{{ title|default('Person duplicate')|trans }}</h1>
+    <p>{{ title|default('Person duplicate explained')|trans }}</p>
 
     <table>
     <thead>
         <tr>
-            <th class="chill-red">{% trans %}Name{% endtrans %}</th>
-            <th class="chill-green">{% trans %}Date of birth{% endtrans %}</th>
+            <th class="chill-orange">{% trans %}Name{% endtrans %}</th>
+            <th class="chill-orange">{% trans %}Date of birth{% endtrans %}</th>
             <th class="chill-orange">{% trans %}Nationality{% endtrans %}</th>
             <th>&nbsp;</th>
         </tr>
@@ -56,9 +57,17 @@
             </td>
             <td>
                 <ul class="record_actions">
-                    <li><a class="sc-button bt-show" target="_blank" href="{{ path('chill_person_view', { person_id : duplicatePerson.id }) }}"></a></li>
-                    <li><a class="sc-button bt-duplicate" href="{{ path('chill_person_duplicate_confirm', { person1_id : person.id, person2_id : duplicatePerson.id }) }}"></a></li>
-                    <li><a class="sc-button bt-not-duplicate" href="{{ path('chill_person_duplicate_not_duplicate', {person1_id : person.id, person2_id : duplicatePerson.id}) }}"></a></li>
+                    <li>
+                        <a class="sc-button bt-show" target="_blank" href="{{ path('chill_person_view', { person_id : duplicatePerson.id }) }}"></a>
+                    </li>
+                    <li>
+                        <a class="sc-button bt-action" href="{{ path('chill_person_duplicate_confirm', { person1_id : person.id, person2_id : duplicatePerson.id }) }}">
+                        Confirmer Doublons</a>
+                    </li>
+                    <li>
+                        <a class="sc-button bt-not-duplicate" href="{{ path('chill_person_duplicate_not_duplicate', {person1_id : person.id, person2_id : duplicatePerson.id}) }}">
+                        Changer vers Faux-positif</a>
+                    </li>
                 </ul>
             </td>
         </tr>
@@ -66,17 +75,16 @@
     </table>
 {% endif %}
 
-    <a href="{{ path('chill_person_find_manually_duplicate', {person_id: person.id}) }}" class="sc-button">{{ 'Associate manually a duplicate person' | trans }}</a>
-
 {% if notDuplicatePersons|length > 0 %}
-    <h2>{{ 'Person flaged as duplicate' | trans }}</h2>
+    <h1>{{ 'Person flaged as duplicate' | trans }}</h1>
+    <p>{{ 'Person flaged as duplicate explained' | trans }}</p>
 
     <table>
         <thead>
         <tr>
-            <th class="chill-red">{% trans %}Name{% endtrans %}</th>
+            <th class="chill-green">{% trans %}Name{% endtrans %}</th>
             <th class="chill-green">{% trans %}Date of birth{% endtrans %}</th>
-            <th class="chill-orange">{% trans %}Nationality{% endtrans %}</th>
+            <th class="chill-green">{% trans %}Nationality{% endtrans %}</th>
             <th>&nbsp;</th>
         </tr>
         </thead>
@@ -114,8 +122,13 @@
                 </td>
                 <td>
                     <ul class="record_actions">
-                        <li><a class="sc-button bt-show" target="_blank" href="{{ path('chill_person_view', { person_id : notDuplicatePerson.id }) }}"></a></li>
-                        <li><a class="sc-button bt-not-duplicate" href="{{ path('chill_person_remove_duplicate_not_duplicate', {person1_id : person.id, person2_id : notDuplicatePerson.id}) }}"></a></li>
+                        <li>
+                            <a class="sc-button bt-show" target="_blank" href="{{ path('chill_person_view', { person_id : notDuplicatePerson.id }) }}"></a>
+                        </li>
+                        <li>
+                            <a class="sc-button bt-action" href="{{ path('chill_person_remove_duplicate_not_duplicate', {person1_id : person.id, person2_id : notDuplicatePerson.id}) }}">
+                            Changer vers doublon</a>
+                        </li>
                     </ul>
                 </td>
             </tr>
@@ -123,4 +136,17 @@
     </table>
 {% endif %}
 
+<ul class="record_actions">
+    <li class="cancel">
+        <a href="{{ path('chill_person_view', {person_id: person.id }) }}" class="sc-button">
+            <i class="fa fa-arrow-left"></i>
+            {{ 'Return'|trans }}</a>
+    </li>
+    <li>
+        <a href="{{ path('chill_person_find_manually_duplicate', {person_id: person.id}) }}" class="sc-button bt-action">
+            {{ 'Associate manually a duplicate person' | trans }}
+        </a>
+    </li>
+</ul>
+
 {% endblock %}