Ajoute un filtre par parc dans le calendrier (#94)

CHANGELOG.md

@@ -19,6 +19,8 @@ Ce projet adhère au principe du [Semantic Versioning](https://semver.org/spec/v
 - 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).
 - Supprime automatiquement les espaces vides inutiles dans les champs des formulaires (#87).
+- Si plusieurs parcs existent, un sélecteur dans le calendrier permet de filtrer les événements qui contiennent au moins un matériel d'un parc sélectionné (#94).
+- Dans la liste des parcs (s'il y en a plusieurs), un lien sur chaque parc permet d'ouvrir le calendrier, filtré par ce parc (#94).
 
 ## 0.10.2 (2020-11-16)
 

client/src/locale/en/pages.js

@@ -57,6 +57,7 @@ export default {
     'this-event-is-currently-running': "This event is currently running.",
     'this-event-is-confirmed': "This event is confirmed.",
     'this-event-has-missing-materials': "This event has missing materials.",
+    'display-all-parks': "All parks",
   },
 
   'page-events': {
@@ -218,6 +219,7 @@ export default {
     'confirm-restore': "Do you really want to restore this park?",
     'saved': "Park saved.",
     'total-items': 'Totals',
+    'display-events-for-park': "See events",
   },
 
   'page-tags': {

client/src/locale/fr/pages.js

@@ -59,6 +59,7 @@ export default {
     'this-event-has-missing-materials': "Cet événement a du matériel manquant.",
     'all-events': "Tous les événements",
     'event-with-missing-material-only': "Événements en manque de matériel uniquement\u00a0?",
+    'display-all-parks': "Tous les parcs",
   },
 
   'page-events': {
@@ -218,6 +219,7 @@ export default {
     'confirm-restore': "Voulez-vous vraiment restaurer ce parc\u00a0?",
     'saved': "Parc sauvegardé.",
     'total-items': 'Totaux',
+    'display-events-for-park': "Voir les événements",
   },
 
   'page-tags': {

client/src/pages/Calendar/Calendar.vue

@@ -7,6 +7,7 @@
         @set-center-date="setCenterDate"
         @refresh="getEventsData"
         @filterMissingMaterials="handleFilterMissingMaterial"
+        @filterByPark="handleFilterByPark"
       />
     </div>
     <div ref="Container" class="content__main-view Calendar">

client/src/pages/Calendar/Header/Header.scss

@@ -2,22 +2,30 @@
   display: flex;
   flex-flow: row wrap;
   align-items: center;
-  padding: $content-padding-small-horizontal $content-padding-small-vertical 0;
+  padding: $content-padding-large-horizontal $content-padding-small-vertical 0;
 
-  &__left {
-    flex: 0 0 auto;
+  &__timeline-actions {
+    flex: 0 1 auto;
     display: flex;
     align-items: center;
     margin-bottom: $content-padding-large-horizontal;
   }
 
-  &__center {
-    flex: 1;
+  &__filters {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-bottom: $content-padding-large-horizontal;
+  }
+
+  &__loading-container {
+    flex: 0 0 130px;
     min-width: 130px;
     margin-bottom: $content-padding-large-horizontal;
   }
 
-  &__right {
+  &__actions {
     flex: 1 0 auto;
     display: flex;
     align-items: center;
@@ -58,6 +66,7 @@
 
   &__button {
     flex: 0 0 auto;
+    margin: 0 .5rem 0 0;
 
     &__title {
       display: none;
@@ -67,33 +76,60 @@
 
   &__filter {
     flex: 0 0 auto;
-    margin-left: 1rem;
+    margin-right: 1rem;
     display: flex;
-    flex-direction: column;
     align-items: center;
 
+    &__label {
+      max-width: 170px;
+    }
+
     .SwitchToggle {
       margin-top: 3px;
     }
+
+    &__select {
+      padding: .55rem .78rem;
+    }
+
+    &--active {
+      color: $text-warning-color;
+
+      .CalendarHeader__filter__select {
+        background-color: $bg-color-button-warning;
+      }
+
+      .CalendarHeader__filter__label {
+        color: $text-warning-color;
+      }
+
+      .SwitchToggle__button {
+        background-color: $bg-color-button-warning;
+      }
+    }
   }
 
   @media(min-width: $screen-mobile) {
     padding: $content-padding-large-horizontal $content-padding-large-vertical 0;
+
+    &__button__title {
+      display: inline-block;
+    }
   }
 
-  @media(min-width: $screen-desktop) {
+  @media(min-width: $screen-tablet) {
     &__center-date {
       min-width: 200px;
 
       .FormField__label {
         display: block;
       }
     }
+  }
 
-    &__button {
-      &__title {
-        display: inline-block;
-      }
+  @media(min-width: $screen-big-desktop) {
+    &__filters {
+      justify-content: flex-end;
     }
   }
 }

client/src/pages/Calendar/Header/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="CalendarHeader">
-    <div class="CalendarHeader__left">
+    <div class="CalendarHeader__timeline-actions">
       <div class="CalendarHeader__center-date">
         <FormField
           v-model="centerDate"
@@ -28,23 +28,50 @@
         <i class="fas fa-sync-alt" />
         <span class="CalendarHeader__button__title">{{ $t('action-refresh') }}</span>
       </button>
-      <div class="CalendarHeader__filter">
+    </div>
+    <div class="CalendarHeader__filters">
+      <div
+        class="CalendarHeader__filter"
+        :class="{ 'CalendarHeader__filter--active': !!filters.park }"
+        v-if="parks.length > 1"
+      >
+        <select
+          v-model="filters.park"
+          class="CalendarHeader__filter__select"
+          @change="handleFilterParkChange"
+        >
+          <option value="">
+            {{ $t('page-calendar.display-all-parks') }}
+          </option>
+          <option
+            v-for="park in parks"
+            :key="park.id"
+            :value="park.id"
+          >
+            {{ park.name }}
+          </option>
+        </select>
+      </div>
+      <div
+        class="CalendarHeader__filter"
+        :class="{ 'CalendarHeader__filter--active': filters.hasMissingMaterials }"
+      >
         <label class="CalendarHeader__filter__label">
           {{ $t('page-calendar.event-with-missing-material-only') }}
         </label>
         <SwitchToggle
-          :value="hasFilterMissingMaterial"
+          :value="filters.hasMissingMaterials"
           @input="handleFilterMissingMaterialChange"
         />
       </div>
     </div>
-    <div class="CalendarHeader__center">
+    <div class="CalendarHeader__loading-container">
       <div v-if="isLoading" class="CalendarHeader__loading">
         <i class="fas fa-circle-notch fa-spin" />
         {{ $t('help-loading') }}
       </div>
     </div>
-    <div class="CalendarHeader__right">
+    <div class="CalendarHeader__actions">
       <router-link v-show="!isVisitor" :to="`/events/new`" tag="button" class="success">
         <i class="fas fa-plus" /> {{ $t('page-calendar.add-event') }}
       </router-link>

client/src/pages/Calendar/Header/index.js

@@ -14,15 +14,25 @@ export default {
       datepickerOptions: {
         format: 'd MMMM yyyy',
       },
+      filters: {
+        park: this.$route.query.park || '',
+        hasMissingMaterials: false,
+      },
       isVisitor: store.state.user.groupId === 'visitor',
-      hasFilterMissingMaterial: false,
     };
   },
   computed: {
+    parks() {
+      return store.state.parks.list;
+    },
+
     isToday() {
       return moment(this.centerDate).isSame(moment(), 'day');
     },
   },
+  mounted() {
+    store.dispatch('parks/fetch');
+  },
   methods: {
     setCenterDate(date) {
       const newDate = moment(date.newDate).hour(12).minute(0).toDate();
@@ -46,8 +56,13 @@ export default {
     },
 
     handleFilterMissingMaterialChange(hasFilter) {
-      this.hasFilterMissingMaterial = hasFilter;
+      this.filters.hasMissingMaterials = hasFilter;
       this.$emit('filterMissingMaterials', hasFilter);
     },
+
+    handleFilterParkChange(e) {
+      const { value: parkId } = e.currentTarget;
+      this.$emit('filterByPark', parkId);
+    },
   },
 };

client/src/pages/Calendar/index.js

@@ -31,6 +31,7 @@ export default {
     }
 
     const isVisitor = store.state.user.groupId === 'visitor';
+    const parkFilter = this.$route.query.park;
 
     return {
       help: 'page-calendar.help',
@@ -40,6 +41,7 @@ export default {
       fetchEnd: moment().add(1, 'months').endOf('month'),
       isModalOpened: false,
       hasMissingMaterialFilter: false,
+      parkId: parkFilter ? Number.parseInt(parkFilter, 10) : null,
       events: [],
       allEvents: [],
       timelineOptions: {
@@ -114,10 +116,21 @@ export default {
     this.getEventsData();
   },
   methods: {
-    filterEventsByMissingMaterials() {
-      this.events = this.allEvents.filter(
-        ({ hasMissingMaterials }) => !!hasMissingMaterials,
-      );
+    filterEvents() {
+      let events = [...this.allEvents];
+      if (this.parkId) {
+        events = events.filter(
+          ({ parks: eventParks }) => eventParks?.includes(this.parkId),
+        );
+      }
+
+      if (this.hasMissingMaterialFilter) {
+        events = events.filter(
+          ({ hasMissingMaterials }) => !!hasMissingMaterials,
+        );
+      }
+
+      this.events = events;
     },
 
     getEventsData() {
@@ -136,9 +149,7 @@ export default {
           );
 
           this.allEvents = [...this.events];
-          if (this.hasMissingMaterialFilter) {
-            this.filterEventsByMissingMaterials();
-          }
+          this.filterEvents();
 
           this.isLoading = false;
         })
@@ -232,12 +243,12 @@ export default {
 
     handleFilterMissingMaterial(hasMissingMaterialFilter) {
       this.hasMissingMaterialFilter = hasMissingMaterialFilter;
+      this.filterEvents();
+    },
 
-      if (hasMissingMaterialFilter) {
-        this.filterEventsByMissingMaterials();
-      } else {
-        this.events = [...this.allEvents];
-      }
+    handleFilterByPark(parkId) {
+      this.parkId = parkId === '' ? null : Number.parseInt(parkId, 10);
+      this.filterEvents();
     },
   },
 };

client/src/pages/Calendar/utils.js

@@ -36,6 +36,7 @@ const formatTimelineEvent = (dataEvent, translate) => {
     isConfirmed,
     location,
     hasMissingMaterials,
+    parks,
   } = formatEvent(dataEvent);
 
   let content = title;
@@ -88,6 +89,7 @@ const formatTimelineEvent = (dataEvent, translate) => {
     className: classNames.join(' '),
     title: eventTitle,
     hasMissingMaterials,
+    parks,
   };
 };
 

client/src/pages/Categories/Categories.scss

@@ -8,6 +8,7 @@
 
   &__category {
     flex: 1 0 220px;
+    max-width: 500px;
     margin-bottom: 2rem;
     padding: .6rem 1rem;
     background: $bg-color-emphasis;

client/src/pages/Parks/Parks.vue

@@ -45,6 +45,11 @@
             ({{ formatAmount(park.row.total_amount) }})
           </span>
         </div>
+        <div slot="events" slot-scope="park">
+          <router-link :to="`/?park=${park.row.id}`" v-if="parksCount > 1">
+            {{ $t('page-parks.display-events-for-park') }}
+          </router-link>
+        </div>
         <div slot="note" slot-scope="park">
           <pre>{{ park.row.note }}</pre>
         </div>