Merge 846a6aa into d9372ec

src/brasil/gov/agenda/browser/mixin.py

@@ -1,5 +1,6 @@
 # -*- coding: utf-8 -*-
 from six.moves import range  # noqa: I001
+from brasil.gov.agenda.config import AGENDADIARIAFMT
 from datetime import timedelta
 from plone import api
 from zope.component import getMultiAdapter
@@ -44,15 +45,15 @@ def days(self):
             has_appointment = False
             if day == self.date:
                 cssclass.append('is-selected')
-            if self.agenda.get(day.strftime('%Y-%m-%d'), False):
+            if self.agenda.get(day.strftime(AGENDADIARIAFMT), False):
                 has_appointment = True
                 cssclass.append('has-appointment')
             # Weekday difference between datetime and DateTime objects
             strweek = self._translate(tool.day_msgid((day.weekday() + 1) % 7))
             weekdays.append({
                 'day': day.day,
+                'dayurl': day.strftime(AGENDADIARIAFMT),
                 'weekday': strweek[:3],
-                'iso': day.isoformat(),
                 'cssclass': ' '.join(cssclass),
                 'hasappointment': has_appointment,
             })

src/brasil/gov/agenda/browser/templates/agenda_macros.pt

@@ -28,9 +28,9 @@
     <ul class="daypicker"
         tal:condition="view/days">
       <tal:event repeat="day view/days">
-        <li tal:attributes="data-day day/iso;
+        <li tal:attributes="data-day day/dayurl;
                             class day/cssclass;">
-          <a tal:attributes="href string:${view/agenda/absolute_url}/${day/iso}"
+          <a tal:attributes="href string:${view/agenda/absolute_url}/${day/dayurl}"
              tal:omit-tag="not:day/hasappointment">
             <div class="daypicker-day"
                  tal:content="day/day" />

webpack/app/js/datepicker.js

