From 02cbe23e78e40d19e022b0cec843a44947ed9346 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Fri, 1 Sep 2017 12:35:38 -0400
Subject: [PATCH] (js) New sgCalendarListItem component

---
 UI/Templates/SchedulerUI/UIxCalMainView.wox   | 309 ++++----------
 .../js/Scheduler/CalendarsController.js       | 251 +----------
 .../Scheduler/sgCalendarListItem.directive.js | 394 ++++++++++++++++++
 3 files changed, 484 insertions(+), 470 deletions(-)
 create mode 100644 UI/WebServerResources/js/Scheduler/sgCalendarListItem.directive.js

diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index 15cb7c4df..b4ab6d7db 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -43,7 +43,7 @@
         <!-- User's calendars -->
         <section>
           <md-subheader class="sg-md-subheader--with-secondary-icon"
-                        md-colors="::{background: 'default-background-300'}">
+                        md-colors="::{color: 'default-background-700', background: 'default-background-300'}">
             <div layout="row" layout-align="space-between center">
               <span><var:string label:value="Calendars"/></span>
               <md-button class="sg-icon-button"
@@ -55,99 +55,19 @@
           </md-subheader>
           <md-list ng-model="app.service.$calendars"
                    as-sortable="app.sortableCalendars" is-disabled="!app.sortableMode">
-            <md-list-item ng-repeat="calendar in app.service.$calendars | filter:app.filter"
-                          as-sortable-item="as-sortable-item">
-              <md-switch ng-model="calendar.active"
-                         ng-class="calendar.getClassName('md-switch')"
-                         ng-true-value="1"
-                         ng-false-value="0"
-                         label:aria-label="Enable"><!-- enable --></md-switch>
-              <p class="sg-item-name"
-                 ng-dblclick="app.editFolder(calendar)"
-                 ng-show="app.editMode != calendar.id">
-                <span ng-bind="calendar.name"><!-- name --></span>
-                <md-tooltip md-delay="1000" md-autohide="true" ng-bind="calendar.name"><!-- tooltip --></md-tooltip>
-                <span class="sg-counter-badge" ng-show="calendar.activeTasks" ng-bind="calendar.activeTasks"><!-- active tasks count --></span>
-              </p>
-              <md-input-container class="md-flex"
-                                  ng-show="app.editMode == calendar.id">
-                <input class="sg-item-name" type="text"
-                       label:aria-label="Name of the Calendar"
-                       ng-model="calendar.name"
-                       ng-blur="app.renameFolder(calendar)"
-                       sg-focus-on="calendarName_{{::calendar.id}}"
-                       sg-enter="app.renameFolder(calendar)"
-                       sg-escape="app.revertEditing(calendar)"/>
-              </md-input-container>
-              <md-button class="md-secondary md-icon-button" md-no-ink="md-no-ink"
-                         as-sortable-item-handle="as-sortable-item-handle">
-                <md-icon md-colors="::{color: 'accent-400'}">drag_handle</md-icon>
-              </md-button>
-              <md-menu class="md-secondary sg-list-sortable-hide" label:aria-label="Options">
-                <md-button class="md-icon-button" label:aria-label="Options"
-                           ng-click="$mdMenu.open()"
-                           md-menu-origin="md-menu-origin">
-                  <md-icon>more_vert</md-icon>
-                </md-button>
-                <md-menu-content width="2">
-                  <md-menu-item>
-                    <md-button ng-click="app.showOnly(calendar)">
-                      <var:string label:value="Show Only This Calendar"/>
-                    </md-button>
-                  </md-menu-item>
-                  <md-menu-item>
-                    <md-button ng-click="app.showAll()">
-                      <var:string label:value="Show All Calendars"/>
-                    </md-button>
-                  </md-menu-item>
-                  <md-menu-divider><!-- divider --></md-menu-divider>
-                  <md-menu-item>
-                    <md-button ng-click="app.showProperties(calendar)">
-                      <var:string label:value="Properties"/>
-                    </md-button>
-                  </md-menu-item>
-                  <md-menu-item>
-                    <md-button type="button" ng-click="app.editFolder(calendar)">
-                      <var:string label:value="Rename"/>
-                    </md-button>
-                  </md-menu-item>
-                  <md-menu-item ng-show="calendar.id != 'personal'">
-                    <md-button ng-click="app.confirmDelete(calendar)">
-                      <var:string label:value="Delete"/>
-                    </md-button>
-                  </md-menu-item>
-                  <md-menu-divider><!-- divider --></md-menu-divider>
-                  <md-menu-item>
-                    <md-button ng-click="app.showLinks(calendar)">
-                      <var:string label:value="Links to this Calendar"/>
-                    </md-button>
-                  </md-menu-item>
-                  <md-menu-divider><!-- divider --></md-menu-divider>
-                  <md-menu-item>
-                    <md-button ng-click="app.importCalendar($event, calendar)">
-                      <var:string label:value="Import"/>
-                    </md-button>
-                  </md-menu-item>
-                  <md-menu-item>
-                    <md-button ng-click="calendar.export()">
-                      <var:string label:value="Export"/>
-                    </md-button>
-                  </md-menu-item>
-                  <md-menu-divider><!-- divider --></md-menu-divider>
-                  <md-menu-item>
-                    <md-button ng-click="app.share(calendar)">
-                      <var:string label:value="Sharing..."/>
-                    </md-button>
-                  </md-menu-item>
-                </md-menu-content>
-              </md-menu>
+            <md-list-item
+                class="sg-calendar-list-item"
+                ng-repeat="calendar in app.service.$calendars | filter:app.filter"
+                as-sortable-item="as-sortable-item"
+                sg-calendar="calendar">
+              <!-- sgCalendarListItem directive -->
             </md-list-item>
           </md-list>
         </section>
         <!-- Subscriptions -->
         <section>
           <md-subheader class="sg-md-subheader--with-secondary-icon"
