Améliore la disposition des filtres dans les listings de matériel

Robert-2 · Mar 18, 2021 · 2283d84 · 2283d84
1 parent a5e9c25
commit 2283d84
Show file tree

Hide file tree

Showing 9 changed files with 104 additions and 100 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,7 @@ Ce projet adhère au principe du [Semantic Versioning](https://semver.org/spec/v
 - Pré-rempli le champ "quantité" du formulaire de nouveau matériel à 1 (#106).
 - Dans le listing du matériel, ajoute un lien vers la gestion des caractéristiques spéciales.
 - Ajoute la possibilité de modifier le nom des caractéristiques spéciales (#107).
+- Améliore la disposition des filtres dans les pages de listing du matériel (#114).
 
 ## 0.11.0 (2021-01-14)
 

diff --git a/client/src/components/MaterialsFilters/MaterialsFilters.scss b/client/src/components/MaterialsFilters/MaterialsFilters.scss
@@ -3,21 +3,23 @@
   align-items: center;
   flex-wrap: wrap;
 
-  &__park,
-  &__category,
-  &__sub-category {
-    flex: 0 0 auto;
-    padding: 6px 10px;
+  &__item,
+  &__reset {
+    margin-left: 0;
+    margin-bottom: $content-padding-large-horizontal;
+    margin-right: $content-padding-small-vertical / 2;
+    padding: 8px 10px;
   }
 
   .v-select {
     flex: 0 0 auto;
-    max-height: 31px;
     min-width: 150px;
-    max-width: 300px;
+    margin-bottom: $content-padding-large-horizontal;
+    margin-right: $content-padding-small-vertical / 2;
+    padding: 5.5px 10px;
 
     .vs__selected-options {
-      padding: .2rem 0;
+      padding: 0;
       font-size: .9rem;
 
       .vs__selected {
@@ -35,4 +37,8 @@
       padding: .3rem 0;
     }
   }
+
+  &__item--is-active {
+    background-color: darken($bg-color-button-warning, 5%) !important;
+  }
 }
diff --git a/client/src/components/MaterialsFilters/MaterialsFilters.vue b/client/src/components/MaterialsFilters/MaterialsFilters.vue
@@ -3,7 +3,8 @@
     <select
       v-if="parks.length > 1"
       v-model="filters.park"
-      class="MaterialsFilters__park"
+      class="MaterialsFilters__item"
+      :class="{ 'MaterialsFilters__item--is-active': filters.park !== '' }"
       @change="changePark"
     >
       <option value="">
@@ -19,7 +20,8 @@
     </select>
     <select
       v-model="filters.category"
-      class="MaterialsFilters__category"
+      class="MaterialsFilters__item"
+      :class="{ 'MaterialsFilters__item--is-active': filters.category !== '' }"
       @change="changeCategory"
     >
       <option value="">
@@ -35,7 +37,8 @@
     </select>
     <select
       v-model="filters.subCategory"
-      class="MaterialsFilters__sub-category"
+      class="MaterialsFilters__item"
+      :class="{ 'MaterialsFilters__item--is-active': filters.subCategory !== '' }"
       :disabled="selectedCategory.sub_categories.length === 0"
       @change="changeSubCategory"
     >
@@ -52,15 +55,17 @@
     </select>
     <VueSelect
       v-model="filters.tags"
-      class="MaterialsFilters__tags"
+      class="MaterialsFilters__item"
+      :class="{ 'MaterialsFilters__item--is-active': filters.tags.length > 0 }"
       :options="$store.getters['tags/options']"
       :placeholder="$t('tags')"
       @input="setQueryFilters"
       multiple
     />
     <button
+      v-if="!isFilterEmpty"
+      class="MaterialsFilters__reset warning"
       v-tooltip="$t('page-materials.clear-filters')"
-      :disabled="isFilterEmpty"
       @click="clearFilters"
     >
       <i class="fas fa-backspace" />

diff --git a/client/src/locale/en/pages.js b/client/src/locale/en/pages.js
@@ -148,7 +148,10 @@ export default {
     'action-add': "New material",
     'manage-attributes': "Manage special attributes",
     'display-quantities-at-date': "Display quantities at date...",
-    'remaining-quantities-on-date': "Remaining quantities on {date}",
+    'remaining-quantities-on-date': (
+      `Remaining quantities
+      on {date}`
+    ),
     'add': "New material",
     'edit': "Modify material «\u00a0{pageSubTitle}\u00a0»",
     'help-edit': "Give a short name, and use the description field to detail the material if needed.",

diff --git a/client/src/locale/fr/pages.js b/client/src/locale/fr/pages.js
@@ -148,7 +148,10 @@ export default {
     'action-add': "Nouveau matériel",
     'manage-attributes': "Gérer les caractéristiques spéciales",
     'display-quantities-at-date': "Afficher les quantités à date...",
-    'remaining-quantities-on-date': "Quantités restantes le {date}",
+    'remaining-quantities-on-date': (
+      `Quantités restantes
+      le {date}`
+    ),
     'add': "Nouveau matériel",
     'edit': "Modifier le matériel «\u00a0{pageSubTitle}\u00a0»",
     'help-edit': "Trouvez un nom assez court, et utilisez plutôt la description pour détailler le matériel si besoin.",

diff --git a/client/src/pages/Event/Step4/MaterialsList/MaterialsList.scss b/client/src/pages/Event/Step4/MaterialsList/MaterialsList.scss
@@ -12,14 +12,6 @@
     .MaterialsFilters {
       flex: 1;
       margin: $content-padding-small-vertical 0;
-
-      select,
-      button,
-      input,
-      .v-select {
-        margin-right: .3rem;
-        margin-bottom: .3rem;
-      }
     }
 
     &__extra-filters {

diff --git a/client/src/pages/Materials/Materials.scss b/client/src/pages/Materials/Materials.scss
@@ -1,36 +1,40 @@
 .Materials {
-  &__create {
-    width: 15rem;
-  }
-
   &__main-view {
     position: relative;
   }
 
-  &__secondary-actions {
-    position: absolute;
+  &__filters {
     display: flex;
     flex-wrap: wrap;
-    align-items: center;
-    top: 4px;
-    max-width: calc(100% - 280px);
-    right: $content-padding-large-vertical;
-    z-index: 1;
 
-    &__button {
-      margin: 0 $content-padding-small-vertical;
+    .MaterialsFilters {
+      flex: 0 1 auto;
+      margin-right: $content-padding-small-vertical;
     }
   }
 
   &__quantities-date {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    color: $text-base-color;
-    font-weight: 600;
+    flex: 1 0 auto;
+    margin-bottom: $content-padding-large-horizontal;
+
+    &__displayed {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      color: $text-base-color;
+      font-weight: 600;
+    }
 
     &__label {
-      flex: 1;
+      max-width: 140px;
+      margin: 0 $content-padding-small-vertical 0 0;
+      white-space: pre-line;
+      text-align: center;
+      color: $text-warning-color;
+    }
+
+    &__button {
+      padding: 9px 10px;
     }
   }
 
@@ -87,43 +91,40 @@
   &__actions {
     min-width: 110px;
   }
-}
 
-@media(min-width: $screen-tablet) {
-  .Materials {
+  @media(min-width: $screen-tablet) {
     &__ref,
     &__rental-price,
     &__replacement-price,
     &__category {
       display: table-cell;
     }
-
-    &__create {
-      width: auto;
-      margin-left: 1.5rem !important;
-    }
   }
-}
 
-@media(min-width: $screen-desktop) {
-  .Materials {
+  @media(min-width: $screen-desktop) {
     &__quantity-out,
     &__tags {
       display: table-cell;
     }
-
-    &__secondary-actions {
-      right: calc(#{$content-padding-large-vertical} + 45px + #{$content-padding-small-vertical});
-      max-width: 100%;
-    }
   }
-}
 
-@media(min-width: $screen-big-desktop) {
-  .Materials {
+  @media(min-width: $screen-big-desktop) {
     &__park,
     &__description {
       display: table-cell;
     }
+
+    &__filters {
+      position: absolute;
+      flex-wrap: nowrap;
+      align-items: center;
+      left: 240px;
+      right: calc(#{$content-padding-large-vertical} + 45px + #{$content-padding-small-vertical});
+      z-index: 1;
+
+      .MaterialsFilters {
+        flex-wrap: nowrap;
+      }
+    }
   }
 }
diff --git a/client/src/pages/Materials/Materials.vue b/client/src/pages/Materials/Materials.vue
@@ -9,44 +9,49 @@
         />
       </div>
       <div class="header-page__actions">
-        <MaterialsFilters
-          baseRoute="/materials"
-          @change="refreshTableAndPagination"
-        />
-        <router-link :to="`/materials/new`" v-slot="{ navigate }" custom>
+        <router-link to="/materials/new" v-slot="{ navigate }" custom>
           <button @click="navigate" class="Materials__create success">
             <i class="fas fa-plus" />
             {{ $t('page-materials.action-add') }}
           </button>
         </router-link>
+        <router-link to="/attributes" v-slot="{ navigate }" custom>
+          <button @click="navigate">
+            <i class="fas fa-cog" />
+            {{ $t('page-materials.manage-attributes') }}
+          </button>
+        </router-link>
       </div>
     </div>
 
     <div class="content__main-view Materials__main-view">
-      <div class="Materials__secondary-actions">
-        <button
-          v-if="dateForQuantities === null"
-          class="Materials__secondary-actions__button info"
-          @click="showQuantityAtDateModal"
-        >
-          {{ $t('page-materials.display-quantities-at-date') }}
-        </button>
-        <div v-else class="Materials__quantities-date">
-          <div class="Materials__quantities-date__label">
-            {{ $t('page-materials.remaining-quantities-on-date', {
-              date: dateForQuantities.format('LL')
-            }) }}
-          </div>
+      <div class="Materials__filters">
+        <MaterialsFilters
+          baseRoute="/materials"
+          @change="refreshTableAndPagination"
+        />
+        <div class="Materials__quantities-date">
           <button
-            class="Materials__secondary-actions__button warning"
-            @click="removeDateForQuantities"
+            v-if="dateForQuantities === null"
+            class="Materials__quantities-date__button"
+            @click="showQuantityAtDateModal"
           >
-            {{ $t('reset-date') }}
+            {{ $t('page-materials.display-quantities-at-date') }}
           </button>
+          <div v-else class="Materials__quantities-date__displayed">
+            <p class="Materials__quantities-date__label">
+              {{ $t('page-materials.remaining-quantities-on-date', {
+                date: dateForQuantities.format('LL')
+              }) }}
+            </p>
+            <button
+              class="Materials__quantities-date__button warning"
+              @click="removeDateForQuantities"
+            >
+              {{ $t('reset-date') }}
+            </button>
+          </div>
         </div>
-        <router-link to="/attributes" class="Materials__attributes-link">
-          {{ $t('page-materials.manage-attributes') }}
-        </router-link>
       </div>
       <v-server-table
         ref="DataTable"

diff --git a/client/src/style/components/_header-page.scss b/client/src/style/components/_header-page.scss
@@ -20,16 +20,11 @@
   &__actions {
     flex: 0 1 auto;
     display: flex;
-    flex-direction: column-reverse;
     min-width: $form-min-width;
     padding: .55rem 0;
 
-    select,
-    button,
-    input,
-    .v-select {
-      margin-bottom: .5rem;
-      margin-right: .8rem;
+    button + button {
+      margin: 0 0 0 $content-padding-small-vertical;
     }
   }
 
@@ -48,13 +43,6 @@
       flex-direction: row;
       align-items: flex-start;
       min-width: auto;
-
-      select,
-      button,
-      input,
-      .v-select {
-        margin-bottom: .3rem;
-      }
     }
   }
 }