(js,html) Improve sgSubscribe directive
parent
6641bbded2
commit
a4a75607fa
|
@ -132,6 +132,8 @@
|
||||||
"New Addressbook..." = "New Addressbook...";
|
"New Addressbook..." = "New Addressbook...";
|
||||||
"Subscribe to an Addressbook..." = "Subscribe to an Addressbook...";
|
"Subscribe to an Addressbook..." = "Subscribe to an Addressbook...";
|
||||||
"Remove the selected Addressbook" = "Remove the selected Addressbook";
|
"Remove the selected Addressbook" = "Remove the selected Addressbook";
|
||||||
|
"Subscribe to a shared folder" = "Subscribe to a shared folder";
|
||||||
|
"Search User" = "Search User";
|
||||||
|
|
||||||
"Name of the Address Book" = "Name of the Address Book";
|
"Name of the Address Book" = "Name of the Address Book";
|
||||||
"Are you sure you want to delete the selected address book?"
|
"Are you sure you want to delete the selected address book?"
|
||||||
|
@ -147,8 +149,6 @@
|
||||||
"You cannot delete the card of \"%{0}\"."
|
"You cannot delete the card of \"%{0}\"."
|
||||||
= "You cannot delete the card of \"%{0}\".";
|
= "You cannot delete the card of \"%{0}\".";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
"You cannot subscribe to a folder that you own!"
|
"You cannot subscribe to a folder that you own!"
|
||||||
= "You cannot subscribe to a folder that you own.";
|
= "You cannot subscribe to a folder that you own.";
|
||||||
"Unable to subscribe to that folder!"
|
"Unable to subscribe to that folder!"
|
||||||
|
|
|
@ -8,31 +8,67 @@
|
||||||
xmlns:uix="OGo:uix">
|
xmlns:uix="OGo:uix">
|
||||||
<md-dialog flex="50" flex-sm="100">
|
<md-dialog flex="50" flex-sm="100">
|
||||||
<md-dialog-content>
|
<md-dialog-content>
|
||||||
<h2 class="md-headline"><var:string label:value="Subscribe"/></h2>
|
<h2 class="md-title"><var:string label:value="Subscribe to a shared folder"/></h2>
|
||||||
<md-input-container>
|
<md-input-container>
|
||||||
<label><md-icon>search</md-icon><var:string label:value="Search"/></label>
|
<label><md-icon>search</md-icon><var:string label:value="Search User"/></label>
|
||||||
<input type="input"
|
<input type="input"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
ng-model="vm.searchText"
|
ng-model="subscribe.searchText"
|
||||||
ng-model-options="vm.searchTextOptions"
|
ng-model-options="subscribe.searchTextOptions"
|
||||||
ng-change="vm.onChange()"/>
|
ng-change="subscribe.onChange()"/>
|
||||||
</md-input-container>
|
</md-input-container>
|
||||||
<md-list>
|
<md-card ng-repeat="user in subscribe.users"
|
||||||
|
ng-class="{ 'sg-collapsed': user.uid != subscribe.selectedUser.uid, 'sg-expanded': user.uid == subscribe.selectedUser.uid }">
|
||||||
|
<md-button ng-click="subscribe.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-tile-left"
|
||||||
|
sg-email="user.c_email"
|
||||||
|
size="48"><!-- 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-multi">{{user.cn}} {{user.userClass}}</div>
|
||||||
|
<div class="sg-md-body-multi">{{user.c_email}}</div>
|
||||||
|
</div>
|
||||||
|
<md-icon ng-class="{ 'icon-expand-more': user.uid != subscribe.selectedUser.uid,
|
||||||
|
'icon-expand-less': user.uid == subscribe.selectedUser.uid }"><!--icon--></md-icon>
|
||||||
|
</div>
|
||||||
|
</md-button>
|
||||||
|
<md-card-content ng-show="user == subscribe.selectedUser">
|
||||||
|
<div ng-show="user.$$folders.length == 0">
|
||||||
|
<md-icon>warning</md-icon>
|
||||||
|
<var:string label:value="No possible subscription"/>
|
||||||
|
</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>
|
||||||
|
<p class="sg-padded--left md-flex">{{folder.displayName}}</p>
|
||||||
|
<md-button class="md-raised"
|
||||||
|
ng-click="subscribe.selectFolder(folder)"><var:string label:value="Subscribe"/></md-button>
|
||||||
|
</div>
|
||||||
|
</md-card-content>
|
||||||
|
</md-card>
|
||||||
|
|
||||||
|
<md-list class="ng-hide">
|
||||||
<md-list-item layout="column"
|
<md-list-item layout="column"
|
||||||
ng-repeat="user in vm.users">
|
ng-repeat="user in subscribe.users">
|
||||||
<md-button class="sg-expandable" ng-click="vm.selectUser($index)">
|
<md-button class="sg-expandable" ng-click="subscribe.selectUser($index)">
|
||||||
<div layout="row" layout-align="start center"
|
<div layout="row" layout-align="start center"
|
||||||
layout-fill="true">
|
layout-fill="true">
|
||||||
<div class="sg-avatar"><!-- normal-user --></div>
|
<div class="sg-avatar"><!-- normal-user --></div>
|
||||||
<span class="sg-item-name">{{user.$shortFormat()}}</span>
|
<span class="sg-item-name">{{user.$shortFormat()}}</span>
|
||||||
<span class="md-secondary md-display-1">
|
<span class="md-secondary md-display-1">
|
||||||
<md-icon ng-class="{ 'icon-expand-more': user.uid != vm.selectedUser.uid,
|
<md-icon ng-class="{ 'icon-expand-more': user.uid != subscribe.selectedUser.uid,
|
||||||
'icon-expand-less': user.uid == vm.selectedUser.uid }"><!--icon--></md-icon>
|
'icon-expand-less': user.uid == subscribe.selectedUser.uid }"><!--icon--></md-icon>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</md-button>
|
</md-button>
|
||||||
<md-list layout-fill="true"
|
<md-list layout-fill="true"
|
||||||
ng-show="user == vm.selectedUser">
|
ng-show="user == subscribe.selectedUser">
|
||||||
<md-list-item ng-show="user.$$folders.length == 0">
|
<md-list-item ng-show="user.$$folders.length == 0">
|
||||||
<md-icon>warning</md-icon>
|
<md-icon>warning</md-icon>
|
||||||
<var:string label:value="No possible subscription"/>
|
<var:string label:value="No possible subscription"/>
|
||||||
|
@ -44,7 +80,7 @@
|
||||||
<p class="md-flex sg-item-name">{{folder.displayName}}</p>
|
<p class="md-flex sg-item-name">{{folder.displayName}}</p>
|
||||||
<md-button
|
<md-button
|
||||||
class="md-raised"
|
class="md-raised"
|
||||||
ng-click="vm.selectFolder(folder)"><var:string label:value="Subscribe"/></md-button>
|
ng-click="subscribe.selectFolder(folder)"><var:string label:value="Subscribe"/></md-button>
|
||||||
</md-list-item>
|
</md-list-item>
|
||||||
</md-list>
|
</md-list>
|
||||||
<md-divider ng-if="!$last"><!-- divider --></md-divider>
|
<md-divider ng-if="!$last"><!-- divider --></md-divider>
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* sgSubscribe - Common subscription widget
|
* sgSubscribe - Common subscription widget
|
||||||
* @restrict class or attribute
|
* @restrict attribute
|
||||||
* @param {string} sgSubscribe - the folder type
|
* @param {string} sgSubscribe - the folder type
|
||||||
* @param {function} sgSubscribeOnSelect - the function to call when subscribing to a folder.
|
* @param {function} sgSubscribeOnSelect - the function to call when subscribing to a folder.
|
||||||
* One variable is available: folderData.
|
* One variable is available: folderData.
|
||||||
|
@ -26,7 +26,7 @@
|
||||||
replace: false,
|
replace: false,
|
||||||
bindToController: true,
|
bindToController: true,
|
||||||
controller: sgSubscribeDialogController,
|
controller: sgSubscribeDialogController,
|
||||||
controllerAs: 'vm',
|
controllerAs: '$sgSubscribeDialogController',
|
||||||
link: link
|
link: link
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -51,7 +51,7 @@
|
||||||
onFolderSelect: vm.onFolderSelect
|
onFolderSelect: vm.onFolderSelect
|
||||||
},
|
},
|
||||||
controller: sgSubscribeController,
|
controller: sgSubscribeController,
|
||||||
controllerAs: 'vm'
|
controllerAs: 'subscribe'
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -62,7 +62,9 @@
|
||||||
sgSubscribeController.$inject = ['folderType', 'onFolderSelect', 'User'];
|
sgSubscribeController.$inject = ['folderType', 'onFolderSelect', 'User'];
|
||||||
function sgSubscribeController(folderType, onFolderSelect, User) {
|
function sgSubscribeController(folderType, onFolderSelect, User) {
|
||||||
var vm = this;
|
var vm = this;
|
||||||
|
|
||||||
vm.selectedUser = null;
|
vm.selectedUser = null;
|
||||||
|
vm.users = User.$users;
|
||||||
|
|
||||||
vm.searchTextOptions = {
|
vm.searchTextOptions = {
|
||||||
updateOn: 'default blur',
|
updateOn: 'default blur',
|
||||||
|
@ -73,16 +75,28 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
vm.onChange = function() {
|
vm.onChange = function() {
|
||||||
User.$filter(vm.searchText).then(function(matches) {
|
User.$filter(vm.searchText).then(function() {
|
||||||
vm.users = matches;
|
if (vm.selectedUser) {
|
||||||
|
// If selected user is no longer part of the matching users, unselect it
|
||||||
|
if (_.isUndefined(_.find(User.$users, function(user) {
|
||||||
|
return user.uid == vm.selectedUser.uid;
|
||||||
|
}))) {
|
||||||
|
vm.selectedUser = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
vm.selectUser = function(i) {
|
vm.selectUser = function(i) {
|
||||||
// Fetch folders of specific type for selected user
|
if (vm.selectedUser == vm.users[i]) {
|
||||||
vm.users[i].$folders(folderType).then(function() {
|
vm.selectedUser = null;
|
||||||
vm.selectedUser = vm.users[i];
|
}
|
||||||
});
|
else {
|
||||||
|
// Fetch folders of specific type for selected user
|
||||||
|
vm.users[i].$folders(folderType).then(function() {
|
||||||
|
vm.selectedUser = vm.users[i];
|
||||||
|
});
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Callback upon subscription to a folder
|
// Callback upon subscription to a folder
|
||||||
|
|
Loading…
Reference in New Issue