feat: display detailled missions in a tooltip on calendar view

Author: benpaquier

src/Domain/FairCalendar/FairCalendarOverviewFactory.spec.ts

@@ -98,12 +98,12 @@ describe('FairCalendarOverviewFactory', () => {
     );
 
     const expectedResult: ICalendarOverview = {
-      mission: 1.57,
-      dojo: 0.25,
-      formationConference: 1,
-      leave: 1,
-      support: 0.5,
-      other: 0.5
+      mission: { days: 1.57, details: [{ days: 1.57, label: 'RadioFrance' }] },
+      dojo: { days: 0.25 },
+      formationConference: { days: 1 },
+      leave: { days: 1 },
+      support: { days: 0.5 },
+      other: { days: 0.5 }
     };
 
     expect(

src/Domain/FairCalendar/FairCalendarOverviewFactory.ts

@@ -3,6 +3,7 @@ import { FairCalendarView } from 'src/Application/FairCalendar/View/FairCalendar
 import { CooperativeNotFoundException } from '../Settings/Repository/CooperativeNotFoundException';
 import { ICooperativeRepository } from '../Settings/Repository/ICooperativeRepository';
 import { ICalendarOverview } from './ICalendarOverview';
+import { EventType } from './Event.entity';
 
 export class FairCalendarOverviewFactory {
   constructor(
@@ -17,20 +18,51 @@ export class FairCalendarOverviewFactory {
     }
 
     const overviewInDays: ICalendarOverview = {
-      mission: 0,
-      dojo: 0,
-      formationConference: 0,
-      leave: 0,
-      support: 0,
-      other: 0
+      mission: {
+        days: 0,
+        details: []
+      },
+      dojo: {
+        days: 0
+      },
+      formationConference: {
+        days: 0
+      },
+      leave: {
+        days: 0
+      },
+      support: {
+        days: 0
+      },
+      other: {
+        days: 0
+      }
     };
 
-    for (const { time, type: itemType } of items) {
+    for (const { time, type: itemType, project } of items) {
       const type = itemType.startsWith('leave_') ? 'leave' : itemType;
       const days = time / cooperative.getDayDuration();
 
-      overviewInDays[type] =
-        Math.round((overviewInDays[type] + days) * 100) / 100;
+      overviewInDays[type].days =
+        Math.round((overviewInDays[type].days + days) * 100) / 100;
+
+      if (type === EventType.MISSION) {
+        const missionDetail = overviewInDays[type].details.find(
+          ({ label }) => label === project.name
+        );
+
+        if (missionDetail) {
+          missionDetail.days =
+            Math.round(
+              (missionDetail.days + Math.round(days * 100) / 100) * 100
+            ) / 100;
+        } else {
+          overviewInDays[type].details.push({
+            days,
+            label: project.name
+          });
+        }
+      }
     }
 
     return overviewInDays;

src/Domain/FairCalendar/ICalendarOverview.ts

@@ -1,8 +1,14 @@
 export interface ICalendarOverview {
-  mission: number;
-  dojo: number;
-  formationConference: number;
-  leave: number;
-  support: number;
-  other: number;
+  mission: {
+    days: number;
+    details: {
+      days: number;
+      label: string;
+    }[];
+  };
+  dojo: { days: number };
+  formationConference: { days: number };
+  leave: { days: number };
+  support: { days: number };
+  other: { days: number };
 }

src/Infrastructure/FairCalendar/Table/FairCalendarOverviewTableFactory.ts

@@ -26,7 +26,8 @@ export class FairCalendarOverviewTableFactory {
       );
       rowBuilder.template('pages/faircalendar/_overview_badge.njk', {
         type,
-        days: overview[type]
+        days: overview[type].days,
+        details: overview[type].details
       });
     }
 

src/assets/styles/components/index.css

@@ -18,3 +18,4 @@
 @import './shell.css';
 @import './table.css';
 @import './theme.css';
+@import './tooltip.css';

src/assets/styles/components/table.css

@@ -25,6 +25,10 @@ table.pc-table {
   text-align: left;
 }
 
+.pc-table-wrapper-overflow-visible {
+  overflow-x: visible;
+}
+
 .pc-table--center {
   text-align: center;
 }

src/assets/styles/components/tooltip.css

@@ -0,0 +1,27 @@
+.tooltip {
+  position: relative;
+  cursor: pointer;
+}
+
+.tooltip .tooltip-content {
+  --tooltip-background: var(--background-default);
+  --tooltip-color: var(--text-default);
+
+  position: absolute;
+  top: calc(100% + var(--w));
+  left: 50%;
+  transform: translateX(-50%);
+  padding: calc(2 * var(--w));
+  border-radius: var(--badge-radius, calc(1 * var(--w)));
+  background: var(--tooltip-background);
+  color: var(--tooltip-color);
+  text-align: left;
+  z-index: 10;
+  display: none;
+}
+
+.tooltip:hover .tooltip-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w);
+}

src/templates/pages/faircalendar/_overview_badge.njk

@@ -1,3 +1,26 @@
-<span class="pc-badge pc-bold" style="--badge-color: var(--event-{{ type }}-text); --badge-background: var(--event-{{ type }}-background)">
+{% import 'macros/icons.njk' as icons %}
+{% set hasDetails = details.length %}
+
+<div class="{{ 'tooltip' if hasDetails }}">
+  <span
+    class="pc-badge pc-bold"
+    style="--badge-color: var(--event-{{ type }}-text); --badge-background: var(--event-{{ type }}-background)">
     {{ 'faircalendar-overview-days'|trans({ days: days }) }}
-</span>
+
+    {% if hasDetails %}
+      &nbsp;{{ icons.eye() }}
+    {% endif %}
+  </span>
+
+  {% if hasDetails %}
+    <ul class="tooltip-content pc-raw-list"
+      style="--tooltip-color: var(--event-{{ type }}-text); --tooltip-background: var(--event-{{ type }}-background)">
+      {% for detail in details %}
+        <li>
+          <span>{{ detail.label }}</span>
+          <span class="pc-bold">{{ 'faircalendar-overview-days'|trans({ days: detail.days }) }}</span>
+        </li>
+      {% endfor %}
+    </ul>
+  {% endif %}
+</div>

src/templates/pages/faircalendar/index.njk

@@ -4,31 +4,24 @@
 {% from 'macros/breadcrumb.njk' import breadcrumb %}
 {% from './_event_list.njk' import event_list with context %}
 {% from './_filters_form.njk' import filters_form with context %}
-
 {% set title = 'faircalendar-page-title'|trans({ date: date }) %}
-
 {% block main %}
-<div class="pc-container">
+  <div class="pc-container">
     <pc-frame class="pc-stack" id="faircalendar">
-        {{ breadcrumb([{ title: title }]) }}
-
-        <div class="pc-cluster pc-gap" style="--cluster-justify: space-between; --cluster-align: center">
-            <h1 class="pc-m" style="--m: 0">
-                {{ title }}
-            </h1>
-
-            {{ links.add(path('people_leave_requests_add'), text='leave-requests-add-title'|trans) }}
-        </div>
-
-        <div class="pc-with-sidebar pc-with-sidebar-start pc-gap" style="--sidebar-size: 22ch; --non-sidebar-min-size: 80%">
-            {{ filters_form() }}
-
-            <div id="faircalendar" class="pc-stack">
-                {% table overviewTable, { attr: {class: 'pc-table--center pc-table--no-shadow'} } %}
-
-                {{ event_list() }}
-            </div>
+      {{ breadcrumb([{ title: title }]) }}
+      <div class="pc-cluster pc-gap" style="--cluster-justify: space-between; --cluster-align: center">
+        <h1 class="pc-m" style="--m: 0">
+          {{ title }}
+        </h1>
+        {{ links.add(path('people_leave_requests_add'), text='leave-requests-add-title'|trans) }}
+      </div>
+      <div class="pc-with-sidebar pc-with-sidebar-start pc-gap" style="--sidebar-size: 22ch; --non-sidebar-min-size: 80%">
+        {{ filters_form() }}
+        <div id="faircalendar" class="pc-stack">
+          {% table overviewTable, { attr: {class: 'pc-table--center pc-table--no-shadow pc-table-wrapper-overflow-visible'} } %}
+          {{ event_list() }}
         </div>
+      </div>
     </pc-frame>
-</div>
+  </div>
 {% endblock main %}