From 58ff8139e9bcb654adc47c0e729ea8e24e2e1ca6 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Thu, 17 Sep 2015 10:33:12 -0400
Subject: [PATCH] Allow rename of calendars

---
 UI/Templates/SchedulerUI/UIxCalMainView.wox   |  91 ++++++--
 .../js/Scheduler/Calendar.service.js          | 211 ++++++++++++------
 .../js/Scheduler/CalendarsController.js       |  27 ++-
 .../js/Scheduler/Scheduler.app.js             |   2 +-
 4 files changed, 233 insertions(+), 98 deletions(-)

diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index 3c2a33fea..cfc75f487 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -143,7 +143,7 @@
   <script type = "text/ng-template" id="UIxCalMainFrame">
     <!-- calendars colors -->
     <div sg-folder-stylesheet="true"
-         ng-repeat="calendar in calendars.service.$findAll()"
+         ng-repeat="calendar in app.service.$findAll()"
          ng-model="calendar"><!-- stylesheet --></div>
     <!-- Sidenav -->
     <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
@@ -156,48 +156,65 @@
               <span><var:string label:value="Calendars"/></span>
               <md-button class="sg-icon-button"
                          label:aria-label="New Calendar..."
-                         ng-click="calendars.newCalendar()">
+                         ng-click="app.newCalendar()">
                 <md-icon>add_circle_outline</md-icon>
               </md-button>
             </div>
           </md-subheader>
           <md-list>
-            <md-list-item ng-repeat="calendar in calendars.service.$calendars">
+            <md-list-item ng-repeat="calendar in app.service.$calendars"
+                          ng-click="app.editMode = false"
+                          ng-dblclick="app.editFolder(calendar)">
               <md-checkbox ng-model="calendar.active"
                            ng-class="calendar.getClassName('checkbox')"
                            ng-true-value="1"
                            ng-false-value="0"
                            label:aria-label="Enable"><!-- enable --></md-checkbox>
-              <p class="sg-item-name">{{calendar.name}}</p>
+              <p class="sg-item-name" ng-show="app.editMode != calendar.id">{{calendar.name}}</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-menu class="md-secondary" label:aria-label="Options">
                 <md-icon label:aria-label="Options"
                          ng-click="$mdOpenMenu()"
                          md-menu-origin="md-menu-origin">more_vert</md-icon>
                 <md-menu-content width="2">
                   <md-menu-item>
-                    <md-button ng-click="calendars.confirmDelete(calendar)">
+                    <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-item>
-                    <md-button ng-click="calendars.exportCalendar()">
+                    <md-button ng-click="app.exportCalendar()">
                       <var:string label:value="Export"/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-divider><!-- divider --></md-menu-divider>
                   <md-menu-item>
-                    <md-button ng-click="calendars.showLinks(calendar)">
+                    <md-button ng-click="app.showLinks(calendar)">
                       <var:string label:value="Links to this Calendar"/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-item>
-                    <md-button ng-click="calendars.share(calendar)">
+                    <md-button ng-click="app.share(calendar)">
                       <var:string label:value="Sharing..."/>
                     </md-button>
                   </md-menu-item>
                   <md-menu-divider><!-- divider --></md-menu-divider>
                   <md-menu-item>
-                    <md-button ng-click="calendars.showProperties(calendar)">
+                    <md-button ng-click="app.showProperties(calendar)">
                       <var:string label:value="Properties"/>
                     </md-button>
                   </md-menu-item>
@@ -214,38 +231,54 @@
               <md-button class="sg-icon-button"
                          label:aria-label="Subscribe to a Calendar..."
                          sg-subscribe="calendar"
-                         sg-subscribe-on-select="calendars.subscribeToFolder(folderData)">
+                         sg-subscribe-on-select="app.subscribeToFolder(folderData)">
                 <md-icon>add_circle_outline</md-icon>
               </md-button>
             </div>
           </md-subheader>
           <md-list>
-            <md-list-item ng-repeat="calendar in calendars.service.$subscriptions">
+            <md-list-item ng-repeat="calendar in app.service.$subscriptions"
+                          ng-dblclick="app.editFolder(calendar)">
               <md-checkbox ng-model="calendar.active"
                            ng-class="calendar.getClassName('checkbox')"
                            ng-true-value="1"
                            ng-false-value="0"
                            label:aria-label="Enable"><!-- enable --></md-checkbox>
