1 : import { EventView } from '../../mel_metapage/js/lib/calendar/event/event_view.js';
2 : import { GuestsPart } from '../../mel_metapage/js/lib/calendar/event/parts/guestspart.js';
3 : import { TimePartManager } from '../../mel_metapage/js/lib/calendar/event/parts/timepart.js';
4 : import {
5 :   BnumMessage,
6 :   eMessageType,
7 : } from '../../mel_metapage/js/lib/classes/bnum_message.js';
8 : import { MelEnumerable } from '../../mel_metapage/js/lib/classes/enum.js';
9 : import { MelDialog } from '../../mel_metapage/js/lib/classes/modal.js';
10 : import {
11 :   DATE_FORMAT,
12 :   DATE_HOUR_FORMAT,
13 : } from '../../mel_metapage/js/lib/constants/constants.dates.js';
14 : import { EMPTY_STRING } from '../../mel_metapage/js/lib/constants/constants.js';
15 : import { MelHtml } from '../../mel_metapage/js/lib/html/JsHtml/MelHtml.js';
16 : import { getRelativePos } from '../../mel_metapage/js/lib/mel.js';
17 : import { BnumEvent } from '../../mel_metapage/js/lib/mel_events.js';
18 : import { MelObject } from '../../mel_metapage/js/lib/mel_object.js';
19 : import { Mel_Promise } from '../../mel_metapage/js/lib/mel_promise.js';
20 : import { FavoriteLoader } from './lib/favorite_loader.js';
21 : import { ResourcesBase } from './lib/resource_base.js';
22 : import { ResourceLocation } from './lib/resource_location.js';
23 : 
24 : export { ResourceDialog };
25 : 
26 : /**
27 :  * @module Resources/Modal
28 :  * @local ResourceConfig
29 :  * @local ResourcesConfig
30 :  * @local FilterConfig
31 :  * @local GuestResource
32 :  */
33 : 
34 : /**
35 :  * Représentation de la configuration d'une ressource.
36 :  * @typedef ResourceConfig
37 :  * @property {string} name Nom de la ressource
38 :  * @property  {boolean} is_option Si la ressource doit être affiché dans la liste des modes d'évènements ou non
39 :  * @property {string} load_data Nom de la fonction qui permettra de récupérer les données de la ressource associée
40 :  */
41 : 
42 : /**
43 :  * Représentation de la configuration d'un filtre
44 :  * @typedef FilterConfig
45 :  * @property {string} name Nom/id du filtre
46 :  * @property {?string} load_data Nom de la fonction qui permettra de récupérer les données du filtre côté serveur.
47 :  * @property {?string} load_data_on_change Nom de la fonciton qui va récupérer les données de la ressource associé côté serveur lors du changement de valeur du filtre.
48 :  * @property {number} size Taille du filtre (de 1 à 12)
49 :  * @property {eInputType} input_type Type d'input (select ou multi-select)
50 :  * @frommoduleproperty Resources/Filters input_type
51 :  */
52 : 
53 : /**
54 :  * Représente la configuration récupérer depuis le php
55 :  * @typedef ResourcesConfig
56 :  * @property {Object<string, ResourceConfig>} resources Liste des configurations de ressources par type de ressources
57 :  * @property {Object<string, FilterConfig[]>} filters Liste des configurations des filtres par ressources
58 :  * @frommoduleproperty Resources/Modal resources {@linkto ResourceConfig}
59 :  * @frommoduleproperty Resources/Modal filters {@linkto FilterConfig}
60 :  */
61 : 
62 : /**
63 :  * Représentation d'un participant
64 :  * @typedef GuestResource
65 :  * @property {string} name Nom du participant
66 :  * @property {string} email Email du participants
67 :  * @property {GuestsPart.ROLES} role Role du participant
68 :  * @property {string} resource_type Type de la ressource
69 :  * @property {string} resource_id Id de la ressource
70 :  * @frommoduleproperty EventView/Parts/Guests role {@membertype .}
71 :  */
72 : 
73 : /**
74 :  * @class
75 :  * @classdesc Représente une dialog pour la gestion des ressources
76 :  * @extends MelObject
77 :  */
78 : class ResourceDialog extends MelObject {
79 :   /**
80 :    * La dialog à besoin du bouton et de la location qui l'a appelé, les gestionnaire de date de l'évènement associé, le participant associé (si il éxiste) ainsi que le type de ressoure que l'on veux afficher.
81 :    * Si aucune ressource est passé, on les affiche tous.
82 :    * @param {external:jQuery} button Bouton qui a appelé cet objet
83 :    * @param {ResourceLocation} location Location qui à appeller cet objet
84 :    * @param {?string} [resource_type=null] Type de ressource. Si null, ouvre toute les ressources (in progress)
85 :    * @param {TimePartManager} date Date de l'évènement. Permet de récupérer la date de celui-ci et de la changer lors de la sauvegarde
86 :    * @param {GuestResource} resource Participant associé
87 :    */
88 :   constructor(button, date, resource, location, resource_type = null) {
89 :     super(button, resource_type, date, resource, location);
90 :   }
91 : 
92 :   /**
93 :    * Initialise et assignes les variables de la classe
94 :    * @private
95 :    * @param  {...any} args
96 :    * @override
97 :    */
98 :   main(...args) {
99 :     super.main(...args);
100 : 
101 :     const [button, resource_type, date, resource, location] = args;
102 : 
103 :     /**
104 :      * Bouton qui a appelé cet objet
105 :      * @private
106 :      * @type {external:jQuery}
107 :      */
108 :     this._caller_button = button;
109 :     /**
110 :      * Ressource que doit afficher la modal.
111 :      *
112 :      * Si null, doit toute les afficher.
113 :      * @type {?string}
114 :      * @private
115 :      */
116 :     this._resource_type = resource_type;
117 :     /**
118 :      * Gère le temps de l'évènement
119 :      * @private
120 :      * @type {TimePartManager}
121 :      */
122 :     this._date = date;
123 :     /**
124 :      * Participant associé à la location
125 :      * @private
126 :      * @type {GuestResource}
127 :      */
128 :     this._resource = resource;
129 :     /**
130 :      * Si la dialog est initialisée ou non
131 :      * @private
132 :      * @type {boolean}
133 :      */
134 :     this._initialized = false;
135 :     /**
136 :      * Action à faire lors de l'affichage de la dialog
137 :      * @type {BnumEvent<Function>}
138 :      * @private
139 :      */
140 :     this._event_on_show = new BnumEvent();
141 :     /**
142 :      * Ressource sélectionnée
143 :      * @type {import('./lib/resource_base.js').ResourceData}
144 :      * @private
145 :      */
146 :     this._selected_resource = null;
147 :     /**
148 :      * Mode d'évènement associé
149 :      * @type {ResourceLocation}
150 :      * @private
151 :      */
152 :     this._location = location;
153 : 
154 :     /**
155 :      * Date de départ
156 :      * @type {external:moment}
157 :      */
158 :     this.start = null;
159 :     /**
160 :      * Date de fin
161 :      * @type {external:moment}
162 :      */
163 :     this.end = null;
164 :     /**
165 :      * Journée entière ou non
166 :      * @type {boolean}
167 :      */
168 :     this.all_day = null;
169 : 
170 :     //this.selected_resource = null;
171 :   }
172 : 
173 :   /**
174 :    *
175 :    * @returns
176 :    */
177 :   async _init() {
178 :     let page;
179 :     let resources = [];
180 : 
181 :     if (this._resource_type) {
182 :       resources.push(
183 :         new ResourcesBase(
184 :           rcmail.gettext(this._resource_type, 'mel_cal_resources'),
185 :           rcmail.env.cal_resources.filters[this._resource_type],
186 :         ),
187 :       );
188 : 
189 :       resources[resources.length - 1].all_day = this._date.is_all_day;
190 :       resources[resources.length - 1].start = this._date.date_start;
191 :       resources[resources.length - 1].end = this._date.date_end;
192 :       resources[resources.length - 1].event_on_save.push(
193 :         this._on_save.bind(this),
194 :       );
195 :       resources[resources.length - 1].location_id = this._location.id;
196 : 
197 :       if (this._resource && window.selected_resources[this._location.id]) {
198 :         resources[resources.length - 1].selected_resource =
199 :           window.selected_resources[this._location.id];
200 :         resources[resources.length - 1].try_add_resource(
201 :           window.selected_resources[this._location.id],
202 :           false,
203 :         );
204 :       }
205 : 
206 :       page = await resources[resources.length - 1].create_page();
207 :     } else {
208 :       throw 'not implemented';
209 :     }
210 : 
211 :     this.dialog = new MelDialog(page, {
212 :       width: 800,
213 :       height: 500,
214 :       close: () => {
215 :         $('#eventedit').css('opacity', EMPTY_STRING);
216 :         if (!EventView.INSTANCE.is_jquery_dialog()) {
217 :           EventView.INSTANCE.get_dialog()
218 :             .modal.css('width', EMPTY_STRING)
219 :             .find('.modal-dialog')
220 :             .css('max-width', EMPTY_STRING);
221 :         }
222 :       },
223 :     });
224 : 
225 :     this.resources = resources;
226 :   }
227 : 
228 :   /**
229 :    * Met à jour le combot date + horaire
230 :    * @private
231 :    * @param {string} type start/e,d
232 :    * @param {external:moment} moment Date
233 :    * @returns {ResourceDialog} Chaînage
234 :    */
235 :   _set_date(type, moment) {
236 :     this.dialog._$dialog
237 :       .find(`.input-date-${type}`)
238 :       .val(moment.format(DATE_FORMAT));
239 : 
240 :     this.dialog._$dialog
241 :       .find(`.input-time-${type}`)
242 :       .val(moment.format(DATE_HOUR_FORMAT));
243 : 
244 :     return this;
245 :   }
246 : 
247 :   /**
248 :    * Lors de la sauvegarde
249 :    * @private
250 :    */
251 :   _on_save() {
252 :     if (this._selected_resource) {
253 :       //On supprime l'ancien participant
254 :       $(
255 :         `.mel-attendee[data-email="${this._selected_resource.email}"] .close-button`,
256 :       ).click();
257 :     }
258 : 
259 :     const current_resource = this.get_selected_resource();
260 :     if (
261 :       current_resource &&
262 :       !$(`.mel-attendee[data-email="${current_resource.email}"]`).length
263 :     ) {
264 :       if (!window.selected_resources) window.selected_resources = {};
265 :       //On utilisera ça lorsque l'on reviendra sur la modale
266 :       window.selected_resources[this._location.id] = current_resource;
267 : 
268 :       //On change le bouton de text, couleur et on lui donne les info de la ressource sélectionné
269 :       if (typeof this._caller_button === 'function')
270 :         this._caller_button = this._caller_button();
271 : 
272 :       this._caller_button
273 :         .html(
274 :           $('<span>')
275 :             .css('vertical-align', 'super')
276 :             .text(ResourceDialog.GetRessourceLocationFormat(current_resource)),
277 :         )
278 :         .prepend(
279 :           MelHtml.start
280 :             .icon('ads_click')
281 :             .css('color', 'var(--mel-button-text-color)')
282 :             .css('margin-right', '5px')
283 :             .end()
284 :             .generate(),
285 :         )
286 :         .attr('resource', current_resource.email);
287 : 
288 :       //On créé un participant
289 :       EventView.INSTANCE.parts.guests._$fakeField
290 :         .val(
291 :           `role=${GuestsPart.ROLES.resource}:${current_resource.fullname}<${current_resource.email}>`,
292 :         )
293 :         .change();
294 : 
295 :       ResourceLocation.SetAttendeeMechanics(current_resource.email);
296 :     } else if (!current_resource) {
297 :       BnumMessage.DisplayMessage(
298 :         'Veuillez séléctionner une ressource !',
299 :         eMessageType.Error,
300 :       );
301 :     }
302 : 
303 :     //Met à jour la date de l'évènement
304 :     GuestsPart.can = false;
305 :     const cr = this.get_current_page_resource();
306 :     this._date._$start_date.val(cr.start.format(DATE_FORMAT)).change();
307 :     TimePartManager.UpdateOption(
308 :       this._date.start._$fakeField.attr('id'),
309 :       cr.start.format(DATE_HOUR_FORMAT),
310 :     );
311 :     this._date.start._$fakeField
312 :       .val(cr.start.format(DATE_HOUR_FORMAT))
313 :       .change();
314 :     this._date._$end_date.val(cr.end.format(DATE_FORMAT)).change();
315 :     TimePartManager.UpdateOption(
316 :       this._date.end._$fakeField.attr('id'),
317 :       cr.end.format(DATE_HOUR_FORMAT),
318 :     );
319 :     GuestsPart.can = true;
320 :     this._date.end._$fakeField.val(cr.end.format(DATE_HOUR_FORMAT)).change();
321 : 
322 :     if (this._date.is_all_day !== $('#rc-allday').prop('checked')) {
323 :       this._date.$allDay.click();
324 :     }
325 : 
326 :     //Change le titre de l'évènement si besoin
327 :     if (!(EventView.INSTANCE.inputs.text_title.val() || false)) {
328 :       EventView.INSTANCE.inputs.text_title.val(
329 :         this.gettext('automatic-resa-title', 'mel_cal_resources').replaceAll(
330 :           '%0',
331 :           current_resource.fullname,
332 :         ),
333 :       );
334 :     }
335 : 
336 :     //Change la location
337 :     this._location.location =
338 :       ResourceDialog.GetRessourceLocationFormat(current_resource);
339 :     this._location.onchange.call();
340 : 
341 :     //Changer le status si besoin
342 :     if (!(EventView.INSTANCE.parts.status._$field.val() || false))
343 :       EventView.INSTANCE.parts.status._$field.val('FREE').change();
344 : 
345 :     //Changer la réccurence
346 :     EventView.INSTANCE.parts.recurrence._$fakeField
347 :       .val(EMPTY_STRING)
348 :       .addClass('disabled')
349 :       .attr('disabled', 'disabled')
350 :       .change();
351 : 
352 :     if (!EventView.INSTANCE.is_jquery_dialog()) {
353 :       //On remet la modale globale comme avant
354 :       EventView.INSTANCE.get_dialog()
355 :         .modal.css('width', EMPTY_STRING)
356 :         .find('.modal-dialog')
357 :         .css('max-width', EMPTY_STRING);
358 :     }
359 : 
360 :     this.dialog.hide();
361 :   }
362 : 
363 :   /**
364 :    * Initialise les données de la modale si elle n'est pas initialisée.
365 :    * @async
366 :    * @returns {Promise<ResourceDialog>} Chaînage
367 :    */
368 :   async try_init() {
369 :     if (!this._initialized) {
370 :       $('#eventedit').css('opacity', 0);
371 :       this.get_skin()
372 :         .create_loader('rtc-show-event', true, true)
373 :         .appendTo($('#eventedit').parent());
374 :       await this._init();
375 :       this._initialized = true;
376 :     }
377 : 
378 :     return this;
379 :   }
380 : 
381 :   /**
382 :    * Affiche la dialog
383 :    * @async
384 :    * @returns {Mel_Promise}
385 :    */
386 :   show() {
387 :     if (!EventView.INSTANCE.is_jquery_dialog()) {
388 :       //Si on une modale globale, on change l'affichage de celle-ci pour que se soit + lisible
389 :       EventView.INSTANCE.get_dialog()
390 :         .modal.css('width', '100%')
391 :         .find('.modal-dialog')
392 :         .css('max-width', 'unset');
393 : 
394 :       this.dialog.options.width = '100%';
395 :     }
396 : 
397 :     this._selected_resource = this.get_selected_resource();
398 :     return new Mel_Promise((current_promise) => {
399 :       current_promise.start_resolving();
400 : 
401 :       this.dialog.show();
402 : 
403 :       if (!this._selected_resource)
404 :         this._selected_resource = this.get_selected_resource();
405 : 
406 :       FavoriteLoader.StartLoading(this.get_current_page_resource()._name);
407 : 
408 :       if (
409 :         window.selected_resources &&
410 :         window.selected_resources[this._location.id] &&
411 :         this._selected_resource !== window.selected_resources[this._location.id]
412 :       ) {
413 :         $(`#radio-${window.selected_resources[this._location.id].uid}`).click();
414 :       }
415 : 
416 :       //Attendre que tout soit bien afficher
417 :       setTimeout(() => {
418 :         //On affiche correctement le calendrier
419 :         let resource = MelEnumerable.from(this.resources).first();
420 :         resource.render();
421 :         resource._$calendar.fullCalendar('render');
422 : 
423 :         //On initialise les datepickers qui ont besoin d'être init
424 :         this.dialog._$dialog
425 :           .find('[datepicker="true"]')
426 :           .each((i, e) => {
427 :             $(e).datepicker({
428 :               defaultDate: new Date(),
429 :               firstday: 1,
430 :             });
431 :           })
432 :           .attr('datepicker', 'initialized');
433 : 
434 :         //On vire les valeurs inutiles des multi-selects
435 :         this.dialog._$dialog.find('[multiple="true"]').each((i, e) => {
436 :           $(e).find('option[value="/"]').remove();
437 :           $(e).find('option[value=""]').remove();
438 :           $(e)
439 :             .multiselect({
440 :               nonSelectedText: $(e).attr('data-fname'),
441 :               inheritClass: true,
442 :               buttonWidth: '100%',
443 :             })
444 :             .attr('multiple', 'initialized')
445 :             .multiselect('rebuild');
446 :         });
447 : 
448 :         //On met la bonne date pour qu'elle soit cohérente avec l'évènement
449 :         this.set_date(
450 :           this._date.date_start,
451 :           this._date.date_end,
452 :           this._date.is_all_day,
453 :         );
454 : 
455 :         this._event_on_show.call();
456 :         this._event_on_show.clear();
457 : 
458 :         $('#rtc-show-event').remove();
459 : 
460 :         if ($('#eventedit').css('opacity') === '0') {
461 :           $('#eventedit').css('opacity', 0.5);
462 :         }
463 : 
464 :         if (!this._scrolled) {
465 :           //On scroll à la bonne heure
466 :           const element = resource._$calendar.find(
467 :             `.fc-widget-header[data-date="${this._date.date_start.startOf('day').add(cal.settings.first_hour, 'h').format('YYYY-MM-DD HH:mm').replace(' ', 'T')}:00"]`,
468 :           )[0];
469 :           const element_pos = getRelativePos(element);
470 :           resource._$calendar
471 :             .find('.fc-body .fc-time-area .fc-scroller')
472 :             .first()[0].scrollLeft = element_pos.left;
473 : 
474 :           this._scrolled = true;
475 :         }
476 : 
477 :         current_promise.resolve(true);
478 :       }, 100);
479 :     });
480 :   }
481 : 
482 :   /**
483 :    * Met à jour les champs dates
484 :    * @param {external:moment} start Date de départ
485 :    * @param {external:moment} end Date de fin
486 :    * @param {boolean} all_day Journée entière ou non
487 :    * @returns {ResourceDialog} Chaînage
488 :    */
489 :   set_date(start, end, all_day) {
490 :     if (this.dialog._$dialog) {
491 :       this._set_date('start', start)._set_date('end', end);
492 :       $('#rc-allday').prop('checked', all_day);
493 :       if (this.get_current_page_resource()._$calendar)
494 :         this.get_current_page_resource()._$calendar.fullCalendar(
495 :           'refetchEvents',
496 :         );
497 : 
498 :       if (all_day) {
499 :         this.dialog._$dialog.find('.input-time-start').hide();
500 :         this.dialog._$dialog.find('.input-time-end').hide();
501 :       } else {
502 :         this.dialog._$dialog.find('.input-time-start').show();
503 :         this.dialog._$dialog.find('.input-time-end').show();
504 :       }
505 : 
506 :       this.get_current_page_resource()._$calendar.fullCalendar(
507 :         'gotoDate',
508 :         start,
509 :       );
510 :       this.get_current_page_resource()._$calendar.fullCalendar('refetchEvents');
511 : 
512 :       this.get_current_page_resource().refresh_calendar_date();
513 :     } else
514 :       this._event_on_show.push(this.set_date.bind(this), start, end, all_day);
515 : 
516 :     return this;
517 :   }
518 : 
519 :   /**
520 :    * Sélectionne une ressource
521 :    * @param {import('./lib/resource_base.js').ResourceData} rc
522 :    * @returns {ResourceDialog} Chaînage
523 :    */
524 :   set_selected_resource(rc) {
525 :     this.get_current_page_resource().selected_resource = rc;
526 :     return this;
527 :   }
528 : 
529 :   /**
530 :    * Ajoute une ressource
531 :    * @param {import('./lib/resource_base.js').ResourceData} rc
532 :    * @returns {ResourceDialog} Chaînage
533 :    */
534 :   add_resource(rc) {
535 :     this.get_current_page_resource().try_add_resource(rc);
536 :     return this;
537 :   }
538 : 
539 :   /**
540 :    * Ajoute plusieurs ressources
541 :    * @param {import('./lib/resource_base.js').ResourceData[]} rcs
542 :    * @returns {ResourceDialog} Chaînage
543 :    */
544 :   add_resources(rcs) {
545 :     for (const rc of rcs) {
546 :       this.get_current_page_resource().try_add_resource(rc);
547 :     }
548 : 
549 :     return this;
550 :   }
551 : 
552 :   /**
553 :    * Récupère la ressource courrante
554 :    * @returns {?ResourcesBase}
555 :    * @frommodulereturn Resources
556 :    */
557 :   get_current_page_resource() {
558 :     return MelEnumerable.from(this.resources)
559 :       .where((x) => x._name === this.dialog.page_manager._current_page)
560 :       .firstOrDefault();
561 :   }
562 : 
563 :   /**
564 :    * Récupère les données de la ressource courrante
565 :    * @returns {?import('./lib/resource_base.js').ResourceData}
566 :    */
567 :   get_selected_resource() {
568 :     return MelEnumerable.from(this.resources)
569 :       .where((x) => x._name === this.dialog.page_manager._current_page)
570 :       .firstOrDefault()?.selected_resource;
571 :   }
572 : 
573 :   /**
574 :    * Supprime la dialog du dom
575 :    */
576 :   destroy() {
577 :     this.dialog.destroy();
578 :   }
579 : 
580 :   /**
581 :    * @static
582 :    * @param {import('./lib/resource_base.js').ResourceData} current_resource
583 :    * @returns
584 :    */
585 :   static GetRessourceLocationFormat(current_resource) {
586 :     return `${current_resource.name} - ${current_resource.street} ${current_resource.postalcode} ${current_resource.locality}`;
587 :   }
588 : }