LgWorkScheduler

LgWorkScheduler<TItem> affiche des tâches et des jalons sur une échelle de temps horizontale. Il groupe les éléments par ligne, propose plusieurs granularités de timeline, un mode agenda, le glisser-déposer, le redimensionnement, les jalons reliés et la personnalisation des zones de rendu.

<LgWorkScheduler TItem="WorkItem"
                 Items="_items"
                 From="_from"
                 To="_to"
                 RowField="@(item => item.RowId)" />

• Espace de noms : Lagoon.UI.Components
• Hérite de : LgComponentBase
• Interfaces : IFormTrackerComponent, IAsyncDisposable
• Package NuGet : Lagoon.UI

Usage mobile

Ce composant est conçu pour une zone de travail large et n'est pas adapté aux écrans mobiles.

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon. Une variante orientée échelle métrique est disponible dans le showcase SchedulerVMeters.

Source de données

TItem doit implémenter IWorkSchedulerData. From positionne le début, To positionne la fin et IsVisible permet d'exclure un élément du rendu. Si To vaut null, l'élément est rendu comme un jalon ; sinon il est rendu comme une tâche.

WorkItem.cs

public class WorkItem : IWorkSchedulerData
{
    // Identifie la ligne visuelle utilisée par RowField.
    public int RowId { get; set; }

    // Date de début de la tâche ou du jalon.
    public DateTime? From { get; set; }

    // Date de fin ; null transforme l'élément en jalon.
    public DateTime? To { get; set; }

    // Permet d'appliquer un filtre sans retirer l'élément de la collection.
    public bool IsVisible { get; set; } = true;

    // Libellé métier affiché dans les fragments personnalisés.
    public string LabelKey { get; set; }

    // Premier niveau de groupement optionnel.
    public string GroupKey { get; set; }

    // Second niveau de groupement optionnel.
    public string SubGroupKey { get; set; }
}

Planning simple

Définissez Items, From, To et RowField. Sans fragments personnalisés, les tâches utilisent ToString() et les jalons utilisent DefaultJalonCssClass.

WorkSchedulerPage.razor

<LgWorkScheduler TItem="WorkItem"
                 Items="_items"
                 From="_from"
                 To="_to"
                 Timeline="TimelineMode.MonthDay"
                 RowField="@(item => item.RowId)" />

WorkSchedulerPage.razor.cs

public partial class WorkSchedulerPage : LgPage
{
    // Borne de début affichée par le planning.
    private DateTime _from = new(2025, 1, 1);

    // Borne de fin affichée par le planning.
    private DateTime _to = new(2025, 1, 31);

    // Données affichées : une tâche et un jalon sur deux lignes.
    private List<WorkItem> _items = new()
    {
        new() { RowId = 1, From = new DateTime(2025, 1, 3), To = new DateTime(2025, 1, 8), LabelKey = "#WksTaskA" },
        new() { RowId = 2, From = new DateTime(2025, 1, 10), To = null, LabelKey = "#WksMilestone" }
    };
}

Personnaliser les lignes et les tâches

ProjectItems personnalise la liste de gauche. SchedulerItems personnalise les barres et jalons dans la zone de planning.

WorkSchedulerCustomPage.razor

<LgWorkScheduler TItem="WorkItem"
                 Items="_items"
                 From="_from"
                 To="_to"
                 RowField="@(item => item.RowId)">
    <ProjectItems Context="item">
        <LgLabel Text="@item.LabelKey" />
    </ProjectItems>
    <SchedulerItems Context="item">
        <div class="w-100 h-100 text-center custom-work-item">
            @item.LabelKey.Translate()
        </div>
    </SchedulerItems>
</LgWorkScheduler>

Jalons

Un élément dont To vaut null est un jalon. Par défaut, DefaultJalonCssClass vaut wk-milestone-square. Le composant fournit aussi wk-milestone-arrow-up. Vous pouvez définir une classe personnalisée et l'utiliser dans SchedulerItems.

WorkSchedulerMilestonePage.razor

<LgWorkScheduler TItem="WorkItem"
                 Items="_items"
                 From="_from"
                 To="_to"
                 DefaultJalonCssClass="custom-milestone-circle"
                 RowField="@(item => item.RowId)" />

WorkSchedulerMilestonePage.scss

.custom-milestone-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: yellow;
    border: 1px solid black;
}

