Review tile results sort items; Make datepicker update title and url …

…just inside agenda view.
plonegovbr · Jun 2, 2018 · 500c295 · 500c295
1 parent f5d155b
commit 500c295
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 35 deletions.
diff --git a/webpack/app/js/agenda.js b/webpack/app/js/agenda.js
@@ -7,7 +7,7 @@ let zfill = (number, size=2) => (Array(size).fill('0').join('') + number).slice(
 export default class AgendaView {
   constructor(container) {
     this.container = container;
-    this.datepicker = new DatePicker(container, this.onDateChange.bind(this));
+    this.datepicker = new DatePicker(container, this.onDateChange.bind(this), true);
     this.$appointments = this.$('.list-compromissos');
   }
   $(selector) {

diff --git a/webpack/app/js/datepicker.js b/webpack/app/js/datepicker.js
@@ -3,10 +3,11 @@ let zfill = (number, size=2) => (Array(size).fill('0').join('') + number).slice(
 
 
 export default class DatePicker {
-  constructor(container, callback) {
+  constructor(container, callback, updateTitle=false) {
     this.container = container;
     this.agendaURL = container.getAttribute('data-url');
     this.callback = callback;
+    this.updateTitle = updateTitle;
     this.$month = this.$('.monthpicker .month, .calendar-title .strmonth');
     this.$year = this.$('.monthpicker .year, .calendar-title .year');
     this.$day = this.$('.daypicker')
@@ -34,7 +35,6 @@ export default class DatePicker {
   update() {
     this.updateMonthPicker();
     this.updateDayPicker();
-    let agendaDiaria = `${zfill(this.day)}/${zfill(this.month + 1)}/${this.year}`;
     let agendaDiariaURL = `${this.year}-${zfill(this.month + 1)}-${zfill(this.day)}`;
     if (typeof this.callback === 'function') {
       $.ajax({
@@ -45,13 +45,16 @@ export default class DatePicker {
         url: `${this.agendaURL}/${agendaDiariaURL}`,
       }).always(this.callback);
     }
-    let title = `Agenda de ${$('.documentFirstHeading').text().trim()} para ${agendaDiaria}`;
-    window.history.pushState(
-      {day: this.day, month: this.month, year: this.year},
-      title,
-      `${this.agendaURL}/${agendaDiariaURL}?month:int=${this.month + 1}&year:int=${this.year}`
-    );
-    document.title = title;
+    if (this.updateTitle) {
+      let agendaDiaria = `${zfill(this.day)}/${zfill(this.month + 1)}/${this.year}`;
+      let title = `Agenda de ${$('.documentFirstHeading').text().trim()} para ${agendaDiaria}`;
+      window.history.pushState(
+        {day: this.day, month: this.month, year: this.year},
+        title,
+        `${this.agendaURL}/${agendaDiariaURL}?month:int=${this.month + 1}&year:int=${this.year}`
+      );
+      document.title = title;
+    }
   }
   updateMonthPicker() {
     this.$currentPicker.datepicker('setDate', new Date(this.year, this.month, this.day));

diff --git a/webpack/app/js/tile.js b/webpack/app/js/tile.js
@@ -24,6 +24,7 @@ export default class AgendaTile {
       this.swiper.appendSlide(this._$slide);
       return;
     }
+    this.compromissos = [];
     for (let item of agendaDiaria.items) {
       $.ajax({
         headers: {
@@ -34,33 +35,39 @@ export default class AgendaTile {
         async: false,
         context: this,
       }).done((compromisso) => {
-        if (this._$slide.children().length === this.pageSize) {
-          this.swiper.appendSlide(this._$slide);
-          this._$slide = $('<div class="swiper-slide"></div>');
-        }
-        let now = new Date();
-        let start_date = new Date(compromisso.start_date);
-        let end_date = new Date(compromisso.end_date);
-        let $item = $(`
-          <div class="collection-events-item">
-            <a class="title-item" href="${compromisso['@id']}">${compromisso.title}</a>
-            <div class="location-item">
-              <span class="location">${compromisso.location}</span>
-            </div>
-            <div class="timestamp-cell">
-              <span class="timestamp">
-                ${zfill(start_date.getHours())}h${zfill(start_date.getMinutes())}
-              </span>
-            </div>
-          </div>
-        `);
-        if (now.getTime() > start_date.getTime() && now.getTime() < end_date.getTime()) {
-          $('.timestamp-cell', $item).addClass('is-now');
-          $('.timestamp-cell', $item).append('<div class="now">Agora</div>')
-        }
-        this._$slide.append($item);
+        this.compromissos.push(compromisso);
       });
     }
+    this.compromissos.sort((a, b) => {
+      return new Date(a.start_date) - new Date(b.start_date);
+    });
+    for (let compromisso of this.compromissos) {
+      if (this._$slide.children().length === this.pageSize) {
+        this.swiper.appendSlide(this._$slide);
+        this._$slide = $('<div class="swiper-slide"></div>');
+      }
+      let now = new Date();
+      let start_date = new Date(compromisso.start_date);
+      let end_date = new Date(compromisso.end_date);
+      let $item = $(`
+        <div class="collection-events-item">
+          <a class="title-item" href="${compromisso['@id']}">${compromisso.title}</a>
+          <div class="location-item">
+            <span class="location">${compromisso.location}</span>
+          </div>
+          <div class="timestamp-cell">
+            <span class="timestamp">
+              ${zfill(start_date.getHours())}h${zfill(start_date.getMinutes())}
+            </span>
+          </div>
+        </div>
+      `);
+      if (now.getTime() > start_date.getTime() && now.getTime() < end_date.getTime()) {
+        $('.timestamp-cell', $item).addClass('is-now');
+        $('.timestamp-cell', $item).append('<div class="now">Agora</div>')
+      }
+      this._$slide.append($item);
+    }
     if (this._$slide.children().length > 0) {
       this.swiper.appendSlide(this._$slide);
     }