Display all-day events in day & week views

All-day events are now displayed and the day/week views are now built using flexbox.

UI/WebServerResources/js/Scheduler/CalendarController.js

@@ -10,13 +10,15 @@
   function CalendarController($scope, $state, $stateParams, $timeout, $interval, $log, focus, Calendar, Component, stateEventsBlocks) {
     var vm = this;
 
-    vm.blocks = stateEventsBlocks;
+    vm.blocks = stateEventsBlocks.blocks;
+    vm.allDayBlocks = stateEventsBlocks.allDayBlocks;
     vm.changeView = changeView;
 
     // Refresh current view when the list of calendars is modified
     $scope.$on('calendars:list', function() {
       Component.$eventsBlocksForView($stateParams.view, $stateParams.day.asDate()).then(function(data) {
-        vm.blocks = data;
+        vm.blocks = data.blocks;
+        vm.allDayBlocks = data.allDayBlocks;
       });
     });
 

UI/WebServerResources/js/Scheduler/Component.service.js

@@ -278,7 +278,7 @@
     futureComponentData = this.$$resource.fetch(null, 'eventsblocks', params);
     futureComponentData.then(function(data) {
       Component.$timeout(function() {
-        var components = [], blocks = {};
+        var components = [], blocks = {}, allDayBlocks = {}, dates = [];
 
         // Instantiate Component objects
         _.reduce(data.events, function(objects, eventData, i) {
@@ -294,18 +294,35 @@
           block.component = components[block.nbr];
         });
 
-        // Convert array of blocks to object with days as keys
+        // Associate Component objects to all-day blocks positions
+        _.each(_.flatten(data.allDayBlocks), function(allDayBlock) {
+          allDayBlock.component = components[allDayBlock.nbr];
+        });
+
+        // Build array of dates
         for (i = 0; i < data.blocks.length; i++) {
-          blocks[startDate.getDayString()] = data.blocks[i];
+          dates.push(startDate.getDayString());
           startDate.addDays(1);
         }
 
-        Component.$log.debug('blocks ready (' + _.keys(blocks).length + ')');
+        // Convert array of blocks to object with days as keys
+        for (i = 0; i < data.blocks.length; i++) {
+          blocks[dates[i]] = data.blocks[i];
+        }
+
+        // Convert array of all-day blocks to object with days as keys
+        for (i = 0; i < data.allDayBlocks.length; i++) {
+          allDayBlocks[dates[i]] = data.allDayBlocks[i];
+        }
+
+        Component.$log.debug('blocks ready (' + _.flatten(data.blocks).length + ')');
+        Component.$log.debug('all day blocks ready (' + _.flatten(data.allDayBlocks).length + ')');
 
         // Save the blocks to the object model
         Component.$blocks = blocks;
+        Component.$allDayBlocks = allDayBlocks;
 
-        deferred.resolve(blocks);
+        deferred.resolve({ blocks: blocks, allDayBlocks: allDayBlocks });
       });
     }, deferred.reject);
 

UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js

@@ -34,11 +34,11 @@
         '      </div>',
         '      <div class="text">{{ block.component.c_title }}',
         '        <span class="icons">',
-        // Component has an alarm
+        //         Component has an alarm
         '          <md-icon ng-if="block.component.c_nextalarm" class="material-icons icon-alarm"></md-icon>',
-        // Component is confidential
+        //         Component is confidential
         '          <md-icon ng-if="block.component.c_classification == 1" class="material-icons icon-visibility-off"></md-icon>',
-        // Component is private
+        //         Component is private
         '          <md-icon ng-if="block.component.c_classification == 2" class="material-icons icon-vpn-key"></md-icon>',
         '       </span></div>',
         '    </div>',

UI/WebServerResources/scss/views/SchedulerUI.scss

@@ -6,27 +6,19 @@ $hours_margin: 50px;
 }
 
 .dayLabels {
-  color: sg-color($sogoBlue, 700);
-  height: 35px;
-  left: 0;
+  //color: sg-color($sogoBlue, 700);
   overflow: hidden;
-  position: relative;
   .day {
-    height: 100%;
-    position: absolute;
     text-align: center;
   }
 }
 
 .days {
-  left: 0;
-  right: 0;
-  top: 0;
-  margin-left: $hours_margin;
-  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
   .day {
     border-left: 1px solid sg-color($sogoPaper, 300);
-    position: absolute;
     .clickableHourCell {
       height: 40px;
       border-bottom: 1px solid sg-color($sogoPaper, 300);
@@ -34,24 +26,12 @@ $hours_margin: 50px;
   }
 }
 
-.daysViewFor1Days {
-  .day {
-    left: $hours_margin;
-    width: 100%;
-  }
-  .days {
-    margin-left: 0;
-  }
-}
-
+.daysViewFor1Days,
 .daysViewFor7Days {
+  margin-left: $hours_margin;
   .day {
-    width: (100% / 7);
-  }
-  $i: 0;
-  @while $i < 7 {
-    .day#{$i} { left: 1% * 100 / 7 * $i; }
-    $i: $i + 1;
+    flex-grow: 1;
+    flex-basis: 0;
   }
 }
 
@@ -66,31 +46,35 @@ $hours_margin: 50px;
   padding: 2px;
 }
 