Grouper les lignes

GroupBy ajoute un ou plusieurs niveaux de groupement. ProjectItemsGroup et SchedulerItemsGroup personnalisent le rendu des groupes.

WorkSchedulerGroupPage.razor

<LgWorkScheduler TItem="WorkItem"
                 Items="_items"
                 From="_from"
                 To="_to"
                 RowField="@(item => item.RowId)"
                 GroupBy="_groupBy"
                 DefaultGroupsState="GroupState.Open">
    <ProjectItemsGroup Context="group">
        <LgLabel Text="@group.Key?.ToString()" />
    </ProjectItemsGroup>
</LgWorkScheduler>

WorkSchedulerGroupPage.razor.cs

public partial class WorkSchedulerGroupPage : LgPage
{
    // Regroupe les lignes par famille métier, puis par sous-famille.
    private List<Func<WorkItem, object>> _groupBy = new()
    {
        item => item.GroupKey,
        item => item.SubGroupKey
    };
}

Filtrer les éléments

Le composant ne fournit pas de filtre intégré comme LgGridView. Filtrez vos données en mettant à jour IsVisible.

WorkSchedulerFilterPage.razor

<LgTextBox @bind-Value="_filterText" Label="#WksFilter" OnChange="FilterItemsAsync" />

<LgWorkScheduler TItem="WorkItem"
                 Items="_items"
                 From="_from"
                 To="_to"
                 RowField="@(item => item.RowId)" />

WorkSchedulerFilterPage.razor.cs

public partial class WorkSchedulerFilterPage : LgPage
{
    // Texte saisi par l'utilisateur pour filtrer les lignes affichées.
    private string _filterText;

    // Applique le filtre en conservant les objets dans la source de données.
    private Task FilterItemsAsync(ChangeEventArgs args)
    {
        string filter = args.Value?.ToString() ?? string.Empty;
        foreach (WorkItem item in _items)
        {
            item.IsVisible = string.IsNullOrWhiteSpace(filter) || item.LabelKey.Contains(filter, StringComparison.OrdinalIgnoreCase);
        }
        return Task.CompletedTask;
    }
}

Glisser-déposer et redimensionnement

Implémentez IWorkSchedulerDraggableData pour activer le déplacement horizontal, vertical et le redimensionnement par élément. OnDragCompleted et OnResizeCompleted permettent d'annuler l'opération avec Cancel.

DraggableWorkItem.cs

public class DraggableWorkItem : WorkItem, IWorkSchedulerDraggableData
{
    // Autorise le déplacement dans la ligne courante.
    public bool AllowHorizontalMove { get; set; }

    // Autorise le déplacement vers une autre ligne.
    public bool AllowVerticalMove { get; set; }

    // Autorise le redimensionnement de la tâche.
    public bool AllowResize { get; set; }
}

Lier des tâches

Implémentez IWorkSchedulerLinkableData pour dessiner des liens entre tâches. TaskId identifie la tâche et Next contient les identifiants des tâches suivantes.

LinkedWorkItem.cs

public class LinkedWorkItem : DraggableWorkItem, IWorkSchedulerLinkableData
{
    // Identifiant unique utilisé par la zone de liens.
    public string TaskId { get; set; }

    // Identifiants des tâches liées à cette tâche.
    public List<string> Next { get; set; } = new();
}

Mode agenda

DisplayMode="DisplayMode.Agenda" remplace les lignes de projets par une grille horaire verticale. Configurez AgendaRowStep, AgendaHoursFrom, AgendaHoursTo et les bornes de surbrillance.

WorkSchedulerAgendaPage.razor

<LgWorkScheduler TItem="WorkItem"
                 Items="_items"
                 From="_from"
                 To="_to"
                 DisplayMode="DisplayMode.Agenda"
                 AgendaRowStep="30"
                 AgendaHoursFrom="TimeSpan.FromHours(8)"
                 AgendaHoursTo="TimeSpan.FromHours(18)"
                 RowField="@(item => item.RowId)" />

Pilotage par référence

Ajoutez une référence pour piloter le scroll ou convertir positions, dates et durées.

WorkSchedulerActionsPage.razor

<LgButton Text="#WksToday" OnClick="ScrollTodayAsync" />

