From 37cc5409709c74ceeb6c948fcfa3c5997c01659f Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Thu, 25 Nov 2021 19:04:13 +0100
Subject: [PATCH] vue_accourseWorkEdit: improve show/hide button + list-suggest
 improve hyphens on badge too large

---
 .../Resources/public/chill/scss/badge.scss    |  5 ++
 .../components/AddResult.vue                  | 61 +++++++++++++------
 2 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss
index 98bf8704b..b17f17295 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss
@@ -17,6 +17,11 @@
 ul.list-suggest {
     list-style-type: none;
     padding-left: 0;
+    li > span {
+        white-space: normal;
+        text-align: start;
+        margin-bottom: 3px;
+    }
     &.add-items {
         li {
             cursor: pointer;
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddResult.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddResult.vue
index dd2f19a35..822a11429 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddResult.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddResult.vue
@@ -1,8 +1,10 @@
 <template>
    <div v-if="hasResult" class="addResult">
+
       <p v-if="pickedResults.length ===0" class="chill-no-data-statement">
          Aucun résultat associé
       </p>
+
       <ul class="list-suggest remove-items">
          <li v-for="r in pickedResults">
             <span>
@@ -11,26 +13,45 @@
             </span>
          </li>
       </ul>
-      <template v-if="isExpanded">
-         <ul class="list-suggest add-items">
-            <li v-for="r in availableForCheckResults" @click="addResult(r)">
-               <span>{{ r.title.fr }}</span>
-            </li>
-         </ul>
-      </template>
-      <ul class="record_actions">
-         <li v-if="isExpanded">
-            <button class="btn btn-hide" @click="toggleSelect">
-               <i class="fa fa-eye-slash"></i>
-               Masquer résultats et orientations disponibles
-            </button>
-         </li>
-         <li v-else>
-            <button class="btn btn-show" @click="toggleSelect">
-               Afficher résultats et orientations disponibles
-            </button>
-         </li>
-      </ul>
+
+      <div class="accordion" id="expandedSuggestions">
+         <div class="accordion-item">
+            <h2 class="accordion-header" id="heading_expanded_suggestions">
+
+               <button v-if="isExpanded"
+                  class="accordion-button"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  aria-expanded="true"
+                  @click="toggleSelect">
+                  Masquer résultats et orientations disponibles
+               </button>
+
+               <button v-else
+                  class="accordion-button collapsed"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  aria-expanded="false"
+                  @click="toggleSelect">
+                  Afficher résultats et orientations disponibles
+               </button>
+
+            </h2>
+            <div class="accordion-collapse" id="collapse_expanded_suggestions"
+                 aria-labelledby="heading_expanded_suggestions" data-bs-parent="#expandedSuggestions">
+
+               <template v-if="isExpanded">
+                  <ul class="list-suggest add-items">
+                     <li v-for="r in availableForCheckResults" @click="addResult(r)">
+                        <span>{{ r.title.fr }}</span>
+                     </li>
+                  </ul>
+               </template>
+
+            </div>
+         </div>
+      </div>
+
    </div>
    <div v-if="!hasResult" class="noResult">
       <div class="chill-no-data-statement">