feat: use chip instead of badge in SelectFilter

GIP-RECIA · Nov 21, 2023 · 5e1f07c · 5e1f07c
1 parent a9cf6be
commit 5e1f07c
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 8 deletions.
diff --git a/src/main/webapp/src/assets/main.scss b/src/main/webapp/src/assets/main.scss
@@ -43,6 +43,10 @@
   .modal-flex-item {
     width: 50%;
   }
+
+  .account-filter {
+    max-width: 30em;
+  }
 }
 
 .v-move,

diff --git a/src/main/webapp/src/components/filter/SelectFilter.vue b/src/main/webapp/src/components/filter/SelectFilter.vue
@@ -28,19 +28,21 @@ const modelValue = computed<Array<number | string>>({
     rounded="xl"
     variant="solo"
     density="compact"
+    prepend-inner-icon="fas fa-filter"
     flat
     chips
     multiple
     hide-details
     class="select-filter"
   >
-    <template #prepend-inner>
-      <v-badge v-if="modelValue.length > 0" :content="modelValue.length" color="info">
-        <v-icon icon="fas fa-filter" />
-      </v-badge>
-      <v-icon v-else icon="fas fa-filter" />
+    <template #chip="{ props, item }">
+      <v-chip v-bind="props" rounded>
+        <div class="d-flex flex-row align-center">
+          <v-icon v-if="item.raw.color" icon="fas fa-circle" :color="item.raw.color" class="mr-2" />
+          <div>{{ t(item.raw.i18n) }}</div>
+        </div>
+      </v-chip>
     </template>
-    <template #chip />
     <template #item="{ props, item }">
       <v-list-item v-bind="props" title="">
         <div class="d-flex flex-row align-center">

diff --git a/src/main/webapp/src/views/structure/AdministrativeView.vue b/src/main/webapp/src/views/structure/AdministrativeView.vue
@@ -19,7 +19,9 @@ const accountStates = ref<Array<string>>([Etat.Valide]);
 <template>
   <v-container fluid>
     <div class="d-flex align-center justify-end mb-4 mb-sm-0">
-      <select-filter v-if="filterAccountStates" v-model="accountStates" :items="filterAccountStates" />
+      <div class="account-filter">
+        <select-filter v-if="filterAccountStates" v-model="accountStates" :items="filterAccountStates" />
+      </div>
     </div>
     <filieres-layout :filieres="administrative" :account-states="accountStates" />
 

diff --git a/src/main/webapp/src/views/structure/TeachingView.vue b/src/main/webapp/src/views/structure/TeachingView.vue
@@ -19,7 +19,9 @@ const accountStates = ref<Array<string>>([Etat.Valide]);
 <template>
   <v-container fluid>
     <div class="d-flex justify-end mb-4 mb-sm-0">
-      <select-filter v-if="filterAccountStates" v-model="accountStates" :items="filterAccountStates" />
+      <div class="account-filter">
+        <select-filter v-if="filterAccountStates" v-model="accountStates" :items="filterAccountStates" />
+      </div>
     </div>
     <filieres-layout :filieres="teaching" :account-states="accountStates" />