-                        md-colors="::{background: 'default-background-300'}">
+                        md-colors="::{color: 'default-background-700', background: 'default-background-300'}">
             <div layout="row" layout-align="space-between center">
               <span><var:string label:value="Subscriptions"/></span>
               <md-button class="sg-icon-button"
@@ -160,85 +80,22 @@
           </md-subheader>
           <md-list ng-model="app.service.$subscriptions"
                    as-sortable="app.sortableCalendars" is-disabled="!app.sortableMode">
-            <md-list-item ng-repeat="calendar in app.service.$subscriptions | filter:app.filter"
-                          as-sortable-item="as-sortable-item">
-              <md-switch ng-model="calendar.active"
-                           ng-class="calendar.getClassName('md-switch')"
-                           ng-true-value="1"
-                           ng-false-value="0"
-                           label:aria-label="Enable"><!-- enable --></md-switch>
-              <p class="sg-item-name"
-                 ng-dblclick="app.editFolder(calendar)"
-                 ng-show="app.editMode != calendar.id">
-                <span ng-bind="calendar.name"><!-- name --></span>
-                <md-tooltip md-delay="1000" md-autohide="true" ng-bind="calendar.name"><!-- tooltip --></md-tooltip>
-                <span class="sg-counter-badge" ng-show="calendar.activeTasks" ng-bind="calendar.activeTasks"><!-- active tasks count --></span>
-              </p>
-              <md-input-container class="md-flex"
-                                  ng-show="app.editMode == calendar.id">
-                <input class="sg-item-name" type="text"
-                       label:aria-label="Name of the Calendar"
-                       ng-model="calendar.name"
-                       ng-blur="app.renameFolder(calendar)"
-                       sg-focus-on="calendarName_{{::calendar.id}}"
-                       sg-enter="app.renameFolder(calendar)"
-                       sg-escape="app.revertEditing(calendar)"/>
-              </md-input-container>
-              <md-button class="md-secondary md-icon-button" md-no-ink="md-no-ink"
-                         as-sortable-item-handle="as-sortable-item-handle">
-                <md-icon md-colors="::{color: 'accent-400'}">drag_handle</md-icon>
-              </md-button>
-              <md-menu class="md-secondary sg-list-sortable-hide" label:aria-label="Options">
-                <md-button class="md-icon-button" label:aria-label="Options"
-                           ng-click="$mdMenu.open()"
-                           md-menu-origin="md-menu-origin">
-                  <md-icon>more_vert</md-icon>
-                </md-button>
-                <md-menu-content width="2">
-                  <md-menu-item>
-                    <md-button ng-click="app.showOnly(calendar)">
-                      <var:string label:value="Show Only This Calendar"/>
-                    </md-button>
-                  </md-menu-item>
-                  <md-menu-item>
-                    <md-button ng-click="app.showAll()">
-                      <var:string label:value="Show All Calendars"/>
-                    </md-button>
-                  </md-menu-item>
-                  <md-menu-divider><!-- divider --></md-menu-divider>
-                  <md-menu-item>
-                    <md-button ng-click="app.showProperties(calendar)">
-                      <var:string label:value="Properties"/>
-                    </md-button>
-                  </md-menu-item>
-                  <md-menu-item>
-                    <md-button type="button" ng-click="app.editFolder(calendar)">
-                      <var:string label:value="Rename"/>
-                    </md-button>
-                  </md-menu-item>
-                  <md-menu-item>
-                    <md-button ng-click="app.confirmDelete(calendar)">
-                      <var:string label:value="Unsubscribe Calendar"/>
-                    </md-button>
-                  </md-menu-item>
-                  <md-menu-divider><!-- divider --></md-menu-divider>
-                  <md-menu-item>
-                    <md-button ng-click="app.showLinks(calendar)">
-                      <var:string label:value="Links to this Calendar"/>
-                    </md-button>
-                  </md-menu-item>
-                </md-menu-content>
-              </md-menu>
+            <md-list-item
+                class="sg-calendar-list-item"
+                ng-repeat="calendar in app.service.$subscriptions | filter:app.filter"
+                as-sortable-item="as-sortable-item"
+                sg-calendar="calendar">
+              <!-- sgCalendarListItem directive -->
             </md-list-item>
           </md-list>
         </section>
         <!-- Web Calendars -->
         <section>
           <md-subheader class="sg-md-subheader--with-secondary-icon"
