Planning avec ReactJS

dev.skoro
Javascript React

Bonjour à tous !

Je sollicite votre aide pour un léger problème simple en apparence mais qui me bloque réellement dans mon projet de création de planning avec React...
Voici la réponse de mon API :

[
    {
        "id": 1,
        "firstName": "Jean",
        "lastName": "Dupont",
        "shifts": []
    },
    {
        "id": 3,
        "firstName": "John",
        "lastName": "Doe",
        "shifts": [
            {
                "date": "2023-10-09T00:00:00+00:00",
                "startAt": "1970-01-01T10:20:00+00:00",
                "endAt": "1970-01-01T19:35:00+00:00",
                "pauseTime": 30
            },
            {
                "date": "2023-10-07T00:00:00+00:00",
                "startAt": "1970-01-01T10:20:00+00:00",
                "endAt": "1970-01-01T19:35:00+00:00",
                "pauseTime": 30
            }
        ]
    },
    {
        "id": 4,
        "firstName": "Chantal",
        "lastName": "Claire",
        "shifts": [
            {
                "date": "2023-10-10T00:00:00+00:00",
                "startAt": "1970-01-01T10:20:00+00:00",
                "endAt": "1970-01-01T19:35:00+00:00",
                "pauseTime": 30
            }
        ]
    },
    {
        "id": 5,
        "firstName": "Lucien",
        "lastName": "Delacroix",
        "shifts": [
            {
                "date": "2023-10-03T00:00:00+00:00",
                "startAt": "1970-01-01T10:20:00+00:00",
                "endAt": "1970-01-01T19:35:00+00:00",
                "pauseTime": 30
            },
            {
                "date": "2023-10-09T00:00:00+00:00",
                "startAt": "1970-01-01T10:20:00+00:00",
                "endAt": "1970-01-01T19:35:00+00:00",
                "pauseTime": 30
            }
        ]
    }
]

Ce que je veux

Je voudrais faire un planning, en React, où la première colonne représente des salariés (et donc chaque ligne de cette première colonne représente un salarié) et le reste des colonnes représente les 7 jours de la semaine (lundi à dimanche). Pour le moment, j'arrive très bien à afficher la structure de base (affichage des salariés, des jours de la semaine), mais j'aimerais également les "shifts" de chaque salarié.

Par exemple :

  • Salarie1 travaille du lundi au vendredi de 08h00 à 17h00 et est en repos samedi et dimanche
  • Salarie2 travaille du mercredi au dimanche de 07h00 à 16h00 et est en repos lundi et mardi
  • Salarie3 travaille lundi, mardi, samedi et dimanche de 08h00 à 17h00 le lundi et mardi et de 07h00 à 16h00 le samedi et dimanche et est donc en repos de mercredi à vendredi

Il s'agit d'exemple, je récupère les jours et les heures de travail directement dans la réponse de mon API

Ce que je voudrais : https://goopics.net/i/nkcmis

Ce que j'obtiens

Je sais comment afficher la structure de base ; afficher les jours, les salariés et les shifts, mais je ne sais pas comment "lier" les shifts à la bonne date.

J'avais pensé à envoyer une requête avec des dates de début et de fin :
/api/salaries?startAt=2023-10-03&endAt=2023-10-09

Pour recevoir, dans la réponse de la requête, uniquement les shifts d'une semaine et les afficher dans boucle en React :

<td>
{salaries.shift[0].startAt} - {salaries.shift[Ø].endAt}
</td> //Pour afficher le premier shift dans la colonne du lundi

<td>
{salaries.shift[1].startAt} - {salaries.shift[1].endAt}
</td> //Pour afficher le second shift dans la colonne du mardi

...

Le problème est que le premier shift peut très bien être un lundi et donc dans la colonne du lundi, mais le premier shift peut également être un mercredi, mais sera toujours dans la colonne du lundi ; donc ma méthode n'est pas bonne

Admettons que Salarie1 a un shift le mardi 10 octobre 2023, je ne sais pas comment faire pour afficher le shift dans la colonne du mardi, tout simplement.
Si vous avez des idées, je suis preneur !

Merci à vous !

Aucune réponse