<LgWorkScheduler @ref="_workScheduler"
                 TItem="WorkItem"
                 Items="_items"
                 From="_from"
                 To="_to"
                 RowField="@(item => item.RowId)" />

WorkSchedulerActionsPage.razor.cs

public partial class WorkSchedulerActionsPage : LgPage
{
    // Référence utilisée pour appeler les méthodes publiques du composant.
    private LgWorkScheduler<WorkItem> _workScheduler;

    // Centre le planning sur la date courante.
    private Task ScrollTodayAsync()
    {
        return _workScheduler.ScrollToTodayAsync();
    }
}

Méthodes publiques utiles : ScrollToAsync(double), ScrollToAsync(DateTime), ScrollToTodayAsync(), ScrollToEnd(), ScrollToStart(), GetTaskPosition(TItem), GetDatePosition(DateTime), GetTaskWidth(TItem), GetDurationWidth(DateTime, DateTime), GetDurationWidth(double), GetDateFromLeftPosition(double), GetRowPosition(), ExportAsync(...).

Composant enfant LgWorkSchedulerDraggableItem

LgWorkSchedulerDraggableItem<TItem> déclare une tâche externe que l'utilisateur peut déposer dans un LgWorkScheduler<TItem>. WorkScheduler et Duration sont obligatoires ; Id est renvoyé dans OnDragCompletedEventArgs<TItem>.DroppedItemId.

WorkSchedulerExternalDragPage.razor

<LgWorkScheduler @ref="_workScheduler"
                 TItem="WorkItem"
                 Items="_items"
                 From="_from"
                 To="_to"
                 RowField="@(item => item.RowId)"
                 OnDragCompleted="DropExternalItemAsync" />

@if (_workScheduler is not null)
{
    <LgWorkSchedulerDraggableItem TItem="WorkItem"
                                  WorkScheduler="_workScheduler"
                                  Id="external-task-1"
                                  Duration="TimeSpan.FromDays(2)"
                                  Text="@("#WksExternalTask".Translate())"
                                  CssClass="external-task" />
}

WorkSchedulerExternalDragPage.razor.cs

public partial class WorkSchedulerExternalDragPage : LgPage
{
    // Ajoute une nouvelle tâche quand un élément externe est déposé dans le planning.
    private Task DropExternalItemAsync(OnDragCompletedEventArgs<WorkItem> args)
    {
        if (args.IsNew)
        {
            _items.Add(new WorkItem { RowId = Convert.ToInt32(args.RowId), From = args.NewStart, To = args.NewEnd, LabelKey = "#WksExternalTask" });
        }
        return Task.CompletedTask;
    }
}

Propriétés de LgWorkSchedulerDraggableItem

Nom	Type	Défaut	Déclaré dans	Description
Id	string	null	LgWorkSchedulerDraggableItem<TItem>	Identifiant renvoyé au dépôt dans DroppedItemId.
Duration	TimeSpan?	null	LgWorkSchedulerDraggableItem<TItem>	Durée de l'élément externe ; obligatoire.
Text	string	null	LgWorkSchedulerDraggableItem<TItem>	Texte affiché dans l'élément à déposer.
CssClass	string	null	LgWorkSchedulerDraggableItem<TItem>	Classe CSS ajoutée à l'élément externe.
WorkScheduler	LgWorkScheduler<TItem>	null	LgWorkSchedulerDraggableItem<TItem>	Instance du planning cible ; obligatoire.

Propriétés

