Blazor Scheduler 4: Sujets spécialisés

Voici quelques choses intéressantes que vous pouvez permettre à vos utilisateurs de faire avec le planificateur Telerik pour Blazor: glisser et supprimer les événements et les horaires, ajouter de nouveaux horaires ou événements entiers et mettez à jour votre base de données avec les modifications de l’utilisateur.

Le progrès Telerik UI Scheduler pour Blazor Vous donne beaucoup de puissance: la possibilité de créer une application où votre utilisateur génère à la fois un calendrier d’événements récurrents, puis de gérer les événements individuels dans ce calendrier – décoller / supprimer individuel ou même modifier l’intégralité du calendrier.

Dans Partie 1: commencerJ’ai parcouru la configuration du planificateur et la définition de l’objet unique dont vous auriez besoin. Dans Partie 2: Gestion des horaires et des occurrencesJ’ai examiné deux opérations dans la gestion d’un calendrier: supprimer (vraiment, supprimer) des occurrences programmées et ajouter des événements ou des événements hors télédule avec différents titres / descriptions (j’ai appelé ces «exceptions»). Dans Partie 3: Ajouter des exceptions au calendrierJ’ai montré comment gérer ces exceptions aux événements régulièrement prévus du calendrier.

Dans cet article, je vais examiner des sujets plus spécialisés: prendre en charge le glisser-déposer (vous l’avez déjà fait si vous avez implémenté le code des articles précédents) et permettant à l’utilisateur d’ajouter de nouveaux événements et horaires.

De plus, encore une chose: dans cette série, j’ai structuré mon application d’étude de cas afin que mon code prenne en charge une application avec un bouton de sauvegarde. Cela signifie qu’après avoir apporté toutes ses modifications, un utilisateur peut enregistrer son horaire (une autre conception serait de Enregistrez les modifications de l’utilisateur au fur et à mesure). À la fin de ce post, je vais jeter un aperçu de haut niveau du code impliqué dans la sauvegarde et la récupération de vos données.

Voici à quoi ressemble l’objet de l’événement avec le planificateur:

List<BillingPlan> DataList = new List<BillingPlan>();
public class BillingPlan: Appointment
{        
    public BillingPlan()
    {
        Id = Guid.NewGuid();
    }
    public string RecurrenceRuleString { get; set; } = string.Empty;
}

Et voici comment j’ai configuré le planificateur pour prendre en charge toutes les fonctionnalités dont j’ai discuté jusqu’à présent:

<TelerikRootComponent>
    <TelerikScheduler Height="600px"
                      Data="DataList"
                      RecurrenceRuleField="RecurrenceRuleString"

                      AllowUpdate="true"
                      AllowDelete="true"
                                            
       OnDelete="@DeleteSchedException"
                      OnUpdate="@UpdateExceptionSched"
                      OnCreate="@CreateExceptionSched">

Faire glisser et laisser tomber

Si vous implémentez tous les OnUpdate et OnCreate Code de mes articles précédents, vous avez également donné à votre utilisateur la possibilité de faire glisser et de supprimer n’importe quel horaire, une occurrence de ce calendrier ou une exception à ce calendrier à une nouvelle date dans l’interface utilisateur du planificateur.

Si l’utilisateur fait glisser une exception, Scheduler déplace l’exception à la nouvelle date. Le code pour un OnCreate La méthode que j’ai couverte dans mon post précédent s’occupera de cela.

Si, en revanche, l’utilisateur glisse un événement, il obtiendra une boîte de dialogue demandant s’il souhaite modifier le calendrier ou l’événement.

Si l’utilisateur choisit de modifier l’occurrence, votre OnCreate la méthode est appelée, suivie par votre OnUpdate méthode. Le code dans les deux événements de mes articles précédents créera une nouvelle exception à la date à laquelle l’exception a été glissée, ajoutera l’exception à la liste de données du planificateur et supprimer l’occurrence d’origine (vous pouvez également obtenir «une erreur non perdue de Blazor. «Bar pop-up mais, en fait, votre demande fonctionnera bien).

Si, en revanche, l’utilisateur choisit de modifier la série, votre OnUpdate la méthode est appelée. Votre existant OnUpdate La méthode mettra à jour votre objet de calendrier existant en définissant la date de début du calendrier définie sur la nouvelle date à laquelle le calendrier a été glissé.

Ajout de nouveaux horaires et exceptions

En plus de permettre à votre utilisateur de créer des exceptions aux occurrences existantes, vous pouvez également laisser votre utilisateur créer de nouvelles exceptions et l’ajouter au calendrier en double-cliquant sur une date vierge. Vous activez cela en définissant le planificateur AllowCreate propriété à vrai.

