Merge pull request #160 from crf-devs/improve_table_sorting

Improve table sorting by slots number
crf-devs · Mar 27, 2020 · 0334921 · 0334921
2 parents f8e0e6c + fc75e1e
commit 0334921
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 25 deletions.
diff --git a/assets/css/planning.scss b/assets/css/planning.scss
@@ -38,6 +38,22 @@ $tableBoxSize: 40px;
 
         &[data-day] {
           cursor: pointer;
+
+          &::after {
+            content: "▼";
+          }
+
+          &.loading {
+            background-color: #eee;
+          }
+
+          &.loading::after {
+            content: "●";
+          }
+
+          &.sorted::after {
+            content: "";
+          }
         }
 
         &.slot-name {

diff --git a/assets/js/planning-update.js b/assets/js/planning-update.js
@@ -95,32 +95,9 @@ function generatePayload($planning) {
   return payload;
 }
 
-function dateSortPlanning(day, $planning) {
-  $planning.find('tbody.item-rows').each(function () {
-    var $tbody = $(this);
-
-    $tbody
-      .find('tr')
-      .sort(function (a, b) {
-        var $a = $(a);
-        var $b = $(b);
-
-        var aCount = $a.find('td[data-status="available"][data-day="' + day + '"]').length;
-        var bCount = $b.find('td[data-status="available"][data-day="' + day + '"]').length;
-
-        return aCount > bCount ? -1 : 1;
-      })
-      .appendTo($tbody);
-  });
-}
-
 $(document).ready(function () {
   var $planning = $('.planning');
 
-  $planning.on('click', 'thead th', function () {
-    dateSortPlanning($(this).data('day'), $planning);
-  });
-
   $planning.on('click', '.slot-box input:checkbox', function (e) {
     e.stopImmediatePropagation();
     colorTableBox($(this).closest('.slot-box'));

diff --git a/assets/js/planning.js b/assets/js/planning.js
@@ -59,7 +59,38 @@ function toggleMoreInfos() {
   $('.planning').find('.item-data').toggle($('#display-more').prop('checked'));
 }
 
+function dateSortPlanning($clickedTh, $planning) {
+  let day = $clickedTh.data('day');
+
+  $clickedTh.siblings('th[data-day]').removeClass('loading').removeClass('sorted');
+  $clickedTh.removeClass('sorted').addClass('loading');
+
+  // We need to wait for the adding of loading class before doing this udge operation
+  setTimeout(function () {
+    $planning.find('tbody.item-rows').each(function () {
+      var $tbody = $(this);
+
+      $tbody
+        .find('tr')
+        .sort(function (a, b) {
+          var $a = $(a);
+          var $b = $(b);
+
+          var aCount = $a.find('td[data-status="available"][data-day="' + day + '"]').length;
+          var bCount = $b.find('td[data-status="available"][data-day="' + day + '"]').length;
+
+          return aCount > bCount ? -1 : 1;
+        })
+        .appendTo($tbody);
+
+      $clickedTh.removeClass('loading').addClass('sorted');
+    });
+  });
+}
+
 $(document).ready(function () {
+  var $planning = $('.planning');
+
   // Datepickers
   initDatesRange($('#fromToRange'), $('#from'), $('#to'));
   initDatesRange($('#availableRange'), $('#availableFrom'), $('#availableTo'), true);
@@ -71,5 +102,9 @@ $(document).ready(function () {
 
   $('#display-more').on('change', toggleMoreInfos);
 
+  $planning.on('click', 'thead tr.days th[data-day]', function () {
+    dateSortPlanning($(this), $planning);
+  });
+
   $('#loader').hide();
 });
diff --git a/templates/organization/planning/_results.html.twig b/templates/organization/planning/_results.html.twig
@@ -34,8 +34,8 @@
             <th rowspan="2"></th>
             <th colspan="{{ itemDataRow }}" class="item-data">Informations</th>
             {% for item in periodCalculator.days %}
-                <th colspan="{{ item.slots }}" data-day="{{ item.date|date("Y-m-d") }}">
-                    {{ item.date|format_date(pattern="eeee dd MMMM") }} &#9660;
+                <th colspan="{{ item.slots }}" data-day="{{ item.date|date("Y-m-d") }}" title="Trier par nombre de disponibilités sur le jour">
+                    {{ item.date|format_date(pattern="eeee dd MMMM") }}
                 </th>
             {% endfor %}
         </tr>