(js) Split Calendars list by type
The list of calendars is now splitted by type: personal calendars and other's calendars (subscriptions). The constructor of the Calendar model has been improved.pull/91/head
parent
550fc09ee4
commit
0d62ec0bea
|
@ -145,34 +145,66 @@
|
|||
<script type = "text/ng-template" id="UIxCalMainFrame">
|
||||
<!-- calendars colors -->
|
||||
<div sg-folder-stylesheet="true"
|
||||
ng-repeat="calendar in calendars.list"
|
||||
ng-repeat="calendar in calendars.service.$calendars"
|
||||
ng-model="calendar"><!-- stylesheet --></div>
|
||||
<div sg-folder-stylesheet="true"
|
||||
ng-repeat="calendar in calendars.service.$subscriptions"
|
||||
ng-model="calendar"><!-- stylesheet --></div>
|
||||
<!-- Sidenav -->
|
||||
<md-sidenav id="left-sidenav" class="md-sidenav-left" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
|
||||
<var:component className="UIxSidenavToolbarTemplate" />
|
||||
<md-content md-scroll-y="md-scroll-y" class="md-flex">
|
||||
<md-list ng-repeat="calendar in calendars.list">
|
||||
<md-item>
|
||||
<md-item-content>
|
||||
<!-- User's calendars -->
|
||||
<section>
|
||||
<md-subheader class="sg-md-subheader">
|
||||
<div layout="row" layout-align="space-between center">
|
||||
<span><var:string label:value="Calendars"/></span>
|
||||
<md-button
|
||||
class="iconButton"
|
||||
label:aria-label="New Calendar..."
|
||||
ng-click="newCalendar()">
|
||||
<i class="md-icon-add-circle-outline"><!-- add --></i>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-subheader>
|
||||
<md-list>
|
||||
<md-list-item ng-repeat="calendar in calendars.service.$calendars">
|
||||
<md-checkbox ng-model="calendar.active"
|
||||
ng-true-value="1"
|
||||
ng-false-value="0"
|
||||
aria-label="Enable"
|
||||
class="md-button md-flex sg-item-name">{{calendar.name}}</md-checkbox>
|
||||
</md-item-content>
|
||||
</md-item>
|
||||
</md-list>
|
||||
<md-toolbar class="md-medium-tall">
|
||||
<div class="md-toolbar-tools md-toolbar-tools-bottom">
|
||||
<md-button
|
||||
class="iconButton sg-button-navicon"
|
||||
label:aria-label="Subscribe to a Calendar..."
|
||||
sg-subscribe="calendar"
|
||||
sg-subscribe-on-select="subscribeToFolder(folderData)">
|
||||
<i class="md-icon-folder-shared"><!-- icon --></i>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
label:aria-label="Enable"><!-- enable --></md-checkbox>
|
||||
<p class="sg-item-name">{{calendar.name}}</p>
|
||||
<i class="md-icon-turned-in md-display-8"
|
||||
ng-class="calendar.getClassName()"><!-- calendar color --></i>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</section>
|
||||
<!-- Subscriptions -->
|
||||
<section>
|
||||
<md-subheader class="sg-md-subheader">
|
||||
<div layout="row" layout-align="space-between center">
|
||||
<span><var:string label:value="Subscriptions"/></span>
|
||||
<md-button
|
||||
class="iconButton"
|
||||
label:aria-label="Subscribe to a Calendar..."
|
||||
sg-subscribe="calendar"
|
||||
sg-subscribe-on-select="subscribeToFolder(folderData)">
|
||||
<i class="md-icon-add-circle-outline"><!-- add --></i>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-subheader>
|
||||
<md-list>
|
||||
<md-list-item ng-repeat="calendar in calendars.service.$subscriptions">
|
||||
<md-checkbox ng-model="calendar.active"
|
||||
ng-true-value="1"
|
||||
ng-false-value="0"
|
||||
label:aria-label="Enable"><!-- enable --></md-checkbox>
|
||||
<p class="sg-item-name">{{calendar.name}}</p>
|
||||
<i class="md-icon-turned-in md-display-8"
|
||||
ng-class="calendar.getClassName()"><!-- calendar color --></i>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</section>
|
||||
</md-content>
|
||||
</md-sidenav>
|
||||
|
||||
|
@ -220,27 +252,39 @@
|
|||
<md-content id="componentsList"
|
||||
flex="33"
|
||||
md-scroll-y="md-scroll-y">
|
||||
<md-tabs md-selected="list.selectedList">
|
||||
<md-tabs md-dynamic-height="true"
|
||||
md-selected="list.selectedList">
|
||||
<md-tab label:label="Events"
|
||||
md-on-select="list.selectComponentType('events')">
|
||||
<md-list>
|
||||
<md-item ng-repeat="event in list.component.$events">
|
||||
<md-item-content>
|
||||
<span>{{event.c_title}}</span>
|
||||
<span class="right">{{event.formatted_startdate}}</span>
|
||||
</md-item-content>
|
||||
</md-item>
|
||||
<md-list-item
|
||||
class="md-clickable md-2-line"
|
||||
n0-ng-click="list.openComponent(event)"
|
||||
ng-repeat="event in list.component.$events">
|
||||
<i class="md-avatar" ng-class="event.getClassName('bg')" ><!-- calendar color --></i>
|
||||
<div class="md-list-item-text"
|
||||
ui-sref="calendars.component({calendarId: event.c_folder, componentId: event.c_name})">
|
||||
<h3>{{event.c_title}}</h3>
|
||||
<p>{{event.c_location}}</p>
|
||||
<p class="md-secondary">
|
||||
{{event.formatted_startdate}}
|
||||
<i class="md-icon-repeat" ng-show="event.c_iscycle"><!-- recurrent --></i>
|
||||
<i class="md-icon-alarm" ng-show="event.c_nextalarm"><!-- alarm --></i>
|
||||
</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-tab>
|
||||
<md-tab label:label="Tasks"
|
||||
md-on-select="list.selectComponentType('tasks')">
|
||||
<md-list>
|
||||
<md-item ng-repeat="task in list.component.$tasks">
|
||||
<md-item-content>
|
||||
<span>{{task.c_title}}</span>
|
||||
<span class="right">{{task.formatted_enddate}}</span>
|
||||
</md-item-content>
|
||||
</md-item>
|
||||
<md-list-item
|
||||
class="md-clickable"
|
||||
ng-repeat="task in list.component.$tasks">
|
||||
<i class="md-avatar" ng-class="task.getClassName()" ><!-- calendar color --></i>
|
||||
<p>{{task.c_title}}</p>
|
||||
<p class="md-secondary">{{task.formatted_enddate}}</p>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
*/
|
||||
function Calendar(futureCalendarData) {
|
||||
// Data is immediately available
|
||||
angular.extend(this, futureCalendarData);
|
||||
this.init(futureCalendarData);
|
||||
if (this.name && !this.id) {
|
||||
// Create a new calendar on the server
|
||||
var newCalendarData = Calendar.$$resource.create('createFolder', this.name);
|
||||
|
@ -26,13 +26,13 @@
|
|||
* @desc The factory we'll use to register with Angular
|
||||
* @returns the Calendar constructor
|
||||
*/
|
||||
Calendar.$factory = ['$q', '$timeout', '$log', 'sgSettings', 'sgResource', 'sgCard', 'sgAcl', function($q, $timeout, $log, Settings, Resource, Card, Acl) {
|
||||
Calendar.$factory = ['$q', '$timeout', '$log', 'sgSettings', 'sgResource', 'sgComponent', 'sgAcl', function($q, $timeout, $log, Settings, Resource, Component, Acl) {
|
||||
angular.extend(Calendar, {
|
||||
$q: $q,
|
||||
$timeout: $timeout,
|
||||
$log: $log,
|
||||
$$resource: new Resource(Settings.activeUser.folderURL + 'Calendar', Settings.activeUser),
|
||||
$Card: Card,
|
||||
$Component: Component,
|
||||
$$Acl: Acl,
|
||||
activeUser: Settings.activeUser
|
||||
});
|
||||
|
@ -51,19 +51,15 @@
|
|||
*/
|
||||
Calendar.$add = function(calendar) {
|
||||
// Insert new calendar at proper index
|
||||
var sibling, i;
|
||||
var list, sibling, i;
|
||||
|
||||
calendar.isOwned = this.activeUser.isSuperUser || calendar.owner == this.activeUser.login;
|
||||
calendar.isSubscription = calendar.owner != this.activeUser.login;
|
||||
sibling = _.find(this.$calendars, function(o) {
|
||||
return (o.isRemote
|
||||
|| (!calendar.isSubscription && o.isSubscription)
|
||||
|| (o.id != 'personal'
|
||||
&& o.isSubscription === calendar.isSubscription
|
||||
&& o.name.localeCompare(calendar.name) === 1));
|
||||
list = calendar.isSubscription? this.$subscriptions : this.$calendars;
|
||||
sibling = _.find(list, function(o) {
|
||||
return (o.id != 'personal'
|
||||
&& o.name.localeCompare(calendar.name) === 1);
|
||||
});
|
||||
i = sibling ? _.indexOf(_.pluck(this.$calendars, 'id'), sibling.id) : 1;
|
||||
this.$calendars.splice(i, 0, calendar);
|
||||
i = sibling ? _.indexOf(_.pluck(list, 'id'), sibling.id) : 1;
|
||||
list.splice(i, 0, calendar);
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -75,20 +71,36 @@
|
|||
Calendar.$findAll = function(data) {
|
||||
var _this = this;
|
||||
if (data) {
|
||||
|
||||
this.$calendars = data;
|
||||
this.$calendars = [];
|
||||
this.$subscriptions = [];
|
||||
// Instanciate Calendar objects
|
||||
angular.forEach(this.$calendars, function(o, i) {
|
||||
_this.$calendars[i] = new Calendar(o);
|
||||
// Add 'isOwned' and 'isSubscription' attributes based on active user (TODO: add it server-side?)
|
||||
// _this.$calendars[i].isSubscription = _this.$calendars[i].owner != _this.activeUser.login;
|
||||
// _this.$calendars[i].isOwned = _this.activeUser.isSuperUser
|
||||
// || _this.$calendars[i].owner == _this.activeUser.login;
|
||||
angular.forEach(data, function(o, i) {
|
||||
var calendar = new Calendar(o);
|
||||
if (calendar.isSubscription)
|
||||
_this.$subscriptions.push(calendar);
|
||||
else
|
||||
_this.$calendars.push(calendar);
|
||||
});
|
||||
}
|
||||
return this.$calendars;
|
||||
};
|
||||
|
||||
/**
|
||||
* @memberof Calendar
|
||||
* @desc Find a calendar among local instances (personal calendars and subscriptions).
|
||||
* @param {string} id - the calendar ID
|
||||
* @returns an object literal of the matching Calendar instance
|
||||
*/
|
||||
Calendar.$get = function(id) {
|
||||
var calendar;
|
||||
|
||||
calendar = _.find(Calendar.$calendars, function(o) { return o.id == id });
|
||||
if (!calendar)
|
||||
calendar = _.find(Calendar.$subscriptions, function(o) { return o.id == id });
|
||||
|
||||
return calendar;
|
||||
};
|
||||
|
||||
/**
|
||||
* @memberOf Calendar
|
||||
* @desc Subscribe to another user's calendar and add it to the list of calendars.
|
||||
|
@ -100,7 +112,7 @@
|
|||
var _this = this;
|
||||
return Calendar.$$resource.userResource(uid).fetch(path, 'subscribe').then(function(calendarData) {
|
||||
var calendar = new Calendar(calendarData);
|
||||
if (!_.find(_this.$calendars, function(o) {
|
||||
if (!_.find(_this.$subscriptions, function(o) {
|
||||
return o.id == calendarData.id;
|
||||
})) {
|
||||
Calendar.$add(calendar);
|
||||
|
@ -109,6 +121,29 @@
|
|||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @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() {
|
||||
return 'fg-folder' + this.id;
|
||||
};
|
||||
|
||||
/**
|
||||
* @function $rename
|
||||
* @memberof Calendar.prototype
|
||||
|
@ -172,6 +207,16 @@
|
|||
return Calendar.$$resource.fetch(this.id, (this.active?'':'de') + 'activateFolder');
|
||||
};
|
||||
|
||||
/**
|
||||
* @function $getComponent
|
||||
* @memberof Calendar.prototype
|
||||
* @desc Fetch the card attributes from the server.
|
||||
* @returns a promise of the HTTP operation
|
||||
*/
|
||||
Calendar.prototype.$getComponent = function(componentId) {
|
||||
return Calendar.$Component.$find(this.id, componentId);
|
||||
};
|
||||
|
||||
/**
|
||||
* @function $omit
|
||||
* @memberof Calendar.prototype
|
||||
|
|
|
@ -85,26 +85,36 @@
|
|||
})
|
||||
|
||||
.controller('CalendarsController', ['$scope', '$rootScope', '$stateParams', '$state', '$timeout', '$log', 'sgFocus', 'encodeUriFilter', 'sgDialog', 'sgSettings', 'sgCalendar', 'stateCalendars', function($scope, $rootScope, $stateParams, $state, $timeout, $log, focus, encodeUriFilter, Dialog, Settings, Calendar, stateCalendars) {
|
||||
this.activeUser = Settings.activeUser;
|
||||
this.list = stateCalendars;
|
||||
var vm = this;
|
||||
|
||||
vm.activeUser = Settings.activeUser;
|
||||
vm.service = Calendar;
|
||||
|
||||
// Dispatch the event named 'calendars:list' when a calendar is activated or deactivated or
|
||||
// when the color of a calendar is changed
|
||||
$scope.$watch(angular.bind(this, function() {
|
||||
return _.map(this.list, function(o) { return _.pick(o, ['id', 'active', 'color']) });
|
||||
}), function(newList, oldList) {
|
||||
// Identify which calendar has changed
|
||||
var ids = _.pluck(_.filter(newList, function(o, i) { return !_.isEqual(o, oldList[i]); }), 'id');
|
||||
if (ids.length > 0) {
|
||||
$log.debug(ids.join(', ') + ' changed');
|
||||
_.each(ids, function(id) {
|
||||
var calendar = _.find(stateCalendars, function(o) { return o.id == id });
|
||||
calendar.$setActivation().then(function() {
|
||||
$scope.$broadcast('calendars:list');
|
||||
$scope.$watch(
|
||||
function() {
|
||||
return _.union(
|
||||
_.map(Calendar.$calendars, function(o) { return _.pick(o, ['id', 'active', 'color']) }),
|
||||
_.map(Calendar.$subscriptions, function(o) { return _.pick(o, ['id', 'active', 'color']) })
|
||||
);
|
||||
},
|
||||
function(newList, oldList) {
|
||||
// Identify which calendar has changed
|
||||
var ids = _.pluck(_.filter(newList, function(o, i) { return !_.isEqual(o, oldList[i]); }), 'id');
|
||||
if (ids.length > 0) {
|
||||
$log.debug(ids.join(', ') + ' changed');
|
||||
_.each(ids, function(id) {
|
||||
var calendar = Calendar.$get(id);
|
||||
calendar.$setActivation().then(function() {
|
||||
$scope.$broadcast('calendars:list');
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}, true); // compare for object equality
|
||||
}
|
||||
},
|
||||
true // compare for object equality
|
||||
);
|
||||
|
||||
/**
|
||||
* subscribeToFolder - Callback of sgSubscribe directive
|
||||
*/
|
||||
|
|
Loading…
Reference in New Issue