Ajoute des infos au survol des événements dans le calendrier (#117)

Et revoit l'affichage des icônes dans les événements
Robert-2 · Mar 24, 2021 · a7cf2ff · a7cf2ff
1 parent 95a690c
commit a7cf2ff
Show file tree

Hide file tree

Showing 14 changed files with 217 additions and 60 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,7 @@ Ce projet adhère au principe du [Semantic Versioning](https://semver.org/spec/v
 - 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).
 - Supprime la pagination côté serveur pour le matériel à l'étape 4 de l'édition d'événement, et améliore l'UX (#115).
+- Ajoute quelques informations (dates, bénéficiaires, techniciens) au survol des événements dans le calendrier (#117).
 
 ## 0.11.0 (2021-01-14)
 

diff --git a/client/src/locale/en/pages.js b/client/src/locale/en/pages.js
@@ -63,6 +63,7 @@ export default {
     'this-event-is-past': "This event is past.",
     'this-event-is-currently-running': "This event is currently running.",
     'this-event-is-confirmed': "This event is confirmed.",
+    'this-event-is-locked-past-confirmed': "This event is locked because it's confirmed, and past.",
     'this-event-has-missing-materials': "This event has missing materials.",
     'all-events': "All events",
     'event-with-missing-material-only': "Events with missing material only?",

diff --git a/client/src/locale/fr/pages.js b/client/src/locale/fr/pages.js
@@ -63,6 +63,7 @@ export default {
     'this-event-is-past': "Cet événement est passé.",
     'this-event-is-currently-running': "Cet événement se déroule en ce moment.",
     'this-event-is-confirmed': "Cet événement est confirmé.",
+    'this-event-is-locked-past-confirmed': "Cet événement est verrouillé car il est confirmé, et déjà passé.",
     '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?",

diff --git a/client/src/pages/Calendar/Header/Header.scss b/client/src/pages/Calendar/Header/Header.scss
@@ -37,10 +37,12 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    color: $text-warning-color;
+    font-weight: 600;
 
     .fa-spin {
       margin-bottom: .1rem;
-      margin-right: .5rem;
+      margin-right: $content-padding-small-horizontal;
       font-size: 1.8rem;
     }
   }

diff --git a/client/src/pages/Calendar/Header/Header.vue b/client/src/pages/Calendar/Header/Header.vue
@@ -24,6 +24,7 @@
         class="CalendarHeader__button info"
         @click="refresh()"
         :title="$t('action-refresh')"
+        :disabled="isLoading"
       >
         <i class="fas fa-sync-alt" />
         <span class="CalendarHeader__button__title">{{ $t('action-refresh') }}</span>

diff --git a/client/src/pages/Calendar/utils.js b/client/src/pages/Calendar/utils.js
@@ -3,37 +3,78 @@ import getTimelineEventClassNames from '@/utils/timeline-event/getClassNames';
 import getTimelineEventI18nStatuses from '@/utils/timeline-event/getI18nStatuses';
 
 const formatEvent = (dataEvent, translate) => {
+  const withIcon = (iconName, text) => (
+    `<i class="fas fa-${iconName}"></i> ${text}`
+  );
+
   const formattedEvent = formatTimelineEvent(dataEvent);
   const {
     title,
     location,
     startDate: start,
     endDate: end,
+    isPast,
     isConfirmed,
+    hasMissingMaterials,
+    beneficiaries,
+    assignees,
   } = formattedEvent;
 
   let content = title;
+  if (hasMissingMaterials) {
+    content = withIcon('exclamation-triangle', content);
+  }
+  if (isConfirmed) {
+    content = withIcon(isPast ? 'lock' : 'check', content);
+  }
+
+  const locationText = withIcon('map-marker-alt', location || '?');
   if (location) {
-    content = `${title} (${location})`;
+    content = `${content} − ${locationText}`;
   }
 
-  const eventStatuses = getTimelineEventI18nStatuses(formattedEvent).map(
-    (i18nKey) => translate(`page-calendar.${i18nKey}`),
+  const dates = withIcon(
+    'clock',
+    translate('from-date-to-date', { from: start.format('L'), to: end.format('L') }),
   );
 
-  let eventTitle = content;
-  if (eventStatuses.length > 0) {
-    eventTitle += `\n  →${eventStatuses.join('\n  →')}`;
+  let beneficiariesText = withIcon(
+    'exclamation-triangle',
+    `<em>(${translate('missing-beneficiary')})</em>`,
+  );
+  if (beneficiaries.length > 0) {
+    const beneficiariesNames = beneficiaries.map((beneficiary) => beneficiary.full_name);
+    beneficiariesText = withIcon(
+      'address-book',
+      `${translate('for')} ${beneficiariesNames.join(', ')}`,
+    );
+  }
+
+  let assigneesText = '';
+  if (assignees.length > 0) {
+    const assigneesNames = assignees.map((beneficiary) => beneficiary.full_name);
+    assigneesText = withIcon(
+      'people-carry',
+      `${translate('with')} ${assigneesNames.join(', ')}`,
+    );
   }
 
+  const statusesText = getTimelineEventI18nStatuses(formattedEvent).map(
+    ({ icon, i18nKey }) => withIcon(icon, translate(`page-calendar.${i18nKey}`)),
+  ).join('\n');
+
   return {
     ...formattedEvent,
     content,
     start,
     end,
     editable: !isConfirmed,
     className: getTimelineEventClassNames(formattedEvent).join(' '),
-    title: eventTitle,
+    title: [
+      `<strong>${title}</strong>`,
+      `\n${locationText}\n${dates}\n${beneficiariesText}\n${assigneesText}\n`,
+      statusesText,
+    ].join('\n'),
   };
 };
 

diff --git a/client/src/style/components/_timeline-event.scss b/client/src/style/components/_timeline-event.scss
@@ -1,4 +1,14 @@
 .timeline-event {
+  .fas,
+  .far {
+    width: 1.2rem;
+    text-align: center;
+  }
+
+  .fa-exclamation-triangle {
+    color: $text-danger-color;
+  }
+
   &--past {
     background-color: $calendar-event-past-color !important;
     color: $text-base-color !important;
@@ -9,24 +19,9 @@
   }
 
   &--locked {
-    .vis-item-content::before {
-      content: "\f023";
-      display: inline-block;
-      font-family: 'Font Awesome 5 Free';
-      font-weight: 900;
-      margin-right: .5rem;
-    }
   }
 
   &--with-warning {
-    .vis-item-content::before {
-      content: "\f071";
-      display: inline-block;
-      font-family: 'Font Awesome 5 Free';
-      font-weight: 900;
-      margin-right: .5rem;
-      color: $text-danger-color;
-    }
   }
 
   &--confirmed {
@@ -35,10 +30,6 @@
     &.vis-selected {
       background-color: lighten($calendar-event-confirmed-color, 10%) !important;
     }
-
-    .vis-item-content::before {
-      color: $text-base-color;
-    }
   }
 
   &--current {

diff --git a/client/src/style/vendors/_vis-timeline.scss b/client/src/style/vendors/_vis-timeline.scss
@@ -56,11 +56,11 @@ $items-border-radius: 10px;
 
 .vis-item {
   margin: 0;
-  padding: 1rem 1.1rem;
+  padding: 1.2rem 1.1rem;
   border: none !important;
   border-radius: $items-border-radius !important;
   box-shadow: 1px 2px 3px rgba(#000, .5);
-  font-size: .95rem;
+  font-size: 1rem;
 
   .vis-item-content {
     padding: 0 0 .1rem 0 !important;
@@ -133,4 +133,19 @@ div.vis-tooltip {
   color: $text-base-color !important;
   white-space: pre-wrap !important;
   font-family: $text-base-font-family !important;
+
+  .fas,
+  .far {
+    width: 1.5rem;
+    text-align: center;
+    margin-bottom: 3px;
+  }
+
+  .fa-exclamation-triangle {
+    color: $text-danger-color;
+  }
+
+  .fa-check {
+    color: $text-success-color;
+  }
 }
diff --git a/client/src/utils/timeline-event/getI18nStatuses.js b/client/src/utils/timeline-event/getI18nStatuses.js
@@ -8,20 +8,32 @@ const getTimelineEventI18nStatuses = (formattedEvent) => {
 
   const eventStatuses = [];
 
-  if (isPast) {
-    eventStatuses.push('this-event-is-past');
+  if (isPast && !isConfirmed) {
+    eventStatuses.push({
+      icon: 'history',
+      i18nKey: 'this-event-is-past',
+    });
   }
 
   if (isCurrent) {
-    eventStatuses.push('this-event-is-currently-running');
+    eventStatuses.push({
+      icon: 'running',
+      i18nKey: 'this-event-is-currently-running',
+    });
   }
 
   if (isConfirmed) {
-    eventStatuses.push('this-event-is-confirmed');
+    eventStatuses.push({
+      icon: isPast ? 'lock' : 'check',
+      i18nKey: isPast ? 'this-event-is-locked-past-confirmed' : 'this-event-is-confirmed',
+    });
   }
 
   if (hasMissingMaterials) {
-    eventStatuses.push('this-event-has-missing-materials');
+    eventStatuses.push({
+      icon: 'exclamation-triangle',
+      i18nKey: 'this-event-has-missing-materials',
+    });
   }
 
   return eventStatuses;

diff --git a/client/tests/unit/pages/calendar/utils.spec.js b/client/tests/unit/pages/calendar/utils.spec.js
@@ -11,16 +11,33 @@ describe('Calendar/utils.formatEvent', () => {
       is_confirmed: false,
       has_missing_materials: true,
       location: 'Testville',
+      beneficiaries: [
+        { id: 1, full_name: 'Jean Benef' },
+      ],
+      assignees: [
+        { id: 1, full_name: 'Marc Tekos' },
+      ],
     };
 
     const result = formatEvent(rawEvent, (s) => s);
     expect(result).toBeDefined();
 
     expect(result.title).toEqual(
-      'Test event (Testville)\n  →page-calendar.this-event-is-past\n  →page-calendar.this-event-has-missing-materials',
+      '<strong>Test event</strong>'
+      + '\n\n<i class="fas fa-map-marker-alt"></i> Testville'
+      + '\n<i class="fas fa-clock"></i> from-date-to-date'
+      + '\n<i class="fas fa-address-book"></i> for Jean Benef'
+      + '\n<i class="fas fa-people-carry"></i> with Marc Tekos'
+      + '\n\n<i class="fas fa-history"></i> page-calendar.this-event-is-past'
+      + '\n<i class="fas fa-exclamation-triangle"></i> page-calendar.this-event-has-missing-materials',
+    );
+    expect(result.content).toEqual(
+      '<i class="fas fa-exclamation-triangle"></i> Test event − '
+      + '<i class="fas fa-map-marker-alt"></i> Testville',
+    );
+    expect(result.className).toEqual(
+      'timeline-event timeline-event--past timeline-event--with-warning',
     );
-    expect(result.content).toEqual('Test event (Testville)');
-    expect(result.className).toEqual('timeline-event timeline-event--past timeline-event--with-warning');
     expect(result.editable).toBe(true);
     expect(result.hasMissingMaterials).toBe(true);
     expect(result.start).toBeInstanceOf(moment);