Angular Gantt

angular-gantt est un module pour AngularJS qui permet de créer un Gantt comme celui-ci:

Vous pouvez déjà jouer avec le plunkr en déplaçant ou redimensionnant les tâches, mais vous aurez un meilleur aperçu sur l’application démo des possibilités du composant !

• Two-way binding.
• Support avancé du calendrier pour configurer les vacances et les heures de travail.
• Chaque ligne et tâche à ses propres propriétés et comportements.
• Filtrage et tri des lignes et les tâches.
• Architecture souple (plugins) pour ajouter des fonctionnalités personnalisées.
• API pour écouter les événements et appeler des méthodes à partir du controller client.

C’est un composant simple mais très personnalisable.

Ce projet existe depuis plus d’un an et est aujourd’hui disponible en version 1.0.0. Mais je vous en parle surtout parce que je suis devenu le principal contributeur, et je vais vous expliquer le pourquoi du comment.

Lorsque j’ai commencé à travailler sur TicTac Planning, mon projet de webapp, un de mes premier objectif a été de trouver un composant pour afficher et modifier les plannings.

Les plannings dans les entreprises

Dans les entreprises, les plannings sont souvent affichés sous forme de tableau d’horaires, avec une ligne par employé et une colonne par journée ou demi-journée. Dans les cellules du tableau, les horaires sous forme de texte, et parfois des codes couleurs qui représente différentes informations. Ce type de représentation est parfait pour afficher le planning aux employés, car il est très simple et rapide à lire. Evidemment, ce type de tableau s’implémente très facilement en HTML5 natif.

Par contre, lorsqu’on doit réaliser un planning et qu’on a plus de trois personnes et une amplitude horaire importante, il est difficile de remplir directement le tableaux d’horaires. Le gantt permet de visualiser la répartition globale des horaires de chaque employé en fonction du temps, et aussi les temps de pause de chaque employé. C’est à mon avis le composant idéal pour construire le planning.

Ma contribution à angular-gantt

angular-gantt existe depuis plus d’un an. S’il a retenu mon attention au premier abord, grâce à sa simplicité et sa visualisation en colonne fixe, j’ai rapidement déchanté en essayant de l’intégrer dans mon application. Il manquait des fonctionnalités importantes, comme la possibilité de visualiser une portion du planning, la mauvaise gestion des dates, ou bien l’incapacité du composant à s’adapter à la largeur disponible.

Après quelques Pull Request tombé aux oubliettes, j’au cru que j’allais devoir forker le projet pour avancer. Mais finalement, Schweigi le fondateur du projet a donné signe de vie et m’a fait entièrement confiance par la suite en me donnant accès complet au repository.

Deux mois plus tard, j’ai laissé réaliser plus de 300 commits pour atteindre le niveau de qualité je voulais. Je vous passe les détails sur les fonctionnalités implémentées, les bugs corrigées et les refactoring effectués, mais il y en a eu un bon paquet !

Aujourd’hui, je suis fier d’annoncé que TicTac Planning sera propulsé par un composant OpenSource auquel j’aurai largement contribué.

Cet article Angular Gantt est apparu en premier sur Pragmasphere.