Improve usage of ui.router with "resolve"

pull/91/head
Francis Lachapelle 2014-09-17 16:28:40 -04:00
parent f363257e51
commit 17ee62f4de
3 changed files with 290 additions and 288 deletions

View File

@ -60,20 +60,6 @@
</div>
</div>
<ul class="f-dropdown" data-dropdown-content="dropdown-content" id="contactFoldersMenu">
<li><var:string label:value="Properties" /></li>
<li><!-- separator --></li>
<li><var:string label:value="New Card" /></li>
<li><var:string label:value="New List" /></li>
<li><!-- separator --></li>
<li><var:string label:value="Delete" /></li>
<li><!-- separator --></li>
<li><var:string label:value="Export Address Book..."/></li>
<li><var:string label:value="Import Cards" /></li>
<li><!-- separator --></li>
<li><var:string label:value="Sharing..." /></li>
</ul>
<ul class="f-dropdown" data-dropdown-content="dropdown-content" id="contactMenu">
<li><var:string label:value="Properties" /></li>
<li><var:string label:value="Categories" /></li>
@ -91,7 +77,17 @@
<div>
<div data-ng-controller="AddressBookCtrl" data-ng-init="init()">
<div data-ui-view="addressbooks"><!-- addressbooks list --></div>
<!-- modal for addressbook sharing options -->
<script type="text/ng-template" id="addressbookSharing.html">
<h2>Sharing</h2>
<p class="lead"></p>
<p></p>
<span class="close-reveal-modal" data-ng-click="closeModal()"><i class="icon-close"><!-- close --></i></span>
</script>
<script type="text/ng-template" id="addressbooks.html">
<!-- dropdown menu for addressbook options button -->
<div id="addressbookProperties" class="f-dropdown icons-dropdown" data-dropdown-content="dropdown-content">
@ -105,6 +101,9 @@
<li data-ng-show="!addressbook.isRemote">
<span class="button" data-ng-click="share()"><i class="icon-earth"><!-- share --></i></span>
</li>
<li data-ng-show="!addressbook.isRemote">
<span class="button" data-ng-click="importCards()"><i class="icon-file"><!-- import --></i></span>
</li>
<li data-ng-show="!addressbook.isRemote">
<span class="button" data-ng-click="confirmDelete(addressbook)"><i class="icon-trash"><!-- delete --></i></span>
</li>
@ -116,14 +115,6 @@
<li><a class="tiny" data-ui-sref="addressbook.new({addressbook_id: addressbook.id, contact_type: 'list'})"><var:string label:value="New List"/></a></li>
</ul>
<!-- modal for addressbook sharing options -->
<script type="text/ng-template" id="addressbookSharing.html">
<h2>Sharing</h2>
<p class="lead"></p>
<p></p>
<span class="close-reveal-modal" data-ng-click="closeModal()"><i class="icon-close"><!-- close --></i></span>
</script>
<div id="addressbooksList" class="folders-list">
<div class="newItemsToolbar">
<a class="button tiny radius split" data-ui-sref="addressbook.new({addressbook_id: addressbook.id, contact_type: 'card'})"><var:string label:value="New Card"/><span data-dropdown-toggle="#newListDrop"></span></a><br/>
@ -157,13 +148,10 @@
</div>
</var:if>-->
</div>
</div>
<div class="dragHandle" id="dragHandle"><!-- space --></div>
<div class="dragHandle" id="dragHandle"><!-- space --></div>
<div id="rightPanel" ui-view="addressbook"><!-- addressbook state view --></div>
<script type="text/ng-template" id="addressbook.html">
<div id="rightPanel">
<div id="contactsList">
<div class="buttonsToolbar searchToolbar">
@ -203,13 +191,15 @@
</li>
</ul>
</div>
<div id="contactView" ui-view="card"><!-- card state view --></div>
<div id="contactView" data-ui-view="card"><!-- card state view --></div>>
</div>
</script>
<script type="text/ng-template" id="card.html">
<div class="viewer" data-ng-show="addressbook.$viewerIsActive(editMode)">
<div class="viewer">
<div class="header">
<h1 data-ng-bind-html="addressbook.card.$fullname()"><!-- fullname --></h1>
<h6>{{addressbook.card.$description()}}

View File

