From e62d026339caf65496e36d80c9e460042a87cd76 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Tue, 2 Nov 2021 18:58:25 +0100
Subject: [PATCH] visgraph form: other way to display relation

---
 .../Resources/public/vuejs/VisGraph/App.vue   | 28 +++++++++++--------
 .../Resources/public/vuejs/VisGraph/i18n.js   |  2 +-
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
index 03cf624ea..1b1f33364 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
@@ -42,11 +42,27 @@
                         <h4>
                            {{ getPerson(modal.data.from).text }}
                         </h4>
+                        <p class="text-start" v-if="relation && relation.title">
+                        <span v-if="reverse">
+                           {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.from).text, getPerson(modal.data.to).text, relation.reverseTitle.fr.toLowerCase() ])}}
+                        </span>
+                           <span v-else>
+                           {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.from).text, getPerson(modal.data.to).text, relation.title.fr.toLowerCase() ])}}
+                        </span>
+                        </p>
                      </div>
                      <div class="col text-end">
                         <h4>
                            {{ getPerson(modal.data.to).text }}
                         </h4>
+                        <p class="text-end" v-if="relation && relation.title">
+                        <span v-if="reverse">
+                           {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.to).text, getPerson(modal.data.from).text, relation.title.fr.toLowerCase() ])}}
+                        </span>
+                           <span v-else>
+                           {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.to).text, getPerson(modal.data.from).text, relation.reverseTitle.fr.toLowerCase() ])}}
+                        </span>
+                        </p>
                      </div>
                   </div>
                   <div class="my-3"><!--
@@ -66,16 +82,6 @@
                         >
                      </VueMultiselect>
                   </div>
-                  <div v-if="relation && relation.title">
-                     <p class="text-end" v-if="reverse">
-                        {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.to).text, getPerson(modal.data.from).text, relation.title.fr.toLowerCase() ])}}<br>
-                        {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.from).text, getPerson(modal.data.to).text, relation.reverseTitle.fr.toLowerCase() ])}}
-                     </p>
-                     <p class="text-start" v-else>
-                        {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.from).text, getPerson(modal.data.to).text, relation.title.fr.toLowerCase() ])}}<br>
-                        {{ $t('visgraph.relation_from_to_like', [ getPerson(modal.data.to).text, getPerson(modal.data.from).text, relation.reverseTitle.fr.toLowerCase() ])}}
-                     </p>
-                  </div>
                   <div class="form-check form-switch">
                      <input
                         class="form-check-input"
@@ -294,7 +300,7 @@ export default {
          let person = this.persons.filter(p => p.id === idtext)
          return person[0]
       },
-      
+
       submitRelationship() {
          console.log('submitRelationship')
          if (this.modal.action !== 'delete') {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js
index cfba9b950..af3255254 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js
@@ -16,7 +16,7 @@ const visMessages = {
             delete_relationship_link: "Êtes-vous sûr ?",
             delete_confirmation_text: "Vous allez supprimer le lien entre ces 2 usagers.",
             reverse_relation: "Inverser la relation",
-            relation_from_to_like: "{0}, {2} de {1}",
+            relation_from_to_like: "{2} de {1}", // disable {0}
         },
         edit: 'Éditer',
         del: 'Supprimer',