From d67483fd9a1e26d26b1fa10a4dd5285a8a551a0c Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Mon, 9 Aug 2021 17:03:21 +0200
Subject: [PATCH] add options on button for AddPersons component: size, type
 and display

* size: add bootstrap class : btn-sm, btn-lg..
* type: override chill button class : btn-update, btn-chill-beige
* display: override default : true
---
 .../vuejs/AccompanyingCourseWorkEdit/App.vue  | 22 ++++++++-----
 .../public/vuejs/_components/AddPersons.vue   | 33 +++++++++++--------
 2 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
index 4ab929c02..4f1cb6afd 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
@@ -140,9 +140,7 @@
 
         <ul class="record_actions">
           <li>
-            <button class="btn btn-delete" @click="removeHandlingThirdParty">
-               {{ $t('remove_handling_thirdparty') }}
-            </button>
+            <button class="btn btn-remove" @click="removeHandlingThirdParty" :title="$t('remove_handling_thirdparty')"></button>
           </li>
         </ul>
       </div>
@@ -163,7 +161,7 @@
             <show-address :address="t.address"></show-address>
 
             <ul class="record_actions">
-              <button class="btn btn-delete" @click="removeThirdParty(t)"></button>
+              <button class="btn btn-remove" @click="removeThirdParty(t)" :title="$t('remove_thirdparty')"></button>
             </ul>
           </li>
         </ul>
@@ -302,11 +300,12 @@
     }
 
     div.objective-title {
+      font-weight: bold;
+      /*
       margin-top: 1rem;
       font-size: 1.5rem;
-      font-weight: bold;
       text-align: center;
-
+      */
 
       i.fa {
         padding: 0.25rem;
@@ -399,7 +398,8 @@ const i18n = {
       no_handling_thirdparty: "Aucun tiers traitant",
       precise_handling_thirdparty: "Indiquer un tiers traitant",
       choose_a_thirdparty: "Choisir un tiers",
-      remove_handling_thirdparty: "Supprimer le tiers traitant",
+      remove_thirdparty: "Enlever le tiers",
+      remove_handling_thirdparty: "Enlever le tiers traitant",
       thirdparty_intervener: "Tiers intervenants",
       no_thirdparty_intervener: "Aucun tiers intervenant",
       add_thirdparties: "Ajouter des tiers",
@@ -430,7 +430,10 @@ export default {
         options: {
           type: [ 'thirdparty' ],
           priority: null,
-          uniq: true
+          uniq: true,
+          button: {
+             display: false
+          }
         },
       },
       thirdPartyPicker: {
@@ -439,6 +442,9 @@ export default {
           type: [ 'thirdparty' ],
           priority: null,
           uniq: false,
+          button: {
+             display: false
+          }
         },
       }
     };
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
index 9cd31e277..42ffb888e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
@@ -1,9 +1,8 @@
 <template>
    <ul class="record_actions">
       <li class="add-persons">
-         <a class="btn btn-create" @click="openModal">
-            {{ $t(buttonTitle) }}
-         </a>
+         <a class="btn" :class="getClassButton" :title="$t(buttonTitle)"
+            @click="openModal"><span v-if="displayTextButton">{{ $t(buttonTitle) }}</span></a>
       </li>
    </ul>
 
@@ -19,7 +18,7 @@
          <template v-slot:body-head>
             <div class="modal-body">
                <div class="search">
-                  
+
                   <label class="col-form-label" style="float: right;">
                      {{ $tc('add_persons.suggested_counter', suggestedCounter) }}
                   </label>
@@ -66,17 +65,17 @@
 
                <div class="create-button">
                   <on-the-fly
-                     v-if="query.length >= 3" 
+                     v-if="query.length >= 3"
                      v-bind:buttonText="$t('onthefly.create.button', {q: query})"
                      action="create"><!-- TODO first close this modal -->
                   </on-the-fly>
                </div>
-               
+
             </div>
          </template>
 
          <template v-slot:footer>
-            <button class="btn btn-create" 
+            <button class="btn btn-create"
                @click.prevent="$emit('addNewPersons', { selected, modal })">
                {{ $t('action.add')}}
             </button>
@@ -150,13 +149,19 @@ export default {
          ];
          let union = [...new Set([
             ...this.suggested.slice().reverse(),
-            ...this.selected.slice().reverse(), 
+            ...this.selected.slice().reverse(),
          ])];
          return uniqBy(union, k => k.key);
       },
-      //options() {
-      //   return this.options;
-      //},
+      getClassButton() {
+         let size = (typeof this.options.button !== 'undefined' && typeof this.options.button.size !== 'undefined') ? this.options.button.size : '';
+         let type = (typeof this.options.button !== 'undefined' && typeof this.options.button.type !== 'undefined') ? this.options.button.type : 'btn-create';
+         return size ? size + ' ' + type : type;
+      },
+      displayTextButton() {
+         return (typeof this.options.button !== 'undefined' && typeof this.options.button.display !== 'undefined') ?
+            this.options.button.display : true;
+      },
       checkUniq() {
          if (this.options.uniq === true) {
             return 'radio';
@@ -184,7 +189,7 @@ export default {
             this.loadSuggestions([]);
          }
       },
-      loadSuggestions(suggested) { 
+      loadSuggestions(suggested) {
          //console.log('suggested', suggested);
          this.search.suggested = suggested;
          this.search.suggested.forEach(function(item) {
@@ -230,7 +235,7 @@ export default {
          margin: auto 4em;
          div.search {
             position: relative;
-            input { 
+            input {
                width: 100%;
                padding: 1.2em 1.5em 1.2em 2.5em;
                //margin: 1em 0;
@@ -239,7 +244,7 @@ export default {
                position: absolute;
                opacity: 0.5;
                padding: 0.65em 0;
-               top: 50%; 
+               top: 50%;
             }
             i.fa-search {
                left: 0.5em;