behavior and style changed for adding motifs,obectifs, dispositifs

src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss

@@ -5,6 +5,7 @@
     &:before {
         font: normal normal normal 14px/1 ForkAwesome;
         margin-left: 0.5em;
+        margin-right: 0.5rem;
         content: "\f00d";  // fa-times
         color: var(--bs-danger);
         text-decoration: none;

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue

@@ -53,8 +53,8 @@
          <div v-for="g in goalsPicked">
             <div>
                <div class="item-title">
-                  {{ g.goal.title.fr }}
                   <a @click="removeGoal(g)"></a>
+                  {{ g.goal.title.fr }}
                </div>
             </div>
             <div>
@@ -63,7 +63,7 @@
          </div>
 
          <!-- box to add goal -->
-         <div class="add_goal">
+         <!-- <div class="add_goal">
             <div>
                <div v-if="showAddObjective">
 
@@ -85,7 +85,50 @@
                   <span class="chill-no-data-statement">{{ $t('no_goals_available') }}</span>
                </div>
             </div>
-            <div><!-- empty for results --></div>
+            <div>empty for results</div>
+         </div> -->
+         <div class="accordion" id="expandedSuggestions">
+            <div v-if="availableForCheckGoal.length > 0" 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
+                  </button>
+
+                  <button v-else
+                     class="accordion-button collapsed"
+                     type="button"
+                     data-bs-toggle="collapse"
+                     aria-expanded="false"
+                     @click="toggleSelect">
+                     Motifs, objectifs et dispositfs 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="g in availableForCheckGoal" @click="addGoal(g)">
+                           <span>{{ g.title.fr }}</span>
+                        </li>
+                     </ul>
+                  </template>
+
+               </div>
+               <p v-if="goalsPicked.length ===0" class="chill-no-data-statement">
+                  Aucun objectif associé
+               </p>
+            </div>
+            <div v-else>
+               <span class="chill-no-data-statement">{{ $t('no_goals_available') }}</span>
+            </div>
          </div>
       </div>
 
@@ -321,6 +364,7 @@ export default {
    i18n,
    data() {
       return {
+         isExpanded: false,
          editor: ClassicEditor,
          showAddObjective: false,
          showAddEvaluation: false,
@@ -410,8 +454,8 @@ export default {
       },
    },
    methods: {
-      toggleAddObjective() {
-         this.showAddObjective = !this.showAddObjective;
+      toggleSelect() {
+         this.isExpanded = !this.isExpanded;
       },
       addGoal(g) {
 
@@ -607,4 +651,16 @@ div#workEditor {
    }
 }
 
+.accordion-item:first-of-type, .accordion-item:last-of-type {
+   border-radius: 0rem;
+   border: 0px;
+   .accordion-button {
+      padding: .25rem;
+      border: 1px solid rgba(17, 17, 17, 0.125);
+      margin-top: 20px;
+      margin-bottom: 20px;
+   }
+}
+
+
 </style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddResult.vue

@@ -8,8 +8,8 @@
       <ul class="list-suggest remove-items">
          <li v-for="r in pickedResults">
             <span>
-               {{ r.title.fr }}
                <a @click="removeResult(r)"></a>
+               {{ r.title.fr }}
             </span>
          </li>
       </ul>