-              <p class="sg-item-name">{{calendar.name}}</p>
+              <p class="sg-item-name" ng-show="app.editMode != calendar.id">{{calendar.name}}</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-menu class="md-secondary" label:aria-label="Options" ng-click="true">
                 <md-icon label:aria-label="Options"
                          ng-click="$mdOpenMenu()"
                          md-menu-origin="md-menu-origin">more_vert</md-icon>
                 <md-menu-content width="2">
                   <md-menu-item>
-                    <md-button ng-click="calendars.confirmDelete(calendar)">
+                    <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="calendars.showLinks(calendar)">
+                    <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="calendars.showProperties(calendar)">
+                    <md-button ng-click="app.showProperties(calendar)">
                       <var:string label:value="Properties"/>
                     </md-button>
                   </md-menu-item>
@@ -261,38 +294,54 @@
               <span><var:string label:value="Web Calendars"/></span>
               <md-button class="sg-icon-button"
                          label:aria-label="Subscribe to a web calendar..."
-                         ng-click="calendars.addWebCalendar()">
+                         ng-click="app.addWebCalendar()">
                 <md-icon>add_circle_outline</md-icon>
               </md-button>
             </div>
           </md-subheader>
           <md-list>
-            <md-list-item ng-repeat="calendar in calendars.service.$webcalendars">
+            <md-list-item ng-repeat="calendar in app.service.$webcalendars"
+                          ng-dblclick="app.editFolder(calendar)">
               <md-checkbox ng-model="calendar.active"
                            ng-class="calendar.getClassName('checkbox')"
                            ng-true-value="1"
                            ng-false-value="0"
                            label:aria-label="Enable"><!-- enable --></md-checkbox>
-              <p class="sg-item-name">{{calendar.name}}</p>
+              <p class="sg-item-name" ng-show="app.editMode != calendar.id">{{calendar.name}}</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-menu class="md-secondary" label:aria-label="Options" ng-click="true">
                 <md-icon label:aria-label="Options"
                          ng-click="$mdOpenMenu()"
                          md-menu-origin="md-menu-origin">more_vert</md-icon>
                 <md-menu-content width="2">
                   <md-menu-item>
-                    <md-button ng-click="calendars.confirmDelete(calendar)">
+                    <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="calendars.showLinks(calendar)">
+                    <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="calendars.showProperties(calendar)">
+                    <md-button ng-click="app.showProperties(calendar)">
                       <var:string label:value="Properties"/>
                     </md-button>
                   </md-menu-item>
diff --git a/UI/WebServerResources/js/Scheduler/Calendar.service.js b/UI/WebServerResources/js/Scheduler/Calendar.service.js
index c13d64aef..b558dd253 100644
--- a/UI/WebServerResources/js/Scheduler/Calendar.service.js
+++ b/UI/WebServerResources/js/Scheduler/Calendar.service.js
@@ -121,6 +121,24 @@
     return calendar;
   };
 
