Skip to content

Commit

Permalink
(js,html) Improve sgSubscribe directive
Browse files Browse the repository at this point in the history
  • Loading branch information
@cgx
cgx committed Aug 6, 2015
1 parent 6641bbd commit a4a7560
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 23 deletions.
4 changes: 2 additions & 2 deletions UI/Contacts/English.lproj/Localizable.strings
View file
Expand Up @@ -132,6 +132,8 @@
"New Addressbook..." = "New Addressbook...";
"Subscribe to an Addressbook..." = "Subscribe to an 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";
"Are you sure you want to delete the selected address book?"
Expand All @@ -147,8 +149,6 @@
"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.";
"Unable to subscribe to that folder!"
Expand Down
60 changes: 48 additions & 12 deletions UI/Templates/ContactsUI/UIxContactsUserFolders.wox
View file
Expand Up @@ -8,31 +8,67 @@
xmlns:uix="OGo:uix">
<md-dialog flex="50" flex-sm="100">
<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>
<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"
autocomplete="off"
ng-model="vm.searchText"
ng-model-options="vm.searchTextOptions"
ng-change="vm.onChange()"/>
ng-model="subscribe.searchText"
ng-model-options="subscribe.searchTextOptions"
ng-change="subscribe.onChange()"/>
</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"
ng-repeat="user in vm.users">
<md-button class="sg-expandable" ng-click="vm.selectUser($index)">
ng-repeat="user in subscribe.users">
<md-button class="sg-expandable" ng-click="subscribe.selectUser($index)">
<div layout="row" layout-align="start center"
layout-fill="true">
<div class="sg-avatar"><!-- normal-user --></div>
<span class="sg-item-name">{{user.$shortFormat()}}</span>
<span class="md-secondary md-display-1">
<md-icon ng-class="{ 'icon-expand-more': user.uid != vm.selectedUser.uid,
'icon-expand-less': user.uid == vm.selectedUser.uid }"><!--icon--></md-icon>
<md-icon ng-class="{ 'icon-expand-more': user.uid != subscribe.selectedUser.uid,
'icon-expand-less': user.uid == subscribe.selectedUser.uid }"><!--icon--></md-icon>
</span>
</div>
</md-button>
<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-icon>warning</md-icon>
<var:string label:value="No possible subscription"/>
Expand All @@ -44,7 +80,7 @@
<p class="md-flex sg-item-name">{{folder.displayName}}</p>
<md-button
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>
<md-divider ng-if="!$last"><!-- divider --></md-divider>
Expand Down
32 changes: 23 additions & 9 deletions UI/WebServerResources/js/Common/sgSubscribe.directive.js
View file
Expand Up @@ -6,7 +6,7 @@

/*
* sgSubscribe - Common subscription widget
* @restrict class or attribute
* @restrict attribute
* @param {string} sgSubscribe - the folder type
* @param {function} sgSubscribeOnSelect - the function to call when subscribing to a folder.
* One variable is available: folderData.
Expand All @@ -26,7 +26,7 @@
replace: false,
bindToController: true,
controller: sgSubscribeDialogController,
controllerAs: 'vm',
controllerAs: '$sgSubscribeDialogController',
link: link
};
}
Expand All @@ -51,7 +51,7 @@
onFolderSelect: vm.onFolderSelect
},
controller: sgSubscribeController,
controllerAs: 'vm'
controllerAs: 'subscribe'
});
};
}
Expand All @@ -62,7 +62,9 @@
sgSubscribeController.$inject = ['folderType', 'onFolderSelect', 'User'];
function sgSubscribeController(folderType, onFolderSelect, User) {
var vm = this;

vm.selectedUser = null;
vm.users = User.$users;

vm.searchTextOptions = {
updateOn: 'default blur',
Expand All @@ -73,16 +75,28 @@
};

vm.onChange = function() {
User.$filter(vm.searchText).then(function(matches) {
vm.users = matches;
User.$filter(vm.searchText).then(function() {
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) {
// Fetch folders of specific type for selected user
vm.users[i].$folders(folderType).then(function() {
vm.selectedUser = vm.users[i];
});
if (vm.selectedUser == vm.users[i]) {
vm.selectedUser = null;
}
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
Expand Down

0 comments on commit a4a7560

Please sign in to comment.