From 6aae6357c42a1a10b52d3f529a2cb7a00f5e95bd Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Mon, 9 May 2016 15:51:54 -0400
Subject: [PATCH] (js) Improve events display with many categories

---
 .../UIxAppointmentEditorTemplate.wox          |  8 +++++++-
 .../js/Scheduler/Component.service.js         | 20 ++++++++++++++-----
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
index 88e3ba3dd..86ffc2d27 100644
--- a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
@@ -46,7 +46,13 @@
           </md-input-container>
           <!-- categories -->
           <md-chips ng-model="editor.component.categories">
-            <md-autocomplete
+            <md-chip-template>
+              <span class="sg-chip-color">
+                <span ng-style="{ 'background-color': editor.component.constructor.$categories[$chip] }"><!-- color --></span>
+              </span>
+              <span>{{$chip}}</span>
+            </md-chip-template>
+           <md-autocomplete
                 md-selected-item="editor.categories.selected"
                 md-search-text="editor.categories.searchText"
                 md-items="category in editor.component.constructor.filterCategories(editor.categories.searchText)"
diff --git a/UI/WebServerResources/js/Scheduler/Component.service.js b/UI/WebServerResources/js/Scheduler/Component.service.js
index 8eccf3e6e..714fc4407 100644
--- a/UI/WebServerResources/js/Scheduler/Component.service.js
+++ b/UI/WebServerResources/js/Scheduler/Component.service.js
@@ -285,17 +285,22 @@
         deferred = Component.$q.defer();
 
     params = { view: view.toLowerCase(), sd: startDate.getDayString(), ed: endDate.getDayString() };
-    Component.$log.debug('eventsblocks ' + JSON.stringify(params, undefined, 2));
     futureComponentData = this.$$resource.fetch(null, 'eventsblocks', params);
     futureComponentData.then(function(views) {
       var reduceComponent, associateComponent;
 
       reduceComponent = function(objects, eventData, i) {
         var componentData = _.zipObject(this.eventsFields, eventData),
-            start = new Date(componentData.c_startdate * 1000);
+            start = new Date(componentData.c_startdate * 1000),
+            component;
         componentData.hour = start.getHourString();
         componentData.blocks = [];
-        objects.push(new Component(componentData));
+        component = new Component(componentData);
+        // Filter out categories for which there's no associated color
+        component.categories = _.filter(component.categories, function(name) {
+          return Component.$Preferences.defaults.SOGoCalendarCategoriesColors[name];
+        });
+        objects.push(component);
         return objects;
       };
 
@@ -402,8 +407,13 @@
 
         // Instanciate Component objects
         _.reduce(data[type], function(components, componentData, i) {
-          var data = _.zipObject(fields, componentData);
-          components.push(new Component(data));
+          var data = _.zipObject(fields, componentData), component;
+          component = new Component(data);
+          // Filter out categories for which there's no associated color
+          component.categories = _.filter(component.categories, function(name) {
+            return Component.$Preferences.defaults.SOGoCalendarCategoriesColors[name];
+          });
+          components.push(component);
           return components;
         }, components);