From aa40716898a4ec418c1d399dd113b066f8ba07c9 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Sun, 21 Mar 2021 14:36:59 +0100
Subject: [PATCH] design UX for duplicate person feature

---
 .../Form/PersonFindManuallyDuplicateType.php  |  9 +-
 .../views/PersonDuplicate/_sidepane.html.twig | 45 ++++++++++
 .../views/PersonDuplicate/confirm.html.twig   | 84 ++++++++++++++++---
 .../PersonDuplicate/find_manually.html.twig   |  9 +-
 .../views/PersonDuplicate/view.html.twig      | 52 +++++++++---
 .../translations/messages.fr.yml              | 18 +++-
 6 files changed, 181 insertions(+), 36 deletions(-)
 create mode 100644 src/Bundle/ChillPersonBundle/Resources/views/PersonDuplicate/_sidepane.html.twig

diff --git a/src/Bundle/ChillPersonBundle/Form/PersonFindManuallyDuplicateType.php b/src/Bundle/ChillPersonBundle/Form/PersonFindManuallyDuplicateType.php
index 0a91e8fc6..c46f2cf82 100644
--- a/src/Bundle/ChillPersonBundle/Form/PersonFindManuallyDuplicateType.php
+++ b/src/Bundle/ChillPersonBundle/Form/PersonFindManuallyDuplicateType.php
@@ -5,7 +5,7 @@ namespace Chill\PersonBundle\Form;
 use Chill\PersonBundle\Form\Type\PickPersonType;
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
-use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\Form\Extension\Core\Type\HiddenType;
 use Symfony\Component\Form\FormBuilderInterface;
 
 class PersonFindManuallyDuplicateType extends AbstractType
@@ -21,11 +21,8 @@ class PersonFindManuallyDuplicateType extends AbstractType
                 'label' => 'Find duplicate',
                 'mapped' => false,
             ])
-            ->add('direction', ChoiceType::class, [
-                  'choices' => [
-                      'Starting' => 'starting',
-                      'Arrival' => 'arrival',
-                  ],
+            ->add('direction', HiddenType::class, [
+                'data' => 'starting',
             ])
         ;
     }
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/PersonDuplicate/_sidepane.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/PersonDuplicate/_sidepane.html.twig
new file mode 100644
index 000000000..dfd931761
--- /dev/null
+++ b/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 %}
\ No newline at end of file
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/PersonDuplicate/confirm.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/PersonDuplicate/confirm.html.twig
index 56b1a6837..dedf73d55 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/PersonDuplicate/confirm.html.twig
+++ b/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 %}
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/PersonDuplicate/find_manually.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/PersonDuplicate/find_manually.html.twig
index 267442740..f8f80bd56 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/PersonDuplicate/find_manually.html.twig
+++ b/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>
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/PersonDuplicate/view.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/PersonDuplicate/view.html.twig
index 72e5aa7db..9cbc7ced5 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/PersonDuplicate/view.html.twig
+++ b/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 %}
diff --git a/src/Bundle/ChillPersonBundle/translations/messages.fr.yml b/src/Bundle/ChillPersonBundle/translations/messages.fr.yml
index 394e51230..d8c8734de 100644
--- a/src/Bundle/ChillPersonBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillPersonBundle/translations/messages.fr.yml
@@ -66,12 +66,24 @@ Married: Marié(e)
 'Contact information': 'Informations de contact'
 'Administrative information': Administratif
 File number: Dossier n°
-Old person: Ancien dossier
-New person: Nouveau dossier
+
+# dédoublonnage
+Old person: Dossier doublon
+Old person explain: sera supprimé lors de la fusion
+New person: Dossier cible
+New person explain: sera conservé lors de la fusion
 I confirm the merger of these 2 people : Je confime la fusion de ces 2 dossiers
+Person duplicate explained: Chill a détecté des doublons potentiels ! Vous pouvez confirmer, infirmer, ou encore désigner un autre dossier.
 Person flaged as duplicate: Dossiers marqués comme faux-positif
-Associate manually a duplicate person: Associer manuellement une personne en double
+Person flaged as duplicate explained: Les dossiers suivants sont marqués comme faux-positifs. Ce ne sont pas des doublons !
+Associate manually a duplicate person: Désigner un autre dossier
+Invert: Inverser le sens de la fusion
 Find duplicate: Trouver un doublon
+Open in another window: Ouvrir dans une nouvelle fenêtre
+Deleted datas: Données supprimées
+Moved datas: Données déplacées
+Keeped datas: Données conservées
+Merge duplicate persons folders: Fusion de dossiers
 
 # addresses part
 address_street_address_1: Adresse ligne 1