@@ -3,16 +3,21 @@ let zfill = (number, size=2) => (Array(size).fill('0').join('') + number).slice(
 
 
 export default class DatePicker {
-  constructor(container) {
+  constructor(container, callback) {
     this.container = container;
+    this.callback = callback;
     this.agendaURL = container.getAttribute('data-url');
     this.$month = this.$('.monthpicker .month');
     this.$year = this.$('.monthpicker .year');
     this.$day = this.$('.daypicker')
     this.$datePicker = this.$('.monthpicker input');
     this.$datePicker3 = this.$('.calendar');
     this.isMobile = false;
-    this.$currentPicker = this.$datePicker.length > 0 ? this.$datePicker : this.$datePicker3;
+    this.is3calendar = false;
+    if (this.$datePicker[0] == null) {
+      this.is3calendar = true;
+    }
+    this.$currentPicker = this.is3calendar ? this.$datePicker3 : this.$datePicker;
     this.daysWithAppointments = []
     this.initMonthPicker();
     let today = new Date();
@@ -39,21 +44,27 @@ export default class DatePicker {
       context: this,
       global: false,
     }).always(function(data) {
-      this.daysWithAppointments = data[3].daysWithAppointments;
+      if (typeof this.callback === 'function') {
+        this.callback(data);
+      }
+      this.daysWithAppointments = [];
+      if (data[3].daysWithAppointments != null) {
+        this.daysWithAppointments = data[3].daysWithAppointments;
+      }
       this.updateMonthPicker();
     });
   }
   updateMonthPicker() {
     this.$currentPicker.datepicker('setDate', new Date(this.year, this.month, this.day));
-    if (this.$datePicker.length > 0) {
+    if (this.is3calendar === false) {
       let monthNamesShort = this.$currentPicker.datepicker('option', 'monthNamesShort');
       this.$month.html(monthNamesShort[this.month].toUpperCase());
       this.$year.html(this.year);
       $('.monthpicker').attr('data-month', this.month);
       $('.monthpicker').attr('data-year', this.year);
       this.fixCalendarTitle();
     }
-    if (this.$datePicker3.length > 0) {
+    if (this.is3calendar === true) {
       this.resize();
     }
   }
@@ -90,32 +101,40 @@ export default class DatePicker {
     // this event is needed to get right translation
     $(window).on('load', function() {
       let onSelect = function(dateText, inst) { 
-        let year = inst.selectedYear;
-        let month = inst.selectedMonth + 1;
-        let day = parseInt(inst.selectedDay);
-        // https://stackoverflow.com/a/19374679
-        window.location = `${this.agendaURL}/${year}-${zfill(month)}-${zfill(day)}`;
-      }.bind(this);
+        this.year = inst.selectedYear;
+        this.month = inst.selectedMonth;
+        this.day = parseInt(inst.selectedDay);
+        if (this.is3calendar === true) {
+          // https://stackoverflow.com/a/19374679
+          window.location = `${this.agendaURL}/${this.year}-${zfill(this.month + 1)}-${zfill(this.day)}`;
+        } else {
+          this.update();
+        }
+      };
       let beforeShowDay = function(date) { 
         let day = date.toISOString().slice(0, 10);
         if (this.daysWithAppointments.indexOf(day) >= 0) {
           return [true, 'ui-has-appointments', ''];
         }
-        // disable click for days without appointments
         return [false, '', ''];
-      }.bind(this);
-      this.$datePicker.datepicker( {
-        onSelect: onSelect,
-        beforeShow: this.fixCalendarTitle,
-        beforeShowDay: beforeShowDay,
-        onChangeMonthYear: this.fixCalendarTitle,
-      });
-      this.$datePicker3.datepicker( {
-        numberOfMonths: 3,
-        onSelect: onSelect,
-        beforeShowDay: beforeShowDay,
-        onChangeMonthYear: this.fixCalendarTitle,
-      });
+      };
+      let onChangeMonthYear = function(year, month, inst) {
+        this.year = inst.selectedYear;
+        this.month = inst.selectedMonth;
+        this.day = parseInt(inst.selectedDay);
+        this.update();
+      };
+      let options = {
+        onSelect: onSelect.bind(this),
+        beforeShowDay: beforeShowDay.bind(this),
+        onChangeMonthYear: onChangeMonthYear.bind(this),
+      }; 
+      if (this.is3calendar) {
+        options.numberOfMonths = 3;
+      } else {
+        options.beforeShow = this.fixCalendarTitle.bind(this);
+      }
+      this.$currentPicker.datepicker(options);
       this.update();
     }.bind(this));
   }

webpack/app/js/tile.js

@@ -16,7 +16,9 @@ export default class AgendaTile {
   $(selector) {
     return $(selector, this.tile);
   }
-  onDateChange(agendaDiaria) {
+  onDateChange(data) {
+    this.updateDayPicker(data);
+    let agendaDiaria = data[3];
     this.swiper.removeAllSlides();
     let $slide = $('<div class="swiper-slide"></div>');
     if (agendaDiaria.hasAppointment === false) {
@@ -103,17 +105,6 @@ export default class AgendaTile {
     this.datepicker.month = date.getMonth();
     this.datepicker.day = date.getDate();
     this.datepicker.$currentPicker.datepicker('setDate', date);
-
-    let agendaDiariaURL = `${this.datepicker.year}-${zfill(this.datepicker.month + 1)}-${zfill(this.datepicker.day)}`;
-    $.ajax({
-      url: `${this.datepicker.agendaURL}/json/${agendaDiariaURL}`,
-      context: this,
-      global: false,
-    }).always(function(data) {
-      this.updateDayPicker(data);
-      this.onDateChange(data[3]);
-      this.datepicker.daysWithAppointments = data[3].daysWithAppointments;
-      this.datepicker.updateMonthPicker();
-    });
+    this.datepicker.update();
   }
 }