(js) Create new appointment from Calendar module

UI/Templates/SchedulerUI/UIxCalMainView.wox

@@ -319,7 +319,7 @@
           </md-content>
           <md-button class="iconButton md-fab md-fab-bottom-right md-accent hide-sm"
                      label:aria-label="New Appointment"
-                     ng-click="newComponent()">
+                     ng-click="list.newComponent()">
             <i class="md-icon-add"><!--icon--></i>
           </md-button>
         </div>

UI/WebServerResources/js/Appointments/component-model.js

@@ -12,6 +12,13 @@
     // Data is immediately available
     if (typeof futureComponentData.then !== 'function') {
       this.init(futureComponentData);
+      if (this.pid && !this.id) {
+        // Prepare for the creation of a new component;
+        // Get UID from the server.
+        var newComponentData = Component.$$resource.newguid(this.pid);
+        this.$unwrap(newComponentData);
+        this.isNew = true;
+      }
     }
     else {
       // The promise will be unwrapped first
@@ -226,6 +233,12 @@
     return deferred.promise;
   };
 
+  /**
+   * @function init
+   * @memberof Component.prototype
+   * @desc Extend instance with required attributes and new data.
+   * @param {object} data - attributes of component
+   */
   Component.prototype.init = function(data) {
     this.categories = [];
     angular.extend(this, data);
@@ -266,9 +279,12 @@
    * @desc Save the component to the server.
    */
   Component.prototype.$save = function() {
-    var _this = this;
+    var _this = this, options;
 
-    return Component.$$resource.save([this.pid, this.id].join('/'), this.$omit())
+    if (this.isNew)
+      options = { action: 'saveAs' + this.type.capitalize() };
+
+    return Component.$$resource.save([this.pid, this.id].join('/'), this.$omit(), options)
       .then(function(data) {
         // Make a copy of the data for an eventual reset
         _this.$shadowData = _this.$omit(true);

UI/WebServerResources/js/SchedulerUI.js

@@ -59,6 +59,22 @@
             }]
           }
         })
+        .state('calendars.newComponent', {
+          url: '/:calendarId/{componentType:(?:appointment|task)}/new',
+          views: {
+            componentEditor: {
+              templateUrl: 'UIxAppointmentEditorTemplate',
+              controller: 'ComponentController',
+              controllerAs: 'editor'
+            }
+          },
+          resolve: {
+            stateComponent: ['$stateParams', 'sgComponent', function($stateParams, Component) {
+              var component = new Component({ pid: $stateParams.calendarId, type: $stateParams.componentType });
+              return component;
+            }]
+          }
+        })
         .state('calendars.component', {
           url: '/:calendarId/event/:componentId',
           views: {
@@ -257,12 +273,13 @@
       };
     }])
   
-    .controller('CalendarListController', ['$scope', '$rootScope', '$timeout', 'sgFocus', 'encodeUriFilter', 'sgDialog', 'sgSettings', 'sgCalendar', 'sgComponent', '$mdSidenav', function($scope, $rootScope, $timeout, focus, encodeUriFilter, Dialog, Settings, Calendar, Component, $mdSidenav) {
+    .controller('CalendarListController', ['$scope', '$rootScope', '$timeout', '$state', 'sgFocus', 'encodeUriFilter', 'sgDialog', 'sgSettings', 'sgCalendar', 'sgComponent', '$mdSidenav', function($scope, $rootScope, $timeout, $state, focus, encodeUriFilter, Dialog, Settings, Calendar, Component, $mdSidenav) {
       var vm = this;
 
       vm.component = Component;
       vm.componentType = null;
       vm.selectComponentType = selectComponentType;
+      vm.newComponent = newComponent;
       // TODO: should reflect last state userSettings -> Calendar -> SelectedList
       vm.selectedList = 0;
       vm.selectComponentType('events');
@@ -276,6 +293,15 @@
         }
       }
 
+      function newComponent() {
+        var type = 'appointment';
+
+        if (vm.componentType == 'tasks')
+          type = 'task';
+
+        $state.go('calendars.newComponent', { calendarId: 'personal', componentType: type });
+      }
+
       // Refresh current list when the list of calendars is modified
       $scope.$on('calendars:list', function() {
         Component.$filter(vm.componentType);