@ -171,10 +171,6 @@
this.$getCard(this.card.id);
};
AddressBook.prototype.$viewerIsActive = function(editMode) {
return (this.card != null && !editMode);
};
// Unwrap a promise
AddressBook.prototype.$unwrap = function(futureAddressBookData) {
var self = this;

View File

@ -1,289 +1,305 @@
/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 4 -*- */
/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
/* JavaScript for SOGoContacts */
(function() {
'use strict';
'use strict';
angular.module('SOGo.Common', []);
angular.module('SOGo.Common', []);
angular.module('SOGo.ContactsUI', ['ngSanitize', 'ui.router', 'mm.foundation', 'SOGo.Common', 'SOGo.UIDesktop'])
angular.module('SOGo.ContactsUI', ['ngSanitize', 'ui.router', 'mm.foundation', 'SOGo.Common', 'SOGo.UIDesktop'])
.constant('sgSettings', {
'baseURL': ApplicationBaseURL
baseURL: ApplicationBaseURL
})
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('addressbook', {
url: "/:addressbook_id",
views: {
'addressbook': {
templateUrl: "addressbook.html",
controller: 'AddressBookCtrl'
}
}
})
.state('addressbook.card', {
url: "/:card_id",
views: {
'card': {
templateUrl: "card.html",
controller: 'CardCtrl'
}
}
})
.state('addressbook.new', {
url: "/:contact_type/new",
views: {
'card': {
templateUrl: "cardEditor.html",
controller: 'CardCtrl'
}
}
})
.state('addressbook.editor', {
url: "/:card_id/edit",
views: {
'card': {
templateUrl: "cardEditor.html",
controller: 'CardCtrl'
}
}
});
$stateProvider
.state('addressbook', {
url: '/:addressbook_id',
views: {
addressbooks: {
templateUrl: 'addressbooks.html',
controller: 'AddressBookCtrl'
}
},
resolve: {
stateAddressbooks: ['sgAddressBook', function(AddressBook) {
return AddressBook.$all(contactFolders);
}],
stateAddressbook: ['$stateParams', 'sgAddressBook', function($stateParams, AddressBook) {
return AddressBook.$find($stateParams.addressbook_id);
}]
}
})
.state('addressbook.card', {
url: '/:card_id',
views: {
card: {
templateUrl: 'card.html',
controller: 'CardCtrl'
}
},
resolve: {
stateCard: ['$stateParams', 'stateAddressbook', function($stateParams, stateAddressbook) {
return stateAddressbook.$getCard($stateParams.card_id);
}]
}
})
.state('addressbook.new', {
url: '/:contact_type/new',
views: {
card: {
templateUrl: 'cardEditor.html',
controller: 'CardCtrl'
}
},
resolve: {
stateCard: ['$stateParams', 'stateAddressbook', 'sgCard', function($stateParams, stateAddressbook, Card) {
var tag = 'v' + $stateParams.contact_type;
stateAddressbook.card = new Card({ pid: $stateParams.addressbook_id, tag: tag });
return stateAddressbook.card;
}]
}
})
.state('addressbook.editor', {
url: '/:card_id/edit',
views: {
card: {
templateUrl: 'cardEditor.html',
controller: 'CardCtrl'
}
},
resolve: {
stateCard: ['$stateParams', 'stateAddressbook', function($stateParams, stateAddressbook) {
return stateAddressbook.$getCard($stateParams.card_id);
}]
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/personal');
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/personal');
}])
.directive('sgFocusOn', function() {
return function(scope, elem, attr) {
scope.$on('sgFocusOn', function(e, name) {
if (name === attr.sgFocusOn) {
elem[0].focus();
elem[0].select();
}
});
};
return function(scope, elem, attr) {
scope.$on('sgFocusOn', function(e, name) {
if (name === attr.sgFocusOn) {
elem[0].focus();
elem[0].select();
}
});
};
})
.factory('sgFocus', ['$rootScope', '$timeout', function ($rootScope, $timeout) {
.factory('sgFocus', ['$rootScope', '$timeout', function($rootScope, $timeout) {
return function(name) {
$timeout(function (){
$timeout(function() {
$rootScope.$broadcast('sgFocusOn', name);
});
}
}])
.controller('AddressBookCtrl', ['$state', '$scope', '$rootScope', '$stateParams', '$timeout', '$modal', 'sgFocus', 'sgCard', 'sgAddressBook', 'sgDialog', function($state, $scope, $rootScope, $stateParams, $timeout, $modal, focus, Card, AddressBook, Dialog) {
// $scope objects
$scope.search = { 'status': null, 'filter': null, 'last_filter': null };
.controller('AddressBookCtrl', ['$state', '$scope', '$rootScope', '$stateParams', '$timeout', '$modal', 'sgFocus', 'sgCard', 'sgAddressBook', 'sgDialog', 'stateAddressbooks', 'stateAddressbook', function($state, $scope, $rootScope, $stateParams, $timeout, $modal, focus, Card, AddressBook, Dialog, stateAddressbooks, stateAddressbook) {
var addressbookEntry;
if ($stateParams.addressbook_id &&
($rootScope.addressbook == undefined || $stateParams.addressbook_id != $rootScope.addressbook.id)) {
// Selected addressbook has changed; fetch list of contacts
$rootScope.addressbook = AddressBook.$find($stateParams.addressbook_id);
// Adjust search status depending on addressbook type
var o = _.find($rootScope.addressbooks, function(o) {
return o.id == $stateParams.addressbook_id;
});
$scope.search.status = (o && o.isRemote)? 'remote-addressbook' : '';
// $scope objects
$scope.search = { status: null, filter: null, last_filter: null };
$rootScope.addressbooks = stateAddressbooks;
$rootScope.addressbook = stateAddressbook;
// Adjust search status depending on addressbook type
var o = _.find($rootScope.addressbooks, function(o) {
return o.id == $stateParams.addressbook_id;
});
$scope.search.status = (o && o.isRemote)? 'remote-addressbook' : '';
// $scope functions
$scope.select = function(rowIndex) {
$scope.editMode = false;
};
$scope.newAddressbook = function() {
$scope.editMode = false;
Dialog.prompt(l('New addressbook'),
l('Name of new addressbook'))
.then(function(name) {
if (name && name.length > 0) {
var addressbook = new AddressBook(
{
name: name,
isEditable: true,
isRemote: false
}
);
AddressBook.$add(addressbook);
}
});
};
$scope.edit = function(i) {
if (!$rootScope.addressbook.isRemote) {
if (angular.isUndefined(i)) {
i = _.indexOf(_.pluck($rootScope.addressbooks, 'id'), $rootScope.addressbook.id);
}
$scope.editMode = $rootScope.addressbook.id;
focus('addressBookName_' + i);
}
// Initialize with data from template
$scope.init = function() {
$rootScope.addressbooks = AddressBook.$all(contactFolders);
};
// $scope functions
$scope.select = function(rowIndex) {
$scope.editMode = false;
};
$scope.newAddressbook = function() {
$scope.editMode = false;
Dialog.prompt(l('New addressbook'),
l('Name of new addressbook'))
.then(function(name) {
if (name && name.length > 0) {
var addressbook = new AddressBook({ 'name': name,
'isEditable': true,
'isRemote': false });
AddressBook.$add(addressbook);
}
});
};
$scope.edit = function(i) {
if (!$rootScope.addressbook.isRemote) {
if (angular.isUndefined(i)) {
i = _.indexOf(_.pluck($rootScope.addressbooks, 'id'), $rootScope.addressbook.id);
}
$scope.editMode = $rootScope.addressbook.id;
focus('addressBookName_' + i);
}
};
$scope.save = function(i) {
$rootScope.addressbook.name = $rootScope.addressbooks[i].name;
$rootScope.addressbook.$save()
.then(function(data) {
$scope.editMode = false;
}, function(data, status) {
Dialog.alert(l('Warning'), data);
});
};
$scope.confirmDelete = function() {
Dialog.confirm(l('Warning'), l('Are you sure you want to delete the addressbook "%{0}"?',
$rootScope.addressbook.name))
.then(function(res) {
if (res) {
$rootScope.addressbook.$delete()
.then(function() {
$rootScope.addressbook = null;
}, function(data, status) {
Dialog.alert(l('An error occured while deleting the addressbook "%{0}".',
$rootScope.addressbook.name),
l(data.error));
});
}
});
};
$scope.share = function() {
var modal = $modal.open({
templateUrl: 'addressbookSharing.html',
controller: function($scope, $modalInstance) {
$scope.closeModal = function() {
$modalInstance.close();
};
}
};
$scope.save = function(i) {
var name = $rootScope.addressbooks[i].name;
if (name && name.length > 0) {
$scope.addressbook.$rename(name)
.then(function(data) {
$scope.editMode = false;
}, function(data, status) {
Dialog.alert(l('Warning'), data);
});
};
$scope.doSearch = function(keyEvent) {
if ($scope.search.filter != $scope.search.last_filter) {
if ($scope.search.filter.length > 2) {
$rootScope.addressbook.$filter($scope.search.filter).then(function(data) {
if (data.length == 0)
$scope.search.status = 'no-result';
else
$scope.search.status = '';
});
}
else if ($scope.search.filter.length == 0) {
$rootScope.addressbook = AddressBook.$find($stateParams.addressbook_id);
// Extend resulting model instance with parameters from addressbooks listing
var o = _.find($rootScope.addressbooks, function(o) {
return o.id == $stateParams.addressbook_id;
});
$scope.search.status = (o.isRemote)? 'remote-addressbook' : '';
}
else {
$scope.search.status = 'min-char';
$rootScope.addressbook.cards = [];
}
}
};
$scope.confirmDelete = function() {
Dialog.confirm(l('Warning'), l('Are you sure you want to delete the addressbook <em>%{0}</em>?',
$rootScope.addressbook.name))
.then(function(res) {
if (res) {
$rootScope.addressbook.$delete()
.then(function() {
$rootScope.addressbook = null;
}, function(data, status) {
Dialog.alert(l('An error occured while deleting the addressbook "%{0}".',
$rootScope.addressbook.name),
l(data.error));
});
}
$scope.search.last_filter = $scope.search.filter;
};
});
};
$scope.importCards = function() {
};
$scope.share = function() {
var modal = $modal.open({
templateUrl: 'addressbookSharing.html',
controller: function($scope, $modalInstance) {
$scope.closeModal = function() {
$modalInstance.close();
};
}
});
};
$scope.doSearch = function(keyEvent) {
if ($scope.search.filter != $scope.search.last_filter) {
if ($scope.search.filter.length > 2) {
$rootScope.addressbook.$filter($scope.search.filter).then(function(data) {
if (data.length == 0)
$scope.search.status = 'no-result';
else
$scope.search.status = '';
});
}
else if ($scope.search.filter.length == 0) {
$rootScope.addressbook = AddressBook.$find($stateParams.addressbook_id);
// Extend resulting model instance with parameters from addressbooks listing
var o = _.find($rootScope.addressbooks, function(o) {
return o.id == $stateParams.addressbook_id;
});
$scope.search.status = (o.isRemote)? 'remote-addressbook' : '';
}
else {
$scope.search.status = 'min-char';
$rootScope.addressbook.cards = [];
}
}
$scope.search.last_filter = $scope.search.filter;
};
}])
.controller('CardCtrl', ['$scope', '$rootScope', 'sgAddressBook', 'sgCard', 'sgDialog', 'sgFocus', '$state', '$stateParams', function($scope, $rootScope, AddressBook, Card, Dialog, focus, $state, $stateParams) {
if ($stateParams.card_id) {
if (!$rootScope.addressbook) {
// Card is directly access with URL fragment
$rootScope.addressbook = AddressBook.$find($stateParams.addressbook_id);
}
$rootScope.addressbook.$getCard($stateParams.card_id)
$scope.editMode = false;
$scope.allEmailTypes = Card.$email_types;
$scope.allTelTypes = Card.$tel_types;
$scope.allUrlTypes = Card.$url_types;
$scope.allAddressTypes = Card.$address_types;
$rootScope.master_card = angular.copy($rootScope.addressbook.card);
$scope.addOrgUnit = function() {
var i = $rootScope.addressbook.card.$addOrgUnit('');
focus('orgUnit_' + i);
};
$scope.addCategory = function() {
var i = $rootScope.addressbook.card.$addCategory($scope.new_category);
focus('category_' + i);
};
$scope.addEmail = function() {
var i = $rootScope.addressbook.card.$addEmail($scope.new_email_type);
focus('email_' + i);
};
$scope.addPhone = function() {
var i = $rootScope.addressbook.card.$addPhone($scope.new_phone_type);
focus('phone_' + i);
};
$scope.addUrl = function() {
var i = $rootScope.addressbook.card.$addUrl('', '');
focus('url_' + i);
};
$scope.addAddress = function() {
var i = $rootScope.addressbook.card.$addAddress('', '', '', '', '', '', '', '');
focus('address_' + i);
};
$scope.addMember = function() {
var i = $rootScope.addressbook.card.$addMember('');
focus('ref_' + i);
};
$scope.save = function(form) {
if (form.$valid) {
$rootScope.addressbook.card.$save()
.then(function(data) {
var i = _.indexOf(_.pluck($rootScope.addressbook.cards, 'id'), $rootScope.addressbook.card.id);
if (i < 0) {
// Reload contacts list and show addressbook in which the card has been created
$rootScope.addressbook = AddressBook.$find(data.pid);
}
else {
// Update contacts list with new version of the Card object
$rootScope.addressbook.cards[i] = angular.copy($rootScope.addressbook.card);
}
$state.go('addressbook.card');
}, function(data, status) {
console.debug('failed');
});
}
else if ($stateParams.contact_type) {
// Create new card or list
var tag = 'v' + $stateParams.contact_type;
$scope.addressbook.card = new Card({ 'pid': $stateParams.addressbook_id, 'tag': tag });
$scope.editMode = true;
};
$scope.cancel = function() {
$scope.reset();
delete $rootScope.master_card;
if ($scope.addressbook.card.id) {
// Cancelling the edition of an existing card
$state.go('addressbook.card', { card_id: $scope.addressbook.card.id });
}
$scope.allEmailTypes = Card.$email_types;
$scope.allTelTypes = Card.$tel_types;
$scope.allUrlTypes = Card.$url_types;
$scope.allAddressTypes = Card.$address_types;
$rootScope.master_card = angular.copy($rootScope.addressbook.card);
$scope.addOrgUnit = function() {
var i = $rootScope.addressbook.card.$addOrgUnit('');
focus('orgUnit_' + i);
};
$scope.addCategory = function() {
var i = $rootScope.addressbook.card.$addCategory($scope.new_category);
focus('category_' + i);
};
$scope.addEmail = function() {
var i = $rootScope.addressbook.card.$addEmail($scope.new_email_type);
focus('email_' + i);
};
$scope.addPhone = function() {
var i = $rootScope.addressbook.card.$addPhone($scope.new_phone_type);
focus('phone_' + i);
};
$scope.addUrl = function() {
var i = $rootScope.addressbook.card.$addUrl('', '');
focus('url_' + i);
};
$scope.addAddress = function() {
var i = $rootScope.addressbook.card.$addAddress('', '', '', '', '', '', '', '');
focus('address_' + i);
};
$scope.addMember = function() {
var i = $rootScope.addressbook.card.$addMember('');
focus('ref_' + i);
};
$scope.save = function(form) {
if (form.$valid) {
$rootScope.addressbook.card.$save()
.then(function(data) {
var i = _.indexOf(_.pluck($rootScope.addressbook.cards, 'id'), $rootScope.addressbook.card.id);
if (i < 0) {
// Reload contacts list and show addressbook in which the card has been created
$rootScope.addressbook = AddressBook.$find(data.pid);
}
else {
// Update contacts list with new version of the Card object
$rootScope.addressbook.cards[i] = angular.copy($rootScope.addressbook.card);
}
$state.go('addressbook.card');
}, function(data, status) {
console.debug("failed");
});
}
};
$scope.cancel = function() {
$scope.reset();
delete $rootScope.master_card;
if ($scope.addressbook.card.id) {
// Cancelling the edition of an existing card
$state.go('addressbook.card', { card_id: $scope.addressbook.card.id });
}
else {
// Cancelling the creation of a card
delete $rootScope.addressbook.card;
$state.go('addressbook', { addressbook_id: $scope.addressbook.id });
}
};
$scope.reset = function() {
$rootScope.addressbook.card = angular.copy($rootScope.master_card);
};
$scope.confirmDelete = function(card) {
Dialog.confirm(l('Warning'),
l('Are you sure you want to delete the card of <b>%{0}</b>?', card.$fullname()))
.then(function(res) {
if (res) {
card.$delete()
.then(function() {
$rootScope.addressbook.cards = _.reject($rootScope.addressbook.cards, function(o) {
return o.id == card.id;
});
delete $rootScope.addressbook.card;
}, function(data, status) {
Dialog.alert(l('Warning'), l('An error occured while deleting the card "%{0}".',
card.$fullname()));
});
}
else {
// Cancelling the creation of a card
delete $rootScope.addressbook.card;
$state.go('addressbook', { addressbook_id: $scope.addressbook.id });
}
};
$scope.reset = function() {
$rootScope.addressbook.card = angular.copy($rootScope.master_card);
};
$scope.confirmDelete = function(card) {
Dialog.confirm(l('Warning'),
l('Are you sure you want to delete the card of <em>%{0}</em>?', card.$fullname()))
.then(function(res) {
if (res) {
// User confirmed the deletion
card.$delete()
.then(function() {
$rootScope.addressbook.cards = _.reject($rootScope.addressbook.cards, function(o) {
return o.id == card.id;
});
delete $rootScope.addressbook.card;
}, function(data, status) {
Dialog.alert(l('Warning'), l('An error occured while deleting the card "%{0}".',
card.$fullname()));
});
};
}
});
};
}]);
})();