Exemple de cas pratique de Module Builder
GUIDE DEBUTANT POUR MODULE BUILDER
L’idée générale de ce cas pratique est d’utiliser l’ossature de fichiers du MODULE BUILDER et de les modifier le moins possible pour ne pas faire d’erreurs ou de bêtises.
Le module que nous allons créer :
Son rôle est d’afficher dans un calendrier les délais de livraison des commandes fournisseur sur une plage donnée à partir de la date du jour.
Il faut donc que vos commandes fournisseurs aient une Date prévue de livraison :
Cliquer sur une des commandes du calendrier vous renverra directement vers la fiche Dolibarr de la commande fournisseur concernée. Il sera disponible dans un nouvel onglet du menu principal.
On utilisera "fullcalendar" pour le calendrier https://fullcalendar.io/
ETAPE 1 : ACTIVER LE MODULE BUILDER DE DOLIBARR
Accueil → Configuration → Configuration - Modules/Applications → MODULE BUILDER
ETAPE 2 : CREER LES FICHIERS DE BASE DU MODULE
Lancer le MODULE BUILDER via l’icone en haut à droite de Dolibarr
Remplissez les champs puis cliquez sur CREER
A partir de maintenant vous devriez avoir dans le dossier « custom » un nouveau dossier au nom de votre module que je vais appeler CalendrierFournisseurs dans mon cas
ETAPE 3 : UPLOAD DES FICHIERS FULLCALENDAR
Notre code aura besoin des bibliothèques Fullcalendar.
A l’heure de ce tuto j’utilise la dernière version 6.1.15 que vous trouverez ici https://github.com/fullcalendar/fullcalendar/releases/tag/v6.1.15
Décompressez le Zip pour avoir le dossier fullcalendar-6.1.15 comme suit : /custom/calendrierfournisseurs/fullcalendar-6.1.15
ETAPE 4 : CREATION DU MODULE
Editez le fichier « /custom/calendrierfournisseurs/calendrierfournisseursindex.php » avec le notepad ou visual studio code.
Ce fichier contiendra le contenu de notre page à afficher. Effacez le contenu et mettez-y le code suivant :
1 <?php
2
3 require '../../main.inc.php'; // Inclusion du fichier principal Dolibarr
4
5 llxHeader('', 'Calendrier Fournisseur', ''); // En-tête de Dolibarr
6
7
8 // Connexion à la base de données Dolibarr (utilisation des connexions intégrées à Dolibarr)
9 global $db;
10
11 // Récupération des configurations de plage de dates
12 $weeksBefore = getDolGlobalInt('CALENDRIERFOURNISSEURS_WEEKS_BEFORE', 1);
13 $weeksAfter = getDolGlobalInt('CALENDRIERFOURNISSEURS_WEEKS_AFTER', 4);
14
15 // Calcul de la plage de dates
16 $date_start = date('Y-m-d', strtotime("-$weeksBefore week"));
17 $date_end = date('Y-m-d', strtotime("+$weeksAfter week"));
18
19 // Afficher un titre
20 print "<h1>Calendrier livraisons Commandes Fournisseurs<br> du " . date("d/m/Y", strtotime($date_start)) . " au " . date("d/m/Y", strtotime($date_end)) . "</h1>";
21
22 // Récupération des données de la base de données
23 $requete = "SELECT t.rowid as rowid, t.ref_supplier as ref, DATE_FORMAT(t.date_livraison, '%Y-%m-%d') as date_livraison,
24 t.fk_statut as statut, s.nom as nom_fournisseur
25 FROM llx_commande_fournisseur as t
26 INNER JOIN llx_societe as s ON t.fk_soc = s.rowid
27 WHERE t.date_livraison BETWEEN '$date_start' AND '$date_end'
28 AND t.fk_statut IN (1, 2, 3, 4, 5, 9)
29 ORDER BY t.date_livraison ASC";
30 $resultat = $db->query($requete);
31
32 // Préparation des données pour FullCalendar
33 $events = array();
34 while ($ligne = $resultat->fetch_assoc()) {
35 $backgroundColor = '';
36 switch ($ligne['statut']) {
37 case 2: // Validée
38 $backgroundColor = '#bc9526'; // Marron orangé
39 break;
40 case 3: // Transmise au fournisseur
41 $backgroundColor = '#25a580'; // Vert
42 break;
43 case 4: // Livrée partiellement ou refusée
44 $backgroundColor = '#ffa07a'; // Rouge clair
45 break;
46 case 5: // Totalement livrée
47 $backgroundColor = '#cad2d2'; // Gris clair
48 break;
49 }
50
51 $events[] = array(
52 'title' => mb_convert_encoding($ligne['nom_fournisseur'], 'UTF-8') . ' - ' . mb_convert_encoding($ligne['ref'], 'UTF-8'),
53 'start' => mb_convert_encoding($ligne['date_livraison'], 'UTF-8'),
54 'id' => mb_convert_encoding($ligne['rowid'], 'UTF-8'),
55 'status' => mb_convert_encoding($ligne['statut'], 'UTF-8'),
56 'url' => '../../fourn/commande/card.php?id=' . mb_convert_encoding($ligne['rowid'], 'UTF-8'),
57 'backgroundColor' => $backgroundColor
58 );
59 }
60
61 // Conversion en JSON
62 $json_events = json_encode($events);
63 ?>
64
65 <!DOCTYPE html>
66 <html lang="fr">
67 <head>
68 <meta charset="UTF-8">
69 <title>Calendrier Fournisseur</title>
70 <script src='../../custom/calendrierfournisseurs/fullcalendar-6.1.15/dist/index.global.js'></script>
71 <script src='../../custom/calendrierfournisseurs/fullcalendar-6.1.15/packages/core/locales/fr.global.js'></script>
72 <script>
73 document.addEventListener('DOMContentLoaded', function() {
74 var calendarEl = document.getElementById('calendar');
75 var calendar = new FullCalendar.Calendar(calendarEl, {
76 initialView: 'dayGridMonth',
77 locale: 'fr',
78 weekNumbers: true,
79 height: 'auto',
80 headerToolbar: {
81 left: 'prev,next today',
82 center: 'title',
83 right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
84 },
85 events: <?php echo $json_events; ?>,
86 eventContent: function(arg) {
87 return {
88 html: arg.event.title.split(' - ')[0] + '<br>' + arg.event.title.split(' - ')[1]
89 };
90 }
91 });
92 calendar.render();
93 });
94 </script>
95 <style>
96 html, body {
97 overflow: hidden;
98 font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
99 font-size: 14px;
100 }
101 #calendar-container {
102 position: fixed;
103 top: 0;
104 left: 0;
105 right: 0;
106 bottom: 0;
107 }
108 .fc-header-toolbar {
109 padding-top: 1em;
110 padding-left: 1em;
111 padding-right: 1em;
112 }
113 </style>
114 </head>
115 <body>
116 <table border="0" cellpadding="0" cellspacing="0" style="width:800px">
117 <tr>
118 <td style="background-color:#bc9526; width:50px"> </td>
119 <td><span style="font-size:12px">Commande Approuvée</span></td>
120 <td style="background-color:#25a580; width:50px"> </td>
121 <td><span style="font-size:12px">Commande Transmise au fournisseur</span></td>
122 <td style="background-color:#ffa07a; width:50px"> </td>
123 <td><span style="font-size:12px">Commande livrée partiellement ou refusée</span></td>
124 <td style="background-color:#cad2d2; width:50px"> </td>
125 <td><span style="font-size:12px">Commande totalement livrée</span></td>
126 </tr>
127 </table>
128
129 <div id='calendar'></div>
130 </body>
131 </html>
132
133 <?php
134 llxFooter(); // Pied de page Dolibarr
135 ?>
ETAPE 5 : PAGE DE CONFIGURATION DU MODULE
Editez le fichier « /custom/calendrierfournisseurs/admin/setup.php» avec le notepad ou visual studio code ou directement depuis le module builder.
Ce fichier contiendra le contenu de notre page de configuration du module à afficher.
Supprimez (ou mettez en commentaire avec /* et */) les données d’exemple soient les lignes 102 à 166 de la zone commençant par le commentaire :
// Enter here all parameters in your setup page
Ajouter le code suivant :
// Setup conf for selection of weeks before current date to display in calendar
$item = $formSetup->newItem('CALENDRIERFOURNISSEURS_WEEKS_BEFORE');
$item->defaultFieldValue = '1'; // Valeur par défaut de 1 semaine avant
$item->fieldAttr['placeholder'] = 'Nombre de semaines avant';
$item->nameText = $langs->trans('Nombre de semaines avant'); // Langue pour l'étiquette
// Setup conf for selection of weeks after current date to display in calendar
$item = $formSetup->newItem('CALENDRIERFOURNISSEURS_WEEKS_AFTER');
$item->defaultFieldValue = '4'; // Valeur par défaut de 4 semaines après
$item->fieldAttr['placeholder'] = 'Nombre de semaines après';
$item->nameText = $langs->trans('Nombre de semaines après'); // Langue pour l'étiquette
ETAPE 6 : ACTIVER LE MODULE
Directement dans le MODULE BUILDER, activez le module et allez sur la roue crantée pour configurer la plage de dates que calendrier doit afficher :
- Nombre de semaines avant : nombre de semaines avant la date du jour
- Nombre de semaines après : nombre de semaines après la date du jour
Normalement, après cette étape le calendrier devrait s’afficher quand on clique sur le bouton de l’onglet principal