Cela signifie qu’un planificateur avec tout ce qui est possible ressemble à ceci:

<TelerikScheduler Height="600px"
                  Data="DataList"
                  RecurrenceRuleField="RecurrenceRuleString"

                  AllowCreate="true"
                  AllowUpdate="true"
                  AllowDelete="true"
                
                  OnDelete="@DeleteSchedException"
                  OnUpdate="@UpdateExceptionSched"
                  OnCreate="@CreateExceptionSched">    

Paramètre AllowCreate To True permettra également à votre utilisateur d’ajouter de tous les nouveaux horaires… que vous pouvez (ou non) souhaiter.

Lorsque l’utilisateur double-cliquez à une date vide, l’utilisateur sera présenté avec une version du formulaire d’événement qui permet à l’utilisateur de créer un nouvel événement ou un nouveau calendrier – tout dépend de la modification de l’option de récurrence dans la section répétée du formulaire.

Si l’utilisateur conserve l’option par défaut dans la section de répétition définie sur jamais, le formulaire créera un objet d’événement. Si l’utilisateur choisit l’une des autres options de répétition (quotidiennement, hebdomadaire, etc.), le formulaire créera un objet de planification.

Quel que soit le choix que l’utilisateur fait avec le paramètre de répétition, votre OnCreate la méthode sera appelée. Si l’utilisateur a laissé le paramètre de répétition à Never, alors l’objet d’élément RecurrenceStatus sera défini sur NonRecurring. Vous pouvez simplement ajouter cet objet d’événement à votre liste de données en tant qu’événement qui ne fait partie d’aucun calendrier.

Mais vous pouvez également choisir d’ajouter cet événement comme exception à votre horaire. Pour ce faire, vous devez récupérer, à partir de la liste de données, l’objet de planification auquel vous souhaitez joindre l’événement. Une fois que vous avez l’objet de planification, il vous suffit de définir l’objet de l’événement RecurrenceId aux horaires Id propriété pour faire de l’événement une exception à ce calendrier.

D’un autre côté, si l’utilisateur définit le paramètre de répétition dans le formulaire d’événement, l’objet est passé à votre OnCreate La méthode sera un objet d’événement avec son RecurrenceStatus propriété définie sur Master. Vous pouvez simplement ajouter cet objet à la liste de données comme calendrier après avoir définie l’objet RecurrenceRule propriété de votre RecurrencePlanString Propriété – Scheduler peut gérer plusieurs horaires dans son interface utilisateur.

Il y a un problème avec le fait d’avoir plusieurs horaires dans Scheduler, cependant: si, comme je l’ai suggéré plus tôt, vous laissez l’utilisateur ajouter les deux nouveaux événements au calendrier et Ayez plusieurs horaires dans Scheduler, vous devez désormais décider à quel calendrier affecter de nouveaux événements. Dans ce cas, vous devrez fournir un moyen de permettre à l’utilisateur de choisir le calendrier pour attribuer un nouvel événement.

Améliorer le OnCreate La méthode pour prendre en charge l’ajout de nouveaux éléments et horaires ressemblerait à ceci:

void CreateExceptionSched(SchedulerCreateEventArgs e)
{
    BillingPlan? bpNew = e.Item as BillingPlan;
    switch (bpNew.RecurrenceStatus)
    {
        case RecurrenceStatus.NonRecurring:
                 IEnumerable<BillingPlan> bpScheds = DataList.Where(
                            bpSch => bpSch.RecurrenceStatus == RecurrenceStatus.Master);
                 if (bpScheds.Count() == 1)
                 {
                       bpNew.RecurrenceId = bpScheds.First().Id;
                 }
                 else
                 {
                       
                       
                       bpNew.RecurrenceId = selectedSched.Id;
                 }
                 DataList.Add(bpNew);
                 break;       

        case RecurrenceStatus.Master:
                 
                 
  sdm.Add(New);
  break;

        case RecurrenceStatus.Exception:
                 BillingPlan bpSched = DataList.First(bp => bp.Id == bpNew.RecurrenceId);
                 bpNew.DataItem = bpSched.DataItem;
                DataList.Add(bpNew);
                break;
    }   
}

Récupérer et enregistrer le calendrier

Enfin, jetons un aperçu de haut niveau comment votre application interagirait avec un magasin de données pour partager les événements et les exceptions de votre horaire avec d’autres applications.

Il y aura des moments où votre application commencera par afficher un planificateur vide et votre utilisateur doublera les dates pour ajouter de nouveaux occurrences ou des horaires. La plupart du temps, cependant, votre utilisateur modifiera un horaire existant et vous devrez créer ce calendrier à partir des données que vous avez stockées dans votre base de données.

