Merge pull request #89 from Robert-2/feature/51-category-link-to-mate…

…rials Ajoute des liens vers le matériel depuis les catégories (#51)
Robert-2 · Jan 12, 2021 · cf99b89 · cf99b89
2 parents 4b011a2 + 352bb1b
commit cf99b89
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,7 @@ Ce projet adhère au principe du [Semantic Versioning](https://semver.org/spec/v
 - Ajoute une page de vue du matériel en détail.
 - Utilise des onglets dans la page de vue du matériel.
 - Dans l'édition d'événements, la recherche directe des bénéficiaires et techniciens dans le champ multiple permet de tous les retrouver (#36).
+- Ajoute des boutons dans la page des catégories, permettant d'ouvrir la liste du matériel d'une catégorie ou sous-catégorie (#51).
 
 ## 0.10.2 (2020-11-16)
 

diff --git a/client/src/components/MaterialsFilters/index.js b/client/src/components/MaterialsFilters/index.js
@@ -41,6 +41,16 @@ export default {
     store.dispatch('categories/fetch');
     store.dispatch('tags/fetch');
   },
+  watch: {
+    categories() {
+      const { category, subCategory } = this.filters;
+      if (subCategory.length > 0 && this.categories.length > 0) {
+        this.selectedCategory = this.categories.find(
+          (_category) => _category.id === parseInt(category, 10),
+        ) || { sub_categories: [] };
+      }
+    },
+  },
   methods: {
     changePark(e) {
       this.filters.park = parseInt(e.currentTarget.value, 10) || '';
@@ -57,6 +67,7 @@ export default {
         this.selectedCategory = { sub_categories: [] };
       }
       this.filters.category = categoryId;
+      this.filters.subCategory = '';
       this.setQueryFilters();
     },
 

diff --git a/client/src/locale/en/pages.js b/client/src/locale/en/pages.js
@@ -176,6 +176,7 @@ export default {
     'confirm-restore': "Do you really want to restore this category?",
     'saved': "Category saved.",
     'deleted': "Category deleted.",
+    'display-materials': "See the material of this category",
   },
 
   'page-subcategories': {
@@ -189,6 +190,7 @@ export default {
     'confirm-restore': "Do you really want to restore this sub-category?",
     'saved': "Sub-category saved.",
     'deleted': "Sub-category deleted.",
+    'display-materials': "See the material of this sub-category",
   },
 
   'page-technicians': {

diff --git a/client/src/locale/fr/pages.js b/client/src/locale/fr/pages.js
@@ -176,6 +176,7 @@ export default {
     'confirm-restore': "Voulez-vous vraiment restaurer cette catégorie\u00a0?",
     'saved': "Catégorie sauvegardée.",
     'deleted': "Catégorie supprimée.",
+    'display-materials': "Voir le matériel de la catégorie",
   },
 
   'page-subcategories': {
@@ -189,6 +190,7 @@ export default {
     'confirm-restore': "Voulez-vous vraiment restaurer cette sous-catégorie\u00a0?",
     'saved': "Sous-catégorie sauvegardée.",
     'deleted': "Sous-catégorie supprimée.",
+    'display-materials': "Voir le matériel de la sous-catégorie",
   },
 
   'page-technicians': {

diff --git a/client/src/pages/Categories/Categories.scss b/client/src/pages/Categories/Categories.scss
@@ -2,6 +2,8 @@
   &__items {
     display: flex;
     flex-wrap: wrap;
+    // !important: overwrite padding of .content__main-view
+    padding-right: 0 !important;
   }
 
   &__category {
@@ -10,6 +12,7 @@
     padding: .6rem 1rem;
     background: $bg-color-emphasis;
     border-radius: 10px;
+    margin-right: 1rem;
   }
 
   &__sub-categories {
@@ -37,8 +40,10 @@
 
     &__actions {
       flex: 1;
-      text-align: right;
-      min-width: 5.6rem;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      min-width: 110px;
     }
   }
 
@@ -64,14 +69,6 @@
 }
 
 @media(min-width: $screen-mobile) {
-  .Categories {
-    &__category {
-      margin-right: 1rem;
-    }
-  }
-}
-
-@media(min-width: $screen-tablet) {
   .Categories {
     &__category {
       margin-right: 2rem;
@@ -81,7 +78,8 @@
 
 @media(min-width: $screen-desktop) {
   .Categories {
-    &__edit-button {
+    &__edit-button,
+    &__link-button {
       visibility: hidden;
     }
 
@@ -92,14 +90,11 @@
     &__category,
     &__sub-category {
       &__name:hover {
-        .Categories__edit-button {
+        .Categories__edit-button,
+        .Categories__link-button {
           visibility: visible;
         }
       }
-
-      &__actions {
-        flex: 0 0 auto;
-      }
     }
   }
 }
diff --git a/client/src/pages/Categories/Categories.vue b/client/src/pages/Categories/Categories.vue
@@ -32,6 +32,13 @@
           <i class="fas fa-folder-open" />
           {{ category.name }}
           <div class="Categories__category__actions">
+            <router-link
+              v-tooltip="$t('page-categories.display-materials')"
+              :to="`/materials?category=${category.id}`"
+              class="Categories__link-button"
+            >
+              <i class="fas fa-eye" />
+            </router-link>
             <button
               v-tooltip="$t('action-edit')"
               class="Categories__edit-button info"
@@ -58,6 +65,13 @@
               <i class="fas fa-arrow-right" />
               {{ subCategory.name }}
               <div class="Categories__sub-category__actions">
+                <router-link
+                  v-tooltip="$t('page-subcategories.display-materials')"
+                  :to="`/materials?category=${category.id}&subCategory=${subCategory.id}`"
+                  class="Categories__link-button"
+                >
+                  <i class="fas fa-eye" />
+                </router-link>
                 <button
                   v-tooltip="$t('action-edit')"
                   class="Categories__edit-button info"