Review task/event viewer/editor

Components will now appear in dialogs instead of a right sidenav.

This commit also introduces read-only viewers for tasks and events.

UI/WebServerResources/js/Scheduler/CalendarListController.js

@@ -6,14 +6,16 @@
   /**
    * @ngInject
    */
-  CalendarListController.$inject = ['$scope', '$rootScope', '$timeout', '$state', 'sgFocus', 'encodeUriFilter', 'Dialog', 'sgSettings', 'Preferences', 'Calendar', 'Component', '$mdSidenav'];
-  function CalendarListController($scope, $rootScope, $timeout, $state, focus, encodeUriFilter, Dialog, Settings, Preferences, Calendar, Component, $mdSidenav) {
+  CalendarListController.$inject = ['$scope', '$timeout', '$state', '$mdDialog', 'encodeUriFilter', 'Dialog', 'Preferences', 'Calendar', 'Component'];
+  function CalendarListController($scope, $timeout, $state, $mdDialog, encodeUriFilter, Dialog, Preferences, Calendar, Component) {
     var vm = this;
 
     vm.component = Component;
     vm.componentType = 'events';
     vm.selectedList = 0;
     vm.selectComponentType = selectComponentType;
+    vm.openEvent = openEvent;
+    vm.openTask = openTask;
     vm.newComponent = newComponent;
     vm.filter = filter;
     vm.filteredBy = filteredBy;
@@ -42,13 +44,54 @@
       }
     }
 
-    function newComponent() {
-      var type = 'appointment';
+    function openEvent($event, event) {
+      openComponent($event, event, 'appointment');
+    }
+
+    function openTask($event, task) {
+      openComponent($event, task, 'task');
+    }
+
+    function openComponent($event, component, type) {
+      // UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox or
+      // UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox
+      var templateUrl = 'UIx' + type.capitalize() + 'ViewTemplate';
+      $mdDialog.show({
+        parent: angular.element(document.body),
+        targetEvent: $event,
+        clickOutsideToClose: true,
+        escapeToClose: true,
+        templateUrl: templateUrl,
+        controller: 'ComponentController',
+        controllerAs: 'viewer',
+        locals: {
+          stateComponent: component
+        }
+      });
+    }
+
+    function newComponent($event) {
+      var type = 'appointment', component;
 
       if (vm.componentType == 'tasks')
         type = 'task';
+      component = new Component({ pid: 'personal', type: type });
 
-      $state.go('calendars.newComponent', { calendarId: 'personal', componentType: type });
+      // UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox or
+      // UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
+      var templateUrl = 'UIx' + type.capitalize() + 'EditorTemplate';
+      $mdDialog.show({
+        parent: angular.element(document.body),
+        targetEvent: $event,
+        clickOutsideToClose: true,
+        escapeToClose: true,
+        templateUrl: templateUrl,
+        controller: 'ComponentEditorController',
+        controllerAs: 'editor',
+        locals: {
+          stateComponent: component
+        }
+      });
     }
 
     function filter(filterpopup) {

UI/WebServerResources/js/Scheduler/ComponentController.js

@@ -6,11 +6,55 @@
   /**
    * @ngInject
    */
-  ComponentController.$inject = ['$scope', '$log', '$q', '$timeout', '$state', '$previousState', '$mdSidenav', '$mdDialog', 'User', 'Calendar', 'Component', 'AddressBook', 'Card', 'stateCalendars', 'stateComponent'];
-  function ComponentController($scope, $log, $q, $timeout, $state, $previousState, $mdSidenav, $mdDialog, User, Calendar, Component, AddressBook, Card, stateCalendars, stateComponent) {
-    var vm = this;
+  ComponentController.$inject = ['$mdDialog', 'Calendar', 'stateComponent'];
+  function ComponentController($mdDialog, Calendar, stateComponent) {
+    var vm = this, component;
 
-    vm.calendars = stateCalendars;
+    vm.component = stateComponent;
+    vm.close = close;
+    vm.edit = edit;
+
+    // Load all attributes of component
+    if (angular.isUndefined(vm.component.$futureComponentData)) {
+      component = Calendar.$get(vm.component.c_folder).$getComponent(vm.component.c_name);
+      component.$futureComponentData.then(function() {
+        vm.component = component;
+      });
+    }
+
+    function close() {
+      $mdDialog.hide();
+    }
+
+    function edit() {
+      var type = (vm.component.component == 'vevent')? 'Appointment':'Task';
+      $mdDialog.hide().then(function() {
+        // UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox or
+        // UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
+        var templateUrl = 'UIx' + type + 'EditorTemplate';
+        $mdDialog.show({
+          parent: angular.element(document.body),
+          clickOutsideToClose: true,
+          escapeToClose: true,
+          templateUrl: templateUrl,
+          controller: 'ComponentEditorController',
+          controllerAs: 'editor',
+          locals: {
+            stateComponent: vm.component
+          }
+        });
+      });
+    }
+  }
+
+  /**
+   * @ngInject
+   */
+  ComponentEditorController.$inject = ['$scope', '$log', '$timeout', '$mdDialog', 'User', 'Calendar', 'Component', 'AddressBook', 'Card', 'stateComponent'];
+  function ComponentEditorController($scope, $log, $timeout, $mdDialog, User, Calendar, Component, AddressBook, Card, stateComponent) {
+    var vm = this, component;
+
+    vm.calendars = Calendar.$calendars;
     vm.component = stateComponent;
     vm.categories = {};
     vm.showRecurrenceEditor = vm.component.$hasCustomRepeat;
@@ -30,24 +74,6 @@
       hours: getHours()
     };
 
-    // Open sidenav when loading the view;
-    // Return to previous state when closing the sidenav.
-    $scope.$on('$viewContentLoaded', function(event) {
-      $timeout(function() {
-        $mdSidenav('right').open()
-          .then(function() {
-            $scope.$watch($mdSidenav('right').isOpen, function(isOpen, wasOpen) {
-              if (!isOpen) {
-                if ($previousState.get())
-                  $previousState.go()
-                else
-                  $state.go('calendars');
-              }
-            });
-          });
-      }, 100); // don't ask why
-    });
-
     $scope.$watch('editor.component.startDate', function(newStartDate, oldStartDate) {
       if (newStartDate) {
         $timeout(function() {
@@ -130,7 +156,7 @@
         vm.component.$save()
           .then(function(data) {
             $scope.$emit('calendars:list');
-            $mdSidenav('right').close();
+            $mdDialog.hide();
           }, function(data, status) {
             $log.debug('failed');
           });
@@ -143,7 +169,7 @@
         // Cancelling the creation of a component
         vm.component = null;
       }
-      $mdSidenav('right').close();
+      $mdDialog.hide();
     }
 
     function getDays() {
@@ -170,5 +196,6 @@
 
   angular
     .module('SOGo.SchedulerUI')  
-    .controller('ComponentController', ComponentController);
+    .controller('ComponentController', ComponentController)
+    .controller('ComponentEditorController', ComponentEditorController);
 })();