Nom	Type	Défaut	Déclaré dans	Description
OnSort	Func<IEnumerable<TItem>, IEnumerable<TItem>>	null	LgWorkScheduler<TItem>	Trie la source avant rendu.
Timeline	TimelineMode	YearMonth	LgWorkScheduler<TItem>	Définit la granularité horizontale.
DisplayMode	DisplayMode	Timeline	LgWorkScheduler<TItem>	Définit le rendu principal.
TimelineDisplayMode	TimelineDisplayMode	TwoRows	LgWorkScheduler<TItem>	Définit le nombre de lignes de la timeline.
GroupDisplayMode	GroupDisplayMode	Row	LgWorkScheduler<TItem>	Définit le rendu des groupes.
FocusTodayOnLoad	bool	false	LgWorkScheduler<TItem>	Centre automatiquement le planning sur aujourd'hui au chargement.
AgendaRowStep	int	30	LgWorkScheduler<TItem>	Pas vertical, en minutes, du mode agenda.
AgendaHoursFrom	TimeSpan	00:00:00	LgWorkScheduler<TItem>	Heure de début affichée en mode agenda.
AgendaHoursTo	TimeSpan	00:00:00	LgWorkScheduler<TItem>	Heure de fin affichée en mode agenda.
AgendaHoursFromHighlight	TimeSpan	00:00:00	LgWorkScheduler<TItem>	Début de la plage horaire mise en évidence en mode agenda.
AgendaHoursToHighlight	TimeSpan	00:00:00	LgWorkScheduler<TItem>	Fin de la plage horaire mise en évidence en mode agenda.
AllowCollapseGroup	bool	true	LgWorkScheduler<TItem>	Autorise le repli et le dépli des groupes.
StateId	string	null	LgWorkScheduler<TItem>	Identifiant unique utilisé notamment pour restaurer le scroll.
RestoreScrollPosition	bool	false	LgWorkScheduler<TItem>	Restaure la position de scroll après un rechargement complet si StateId est renseigné.
TimelineHeight	int	50	LgWorkScheduler<TItem>	Hauteur de la timeline en pixels.
ShowWeekend	bool	true	LgWorkScheduler<TItem>	Affiche les week-ends dans la timeline.
From	DateTime?	null	LgWorkScheduler<TItem>	Borne de début affichée ; si absente, elle est déduite des données.
To	DateTime?	null	LgWorkScheduler<TItem>	Borne de fin affichée ; si absente, elle est déduite des données.
ZoomLevel	double	4	LgWorkScheduler<TItem>	Nombre de pixels représentant une heure.
ProjectListWidth	int	200	LgWorkScheduler<TItem>	Largeur de la liste de projets en pixels.
RowHeight	int	50	LgWorkScheduler<TItem>	Hauteur d'une ligne en pixels.
PaddingRow	int	7	LgWorkScheduler<TItem>	Espacement interne d'une ligne en pixels.
Items	ICollection<TItem>	null	LgWorkScheduler<TItem>	Données à afficher.
OnCustomDateIndicator	Func<DateTime, string>	null	LgWorkScheduler<TItem>	Formate la date affichée pendant un déplacement ou un redimensionnement.
DragStepType	DragStepType	Free	LgWorkScheduler<TItem>	Définit la contrainte de déplacement.
DragStepSize	TimeSpan?	null	LgWorkScheduler<TItem>	Pas personnalisé utilisé si DragStepType vaut Manual.
ShowMouseIndicator	bool	true	LgWorkScheduler<TItem>	Affiche l'indicateur de position de la souris.
ShowDragIndicator	bool	false	LgWorkScheduler<TItem>	Affiche l'indicateur pendant le déplacement ou le redimensionnement.
VirtualScrolling	bool	false	LgWorkScheduler<TItem>	Active le virtual scrolling pour les volumes importants.
ShowProjectResizing	bool	true	LgWorkScheduler<TItem>	Autorise le redimensionnement de la liste de projets.
RowField	Func<TItem, object>	null	LgWorkScheduler<TItem>	Sélectionne la clé de regroupement par ligne.
GroupBy	IEnumerable<Func<TItem, object>>	null	LgWorkScheduler<TItem>	Définit les niveaux de groupement.
OrderBy	IEnumerable<Func<TItem, object>>	null	LgWorkScheduler<TItem>	Définit les propriétés de tri par ligne.
GroupMargin	int	30	LgWorkScheduler<TItem>	Indentation des groupes en pixels.
DefaultGroupsState	GroupState	Close	LgWorkScheduler<TItem>	État initial des groupes.
DefaultJalonCssClass	string	"wk-milestone-square"	LgWorkScheduler<TItem>	Classe CSS par défaut des jalons.
JoinMilestone	bool	false	LgWorkScheduler<TItem>	Relie les jalons entre eux sur une même ligne.
HourStep	int	3	LgWorkScheduler<TItem>	Pas horaire de TimelineMode.DayHour.
DatesCustomHighlight	Dictionary<DateTime, string>	null	LgWorkScheduler<TItem>	Dates mises en évidence avec une classe CSS par date.
ProjectHeader	RenderFragment	null	LgWorkScheduler<TItem>	Contenu de l'en-tête de la liste de projets.
ProjectItems	RenderFragment<TItem>	null	LgWorkScheduler<TItem>	Rendu d'une ligne dans la liste de projets.
ProjectItemsGroup	RenderFragment<GroupItem<TItem>>	null	LgWorkScheduler<TItem>	Rendu d'un groupe dans la liste de projets.
SchedulerItems	RenderFragment<TItem>	null	LgWorkScheduler<TItem>	Rendu d'une tâche ou d'un jalon dans la zone planning.
SchedulerItemsGroup	RenderFragment<GroupItem<TItem>>	null	LgWorkScheduler<TItem>	Rendu d'un groupe dans la zone planning.
AgendaHoursRender	RenderFragment<TimeSpan>	null	LgWorkScheduler<TItem>	Rendu d'une graduation horaire en mode agenda.
TimelineFirstLevel	RenderFragment<DateTime>	null	LgWorkScheduler<TItem>	Rendu du premier niveau de timeline.
TimelineSecondLevel	RenderFragment<DateTime>	null	LgWorkScheduler<TItem>	Rendu du second niveau de timeline.
ChildContent	RenderFragment	null	LgWorkScheduler<TItem>	Contenu enfant ; utilisé uniquement pour déclarer les fragments nommés.
IgnoreFormTracking	bool	false	IFormTrackerComponent	Exclut le composant du suivi de modifications d'un LgFormTracker.