-                        md-colors="::{background: 'default-background-300'}">
+                        md-colors="::{color: 'default-background-700', background: 'default-background-300'}">
             <div layout="row" layout-align="space-between center">
               <span><var:string label:value="Web Calendars"/></span>
-              <md-button class="sg-icon-button"
+              <md-button class="md-icon-button"
                          label:aria-label="Subscribe to a web calendar..."
                          ng-click="app.addWebCalendar()">
                 <md-icon>add_circle_outline</md-icon>
@@ -247,67 +104,12 @@
           </md-subheader>
           <md-list ng-model="app.service.$webcalendars"
                    as-sortable="app.sortableCalendars" is-disabled="!app.sortableMode">
-            <md-list-item ng-repeat="calendar in app.service.$webcalendars | filter:app.filter"
-                          as-sortable-item="as-sortable-item">
-              <md-switch ng-model="calendar.active"
-                           ng-class="calendar.getClassName('md-switch')"
-                           ng-true-value="1"
-                           ng-false-value="0"
-                           label:aria-label="Enable"><!-- enable --></md-switch>
-              <p class="sg-item-name"
-                 ng-dblclick="app.editFolder(calendar)"
-                 ng-show="app.editMode != calendar.id">
-                <span class="ng-hide" ng-show="calendar.$error">
-                  <md-icon class="md-warn">warning</md-icon>
-                  <md-tooltip ng-bind="calendar.$error"><!-- error as a tooltip --></md-tooltip>
-                </span>
-                <md-tooltip md-delay="1000" md-autohide="true" ng-bind="calendar.name"><!-- tooltip --></md-tooltip>
-                <span ng-bind="calendar.name"><!-- name --></span>
-              </p>
-              <md-input-container class="md-flex"
-                                  ng-show="app.editMode == calendar.id">
-                <input class="sg-item-name" type="text"
-                       label:aria-label="Name of the Calendar"
-                       ng-model="calendar.name"
-                       ng-blur="app.renameFolder(calendar)"
-                       sg-focus-on="calendarName_{{calendar.id}}"
-                       sg-enter="app.renameFolder(calendar)"
-                       sg-escape="app.revertEditing(calendar)"/>
-              </md-input-container>
-              <md-button class="md-secondary md-icon-button" md-no-ink="md-no-ink"
-                         as-sortable-item-handle="as-sortable-item-handle">
-                <md-icon md-colors="::{color: 'accent-400'}">drag_handle</md-icon>
-              </md-button>
-              <md-menu class="md-secondary sg-list-sortable-hide" label:aria-label="Options">
-                <md-button class="md-icon-button" label:aria-label="Options"
-                           ng-click="$mdMenu.open()"
-                           md-menu-origin="md-menu-origin">
-                  <md-icon>more_vert</md-icon>
-                </md-button>
-                <md-menu-content width="2">
-                  <md-menu-item>
-                    <md-button ng-click="app.showProperties(calendar)">
-                      <var:string label:value="Properties"/>
-                    </md-button>
-                  </md-menu-item>
-                  <md-menu-item>
-                    <md-button type="button" ng-click="app.editFolder(calendar)">
-                      <var:string label:value="Rename"/>
-                    </md-button>
-                  </md-menu-item>
-                  <md-menu-item>
-                    <md-button ng-click="app.confirmDelete(calendar)">
-                      <var:string label:value="Delete"/>
-                    </md-button>
-                  </md-menu-item>
-                  <md-menu-divider><!-- divider --></md-menu-divider>
-                  <md-menu-item>
-                    <md-button ng-click="app.showLinks(calendar)">
-                      <var:string label:value="Links to this Calendar"/>
-                    </md-button>
-                  </md-menu-item>
-                </md-menu-content>
-              </md-menu>
+            <md-list-item
+                class="sg-calendar-list-item"
+                ng-repeat="calendar in app.service.$webcalendars | filter:app.filter"
+                as-sortable-item="as-sortable-item"
+                sg-calendar="calendar">
+              <!-- sgCalendarListItem directive -->
             </md-list-item>
           </md-list>
         </section>
@@ -317,7 +119,7 @@
         <div class="md-toolbar-tools sg-toolbar-tools--dense"
              md-colors="::{backgroundColor: 'background-500'}"
              ng-hide="app.sortableMode">
-          <md-input-container class="md-flex" md-no-float="md-no-float">
+          <md-input-container class="md-flex" md-no-float="true">
             <md-icon>search</md-icon>
             <input ng-model="app.filter.name" type="search" label:placeholder="Filter"/>
           </md-input-container>
@@ -712,6 +514,71 @@
     </section>
   </script>
 
+  <!-- template of contextual menu for a calendar -->
+  <script type="text/ng-template" id="UIxCalendarMenu">
+    <div md-whiteframe="3">
+      <md-menu-content width="2">
+        <md-menu-item>
+          <md-button ng-click="$menuCtrl.showOnly()">
+            <var:string label:value="Show Only This Calendar"/>
+          </md-button>
+        </md-menu-item>
+        <md-menu-item>
+          <md-button ng-click="$menuCtrl.showAll()">
+            <var:string label:value="Show All Calendars"/>
+          </md-button>
+        </md-menu-item>
+        <md-menu-divider><!-- divider --></md-menu-divider>
+        <md-menu-item>
+          <md-button ng-click="$menuCtrl.showProperties($event)">
+            <var:string label:value="Properties"/>
+          </md-button>
+        </md-menu-item>
+        <md-menu-item>
+          <md-button type="button" ng-click="$menuCtrl.editFolder()">
+            <var:string label:value="Rename"/>
+          </md-button>
+        </md-menu-item>
+        <md-menu-item ng-show="$menuCtrl.calendar.id != 'personal'">
+          <md-button ng-click="$menuCtrl.confirmDelete($event)"
+                     ng-switch="$menuCtrl.calendar.isSubscription">
+            <span ng-switch-when="true"><var:string label:value="Unsubscribe Calendar"/></span>
+            <span ng-switch-when="false"><var:string label:value="Delete"/></span>
+          </md-button>
+        </md-menu-item>
+        <md-menu-divider><!-- divider --></md-menu-divider>
+        <md-menu-item>
+          <md-button ng-click="$menuCtrl.showLinks($event)">
+            <var:string label:value="Links to this Calendar"/>
+          </md-button>
+        </md-menu-item>
+        <md-menu-divider
+            ng-hide="::($menuCtrl.calendar.isSubscription || $menuCtrl.calendar.isWebCalendar)">
+          <!-- divider -->
+        </md-menu-divider>
+        <md-menu-item ng-hide="::($menuCtrl.calendar.isSubscription || $menuCtrl.calendar.isWebCalendar)">
+          <md-button ng-click="$menuCtrl.importCalendar($event)">
+            <var:string label:value="Import"/>
+          </md-button>
+        </md-menu-item>
+        <md-menu-item ng-hide="::($menuCtrl.calendar.isSubscription || $menuCtrl.calendar.isWebCalendar)">
+          <md-button ng-click="$menuCtrl.calendar.export()">
+            <var:string label:value="Export"/>
+          </md-button>
+        </md-menu-item>
+        <md-menu-divider
+            ng-hide="::($menuCtrl.calendar.isSubscription || $menuCtrl.calendar.isWebCalendar)">
+          <!-- divider -->
+        </md-menu-divider>
+        <md-menu-item ng-hide="::($menuCtrl.calendar.isSubscription || $menuCtrl.calendar.isWebCalendar)">
+          <md-button ng-click="$menuCtrl.share()">
+            <var:string label:value="Sharing..."/>
+          </md-button>
+        </md-menu-item>
+      </md-menu-content>
+    </div>
+  </script>
+
   <!-- modal inner content for acl editor -->
   <script type="text/ng-template" id="UIxUserRightsEditor">
     <var:component className="UIxCalUserRightsEditor" />
diff --git a/UI/WebServerResources/js/Scheduler/CalendarsController.js b/UI/WebServerResources/js/Scheduler/CalendarsController.js
index ee134047c..2a70b7087 100644
--- a/UI/WebServerResources/js/Scheduler/CalendarsController.js
+++ b/UI/WebServerResources/js/Scheduler/CalendarsController.js
@@ -6,26 +6,15 @@
   /**
    * @ngInject
    */
-  CalendarsController.$inject = ['$rootScope', '$scope', '$window', '$mdDialog', '$log', '$mdToast', 'FileUploader', 'sgFocus', 'Dialog', 'sgSettings', 'Preferences', 'Calendar', 'User', 'stateCalendars'];
-  function CalendarsController($rootScope, $scope, $window, $mdDialog, $log, $mdToast, FileUploader, focus, Dialog, Settings, Preferences, Calendar, User, stateCalendars) {
+  CalendarsController.$inject = ['$rootScope', '$scope', '$window', '$mdDialog', '$log', '$mdToast', 'Dialog', 'sgSettings', 'Preferences', 'Calendar'];
+  function CalendarsController($rootScope, $scope, $window, $mdDialog, $log, $mdToast, Dialog, Settings, Preferences, Calendar) {
     var vm = this;
 
     vm.activeUser = Settings.activeUser;
     vm.service = Calendar;
     vm.newCalendar = newCalendar;
     vm.addWebCalendar = addWebCalendar;
-    vm.confirmDelete = confirmDelete;
-    vm.editFolder = editFolder;
-    vm.revertEditing = revertEditing;
-    vm.renameFolder = renameFolder;
-    vm.share = share;
-    vm.importCalendar = importCalendar;
-    vm.showOnly = showOnly;
-    vm.showAll = showAll;
-    vm.showLinks = showLinks;
-    vm.showProperties = showProperties;
     vm.subscribeToFolder = subscribeToFolder;
-    // vm.today = today;
 
     vm.filter = { name: '' };
     vm.sortableMode = false;
@@ -164,234 +153,6 @@
       }
     }
 
