Allow rename of calendars
Francis Lachapelle
parent
70bb512bb8
commit
58ff8139e9
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
calendars: {
|
||||
templateUrl: 'UIxCalMainFrame', // UI/Templates/SchedulerUI/UIxCalMainFrame.wox
|
||||
controller: 'CalendarsController',
|
||||
controllerAs: 'calendars'
|
||||
controllerAs: 'app'
|
||||
}
|
||||
},
|
||||
resolve: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue