Drag Unscheduled Sessions onto Schedule Grid (rubycentral#265)

- Allow for timeslots before 9am and after 7pm.

- Added unscheduled session cards with filtering

- Cards are draggable and droppable

- Added update time slots via drag and drop

- Fixed preview bar covers edit modal

app/assets/javascripts/staff/program/grid.js

@@ -7,8 +7,8 @@
   }
 
   // Grid properties
-  const dayStart = 60*9;  // minutes
-  const dayEnd = 60*19;
+  var dayStart = 60*9;  // minutes
+  var dayEnd = 60*19;
   const step = 60;
   const verticalScale = 2.5;
 
@@ -22,9 +22,19 @@
     }
     initTrackColors();
     addGridLineStyle();
+    updateDayRange($grids);
     initGrid($grids);
   }
 
+  function updateDayRange($grids) {
+    times = _.flatten(_.map($grids.find('.time-slot').toArray(), function(ts) {
+        return [$(ts).data("starts"), ($(ts).data("starts") + $(ts).data("duration"))]
+    }));
+
+    dayStart = _.min([dayStart, _.min(times)]);
+    dayEnd = _.max([dayEnd, _.max(times)]);
+  }
+
   function initGrid($grid) {
     $grid.find('.time-slot').each(function(i, slot) {
       initTimeSlot($(slot));
@@ -35,30 +45,65 @@
   }
 
   function initGridDay(day) {
-    initGrid($('#schedule_day_' + day));
+    var $grid = $('#schedule_day_' + day)
+    updateDayRange($grid);
+    initGrid($grid);
   }
 
   function initTimeSlot($slot) {
     $slot.css({
       height: ($slot.data('duration') * verticalScale) + 'px',
       top: (($slot.data('starts') - dayStart) * verticalScale) + 'px'
     });
+    assignSizeClass($slot.find('.draggable-session-card, .custom-session-card'), $slot)
+    assignTrackColor($slot.find('.draggable-session-card, .custom-session-card'))
 
-    var trackCss = $slot.data('trackCss');
-    var i = trackCssClasses.indexOf(trackCss);
-    if (i >= 0) {
-      $slot.find('.track').css({
-        color: '#FFF',
-        backgroundColor: '#' + trackColors[i]
-      });
-    }
     if (!$slot.hasClass('preview')) {
       $slot.click(onTimeSlotClick);
     }
+
+    $slot.droppable({
+        accept: '.draggable-session-card',
+        hoverClass: 'draggable-hover',
+        drop: function(event, ui) {
+            var $sessionCard = $(ui.draggable)
+            $sessionCard.detach().removeAttr('style').appendTo(this)
+            assignSizeClass($sessionCard, $(this))
+            assignTrackColor($sessionCard)
+            if ($sessionCard.data('scheduled')) {
+                window.Schedule.Drag.unschedule($sessionCard)
+            }
+            updateTimeSlot($(this), $sessionCard)
+        }
+    })
+  }
+
+  function assignTrackColor($element) {
+    var trackCss = $element.data('trackCss')
+    var i = trackCssClasses.indexOf(trackCss)
+    if (i >= 0) {
+        $element.find('.track').css({
+            backgroundColor: '#' + trackColors[i],
+            color: "white"
+        })
+    }
+  }
+
+  function assignSizeClass($sessionCard, $slot) {
+      var slotHeight = $slot.height()
+      if (slotHeight < 70) {
+          $sessionCard.addClass('small')
+      } else if (slotHeight < 140) {
+          $sessionCard.addClass('medium')
+      } else {
+          $sessionCard.addClass('large')
+      }
+
   }
 
   function initRuler($ruler) {
     var m = moment().startOf('day').minutes(dayStart-step);
+
     for (var i=dayStart; i<=dayEnd; i+=step) {
       $ruler.append('<li>'+ m.minutes(step).format('hh:mma') +'</li>');
     }
@@ -76,6 +121,16 @@
     $('<style>.schedule-grid .ruler li:after { width: '+lineWidth+'px; }</style>').appendTo('head');
   }
 
+  function updateTimeSlot($timeSlot, $dragged_session) {
+    $.ajax({
+        url: $timeSlot.data('updatePath'),
+        method: 'patch',
+        data: {
+            time_slot: { program_session_id: $dragged_session.data('id') }
+        }
+    })
+  }
+
   function initBulkCreateDialog($dialog) {
     var $format = $dialog.find('select.session-format');
     var $duration = $dialog.find('.time-slot-duration');

app/assets/javascripts/staff/program/schedule_dragging.js

@@ -0,0 +1,106 @@
+(function($, window) {
+    if (typeof(window.Schedule) === 'undefined') {
+        window.Schedule = {}
+    }
+    if (typeof(window.Schedule.Drag) !== 'undefined') {
+        return window.Schedule.Drag
+    }
+
+    function init() {
+        if ($(".unscheduled-sessions").length ) {
+            $('.unscheduled-sessions-toggle').on('click', toggleUnscheduledSessionsWidget)
+            $('#session_search').on('keyup', filterSessions)
+
+            var trackCssClasses = [];
+            var trackColors = [];
+
+            initTrackColors()
+            initDraggableSessions()
+            initDroppableSessionsWidget()
+        }
+    }
+
+    function toggleUnscheduledSessionsWidget(e) {
+        e.preventDefault()
+        $('.unscheduled-sessions-widget, .search-sessions-wrapper').toggleClass('hidden')
+    }
+
+    function filterSessions() {
+        var query = this.value.toLowerCase()
+        var items = $('.unscheduled-sessions-widget .draggable-session-card')
+
+        for (var i = 0; i < items.length; i++) {
+            var itemText = $(items[i]).text().toLowerCase()
+            if (itemText.indexOf(query) > -1) {
+                $(items[i]).removeClass('hidden')
+            } else {
+                $(items[i]).addClass('hidden')
+            }
+        }
+    }
+
+    function initTrackColors() {
+        trackCssClasses = $('#schedule').data('tracks-css');
+        trackColors = palette('tol-rainbow', trackCssClasses.length);
+    }
+
+    function initDraggableSessions() {
+        var $sessions = $('.draggable-session-card')
+        $sessions.each(function(i, session) {
+            initDraggableSession($(session))
+        })
+    }
+
+    function initDraggableSession($session) {
+        var trackCss = $session.data('trackCss')
+        var i = trackCssClasses.indexOf(trackCss)
+        if (i >= 0) {
+            $session.find('.track').css({
+                backgroundColor: '#' + trackColors[i]
+            })
+        }
+        $session.draggable({
+            helper: 'clone',
+            revertDuration: 100,
+            revert: 'invalid',
+            appendTo: 'body',
+            scroll: false,
+            start: function(event, ui) {
+                $(ui.helper).css({ backgroundColor: 'white' })
+            }
+        })
+    }
+
+    function initDroppableSessionsWidget() {
+        $('.unscheduled-sessions-widget').droppable({
+            accept: '.draggable-session-card',
+            drop: function(event, ui) {
+                $(ui.draggable).detach().removeAttr('style').prependTo(this)
+                $(ui.draggable).removeClass('small medium large')
+                if ($(ui.draggable).data('scheduled')) {
+                    unschedule($(ui.draggable))
+                }
+            }
+        })
+    }
+
+    function unschedule($removed) {
+        $.ajax({
+            url: $removed.data('unscheduleTimeSlotPath'),
+            method: 'patch',
+            data: { time_slot: { program_session_id: '' } }
+        })
+    }
+
+    window.Schedule.Drag = {
+        init: init,
+        initDraggableSession: initDraggableSession,
+        unschedule: unschedule,
+    }
+
+
+}) (jQuery, window)
+
+$(function() {
+    window.Schedule.Drag.init()
+})