-    function confirmDelete(folder) {
-      if (folder.isSubscription) {
-        // Unsubscribe without confirmation
-        folder.$delete()
-          .catch(function(data, status) {
-            Dialog.alert(l('An error occured while deleting the calendar "%{0}".', folder.name),
-                         l(data.error));
-          });
-      }
-      else {
-        Dialog.confirm(l('Warning'), l('Are you sure you want to delete the calendar "%{0}"?', folder.name),
-                       { ok: l('Delete') })
-          .then(function() {
-            folder.$delete()
-              .catch(function(data, status) {
-                Dialog.alert(l('An error occured while deleting the calendar "%{0}".', folder.name),
-                             l(data.error));
-              });
-          });
-      }
-    }
-
-    function importCalendar($event, folder) {
-      $mdDialog.show({
-        parent: angular.element(document.body),
-        targetEvent: $event,
-        clickOutsideToClose: true,
-        escapeToClose: true,
-        templateUrl: 'UIxCalendarImportDialog',
-        controller: CalendarImportDialogController,
-        controllerAs: '$CalendarImportDialogController',
-        locals: {
-          folder: folder
-        }
-      });
-
-      /**
-       * @ngInject
-       */
-      CalendarImportDialogController.$inject = ['scope', '$mdDialog', 'folder'];
-      function CalendarImportDialogController(scope, $mdDialog, folder) {
-        var vm = this;
-
-        vm.uploader = new FileUploader({
-          url: ApplicationBaseURL + [folder.id, 'import'].join('/'),
-          autoUpload: true,
-          queueLimit: 1,
-          filters: [{ name: filterByExtension, fn: filterByExtension }],
-          onSuccessItem: function(item, response, status, headers) {
-            var msg;
-
-            $mdDialog.hide();
-
-            if (response.imported === 0)
-              msg = l('No event was imported.');
-            else {
-              msg = l('A total of %{0} events were imported in the calendar.', response.imported);
-              $rootScope.$emit('calendars:list');
-            }
-
-            $mdToast.show(
-              $mdToast.simple()
-                .content(msg)
-                .position('top right')
-                .hideDelay(3000));
-          },
-          onErrorItem: function(item, response, status, headers) {
-            $mdToast.show({
-              template: [
-                '<md-toast>',
-                '  <div class="md-toast-content">',
-                '    <md-icon class="md-warn md-hue-1">error_outline</md-icon>',
-                '    <span>' + l('An error occurred while importing calendar.') + '</span>',
-                '  </div>',
-                '</md-toast>'
-              ].join(''),
-              position: 'top right',
-              hideDelay: 3000
-            });
-          }
-        });
-
-        vm.close = function() {
-          $mdDialog.hide();
-        };
-
-        function filterByExtension(item) {
-          var isTextFile = item.type.indexOf('text') === 0 ||
-              /\.(ics)$/.test(item.name);
-
-          if (!isTextFile)
-            $mdToast.show({
-              template: [
-                '<md-toast>',
-                '  <div class="md-toast-content">',
-                '    <md-icon class="md-warn md-hue-1">error_outline</md-icon>',
-                '    <span>' + l('Select an iCalendar file (.ics).') + '</span>',
-                '  </div>',
-                '</md-toast>'
-              ].join(''),
-              position: 'top right',
-              hideDelay: 3000
-            });
-
-          return isTextFile;
-        }
-      }
-    }
-
-    function showOnly(calendar) {
-      _.forEach(Calendar.$findAll(), function(o) {
-        if (calendar.id == o.id)
-          o.active = 1;
-        else
-          o.active = 0;
-      });
-    }
-
-    function showAll() {
-      _.forEach(Calendar.$findAll(), function(o) { o.active = 1; });
-    }
-
-    function showLinks(calendar) {
-      $mdDialog.show({
-        parent: angular.element(document.body),
-        clickOutsideToClose: true,
-        escapeToClose: true,
-        templateUrl: calendar.id + '/links',
-        controller: LinksDialogController,
-        controllerAs: 'links',
-        locals: {
-          calendar: calendar
-        }
-      });
-      
-      /**
-       * @ngInject
-       */
-      LinksDialogController.$inject = ['$mdDialog', 'calendar'];
-      function LinksDialogController($mdDialog, calendar) {
-        var vm = this;
-        vm.calendar = calendar;
-        vm.close = close;
-
-        function close() {
-          $mdDialog.hide();
-        }
-      }
-    }
-
-    function showProperties(calendar) {
-      var color = calendar.color;
-      $mdDialog.show({
-        templateUrl: calendar.id + '/properties',
-        controller: PropertiesDialogController,
-        controllerAs: 'properties',
-        clickOutsideToClose: true,
-        escapeToClose: true,
-        locals: {
-          srcCalendar: calendar
-        }
-      }).catch(function() {
-        // Restore original color when cancelling or closing the dialog
-        calendar.color = color;
-      });
-      
-      /**
-       * @ngInject
-       */
-      PropertiesDialogController.$inject = ['$scope', '$mdDialog', 'srcCalendar'];
-      function PropertiesDialogController($scope, $mdDialog, srcCalendar) {
-        var vm = this;
-
-        vm.calendar = new Calendar(srcCalendar.$omit());
-        vm.saveProperties = saveProperties;
-        vm.close = close;
-
-        $scope.$watch(function() { return vm.calendar.color; }, function() {
-          srcCalendar.color = vm.calendar.color;
-        });
-
-        function saveProperties() {
-          vm.calendar.$save();
-          // Refresh list instance
-          srcCalendar.init(vm.calendar.$omit());
-          $mdDialog.hide();
-        }
-
-        function close() {
-          $mdDialog.cancel();
-        }
-      }
-    }
-
-    function editFolder(folder) {
-      vm.calendarName = folder.name;
-      vm.editMode = folder.id;
-      focus('calendarName_' + folder.id);
-    }
-
-    function revertEditing(folder) {
-      folder.$reset();
-      vm.editMode = false;
-    }
-
-    function renameFolder(folder) {
-      folder.$rename()
-        .then(function(data) {
-          vm.editMode = false;
-        });
-    }
-
-    function share(calendar) {
-      calendar.$acl.$users().then(function() {
-        $mdDialog.show({
-          templateUrl: calendar.id + '/UIxAclEditor', // UI/Templates/UIxAclEditor.wox
-          controller: 'AclController', // from the ng module SOGo.Common
-          controllerAs: 'acl',
-          clickOutsideToClose: true,
-          escapeToClose: true,
-          locals: {
-            usersWithACL: calendar.$acl.users,
-            User: User,
-            folder: calendar
-          }
-        });
-      });
-    }
 
     // Callback of sgSubscribe directive
     function subscribeToFolder(calendarData) {
@@ -405,14 +166,6 @@
       });
     }
 