+  /**
+   * @memberof Calendar
+   * @desc Find a calendar among local instances (personal calendars, subscriptions and Web calendars).
+   * @param {string} id - the calendar ID
+   * @returns an object literal of the matching Calendar instance
+   */
+  Calendar.$getIndex = function(id) {
+    var i;
+
+    i = _.indexOf(_.pluck(Calendar.$calendars, 'id'), id);
+    if (i < 0)
+      i = _.indexOf(_.pluck(Calendar.$subscriptions, 'id'), id);
+    if (i < 0)
+      i = _.indexOf(_.pluck(Calendar.$webcalendars, 'id'), id);
+
+    return i;
+  };
+
   /**
    * @memberOf Calendar
    * @desc Subscribe to another user's calendar and add it to the list of calendars.
@@ -181,80 +199,6 @@
     return d.promise;
   };
 
-  /**
-   * @function init
-   * @memberof Calendar.prototype
-   * @desc Extend instance with new data and compute additional attributes.
-   * @param {object} data - attributes of calendar
-   */
-  Calendar.prototype.init = function(data) {
-    angular.extend(this, data);
-    // Add 'isOwned' and 'isSubscription' attributes based on active user (TODO: add it server-side?)
-    this.isOwned = Calendar.activeUser.isSuperUser || this.owner == Calendar.activeUser.login;
-    this.isSubscription = !this.isRemote && this.owner != Calendar.activeUser.login;
-  };
-
-  /**
-   * @function getClassName
-   * @memberof Calendar.prototype
-   * @desc Return the calendar CSS class name based on its ID.
-   * @returns a string representing the foreground CSS class name
-   */
-  Calendar.prototype.getClassName = function(base) {
-    if (angular.isUndefined(base))
-      base = 'fg';
-    return base + '-folder' + this.id;
-  };
-
-  /**
-   * @function $rename
-   * @memberof Calendar.prototype
-   * @desc Rename the calendar and keep the list sorted
-   * @param {string} name - the new name
-   * @returns a promise of the HTTP operation
-   */
-  Calendar.prototype.$rename = function(name) {
-    var i = _.indexOf(_.pluck(Calendar.$calendars, 'id'), this.id);
-    this.name = name;
-    Calendar.$calendars.splice(i, 1);
-    Calendar.$add(this);
-    return this.$save();
-  };
-
-  /**
-   * @function $delete
-   * @memberof Calendar.prototype
-   * @desc Delete the calendar from the server and the static list of calendars.
-   * @returns a promise of the HTTP operation
-   */
-  Calendar.prototype.$delete = function() {
-    var _this = this,
-        d = Calendar.$q.defer(),
-        list,
-        promise;
-
-    if (this.isSubscription) {
-      promise = Calendar.$$resource.fetch(this.id, 'unsubscribe');
-      list = Calendar.$subscriptions;
-    }
-    else {
-      promise = Calendar.$$resource.remove(this.id);
-      if (this.isWebCalendar)
-        list = Calendar.$webcalendars;
-      else
-        list = Calendar.$calendars;
-    }
-
-    promise.then(function() {
-      var i = _.indexOf(_.pluck(list, 'id'), _this.id);
-      list.splice(i, 1);
-      d.resolve();
-    }, function(data, status) {
-      d.reject(data);
-    });
-    return d.promise;
-  };
-
   /**
    * @function $deleteComponents
    * @memberof Calendar
@@ -283,6 +227,116 @@
     _this.$Component.$tasks = _.difference(_this.$Component.$tasks, components);
   };
 
+  /**
+   * @function init
+   * @memberof Calendar.prototype
+   * @desc Extend instance with new data and compute additional attributes.
+   * @param {object} data - attributes of calendar
+   */
+  Calendar.prototype.init = function(data) {
+    angular.extend(this, data);
+    // Add 'isOwned' and 'isSubscription' attributes based on active user (TODO: add it server-side?)
+    this.isOwned = Calendar.activeUser.isSuperUser || this.owner == Calendar.activeUser.login;
+    this.isSubscription = !this.isRemote && this.owner != Calendar.activeUser.login;
+    if (angular.isUndefined(this.$shadowData)) {
+      // Make a copy of the data for an eventual reset
+      this.$shadowData = this.$omit();
+    }
+  };
+
+  /**
+   * @function getClassName
+   * @memberof Calendar.prototype
+   * @desc Return the calendar CSS class name based on its ID.
+   * @returns a string representing the foreground CSS class name
+   */
+  Calendar.prototype.getClassName = function(base) {
+    if (angular.isUndefined(base))
+      base = 'fg';
+    return base + '-folder' + this.id;
+  };
+
+  /**
+   * @function $rename
+   * @memberof Calendar.prototype
+   * @desc Rename the calendar and keep the list sorted
+   * @param {string} name - the new name
+   * @returns a promise of the HTTP operation
+   */
+  Calendar.prototype.$rename = function() {
+    var _this = this,
+        i,
+        calendars;
+
+    if (this.name == this.$shadowData.name) {
+      // Name hasn't changed
+      return Calendar.$q.when();
+    }
+
+    if (this.isWebCalendar)
+      calendars = Calendar.$webcalendars;
+    else if (this.isSubscription)
+      calendars = Calendar.$subscriptions;
+    else
+      calendars = Calendar.$calendars;
+
+    i = _.indexOf(_.pluck(calendars, 'id'), this.id);
+    if (i > -1) {
+      return this.$save().then(function() {
+        calendars.splice(i, 1);
+        Calendar.$add(_this);
+      });
+    }
+    else {
+      return Calendar.$q.reject();
+    }
+  };
+
+  /**
+   * @function $delete
+   * @memberof Calendar.prototype
+   * @desc Delete the calendar from the server and the static list of calendars.
+   * @returns a promise of the HTTP operation
+   */
+  Calendar.prototype.$delete = function() {
+    var _this = this,
+        list,
+        promise;
+
+    if (this.isSubscription) {
+      promise = Calendar.$$resource.fetch(this.id, 'unsubscribe');
+      list = Calendar.$subscriptions;
+    }
+    else {
+      promise = Calendar.$$resource.remove(this.id);
+      if (this.isWebCalendar)
+        list = Calendar.$webcalendars;
+      else
+        list = Calendar.$calendars;
+    }
+
+    return promise.then(function() {
+      var i = _.indexOf(_.pluck(list, 'id'), _this.id);
+      list.splice(i, 1);
+    });
+  };
+
+  /**
+   * @function $reset
+   * @memberof Mailbox.prototype
+   * @desc Reset the original state the mailbox's data.
+   */
+  Calendar.prototype.$reset = function() {
+    var _this = this;
+    angular.forEach(this, function(value, key) {
+      if (key != 'constructor' && key[0] != '$') {
+        delete _this[key];
+      }
+    });
+    angular.extend(this, this.$shadowData);
+    this.$shadowData = this.$omit();
+  };
+
   /**
    * @function $save
    * @memberof Calendar.prototype
@@ -290,7 +344,16 @@
    * @returns a promise of the HTTP operation
    */
   Calendar.prototype.$save = function() {
+    var _this = this;
+
     return Calendar.$$resource.save(this.id, this.$omit()).then(function(data) {
+      // Make a copy of the data for an eventual reset
+      _this.$shadowData = _this.$omit();
+      return data;
+    }, function(data) {
+      Calendar.$log.error(JSON.stringify(data, undefined, 2));
+      // Restore previous version
+      _this.$reset();
       return data;
     });
   };
