Modifier et créer des rendez-vous dans Telerik Scheduler pour Blazor

Le planificateur Telerik fournit tous les points d'ancrage dont vous avez besoin pour gérer ce qui se passe lorsque l'utilisateur crée, modifie ou supprime un événement planifié. Ou vous pouvez choisir la solution de facilité et ne rien faire du tout si vous êtes satisfait de l'interface utilisateur par défaut du planificateur.

Le planificateur Telerik pour Blazor fournit une interface par défaut aux utilisateurs pour créer, mettre à jour ou supprimer une activité (y compris la configuration un rendez-vous récurrent et contrôler qui est autorisé à apporter les modifications). Cependant, si cette interface fait plus ou moins que ce dont vous avez besoin, le planificateur fournit également tous les points d'ancrage dont vous avez besoin pour fournir votre propre interface utilisateur.

Soit dit en passant, l'interface utilisateur du planificateur fait référence aux éléments qu'elle affiche comme des « événements » tandis que le la documentation utilise des « rendez-vous » (un problème que l'équipe Telerik va résoudre). Pour cet article, je vais utiliser « activités » pour faire référence aux éléments affichés dans le planificateur.

Donner l'autorisation

La première étape de la gestion des modifications apportées à votre liste d'activités consiste à décider si l'utilisateur actuel est autorisé à créer, mettre à jour ou supprimer des activités. Vous contrôlez cela via les attributs AllowCreate, AllowUpdate et AllowDelete de l'élément TelerikScheduler.

L'exemple suivant contrôle si l'utilisateur peut créer une activité en liant l'attribut AllowCreate de TelerikScheduler à une variable booléenne appelée create :

<TelerikScheduler AllowCreate="@ créer" Data="@Rendez-vous" …

Voici le code qui définit cette variable (et la collection d'objets Rendez-vous auxquels j'ai lié le planificateur) :

@code
{
   bool créer = false;
   Liste<Rendez-vous> Rendez-vous = nouveau Liste<Rendez-vous>()[19659012];

Ce code définit la variable de création sur true si l'utilisateur est dans le rôle Admin (j'ai supposé que, plus haut dans la hiérarchie de l'application, le composant a été encapsulé dans le composant CascadingAuthenticationState de Blazor) :

 CascadingParameter]
   private Task<AuthenticationState> authState { get; set  ]; }
   système privé.Sécurité.Réclamations.Réclamations Principal principal ;

   protégé  async override void OnParametersSet()
   {
      if (authState != null)  
      {
         principal = (wait authState).User;
         if (principal.[19659046]IsInRole("Admin")) 
         {
            créer = true;             
         }
        }

Désormais, lorsqu'un utilisateur administrateur double-clique sur un créneau de date vide, le planificateur affiche une boîte de dialogue par défaut pour permettre à l'utilisateur de créer l'activité. Cette boîte de dialogue n'est pas une implémentation triviale, comme vous pouvez le voir :

La boîte de dialogue contient de nombreuses validations par défaut et prend également en charge les activités récurrentes en générant une règle RFC5545 qui est automatiquement insérée dans la propriété RecurrenceRule de votre objet (en supposant votre objet en a un). La boîte de dialogue par défaut peut être toute l'interface utilisateur dont vous avez besoin.

Extension de l'interface utilisateur par défaut

Bien sûr, vous pouvez également étendre ces données, les modifier ou ajouter une validation supplémentaire avant d'enregistrer l'activité (ou même, peut-être, d'effectuer une tâche de coordination impliquant une autre application). Pour implémenter ce traitement, vous devrez également connecter l'attribut OnCreate de TelerikScheduler à une méthode qui vous permettra d'accéder à l'activité créée par la boîte de dialogue. Ce code connecte une méthode que j'ai appelée CreateAppointment à l'événement OnCreate :

<TelerikScheduler AllowCreate="@create" OnCreate="@CreateAppointment"

En supposant, dans cette méthode, que vous souhaitiez accéder aux données de l'utilisateur (et vous le faites probablement), la méthode doit accepter un paramètre SchedulerCreateEventArgs. La propriété Item de ce paramètre contiendra l'objet que vous utilisez pour votre activité. Dans mon cas, j'ai lié mon planificateur à une collection d'objets à l'aide d'une classe que j'ai intelligemment appelée Appointment. Je commence donc ma méthode en transtypant la propriété Item en un objet Appointment.

En plus de saisir l'objet créé, c'est également votre responsabilité d'ajouter le nouvel objet à la collection à laquelle votre planificateur est lié.

En conséquence, le début et la fin de ma méthode ressemblent à ceci :

async Tâche  Créer un rendez-vous(SchedulerCreateEventArgs e)
{
    Rendez-vous apt = e.Item as Rendez-vous;
    
   Rendez-vous.Ajouter(apt);
}

Lorsque votre objet a des propriétés nommées de manière appropriée (par exemple, Fin, Début, Titre, Description, IsAllDay, RecurrenceRule), ces propriétés seront renseignées avec les valeurs saisies par l'utilisateur dans la boîte de dialogue. Toutes les propriétés personnalisées que vous avez ajoutées en plus de cela seront, bien sûr, toujours à leurs valeurs par défaut. Il est de votre responsabilité de définir la propriété Id sur l'élément.

Il n'y a aucun moyen explicite d'annuler l'événement OnCreate mais, si vous ne voulez pas que l'ajout se poursuive, ignorez simplement l'ajout du nouvel élément à la collection que le planificateur est lié à (ce serait probablement une bonne idée de mettre à jour une autre partie de l'interface utilisateur pour informer l'utilisateur pourquoi son ​​nouveau rendez-vous n'apparaît pas dans l'interface utilisateur).

Au fait, l'un des avantages de l'interface utilisateur du planificateur est que, si OnCreate n'est pas activé, les rendez-vous occupent tout l'espace de la plage horaire ; si vous activez la création, l'interface utilisateur fournit automatiquement un espace autour des rendez-vous existants où l'utilisateur peut double-cliquer pour ajouter un nouveau rendez-vous. Dans la même veine, l'activation d'OnUpdate permet non seulement à l'utilisateur de double-cliquer sur une activité existante dans l'interface utilisateur pour la modifier, mais permet également à l'utilisateur de faire glisser une activité vers un autre créneau horaire (ce qui, à son tour, déclenche l'événement OnUpdate afin que vous puissiez traiter le changement).

Il n'y a que deux vrais inconvénients à utiliser la boîte de dialogue par défaut :

1. Vous ne pouvez désactiver aucune partie de la boîte de dialogue. Si, par exemple, vous ne souhaitez pas prendre en charge une description ou des rendez-vous récurrents, il n'y a aucun moyen de désactiver ces parties de la boîte de dialogue.
2. Vous ne pouvez pas ajouter de champs personnalisés à la boîte de dialogue si vous souhaitez stocker des informations supplémentaires. ou des données différentes pour vos activités.

Dans ces cas, vous devrez intégrer votre propre boîte de dialogue personnalisée, ce qui est heureusement assez facile à faire.

Implémenter votre propre interface utilisateur

Si vous souhaitez présenter votre propre boîte de dialogue, vous devez connecter l'attribut OnEdit du planificateur à une méthode de votre application. Votre méthode OnEdit est appelée chaque fois que les événements OnCreate et/ou OnUpdate sont déclenchés (mais pas pour les événements OnDelete). Vous n'avez pas besoin d'activer l'événement OnEdit : si l'utilisateur n'est pas autorisé à appeler OnCreate ou OnUpdate, votre méthode OnEdit ne sera jamais évoquée, après tout.

Cet exemple utilise l'attribut OnEdit pour câbler un événement appelé CustomDialog tout en activant également l'événement OnCreate :

<TelerikScheduler @ref="ts" AllowCreate="true" OnEdit="@CustomDialog" …

Votre méthode OnEdit doit accepter un paramètre SchedulerEditEventArgs car la première chose que vous devez faire dans votre méthode est de définir la propriété IsCancelled de ce paramètre sur true, ce qui empêche la boîte de dialogue par défaut du planificateur d'apparaître. Par conséquent, le début d'un événement OnEdit ressemble toujours à ceci :

async Task CustomDialog(SchedulerEditEventArgs e)
{
    e.IsCancelled = true;

Dans ce cas, vous pouvez afficher n'importe quelle boîte de dialogue pour recueillir des informations auprès de l'utilisateur (le Composant Telerik Blazor Window pourrait être un bon choix ici).

Le paramètre SchedulerEditEventArgs est également utile dans comprendre ce que fait l'utilisateur. Si l'utilisateur tente de créer une nouvelle activité, la propriété IsNew du paramètre sera définie sur true ; si l'utilisateur a double-cliqué sur une activité existante, IsNew sera faux et la propriété Item du paramètre contiendra l'objet lié à l'activité (la propriété IsAllDay du paramètre sera également définie, en fonction de la propriété IsAllDay de l'objet). Comme vous pouvez vous y attendre, il est toujours de votre responsabilité de mettre à jour la collection qui pilote le planificateur avec le résultat de votre traitement.

Ces attributs et événements sont tout ce dont vous avez besoin pour créer l'interface utilisateur que vous souhaitez permettre aux utilisateurs de mettre à jour votre système de gestion des activités ( en supposant que vous souhaitiez les laisser apporter des modifications).

Conclusion

Le programmateur Telerik pour Blazor est un composant robuste. Consultez mes autres articles où j'ai expliqué comment le configurer gérer ses vues diriger l'attention de l'utilisateur et implémenter votre propre interface utilisateur . On m'a également dit que le planificateur sera encore étendu avec plusieurs nouvelles fonctionnalités telles que le regroupement de ressources et une vue chronologique dans les prochaines versions du produit en juin et septembre.