From 33c7a495c781ce4ac4ab58ccb0f172eb7807cfe8 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Thu, 25 Nov 2021 13:21:55 +0100
Subject: [PATCH] #258 add scss asset to manage suggestions lists (add/remove)

---
 .../Activity/components/ConcernedGroups.vue   | 55 +++++++++----------
 .../ConcernedGroups/PersonBadge.vue           | 10 +---
 .../ConcernedGroups/PersonsBloc.vue           |  2 +-
 .../Resources/public/chill/chillmain.scss     |  3 +
 .../Resources/public/chill/scss/badge.scss    | 34 ++++++++++++
 .../public/module/bootstrap/_custom.scss      |  9 +++
 6 files changed, 76 insertions(+), 37 deletions(-)
 create mode 100644 src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss

diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
index 981c6fd3a..853b43eb0 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups.vue
@@ -1,36 +1,33 @@
 <template>
-   <teleport to="#add-persons" v-if="isComponentVisible">
+    <teleport to="#add-persons" v-if="isComponentVisible">
 
-      <div class="flex-bloc concerned-groups" :class="getContext">
-         <persons-bloc
-            v-for="bloc in contextPersonsBlocs"
-            v-bind:key="bloc.key"
-            v-bind:bloc="bloc"
-            v-bind:blocWidth="getBlocWidth"
-            v-bind:setPersonsInBloc="setPersonsInBloc">
-         </persons-bloc>
-      </div>
-     <div v-if="getContext === 'accompanyingCourse' && suggestedEntities.length > 0">
-         <ul class="list-unstyled">
-          <li v-for="p in suggestedEntities" @click="addSuggestedEntity(p)">
-             <span class="badge bg-primary" style="cursor: pointer;">
-                 <i class="fa fa-plus fa-fw text-success"></i>
-                 {{ p.text }}
-             </span>
-          </li>
-        </ul>
-     </div>
+        <div class="flex-bloc concerned-groups" :class="getContext">
+            <persons-bloc
+                v-for="bloc in contextPersonsBlocs"
+                v-bind:key="bloc.key"
+                v-bind:bloc="bloc"
+                v-bind:blocWidth="getBlocWidth"
+                v-bind:setPersonsInBloc="setPersonsInBloc">
+            </persons-bloc>
+        </div>
+        <div v-if="getContext === 'accompanyingCourse' && suggestedEntities.length > 0">
+            <ul class="list-suggest add-items">
+                <li v-for="p in suggestedEntities" @click="addSuggestedEntity(p)">
+                    <span>{{ p.text }}</span>
+                </li>
+            </ul>
+        </div>
 
-      <add-persons
-         buttonTitle="activity.add_persons"
-         modalTitle="activity.add_persons"
-         v-bind:key="addPersons.key"
-         v-bind:options="addPersonsOptions"
-         @addNewPersons="addNewPersons"
-         ref="addPersons">
-      </add-persons>
+        <add-persons
+            buttonTitle="activity.add_persons"
+            modalTitle="activity.add_persons"
+            v-bind:key="addPersons.key"
+            v-bind:options="addPersonsOptions"
+            @addNewPersons="addNewPersons"
+            ref="addPersons">
+        </add-persons>
 
-  </teleport>
+    </teleport>
 </template>
 
 <script>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonBadge.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonBadge.vue
index 0b2dd6613..a13e672c2 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonBadge.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonBadge.vue
@@ -1,12 +1,8 @@
 <template>
    <li>
-      <span class="badge bg-primary" :title="person.text">
-         <span class="chill_denomination">
-            {{ textCutted }}
-         </span>
-         <a class="fa fa-fw fa-times text-danger text-decoration-none"
-            @click.prevent="$emit('remove', person)">
-         </a>
+      <span :title="person.text">
+         <span class="chill_denomination">{{ textCutted }}</span>
+         <a @click.prevent="$emit('remove', person)"></a>
       </span>
    </li>
 </template>
diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonsBloc.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonsBloc.vue
index 106196588..13ad54027 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonsBloc.vue
+++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/ConcernedGroups/PersonsBloc.vue
@@ -5,7 +5,7 @@
             <h4>{{ $t(bloc.title) }}</h4>
          </div>
          <div class="item-col">
-            <ul class="list-content">
+            <ul class="list-suggest remove-items">
                <person-badge
                   v-for="person in bloc.persons"
                   v-bind:key="person.id"
diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
index 53a9d200b..474f21981 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
@@ -10,6 +10,9 @@
 // Chill buttons
 @import './scss/buttons';
 
+// Chill badges
+@import './scss/badge';
+
 // Chill forms
 @import './scss/forms';
 
diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss
new file mode 100644
index 000000000..c496ae7e1
--- /dev/null
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss
@@ -0,0 +1,34 @@
+
+///
+/// A specific list of badges used to manage suggestions
+/// use bootstrap badge styles, cfr. src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/_custom.scss
+///
+ul.list-suggest {
+    list-style-type: none;
+    padding-left: 0;
+    &.add-items {
+        li {
+            cursor: pointer;
+            & > span:before {
+                font: normal normal normal 14px/1 ForkAwesome;
+                margin-right: 0.5em;
+                content: "\f067"; // fa-plus
+                color: var(--bs-success);
+            }
+        }
+    }
+    &.remove-items {
+        li {
+            a {
+                cursor: pointer;
+                &:before {
+                    font: normal normal normal 14px/1 ForkAwesome;
+                    margin-left: 0.5em;
+                    content: "\f00d";  // fa-times
+                    color: var(--bs-danger);
+                    text-decoration: none;
+                }
+            }
+        }
+    }
+}
diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/_custom.scss b/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/_custom.scss
index 9d632026f..38998bfd5 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/_custom.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/_custom.scss
@@ -4,3 +4,12 @@
  */
 
 
+/// A specific list of badges, use bootstrap badge styles
+/// cfr. src/Bundle/ChillMainBundle/Resources/public/chill/scss/badge.scss
+ul.list-suggest {
+    li > span {
+        @extend .badge;
+        @extend .bg-primary;
+    }
+}
+