diff --git a/UI/WebServerResources/js/Scheduler/CalendarsController.js b/UI/WebServerResources/js/Scheduler/CalendarsController.js
index dce56f9fa..e23909c56 100644
--- a/UI/WebServerResources/js/Scheduler/CalendarsController.js
+++ b/UI/WebServerResources/js/Scheduler/CalendarsController.js
@@ -6,8 +6,8 @@
   /**
    * @ngInject
    */
-  CalendarsController.$inject = ['$scope', '$rootScope', '$stateParams', '$state', '$timeout', '$q', '$mdDialog', '$log', 'sgFocus', 'encodeUriFilter', 'Dialog', 'sgSettings', 'Calendar', 'User', 'stateCalendars'];
-  function CalendarsController($scope, $rootScope, $stateParams, $state, $timeout, $q, $mdDialog, $log, focus, encodeUriFilter, Dialog, Settings, Calendar, User, stateCalendars) {
+  CalendarsController.$inject = ['$scope', '$rootScope', '$stateParams', '$state', '$timeout', '$q', '$mdDialog', '$log', 'sgFocus', 'Dialog', 'sgSettings', 'Calendar', 'User', 'stateCalendars'];
+  function CalendarsController($scope, $rootScope, $stateParams, $state, $timeout, $q, $mdDialog, $log, focus, Dialog, Settings, Calendar, User, stateCalendars) {
     var vm = this;
 
     vm.activeUser = Settings.activeUser;
@@ -15,6 +15,9 @@
     vm.newCalendar = newCalendar;
     vm.addWebCalendar = addWebCalendar;
     vm.confirmDelete = confirmDelete;
+    vm.editFolder = editFolder;
+    vm.revertEditing = revertEditing;
+    vm.renameFolder = renameFolder;
     vm.share = share;
     vm.showLinks = showLinks;
     vm.showProperties = showProperties;
@@ -157,6 +160,26 @@
       }
     }
 
+    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(data, status) {
+          Dialog.alert(l('Warning'), data);
+        });
+    }
+
     function share(calendar) {
       calendar.$acl.$users().then(function() {
         $mdDialog.show({
diff --git a/UI/WebServerResources/js/Scheduler/Scheduler.app.js b/UI/WebServerResources/js/Scheduler/Scheduler.app.js
index 7f0ee3093..f5ee4860c 100644
--- a/UI/WebServerResources/js/Scheduler/Scheduler.app.js
+++ b/UI/WebServerResources/js/Scheduler/Scheduler.app.js
@@ -20,7 +20,7 @@
           calendars: {
             templateUrl: 'UIxCalMainFrame', // UI/Templates/SchedulerUI/UIxCalMainFrame.wox
             controller: 'CalendarsController',
-            controllerAs: 'calendars'
+            controllerAs: 'app'
           }
         },
         resolve: {