+.hours {
+  color: sg-color($sogoBlue, 700);
+  display: inline-block;
+  float: left;
+  clear: left;
+  font-weight: $sg-font-light;
+  height: auto;
+  left: 0;
+  position: relative;
+  top: 0;
+  width: $hours_margin;
+  .hour {
+    border-bottom: 1px solid sg-color($sogoPaper, 300);
+    height: 40px;
+    left: 0;
+    padding: 2px;
+    position: relative;
+    right: 0;
+    top: 0;
+  }
+}
+
 .daysView {
   bottom: 0;
   overflow-x: hidden;
   overflow: auto;
-  position: relative;
   top: 0;
-  .hours {
-    color: sg-color($sogoBlue, 700);
-    display: inline-block;
-    float: left;
-    font-weight: $sg-font-light;
-    height: auto;
-    left: 0;
+  .hourCells {
     position: relative;
-    top: 0;
-    width: $hours_margin;
-    .hour {
-      border-bottom: 1px solid sg-color($sogoPaper, 300);
-      height: 40px;
-      left: 0;
-      padding: 2px;
-      position: relative;
-      right: 0;
-      top: 0;
-    }
   }
   .sg-event {
     border-radius: 10px;
@@ -98,6 +82,7 @@ $hours_margin: 50px;
     position: absolute;
     left: 0%;
     right: 0%;
+    overflow: hidden;
     $i: 0;
     @while $i < 96 { // number of 15-minutes blocks in a day
       &.starts#{$i} { top: 10px * $i; }
@@ -105,12 +90,12 @@ $hours_margin: 50px;
       $i: $i + 1;
     }
     .eventInside {
-      position: absolute;
       overflow: hidden;
-      top: 0px;
-      bottom: 0px;
-      left: 0px;
-      right: 0px;
+    }
+  }
+  &.daysHeader {
+    .sg-event {
+      position: relative;
     }
   }
 }
@@ -150,6 +135,9 @@ $hours_margin: 50px;
   right: 1px;
   bottom: 1px;
   overflow: hidden;
+  .allDays & {
+    position: relative;
+  }
 }
 
 .gradient > IMG {
@@ -166,7 +154,7 @@ $hours_margin: 50px;
 /* Attendees Editor */
 .attendees {
   overflow: hidden;
-  overflow-x: scroll;
+  overflow-x: auto;
   md-content {
     display: table-row;
   }
@@ -180,12 +168,13 @@ $hours_margin: 50px;
       }
     }
     md-list-item {
+      padding-left: 0;
       &:hover {
         background-color: initial;
       }
-      img {
-        margin-right: $mg/4;
-      }
+//      img {
+//        margin-right: $mg/4;
+//      }
     }
     .hours {
       font-size: 9px;