Événements

Nom	Type	Description
OnItemClick	EventCallback<TItem>	Déclenché lors d'un clic sur une tâche ou un jalon.
OnEmptyClick	EventCallback<OnEmptyClickEventArgs>	Déclenché lors d'un clic dans une zone vide ; expose RowId et Date.
OnDragCompleted	EventCallback<OnDragCompletedEventArgs<TItem>>	Déclenché à la fin d'un déplacement ; expose l'élément, la ligne cible, les dates et Cancel.
OnResizeCompleted	EventCallback<OnResizeCompletedEventArgs<TItem>>	Déclenché à la fin d'un redimensionnement ; expose les nouvelles dates et Cancel.

Énumérations associées

TimelineMode

Valeur	Défaut	Description
YearMonth	Oui	Année au premier niveau, mois au second.
MonthDay	Non	Mois au premier niveau, jours au second.
DayAmPm	Non	Jour au premier niveau, demi-journée au second.
DayHour	Non	Jours au premier niveau, heures au second.
MonthWeek	Non	Mois au premier niveau, numéros de semaine au second.
MonthWeekDay	Non	Mois, semaines, puis jours sur trois niveaux.
WeekDay	Non	Numéros de semaine au premier niveau, jours au second.

DisplayMode

Valeur	Défaut	Description
Timeline	Oui	Affiche les barres et jalons avec la liste des projets.
Agenda	Non	Affiche une grille agenda avec axe vertical horaire.

TimelineDisplayMode

Valeur	Défaut	Description
OneRow	Non	Affiche la timeline sur une ligne.
TwoRows	Oui	Affiche la timeline sur deux lignes.
ThreeRows	Non	Affiche la timeline sur trois lignes.

GroupDisplayMode

Valeur	Défaut	Description
Row	Oui	Affiche les groupes comme des lignes.
Column	Non	Affiche les groupes comme des colonnes.

GroupState

Valeur	Défaut	Description
Open	Non	Groupe ouvert.
Close	Oui	Groupe fermé.

DragStepType

Valeur	Défaut	Description
Free	Oui	Aucun pas imposé pendant le déplacement.
Hour	Non	Déplacement contraint à l'heure.
Day	Non	Déplacement contraint au jour.
Manual	Non	Déplacement contraint par DragStepSize.

Accessibilité

• Prévoyez des libellés explicites dans ProjectItems et SchedulerItems, car le rendu personnalisé remplace le contenu par défaut.
• Les actions dans les fragments doivent utiliser des composants Lagoon (LgButton, LgIcon avec rôle adapté) et des textes traduits.
• Ne masquez pas les week-ends si les tâches peuvent commencer ou terminer sur ces jours : cela crée une lecture temporelle ambiguë.
• ShowMouseIndicator est une aide visuelle ; ne l'utilisez pas comme seule indication métier.

Composants liés

• LgWorkSchedulerDraggableItem<TItem> : élément externe déposable dans un planning.
• LgFormTracker : suit les modifications quand IgnoreFormTracking vaut false.