Pour soutenir cela, j’ai supposé que vous stockiez vos données de planification dans deux tables, celles pour les objets de planification et un pour des exceptions. La création d’un horaire de ces deux tables ressemblerait un peu à ceci:

protected override Task OnParametersSetAsync()
{
    
     IList<BillingPlan> bpSchedules = GetBillingPlanSchedulesForCustomer(parmCustId);

    
    DataList.AddRange(bpSchedules);
    DataList.AddRange(GetBillingPlanExceptionsForCustomer(parmCustId);
}

Lorsque l’utilisateur enregistre son horaire, comme je l’ai discuté dans un précédent Publier sur des événements récurrentsvous devrez générer les occurrences à partir de votre objet de planification et les ajouter à la base de données afin que d’autres applications puissent avoir accès à ces événements. Vous devrez également traiter les modifications de ce qui se trouve actuellement dans la base de données, en fonction de ce qui se trouve dans votre liste de données et de votre liste d’éléments supprimés.

Le code suivant organise ces mises à jour en deux groupes: il appelle d’abord les méthodes pour supprimer tous les anciens événements / horaires, puis il appelle les méthodes pour enregistrer les événements / horaires actuels.

Vous avez deux stratégies pour votre méthode de suppression:

• Supprimer chaque horaire et toutes ses exceptions (c’est-à-dire tout ce qui est avec un RecurrenceId qui correspond à l’horaire Id)
• Soyez plus sélectif et supprimez ce que l’utilisateur a supprimé (y compris tous les événements supprimés par l’utilisateur de cette session qui n’étaient pas supprimés auparavant)

Cela se traduit par deux stratégies pour la méthode de sauvegarde:

• Si vous avez tout supprimé, votre méthode de sauvegarde ajoute simplement tous les horaires avec leurs occurrences et exceptions
• Si vous avez été plus sélectif dans la suppression, le code doit concilier tous les horaires et occurrences existants dans la base de données avec ce qui est dans votre liste de données

Avec la deuxième stratégie, il pourrait être logique d’ajouter un trois états Updated Propriété des objets d’événement que vous utilisez pour les signaler comme modifiés, ajoutés ou inchangés depuis la récupération. Personnellement, je préférerais la stratégie «Supprimer All» (elle offre le moins de possibilités pour les bogues).

Ce code assume une stratégie sélective dans la méthode de suppression et évite les problèmes de sauvegarde qui en résultent en reportant la réconciliation des ajouts / mises à jour aux méthodes de l’enfant:

private void OnSave()
{
   DeleteItems()
   SaveItems();
}

private void DeleteItems()
{
   
   foreach (BillingPlan bpSched in DeletedItems.Where(
  bpItem => bpItem.RecurrenceStatus == RecurrenceStatus.Master))
   {
        DeleteBillingPlanForCustomer(parmCustId, bpSched);
       
       
       
       DeleteBillingPlanOccurencesForCustomer(parmCustId, bpItem);
       DeleteBillingPlanSuppressed DatesForCustomer(parmCustId, bpItem);
   }

   
   foreach (BillingPlan bpItem in DeletedItems.Where(
  bpItm => bpItm.RecurrenceStatus != RecurrenceStatus.Master))
   {
        DeleteBillingPlanExceptionsForCustomer(parmCustId, bpItem);
   }
}

Private void SaveItems()
{
   
  
   foreach(BillingPlan bpSched in DataList.Where(
                            bpSch => bpSch.RecurrenceStatus == ReccurenceStatus.Master) )
    {
        SaveBillingPlanForCustomer(parmCustId, bpSched);
       
       
      
       
       
       SaveBillingPlanOccurencesForCustomer(parmCustId, bpSched);
      SaveBillingPlanOccurencesForCustomer(parmCustId, bpItem);    
  }

   
   
   foreach(BillingPlan bpItem in DataList.Where(
                          bpItem => bpItem.RecurrenceStatus != ReccurenceStatus.Master) )
   {
        SaveBillingPlanExceptionsForCustomer(parmCustId, bpItem);
   } 
}

Dans cette série, j’ai couvert tous Les options que Scheduler offre pour travailler avec des événements récurrents: les trois processus (ajout / mise à jour / supprimer) pour les trois types d’objets différents (horaires, occurrences et exceptions). Vous n’avez pas à implémenter toutes ces fonctionnalités – vous pouvez choisir de gérer autant ou aussi peu d’entre elles que c’est logique pour votre application. Personnellement, je les gérerais tous… mais je suis consultant, donc je suis payé à l’heure. Vous pourriez prendre une décision plus rationnelle.

Obtenez tout le C # fichiers pour cette série ici. Et si vous n’avez pas déjà commencé, consultez Telerik UI pour Blazor vous-même!

Essayer maintenant