-    // function today() {
-    //   var fragments = $window.location.hash.split('/'),
-    //       state = fragments[1],
-    //       view = fragments[2],
-    //       now = new Date(),
-    //       path = ['#', state, view, now.getDayString()];
-    //   $window.location = path.join('/');
-    // }
   }
 
   angular
diff --git a/UI/WebServerResources/js/Scheduler/sgCalendarListItem.directive.js b/UI/WebServerResources/js/Scheduler/sgCalendarListItem.directive.js
new file mode 100644
index 000000000..366706586
--- /dev/null
+++ b/UI/WebServerResources/js/Scheduler/sgCalendarListItem.directive.js
@@ -0,0 +1,394 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+
+(function() {
+
+  /**
+   * sgCalendarListItem - A directive that defines the content of a md-list-item for a calendar.
+   * @memberof SOGo.SchedulerUI
+  */
+  function sgCalendarListItem() {
+    return {
+      restrict: 'C',
+      scope: {},
+      bindToController: {
+        calendar: '=sgCalendar'
+      },
+      template: [
+        '<md-switch ng-model="$ctrl.calendar.active"',
+        '           ng-class="$ctrl.calendar.getClassName(\'md-switch\')"',
+        '           ng-true-value="1"',
+        '           ng-false-value="0"',
+        '           aria-label="' + l('Enable') + '"></md-switch>',
+        '<p class="sg-item-name"',
+        '   ng-dblclick="$ctrl.editFolder($event)">',
+        '  <span ng-bind="$ctrl.calendar.name"></span>',
+        '  <md-tooltip md-delay="1000"',
+        '              md-autohide="true"',
+        '              ng-bind="$ctrl.calendar.name"></md-tooltip>',
+        '  <span class="sg-counter-badge ng-hide"',
+        '        ng-show="calendar.activeTasks"',
+        '        ng-bind="calendar.activeTasks"></span>',
+        '</p>',
+        '<md-input-container class="md-flex ng-hide">',
+        '  <input class="sg-item-name" type="text"',
+        '         aria-label="' + l('Name of the Calendar') + '"',
+        '         ng-blur="$ctrl.saveFolder($event)"',
+        '         sg-enter="$ctrl.saveFolder($event)"',
+        '         sg-escape="$ctrl.revertEditing()" />',
+        '</md-input-container>',
+        '<md-button class="md-secondary md-icon-button" ',
+        '           as-sortable-item-handle="as-sortable-item-handle">',
+        '  <md-icon md-colors="::{color: \'accent-400\'}">drag_handle</md-icon>',
+        '</md-button>',
+        '<md-icon class="md-menu sg-list-sortable-hide"',
+        '         ng-click="$ctrl.showMenu($event)"',
+        '         aria-label="' + l("Options") + '">more_vert</md-icon>'
+      ].join(''),
+      controller: 'sgCalendarListItemController',
+      controllerAs: '$ctrl'
+    };
+  }
+
+  /**
+   * @ngInject
+   */
+  sgCalendarListItemController.$inject = ['$scope', '$element', '$mdToast', '$mdPanel', '$mdMedia', '$mdSidenav', 'sgConstant', 'Dialog', 'Calendar'];
+  function sgCalendarListItemController($scope, $element, $mdToast, $mdPanel, $mdMedia, $mdSidenav, sgConstant, Dialog, Calendar) {
+    var $ctrl = this;
+
+
+    this.$onInit = function() {
+      this.editMode = false;
+    };
+
+
+    this.$postLink = function() {
+      this.clickableElement = $element.find('p')[0];
+      this.nameElements = this.clickableElement.getElementsByClassName('sg-calendar-name');
+      this.inputContainer = $element.find('md-input-container')[0];
+      this.inputElement = $element.find('input')[0];
+      this.moreOptionsButton = _.last($element.find('md-icon'));
+      this.updateCalendarName();
+    };
+
+
+    this.updateCalendarName = function() {
+      _.forEach(this.nameElements, function(e) {
+        e.innerHTML = $ctrl.calendar.name;
+      });
+    };
+
+
+    this.editFolder = function($event) {
+      this.editMode = true;
+      this.inputElement.value = this.calendar.name;
+      this.clickableElement.classList.add('ng-hide');
+      this.inputContainer.classList.remove('ng-hide');
+      this.inputElement.focus();
+      this.inputElement.select();
+      if ($event) {
+        $event.stopPropagation();
+        $event.preventDefault();
+      }
+    };
+
+
+    this.saveFolder = function($event) {
+      if (this.inputElement.disabled)
+        return;
+
+      this.calendar.name = this.inputElement.value;
+      this.inputElement.disabled = true;
+      this.calendar.$rename()
+        .then(function(data) {
+          $ctrl.editMode = false;
+          $ctrl.inputContainer.classList.add('ng-hide');
+          $ctrl.clickableElement.classList.remove('ng-hide');
+          $ctrl.updateCalendarName();
+        })
+        .finally(function() {
+          $ctrl.inputElement.disabled = false;
+        });
+    };
+
+
+    this.revertEditing = function() {
+      this.editMode = false;
+      this.clickableElement.classList.remove('ng-hide');
+      this.inputContainer.classList.add('ng-hide');
+      this.inputElement.value = this.calendar.name;
+    };
+
+
+    this.confirmDelete = function() {
+      if (this.calendar.isSubscription) {
+        // Unsubscribe without confirmation
+        this.calendar.$delete()
+          .catch(function(data, status) {
+            Dialog.alert(l('An error occured while deleting the calendar "%{0}".', $ctrl.calendar.name),
+                         l(data.error));
+          });
+      }
+      else {
+        Dialog.confirm(l('Warning'), l('Are you sure you want to delete the calendar "%{0}"?', this.calendar.name),
+                       { ok: l('Delete') })
+          .then(function() {
+            $ctrl.calendar.$delete()
+              .catch(function(data, status) {
+                Dialog.alert(l('An error occured while deleting the calendar "%{0}".', $ctrl.calendar.name),
+                             l(data.error));
+              });
+          });
+      }
+    };
+
+
+    this.showMenu = function($event) {
+      var panelPosition = $mdPanel.newPanelPosition()
+          .relativeTo(this.moreOptionsButton)
+          .addPanelPosition(
+            $mdPanel.xPosition.ALIGN_START,
+            $mdPanel.yPosition.ALIGN_TOPS
+          );
+
+      var panelAnimation = $mdPanel.newPanelAnimation()
+          .openFrom(this.moreOptionsButton)
+          .duration(100)
+          .withAnimation($mdPanel.animation.FADE);
+
+      var config = {
+        attachTo: angular.element(document.body),
+        locals: {
+          itemCtrl: this,
+          calendar: this.calendar,
+          editFolder: angular.bind(this, this.editFolder),
+          confirmDelete: angular.bind(this, this.confirmDelete)
+        },
+        bindToController: true,
+        controller: MenuController,
+        controllerAs: '$menuCtrl',
+        position: panelPosition,
+        animation: panelAnimation,
+        targetEvent: $event,
+        templateUrl: 'UIxCalendarMenu',
+        trapFocus: true,
+        clickOutsideToClose: true,
+        escapeToClose: true,
+        focusOnOpen: true
+      };
+
+      $mdPanel.open(config)
+        .then(function(panelRef) {
+          // Automatically close panel when clicking inside of it
+          panelRef.panelEl.one('click', function() {
+            panelRef.close();
+          });
+        });
+
+      MenuController.$inject = ['mdPanelRef', '$mdDialog', 'FileUploader', 'User'];
+      function MenuController(mdPanelRef, $mdDialog, FileUploader, User) {
+        var $menuCtrl = this;
+
+        this.showOnly = function() {
+          _.forEach(Calendar.$findAll(), function(o) {
+            if ($menuCtrl.calendar.id == o.id)
+              o.active = 1;
+            else
+              o.active = 0;
+          });
+        };
+
+        this.showAll = function() {
+          _.forEach(Calendar.$findAll(), function(o) { o.active = 1; });
+        };
+
+        this.showProperties = function() {
+          var color = this.calendar.color;
+          $mdDialog.show({
+            templateUrl: this.calendar.id + '/properties',
+            controller: PropertiesDialogController,
+            controllerAs: 'properties',
+            clickOutsideToClose: true,
+            escapeToClose: true,
+            locals: {
+              srcCalendar: this.calendar
+            }
+          }).catch(function() {
+            // Restore original color when cancelling or closing the dialog
+            $menuCtrl.calendar.color = color;
+          });
+
+          /**
+           * @ngInject
+           */
+          PropertiesDialogController.$inject = ['$scope', '$mdDialog', 'srcCalendar'];
+          function PropertiesDialogController($scope, $mdDialog, srcCalendar) {
+            var vm = this;
+
+            vm.calendar = new Calendar(srcCalendar.$omit());
+            vm.saveProperties = saveProperties;
+            vm.close = close;
+
+            $scope.$watch(function() { return vm.calendar.color; }, function() {
+              srcCalendar.color = vm.calendar.color;
+            });
+
+            function saveProperties() {
+              vm.calendar.$save();
+              // Refresh list instance
+              srcCalendar.init(vm.calendar.$omit());
+              $mdDialog.hide();
+            }
+
+            function close() {
+              $mdDialog.cancel();
+            }
+          }
+        };
+
+        this.showLinks = function() {
+          $mdDialog.show({
+            parent: angular.element(document.body),
+            clickOutsideToClose: true,
+            escapeToClose: true,
+            templateUrl: this.calendar.id + '/links',
+            controller: LinksDialogController,
+            controllerAs: 'links',
+            locals: {
+              calendar: this.calendar
+            }
+          });
+
+          /**
+           * @ngInject
+           */
+          LinksDialogController.$inject = ['$mdDialog', 'calendar'];
+          function LinksDialogController($mdDialog, calendar) {
+            var vm = this;
+            vm.calendar = calendar;
+            vm.close = close;
+
+            function close() {
+              $mdDialog.hide();
+            }
+          }
+        };
+
+        this.importCalendar = function() {
+          $mdDialog.show({
+            parent: angular.element(document.body),
+            targetEvent: $event,
+            clickOutsideToClose: true,
+            escapeToClose: true,
+            templateUrl: 'UIxCalendarImportDialog',
+            controller: CalendarImportDialogController,
+            controllerAs: '$CalendarImportDialogController',
+            locals: {
+              folder: this.calendar
+            }
+          });
+
+          /**
+           * @ngInject
+           */
+          CalendarImportDialogController.$inject = ['scope', '$mdDialog', 'folder'];
+          function CalendarImportDialogController(scope, $mdDialog, folder) {
+            var vm = this;
+
+            vm.uploader = new FileUploader({
+              url: ApplicationBaseURL + [folder.id, 'import'].join('/'),
+              autoUpload: true,
+              queueLimit: 1,
+              filters: [{ name: filterByExtension, fn: filterByExtension }],
+              onSuccessItem: function(item, response, status, headers) {
+                var msg;
+
+                $mdDialog.hide();
+
+                if (response.imported === 0)
+                  msg = l('No event was imported.');
+                else {
+                  msg = l('A total of %{0} events were imported in the calendar.', response.imported);
+                  $rootScope.$emit('calendars:list');
+                }
+
+                $mdToast.show(
+                  $mdToast.simple()
+                    .content(msg)
+                    .position('top right')
+                    .hideDelay(3000));
+              },
+              onErrorItem: function(item, response, status, headers) {
+                $mdToast.show({
+                  template: [
+                    '<md-toast>',
+                    '  <div class="md-toast-content">',
+                    '    <md-icon class="md-warn md-hue-1">error_outline</md-icon>',
+                    '    <span>' + l('An error occurred while importing calendar.') + '</span>',
+                    '  </div>',
+                    '</md-toast>'
+                  ].join(''),
+                  position: 'top right',
+                  hideDelay: 3000
+                });
+              }
+            });
+
+            vm.close = function() {
+              $mdDialog.hide();
+            };
+
+            function filterByExtension(item) {
+              var isTextFile = item.type.indexOf('text') === 0 ||
+                  /\.(ics)$/.test(item.name);
+
+              if (!isTextFile)
+                $mdToast.show({
+                  template: [
+                    '<md-toast>',
+                    '  <div class="md-toast-content">',
+                    '    <md-icon class="md-warn md-hue-1">error_outline</md-icon>',
+                    '    <span>' + l('Select an iCalendar file (.ics).') + '</span>',
+                    '  </div>',
+                    '</md-toast>'
+                  ].join(''),
+                  position: 'top right',
+                  hideDelay: 3000
+                });
+
+              return isTextFile;
+            }
+          }
+        };
+
+        this.share = function() {
+          // Fetch list of ACL users
+          this.calendar.$acl.$users().then(function() {
+            // Show ACL editor
+            $mdDialog.show({
+              templateUrl: $menuCtrl.calendar.id + '/UIxAclEditor', // UI/Templates/UIxAclEditor.wox
+              controller: 'AclController', // from the ng module SOGo.Common
+              controllerAs: 'acl',
+              clickOutsideToClose: true,
+              escapeToClose: true,
+              locals: {
+                usersWithACL: $menuCtrl.calendar.$acl.users,
+                User: User,
+                folder: $menuCtrl.calendar
+              }
+            });
+          });
+        };
+
+      } // MenuController
+
+
+    };
+  }
+
+
+  angular
+    .module('SOGo.SchedulerUI')
+    .controller('sgCalendarListItemController', sgCalendarListItemController)
+    .directive('sgCalendarListItem', sgCalendarListItem);
+})();