Improve Administration module

pull/110/head
Francis Lachapelle 2015-10-09 16:10:39 -04:00
parent b63ee6998d
commit 7ddf7be705
10 changed files with 299 additions and 185 deletions

View File

@ -1,15 +1,15 @@
<?xml version="1.0" standalone="yes"?>
<!DOCTYPE var:component>
<var:component xmlns="http://www.w3.org/1999/xhtml"
xmlns:var="http://www.skyrix.com/od/binding"
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:rsrc="OGo:url"
xmlns:label="OGo:label"
className="UIxPageFrame"
title="title"
const:jsFiles="Common.js, Administration.js,
Administration.services.js, Preferences.services.js,
Contacts.services.js, Scheduler.services.js">
xmlns:var="http://www.skyrix.com/od/binding"
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:rsrc="OGo:url"
xmlns:label="OGo:label"
className="UIxPageFrame"
title="title"
const:jsFiles="Common.js, Administration.js,
Administration.services.js, Preferences.services.js,
Contacts.services.js, Scheduler.services.js">
<main class="view layout-fill" ui-view="administration" layout="row" ng-controller="navController">
<!-- administration -->
@ -39,77 +39,82 @@
-->
<script type="text/ng-template" id="rights.html">
<!-- TOP RIGHT TOOLBAR -->
<md-toolbar layout="row" layout-align="space-between start" class="toolbar-main">
<div class="md-toolbar-tools md-toolbar-tools-top" layout="row" layout-align="space-between start">
<var:component className="UIxTopnavToolbarTemplate" />
</div>
</md-toolbar>
<md-toolbar layout="row" layout-align="space-between center" class="toolbar-main">
<var:component className="UIxTopnavToolbarTemplate" />
</md-toolbar>
<div layout="row" class="md-flex">
<div layout="row" class="md-flex">
<div class="view-list" layout="column">
<md-toolbar class="md-whiteframe-z1">
<!-- sort mode (default) -->
<div class="md-toolbar-tools sg-toolbar-secondary"
sg-search="app.filter(searchText)">
<md-button class="sg-icon-button" label:aria-label="Search">
<md-icon>search</md-icon>
</md-button>
<md-input-container>
<input name="folderSearch" type="search" ng-minlength="3"/>
</md-input-container>
</div>
</md-toolbar>
<div class="view-list" layout="column">
<md-toolbar>
<!-- search toolbar -->
<div class="md-toolbar-tools sg-toolbar-secondary"
sg-search="app.filter(searchText)">
<md-icon>search</md-icon>
<md-input-container md-no-float="md-no-float">
<input name="folderSearch" type="search" ng-minlength="3"
label:placeholder="Search Users"/>
</md-input-container>
</div>
</md-toolbar>
<md-content id="userslist" layout="column" class="md-flex">
<md-card ng-repeat="user in app.users"
ng-class="{ 'sg-collapsed': user.uid !=
app.selectedUser.uid,
'sg-expanded': user.uid ==
app.selectedUser.uid }">
<md-button ng-click="app.selectUser($index)">
<div layout="row" layout-align="start center" class="md-flex">
<span class="card-picture" ng-switch="user.isGroup">
<div ng-switch-when="0">
<sg-avatar-image class="md-avatar"
sg-email="user.c_email"
size="40"><!-- avatar --></sg-avatar-image>
</div>
<div ng-switch-when="1" class="sg-list-avatar"><!-- normal-group --></div>
</span>
<div class="sg-tile-content">
<div class="sg-md-subhead"><div>{{user.cn}}</div></div>
<div class="sg-md-body"><div>{{user.c_email}}</div></div>
</div>
<md-icon ng-class="{'md-rotate-180': user.uid == app.selectedUser.uid}">expand_more</md-icon>
<md-content id="usersList" layout="column" class="md-flex">
<md-list class="sg-section-list">
<div ng-repeat="user in app.users">
<md-list-item ng-class="{ 'sg-collapsed': user.uid != app.selectedUser.uid,
'sg-expanded': user.uid == app.selectedUser.uid }"
ng-click="app.selectUser($index)">
<sg-avatar-image class="md-avatar"
ng-if="::user.isGroup === 0"
sg-email="::user.c_email"
size="40">
<!-- contact avatar -->
</sg-avatar-image>
<div class="sg-list-avatar"
ng-show="::user.isGroup">
<!-- list avatar -->
</div>
</md-button>
<md-card-content ng-show="user == app.selectedUser">
<div ng-show="user.$$folders.length == 0">
<div class="sg-tile-content">
<div class="sg-md-subhead">
<div>{{::user.cn}}</div>
</div>
<div class="sg-md-body">
<div>{{::user.c_email}}</div>
</div>
</div>
<md-button class="md-icon-button"><md-icon ng-class="{'md-rotate-180': user.uid == app.selectedUser.uid}">expand_more</md-icon></md-button>
</md-list-item>
<div ng-show="user == app.selectedUser">
<!-- folders list -->
<md-list-item ng-show="user.$$folders.length == 0">
<md-icon>warning</md-icon>
<var:string label:value="No resource"/>
</div>
<div layout="row" layout-align="start center" layout-fill="true"
ng-repeat="folder in user.$$folders">
<md-icon ng-class="{'icon-contacts': folder.type == 'Contact',
'icon-event': folder.type == 'Appointment'}"><!--icon--></md-icon>
<md-button ng-click="app.selectFolder(folder)">{{folder.displayName}}</md-button>
</div>
</md-card-content>
</md-card>
</md-content>
</div>
<div id="detailView" class="view-detail" layout="column" layout-align="start center" ui-view="acl">
<md-toolbar class="md-whiteframe-z1 hide-sm"><!-- empty toolbar --></md-toolbar>
<md-content class="hide-sm md-flex layout-fill md-hue-1" layout="column">
<md-input-container layout-align="center center">
<label class="sg-md-title"><var:string label:value="No resource selected"/></label>
</md-input-container>
</md-content>
</div>
</md-list-item>
<md-list-item class="sg-folder" ng-repeat="folder in user.$$folders">
<md-button class=""
aria-label="{{::folder.displayName}}" title="{{::folder.displayName}}"
ng-click="app.selectFolder(folder)">
<md-icon ng-class="{ 'icon-contacts': folder.type == 'Contact',
'icon-event': folder.type == 'Appointment' }"><!--icon--></md-icon>
{{::folder.displayName}}
</md-button>
</md-list-item>
<md-divider><!-- divider --></md-divider>
</div>
</div>
</md-list>
</md-content>
</div>
<div id="detailView" class="view-detail" layout="column" layout-align="start center" ui-view="acl">
<md-toolbar class="md-whiteframe-z1 hide-sm"><!-- empty toolbar --></md-toolbar>
<md-content class="hide-sm md-flex layout-fill md-hue-1" layout="column">
<md-input-container layout-align="center center">
<label class="sg-md-title"><var:string label:value="No resource selected"/></label>
</md-input-container>
</md-content>
</div>
</div>
</script>
</var:component>

View File

@ -6,9 +6,30 @@
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:label="OGo:label"
>
<div layout="column" class="layout-fill">
<md-toolbar class="md-whiteframe-z1">
<div class="md-toolbar-tools">
<md-toolbar>
<div layout="row">
<sg-avatar-image class="md-tile-left"
ng-show="acl.user.isGroup === 0"
sg-email="::acl.user.c_email"
size="40"><!-- avatar --></sg-avatar-image>
<div class="sg-list-avatar" ng-show="acl.user.isGroup"><!--list avatar--></div>
<div class="msg-header-content">
<h1 class="sg-md-display-2--thin">{{::acl.user.cn}}</h1>
<h6 class="sg-md-display-2-subheader">
<md-icon ng-class="{ 'icon-contacts': acl.folderType == 'AddressBook',
'icon-event': acl.folderType == 'Calendar' }"><!--icon--></md-icon>
{{::acl.folder.name}}
</h6>
</div>
</div>
<md-button type="button" class="md-fab md-fab-bottom-right md-fab-overlap-bottom"
ng-click="acl.save()">
<md-icon>save</md-icon>
</md-button>
</md-toolbar>
<md-content class="layout-fill layout-padding">
<div layout="row">
<md-icon>search</md-icon>
<md-autocomplete
class="md-flex"
md-input-name="addUser"
@ -32,61 +53,55 @@
</span>
</md-item-template>
</md-autocomplete>
<md-button type="button" class="md-fab md-fab-bottom-right md-fab-overlap-bottom"
ng-click="acl.save()">
<md-icon>save</md-icon>
</md-button>
</div>
</md-toolbar>
<md-content>
<md-card ng-repeat="user in acl.users | orderBy:['userClass', 'displayName']"
ng-class="{ 'sg-collapsed': user.uid != acl.selectedUser.uid, 'sg-expanded': user.uid == acl.selectedUser.uid }">
<md-button ng-click="acl.selectUser(user)">
<div layout="row" layout-align="start center" class="md-flex">
<span class="card-picture" ng-switch="user.userClass">
<div ng-switch-when="normal-user">
<sg-avatar-image class="md-avatar"
sg-email="user.c_email"
size="40"><!-- avatar --></sg-avatar-image>
</div>
<div ng-switch-when="normal-group" class="md-avatar sg-avatar-list"><!-- normal-group --></div>
<div ng-switch-when="public-user" class="md-avatar sg-avatar-list"><!-- public-user --></div>
</span>
<div class="sg-tile-content">
<div class="sg-md-subhead"><div>{{user.cn}}</div></div>
<div class="sg-md-body"><div>{{user.c_email}}</div></div>
</div>
<md-card ng-repeat="user in acl.users | orderBy:['userClass', 'displayName']"
class="sg-collapsed"
ng-class="{ 'sg-expanded': user.uid == acl.selectedUid }">
<md-button ng-click="acl.selectUser(user)">
<div layout="row" layout-align="start center" class="md-flex">
<span class="card-picture" ng-switch="user.userClass">
<div ng-switch-when="normal-user">
<sg-avatar-image class="md-avatar"
sg-email="user.c_email"
size="40"><!-- avatar --></sg-avatar-image>
</div>
<md-button class="sg-icon-button" type="button"
ng-click="acl.removeUser(user)"
ng-hide="user.uid != acl.selectedUser.uid || user.$isSpecial()">
<md-icon>delete</md-icon>
</md-button>
<div ng-switch-when="normal-group" class="md-avatar sg-avatar-list"><!-- normal-group --></div>
<div ng-switch-when="public-user" class="md-avatar sg-avatar-list"><!-- public-user --></div>
</span>
<div class="sg-tile-content">
<div class="sg-md-subhead"><div>{{user.cn}}</div></div>
<div class="sg-md-body"><div>{{user.c_email}}</div></div>
</div>
</md-button>
<md-card-content id="AccessRightList" ng-show="user.uid == acl.selectedUser.uid">
<var:if condition="canSubscribeUsers">
<md-checkbox ng-model="user.isSubscribed"
label:arial-label="Subscribe User"
ng-disabled="user.wasSubscribed"
ng-true-value="1"
ng-false-value="0"
ng-hide="user.$isSpecial()">
<var:string label:value="Subscribe User"/>
</md-checkbox>
</var:if>
<div ng-include="acl.getTemplate()"></div>
<md-button class="md-icon-button md-secondary" type="button"
ng-click="acl.removeUser(user)"
ng-hide="user.uid != acl.selectedUid || user.$isSpecial()">
<md-icon>delete</md-icon>
</md-button>
</div>
</md-button>
<md-card-content id="AccessRightList" ng-show="user.uid == acl.selectedUid">
<var:if condition="canSubscribeUsers">
<md-checkbox ng-model="user.isSubscribed"
label:arial-label="Subscribe User"
ng-disabled="user.wasSubscribed"
ng-true-value="1"
ng-false-value="0"
ng-hide="user.$isSpecial()">
<var:string label:value="Subscribe User"/>
</md-checkbox>
</var:if>
<div ng-include="acl.getTemplate()"></div>
<!-- <script type="text/ng-template" id="UIxContactsUserRightsEditor">
<var:component className="UIxContactsUserRightsEditor" />
</script>
<!-- <script type="text/ng-template" id="UIxContactsUserRightsEditor">
<var:component className="UIxContactsUserRightsEditor" />
</script>
<script type="text/ng-template" id="UIxCalUserRightsEditor">
<var:component className="UIxCalUserRightsEditor" />
</script> -->
</md-card-content>
</md-card>
</md-content>
</div>
<script type="text/ng-template" id="UIxCalUserRightsEditor">
<var:component className="UIxCalUserRightsEditor" />
</script> -->
</md-card-content>
</md-card>
</md-content>
</container>

