feat(event-list): add unselect button to multiselect (#735)

Signed-off-by: Fabien Robert <[email protected]>
Club-Alpin-Annecy · Nov 21, 2024 · dce9df6 · dce9df6
1 parent cbea12e
commit dce9df6
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 9 deletions.
diff --git a/collectives/static/css/components/collectives-list.scss b/collectives/static/css/components/collectives-list.scss
@@ -395,14 +395,20 @@ $button-height:40px;
 
 }
 
-.p-multiselect-list{
-    .icon {
-        width: 30px;
-        margin-right: 5px;
-        height: auto;
+.p-multiselect-overlay {
+    .p-multiselect-list {
+        .icon {
+            width: 30px;
+            margin-right: 5px;
+            height: auto;
+        }
+        .flex.items-center {
+            align-items: center;
+            justify-content: center;
+        }
     }
-    .flex.items-center {
-        align-items: center;
-        justify-content: center;
+    .justify-between {
+        justify-content: space-between;
+        padding: .75rem;
     }
-}
+}
diff --git a/collectives/static/js/event/eventlist-filters.component.js b/collectives/static/js/event/eventlist-filters.component.js
@@ -56,6 +56,12 @@ export default {
       <template #chip="slotProps">
           <Chip :label="findInConfig(config.activityList, slotProps.value).name" :image="'/static/caf/icon/' + slotProps.value + '.svg'" removable @remove="filters.activities = filters.activities.filter(id => id !== slotProps.value)"/>
       </template>
+      <template #footer>
+        <div class="p-3 flex justify-between">
+            <div></div>
+            <Button label="Effacer" severity="danger" text size="small" icon="pi pi-times" @click="filters.activities = []" />
+        </div>
+      </template>
     </p-multiselect>
 
     <div 
@@ -87,6 +93,12 @@ export default {
         <template #chip="slotProps">
             <Chip :label="findInConfig(config.eventTypes, slotProps.value).name" :image="'/static/caf/icon/' + slotProps.value + '.svg'" removable @remove="filters.eventTypes = filters.eventTypes.filter(id => id !== slotProps.value)" />
         </template>
+        <template #footer>
+          <div class="p-3 flex justify-between">
+              <div></div>
+              <Button label="Effacer" severity="danger" text size="small" icon="pi pi-times" @click="filters.eventTypes = []" />
+          </div>
+        </template>
       </p-multiselect>
 
       <p-multiselect 
@@ -108,6 +120,12 @@ export default {
         <template #chip="slotProps">
             <Chip :label="findInConfig(config.eventTags, slotProps.value).name" :image="'/static/caf/icon/' + slotProps.value + '.svg'" removable @remove="filters.eventTags = filters.eventTags.filter(id => id !== slotProps.value)" />
         </template>
+        <template #footer>
+          <div class="p-3 flex justify-between">
+              <div></div>
+              <Button label="Effacer" severity="danger" text size="small" icon="pi pi-times" @click="filters.eventTags = []" />
+          </div>
+        </template>
       </p-multiselect>
 
       <div class="input date">

diff --git a/collectives/templates/index.html b/collectives/templates/index.html
@@ -19,6 +19,9 @@
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/primevue.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@primevue/[email protected]/umd/aura.min.js"></script>
+<link href="
+https://cdn.jsdelivr.net/npm/[email protected]/primeicons.min.css
+" rel="stylesheet">
 
 
 <script type="module">
@@ -73,6 +76,7 @@
 
     app.component('p-datepicker', PrimeVue.DatePicker);
     app.component('p-multiselect', PrimeVue.MultiSelect);
+    app.component('Button', PrimeVue.Button);
     app.component('DataView', PrimeVue.DataView);
     app.component('Chip', PrimeVue.Chip);
     app.component('Paginator', PrimeVue.Paginator);