Comment implémenter et paramétrer le composant Agenda dans Newmips ?

L’objectif de ce tutoriel est de vous montrer comment implémenter le composant Agenda au sein de votre application, ainsi que d’expliquer son fonctionnement et son paramétrage.

 

Initialisation

Tout d’abord, comme pour tout composant Newmips, le composant s’ajoute par le biais d’une instruction donnée à notre assistant favori Mipsy !

Cette instruction peut être donné via le mode preview :

Et aussi en mode script :

NB : Le composant s’installera sur votre module actuel, ne pas oublier de faire une « select module my_module » si vous souhaitez que l’agenda soit ajouté sur un autre module de votre application.

NB 2 : Comme vous pouvez le constater, sur le mode preview il est possible de personnaliser le nom de votre agenda (ex : add component agenda called Mon agenda adoré).

 

Le composant agenda va générer plusieurs élément dans votre application :

  • Une entité Événement
  • Une entité Catégorie
  • Des champs dans chacune de ces entités
  • Un menu regroupant le tout se présentant ainsi :

 

Une fois le composant installé, je vous invite à cliquer que le menu Agenda pour découvrir sans surprise… l’agenda !

Via cette interface il est possible de voir et de manipuler les événements.

 

Utilisation de l’agenda

Sur la gauche, dans la box « Ajouter un événement », vous pouvez choisir une catégorie d’événement (les catégories sont bien évidemment administrables dans le menu susnommé sur la gauche), ainsi qu’un titre. Le bouton Ajouter vous permet de générer un événement dans la box en dessous « Événement en attente ».

 

Attention, pour le moment votre événement n’est pas sauvegardé ! En effet, il est nécessaire d’utiliser la magie du Drag & Drop (Glisser & Déposer pour les anglophobes) pour placer votre événement où vous le désirez dans l’agenda.

 

Vous pouvez aussi directement cliquer dans l’agenda à l’endroit où vous le souhaitez pour créer un événement :

Une fois l’événement crée, vous pouvez cliquer dessus afin de le modifier ou le supprimer.

 

L’agenda présente plusieurs vues par défaut :


Dans les vues Timeline / Jour et Timeline / Semaine, l’objectif est de permettre de placer des événements en les associant directement à un utilisateur de l’application :

Enfin, il est possible d’administrer les événements à l’aide du menu Événement :

 

 

Côté technique

1. Routes

L’ajout du composant agenda génère l’ensemble des fichiers suivants :

– c_agenda.js

Dans ce fichier se trouve l’ensemble des appels ajax executés lors de la manipulation du calendrier. Voici les routes ainsi que leurs utilités :

GET ‘/’ → Accès à l’agenda

POST ‘/add_event’ → Executé au moment du drop d’un événement dans le calendrier

POST ‘/resize_event’ → Sauvegarde ajax du redimensionnement d’un événement dans le calendrier

POST ‘/update_event’ → Sauvegarde ajax d’une modification faite directement dans le calendrier

POST ‘/update_event_drop’ → Déplacement d’un événement dans l’agenda

POST ‘/delete_event’ → Suppression d’un événement directement depuis le calendrier

 

Les deux autres fichiers sont ceux liés à l’entité événement et à l’entité catégorie. Ils n’ont aucunes différences avec un fichier de routage de base de n’importe quelle autre entité :

– e_agenda_category.js

– e_agenda_event.js

 

2. Vues

Dans les vues, les fichiers liés aux entités Événement et Catégorie n’ont subi que des modifications esthétiques. Elles ont le même comportement que pour les autres entités générées.

Le fichier où se trouve le calendrier qui utilise le plugin fullcalendar se situe dans le répertoire « views » à cet emplacement :

Vous pouvez modifier la présentation du calendrier dans le fichier « views_agenda.dust ».

En fin de fichier, dans le block dust {custom_js}, vous trouverez les variables dynamiques d’affichage du calendrier :

Ces variables sont initialisées pour être ajoutées au plugin fullcalendar.js. Il est possible de modifier le type de ressources utilisé pour l’affichage du calendrier afin d’obtenir une présentation différente.

En complément, dans le fichier « /public/js/Newmips/component/agenda.js » se trouve l’instanciation client de fullcalendar.js ainsi que la gestion de tous les événements liés au calendrier afin d’exécuter les requêtes Ajax.

Pour la customisation du plugin, la documentation est disponible à cette adresse : https://fullcalendar.io/docs

 

Et juste en dessous, vous trouverez également les événements liés à la fenêtre modale affichée quand vous cliquez sur un événement :

Vous pouvez librement manipuler ce fichier afin d’y implémenter de nouvelles règles de gestion.