View File

@ -42,6 +42,7 @@
}
},
resolve: {
stateUser: stateUser,
stateFolder: stateFolder
}
});
@ -49,39 +50,75 @@
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/rights');
}
stateFolder.$inject = ['$stateParams', 'User', 'AddressBook', 'Calendar'];
function stateFolder($stateParams, User, AddressBook, Calendar) {
var user = _.find(User.$users, function(user) {
/**
* @ngInject
*/
stateUser.$inject = ['$q', '$stateParams', 'User'];
function stateUser($q, $stateParams, User) {
var user;
user = _.find(User.$users, function(user) {
return user.uid == $stateParams.userId;
});
var folder = _.find(user.$$folders, function(folder) {
return folder.name == $stateParams.folderId;
});
if (angular.isUndefined(user)) {
return User.$filter($stateParams.userId).then(function(users) {
user = _.find(User.$users, function(user) {
return user.uid == $stateParams.userId;
});
if (angular.isUndefined(user)) {
return $q.reject('User with ID ' + $stateParams.userId + ' not found');
}
else {
// Resolve folders
return user.$folders().then(function() {
return user;
});
}
return user;
});
}
var o;
return user;
}
/**
* @ngInject
*/
stateFolder.$inject = ['$state', '$stateParams', 'decodeUriFilter', 'stateUser', 'AddressBook', 'Calendar'];
function stateFolder($state, $stateParams, decodeUriFilter, stateUser, AddressBook, Calendar) {
var folder, o,
folderId = decodeUriFilter($stateParams.folderId);
folder = _.find(stateUser.$$folders, function(folder) {
return folder.name == folderId;
});
if (folder.type == "Appointment") {
o = new Calendar({id: folder.name.split('/').pop(),
owner: folder.owner,
name: folder.displayName});
o = new Calendar({ id: folder.name.split('/').pop(),
owner: folder.owner,
name: folder.displayName });
} else {
o = new AddressBook({id: folder.name.split('/').pop(),
owner: folder.owner,
name: folder.displayName});
o = new AddressBook({ id: folder.name.split('/').pop(),
owner: folder.owner,
name: folder.displayName });
}
return o;
}
/**
* @ngInject
*/
runBlock.$inject = ['$rootScope'];
function runBlock($rootScope) {
runBlock.$inject = ['$log', '$rootScope', '$state'];
function runBlock($log, $rootScope, $state) {
$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
$log.error(error);
$state.go('administration.rights');
});
$rootScope.$on('$routeChangeError', function(event, current, previous, rejection) {
console.error(event, current, previous, rejection);
$log.error(event, current, previous, rejection);
});
}

View File

@ -7,13 +7,18 @@
/**
* @ngInject
*/
AdministrationAclController.$inject = ['$state', '$mdToast', 'stateFolder', 'User'];
function AdministrationAclController($state, $mdToast, stateFolder, User) {
AdministrationAclController.$inject = ['$animate', '$state', '$mdToast', 'stateUser', 'stateFolder', 'User'];
function AdministrationAclController($animate, $state, $mdToast, stateUser, stateFolder, User) {
var vm = this;
vm.user = stateUser;
vm.folder = stateFolder;
vm.folderType = angular.isDefined(stateFolder.$cards)? 'AddressBook' : 'Calendar';
vm.selectedUser = null;
vm.getTemplate = getTemplate;
vm.selectedUid = null;
vm.selectUser = selectUser;
vm.removeUser = removeUser;
vm.getTemplate = getTemplate;
vm.save = save;
vm.userToAdd = '';
@ -33,19 +38,26 @@
}
function selectUser(user) {
if (vm.selectedUser == user) {
vm.selectedUser = null;
if (vm.selectedUid == user.uid) {
vm.selectedUid = null;
}
else {
vm.selectedUid = user.uid;
vm.selectedUser = user;
vm.selectedUser.$rights();
}
}
function userFilter($query) {
return User.$filter($query, stateFolder.$acl.users);
return User.$filter($query, stateFolder.$acl.users, { dry: true });
}
function removeUser(user) {
stateFolder.$acl.$removeUser(user.uid).catch(function(data, status) {
Dialog.alert(l('Warning'), l('An error occured please try again.'));
});
}
function addUser(data) {
if (data) {
stateFolder.$acl.$addUser(data, stateFolder.owner).then(function() {
@ -69,7 +81,6 @@
Dialog.alert(l('Warning'), l('An error occured please try again.'));
});
}
}
angular

View File

@ -7,8 +7,8 @@
/**
* @ngInject
*/
AdministrationController.$inject = ['$state', '$mdDialog', '$mdToast', 'Dialog', 'User', 'Administration'];
function AdministrationController($state, $mdDialog, $mdToast, Dialog, User, Administration) {
AdministrationController.$inject = ['$state', '$mdDialog', '$mdToast', 'Dialog', 'encodeUriFilter', 'User', 'Administration'];
function AdministrationController($state, $mdDialog, $mdToast, Dialog, encodeUriFilter, User, Administration) {
var vm = this;
vm.administration = Administration;
@ -26,8 +26,7 @@
}
function filter(searchText) {
User.$filter(searchText).then(function() {
});
User.$filter(searchText);
}
function selectUser(i) {
@ -43,7 +42,7 @@
}
function selectFolder(folder) {
$state.go('administration.rights.edit', {userId: vm.selectedUser.uid, folderId: folder.name});
$state.go('administration.rights.edit', {userId: vm.selectedUser.uid, folderId: encodeUriFilter(folder.name)});
}
}

View File

@ -43,25 +43,33 @@
* @param {object[]} excludedUsers - a list of User objects that must be excluded from the results
* @return a promise of an array of matching User objects
*/
User.$filter = function(search, excludedUsers) {
User.$filter = function(search, excludedUsers, options) {
var _this = this, param = {search: search};
if (!search) {
// No query specified
User.$users.splice(0, User.$users.length);
return User.$q.when(User.$users);
if (!options || !options.dry) {
if (!search) {
// No query specified
User.$users.splice(0, User.$users.length);
return User.$q.when(User.$users);
}
if (User.$query == search) {
// Query hasn't changed
return User.$q.when(User.$users);
}
User.$query = search;
}
if (User.$query == search) {
// Query hasn't changed
return User.$q.when(User.$users);
}
User.$query = search;
return User.$$resource.fetch(null, 'usersSearch', param).then(function(response) {
var results, index, user,
var results, index, user, users,
compareUids = function(data) {
return this.uid == data.uid;
};
if (options && options.dry)
users = [];
else
users = User.$users;
if (excludedUsers) {
// Remove excluded users from response
results = _.filter(response.users, function(user) {
@ -73,21 +81,21 @@
}
// Remove users that no longer match the search query
for (index = User.$users.length - 1; index >= 0; index--) {
user = User.$users[index];
for (index = users.length - 1; index >= 0; index--) {
user = users[index];
if (!_.find(results, compareUids, user)) {
User.$users.splice(index, 1);
users.splice(index, 1);
}
}
// Add new users matching the search query
_.each(results, function(data, index) {
if (_.isUndefined(_.find(User.$users, compareUids, data))) {
if (_.isUndefined(_.find(users, compareUids, data))) {
var user = new User(data);
User.$users.splice(index, 0, user);
users.splice(index, 0, user);
}
});
User.$log.debug(User.$users);
return User.$users;
User.$log.debug(users);
return users;
});
};

View File

@ -16,6 +16,15 @@ md-card {
margin: 0;
flex-direction: row;
}
.md-icon-button {
transition: $swift-linear;
transition-delay: 0.2s;
opacity: 1;
&.ng-hide {
transition: $swift-linear;
opacity: 0;
}
}
md-card-content {
order: 1;
transition: $swift-ease-in-out;
@ -40,6 +49,9 @@ md-card {
&.sg-expanded {
@extend .md-whiteframe-z2;
margin: 0 0 1px 0;
&-remove {
transition-delay: 0.5s;
}
}
.md-button {

View File

@ -342,12 +342,24 @@ html p {
font-weight: $sg-font-regular;
white-space: nowrap;
}
.#{$md}-display-2--light {
.#{$md}-display-2--thin {
$lineHeight: $sg-line-height-7;
font-size: $sg-font-size-7;
line-height: $lineHeight;
font-weight: $sg-font-light;
font-weight: $sg-font-thin;
}
.#{$md}-display-2-subheader {
@extend .#{$md}-title;
margin-bottom: $mg;
font-weight: $sg-font-regular;
white-space: normal;
}
.#{$md}-display-2-subheader--thin {
@extend .#{$md}-title;
margin-bottom: $mg;
font-weight: $sg-font-thin;
white-space: normal;
}
.#{$md}-display-3 {
$lineHeight : $sg-line-height-8;
font-size: $sg-font-size-8;
@ -362,12 +374,6 @@ html p {
font-weight: $sg-font-light;
white-space: nowrap;
}
.#{$md}-display-2-subheader {
@extend .#{$md}-title;
margin-bottom: $mg;
font-weight: $sg-font-thin;
white-space: normal;
}
.sg-no-wrap {
overflow: hidden;

View File

@ -0,0 +1,20 @@
/// AdministrationUI.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
[id="usersList"] > md-list {
// Since the users list doesn't use the virtual repeater, force the vertical scroll
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
overflow-y: auto;
.sg-folder .md-button {
// Buttons in list-item to view the ACLs of a user's folder
@extend .sg-no-wrap;
flex: 1 1 auto;
text-align: left;
text-transform: none;
}
}

View File

@ -5,6 +5,7 @@
@import 'ContactsUI.scss';
@import 'MessageEditorUI';
@import 'SchedulerUI';
@import 'AdministrationUI';
.view[layout=row],
.view.layout-row {