cache vault data in root scope

This commit is contained in:
Kyle Spearrin 2017-04-14 12:35:46 -04:00
parent e4ffdf6815
commit 249d00b285
4 changed files with 94 additions and 70 deletions

View File

@ -2,9 +2,9 @@
.module('bit.vault') .module('bit.vault')
.controller('vaultAddLoginController', function ($scope, apiService, $uibModalInstance, cryptoService, cipherService, .controller('vaultAddLoginController', function ($scope, apiService, $uibModalInstance, cryptoService, cipherService,
passwordService, folders, selectedFolder, $analytics, checkedFavorite) { passwordService, selectedFolder, $analytics, checkedFavorite, $rootScope) {
$analytics.eventTrack('vaultAddLoginController', { category: 'Modal' }); $analytics.eventTrack('vaultAddLoginController', { category: 'Modal' });
$scope.folders = folders; $scope.folders = $rootScope.vaultFolders;
$scope.login = { $scope.login = {
folderId: selectedFolder ? selectedFolder.id : null, folderId: selectedFolder ? selectedFolder.id : null,
favorite: checkedFavorite === true favorite: checkedFavorite === true

View File

@ -2,27 +2,34 @@
.module('bit.vault') .module('bit.vault')
.controller('vaultController', function ($scope, $uibModal, apiService, $filter, cryptoService, authService, toastr, .controller('vaultController', function ($scope, $uibModal, apiService, $filter, cryptoService, authService, toastr,
cipherService, $q, $localStorage, $timeout) { cipherService, $q, $localStorage, $timeout, $rootScope) {
$scope.logins = [];
$scope.folders = [];
$scope.loading = true; $scope.loading = true;
$scope.favoriteCollapsed = $localStorage.collapsedFolders && 'favorite' in $localStorage.collapsedFolders; $scope.favoriteCollapsed = $localStorage.collapsedFolders && 'favorite' in $localStorage.collapsedFolders;
$scope.$on('$viewContentLoaded', function () { $scope.$on('$viewContentLoaded', function () {
if ($rootScope.vaultFolders && $rootScope.vaultLogins) {
$scope.loading = false;
loadFolderData($rootScope.vaultFolders);
loadLoginData($rootScope.vaultLogins);
return;
}
loadDataFromServer();
});
function loadDataFromServer() {
var folderPromise = apiService.folders.list({}, function (folders) { var folderPromise = apiService.folders.list({}, function (folders) {
var decFolders = [{ var decFolders = [{
id: null, id: null,
name: 'No Folder', name: 'No Folder'
collapsed: $localStorage.collapsedFolders && 'none' in $localStorage.collapsedFolders
}]; }];
for (var i = 0; i < folders.Data.length; i++) { for (var i = 0; i < folders.Data.length; i++) {
var decFolder = cipherService.decryptFolderPreview(folders.Data[i]); var decFolder = cipherService.decryptFolderPreview(folders.Data[i]);
decFolder.collapsed = $localStorage.collapsedFolders && decFolder.id in $localStorage.collapsedFolders;
decFolders.push(decFolder); decFolders.push(decFolder);
} }
$scope.folders = $filter('orderBy')(decFolders, folderSort); loadFolderData(decFolders);
}).$promise; }).$promise;
var cipherPromise = apiService.ciphers.list({}, function (ciphers) { var cipherPromise = apiService.ciphers.list({}, function (ciphers) {
@ -36,39 +43,54 @@
} }
$q.when(folderPromise).then(function () { $q.when(folderPromise).then(function () {
angular.forEach($scope.folders, function (folderValue, folderIndex) { loadLoginData(decLogins);
angular.forEach(decLogins, function (loginValue) {
if (loginValue.favorite) {
loginValue.sort = -1;
}
else if (loginValue.folderId == folderValue.id) {
loginValue.sort = folderIndex;
}
});
});
decLogins = $filter('orderBy')(decLogins, ['sort', 'name', 'username']);
var chunks = chunk(decLogins, 100);
$scope.logins = chunks[0];
var delay = 100;
angular.forEach(chunks, function (value, index) {
delay += 100;
// skip the first chuck
if (index > 0) {
$timeout(function () {
Array.prototype.push.apply($scope.logins, value);
}, delay);
}
});
}); });
}).$promise; }).$promise;
$q.when(cipherPromise).then(function () { $q.all([cipherPromise, folderPromise]).then(function () {
$scope.loading = false; $scope.loading = false;
}); });
}); }
function loadFolderData(decFolders) {
$rootScope.vaultFolders = $filter('orderBy')(decFolders, folderSort);
}
function loadLoginData(decLogins) {
angular.forEach($rootScope.vaultFolders, function (folderValue, folderIndex) {
folderValue.collapsed = $localStorage.collapsedFolders &&
(folderValue.id || 'none') in $localStorage.collapsedFolders;
angular.forEach(decLogins, function (loginValue) {
if (loginValue.favorite) {
loginValue.sort = -1;
}
else if (loginValue.folderId == folderValue.id) {
loginValue.sort = folderIndex;
}
});
});
$rootScope.vaultLogins = $filter('orderBy')(decLogins, ['sort', 'name', 'username']);
var chunks = chunk($rootScope.vaultLogins, 100);
$scope.logins = chunks[0];
var delay = 100;
angular.forEach(chunks, function (value, index) {
delay += 100;
// skip the first chuck
if (index > 0) {
$timeout(function () {
Array.prototype.push.apply($scope.logins, value);
}, delay);
}
});
}
function sortScopedLoginData() {
$rootScope.vaultLogins = $scope.logins = $filter('orderBy')($rootScope.vaultLogins, ['name', 'username']);
}
function chunk(arr, len) { function chunk(arr, len) {
var chunks = [], var chunks = [],
@ -108,35 +130,36 @@
templateUrl: 'app/vault/views/vaultEditLogin.html', templateUrl: 'app/vault/views/vaultEditLogin.html',
controller: 'vaultEditLoginController', controller: 'vaultEditLoginController',
resolve: { resolve: {
loginId: function () { return login.id; }, loginId: function () { return login.id; }
folders: getFoldersPromise()
} }
}); });
editModel.result.then(function (returnVal) { editModel.result.then(function (returnVal) {
var loginToUpdate; var loginToUpdate;
if (returnVal.action === 'edit') { if (returnVal.action === 'edit') {
loginToUpdate = $filter('filter')($scope.logins, { id: returnVal.data.id }, true); loginToUpdate = $filter('filter')($rootScope.vaultLogins, { id: returnVal.data.id }, true);
if (loginToUpdate && loginToUpdate.length > 0) { if (loginToUpdate && loginToUpdate.length > 0) {
loginToUpdate[0].folderId = returnVal.data.folderId; loginToUpdate[0].folderId = returnVal.data.folderId;
loginToUpdate[0].name = returnVal.data.name; loginToUpdate[0].name = returnVal.data.name;
loginToUpdate[0].username = returnVal.data.username; loginToUpdate[0].username = returnVal.data.username;
loginToUpdate[0].favorite = returnVal.data.favorite; loginToUpdate[0].favorite = returnVal.data.favorite;
sortScopedLoginData();
} }
} }
else if (returnVal.action === 'partialEdit') { else if (returnVal.action === 'partialEdit') {
loginToUpdate = $filter('filter')($scope.logins, { id: returnVal.data.id }, true); loginToUpdate = $filter('filter')($rootScope.vaultLogins, { id: returnVal.data.id }, true);
if (loginToUpdate && loginToUpdate.length > 0) { if (loginToUpdate && loginToUpdate.length > 0) {
loginToUpdate[0].folderId = returnVal.data.folderId; loginToUpdate[0].folderId = returnVal.data.folderId;
loginToUpdate[0].favorite = returnVal.data.favorite; loginToUpdate[0].favorite = returnVal.data.favorite;
} }
} }
else if (returnVal.action === 'delete') { else if (returnVal.action === 'delete') {
var loginToDelete = $filter('filter')($scope.logins, { id: returnVal.data }, true); var loginToDelete = $filter('filter')($rootScope.vaultLogins, { id: returnVal.data }, true);
if (loginToDelete && loginToDelete.length > 0) { if (loginToDelete && loginToDelete.length > 0) {
var index = $scope.logins.indexOf(loginToDelete[0]); var index = $rootScope.vaultLogins.indexOf(loginToDelete[0]);
if (index > -1) { if (index > -1) {
$scope.logins.splice(index, 1); $rootScope.vaultLogins.splice(index, 1);
} }
} }
} }
@ -153,14 +176,14 @@
templateUrl: 'app/vault/views/vaultAddLogin.html', templateUrl: 'app/vault/views/vaultAddLogin.html',
controller: 'vaultAddLoginController', controller: 'vaultAddLoginController',
resolve: { resolve: {
folders: getFoldersPromise(),
selectedFolder: function () { return folder; }, selectedFolder: function () { return folder; },
checkedFavorite: function () { return favorite; } checkedFavorite: function () { return favorite; }
} }
}); });
addModel.result.then(function (addedLogin) { addModel.result.then(function (addedLogin) {
$scope.logins.push(addedLogin); $rootScope.vaultLogins.push(addedLogin);
sortScopedLoginData();
}); });
}; };
@ -170,9 +193,9 @@
} }
apiService.logins.del({ id: login.id }, function () { apiService.logins.del({ id: login.id }, function () {
var index = $scope.logins.indexOf(login); var index = $rootScope.vaultLogins.indexOf(login);
if (index > -1) { if (index > -1) {
$scope.logins.splice(index, 1); $rootScope.vaultLogins.splice(index, 1);
} }
}); });
}; };
@ -189,7 +212,7 @@
}); });
editModel.result.then(function (editedFolder) { editModel.result.then(function (editedFolder) {
var folder = $filter('filter')($scope.folders, { id: editedFolder.id }, true); var folder = $filter('filter')($rootScope.vaultFolders, { id: editedFolder.id }, true);
if (folder && folder.length > 0) { if (folder && folder.length > 0) {
folder[0].name = editedFolder.name; folder[0].name = editedFolder.name;
} }
@ -209,7 +232,8 @@
}); });
addModel.result.then(function (addedFolder) { addModel.result.then(function (addedFolder) {
$scope.folders.push(addedFolder); $rootScope.vaultFolders.push(addedFolder);
loadFolderData($rootScope.vaultFolders);
}); });
}; };
@ -219,20 +243,20 @@
} }
apiService.folders.del({ id: folder.id }, function () { apiService.folders.del({ id: folder.id }, function () {
var index = $scope.folders.indexOf(folder); var index = $rootScope.vaultFolders.indexOf(folder);
if (index > -1) { if (index > -1) {
$scope.folders.splice(index, 1); $rootScope.vaultFolders.splice(index, 1);
} }
}); });
}; };
$scope.canDeleteFolder = function (folder) { $scope.canDeleteFolder = function (folder) {
if (!folder || !folder.id) { if (!folder || !folder.id || !$rootScope.vaultLogins) {
return false; return false;
} }
var logins = $filter('filter')($scope.logins, { folderId: folder.id }); var logins = $filter('filter')($rootScope.vaultLogins, { folderId: folder.id });
return logins.length === 0; return logins && logins.length === 0;
}; };
$scope.share = function (login) { $scope.share = function (login) {
@ -264,10 +288,4 @@
}); });
}; };
function getFoldersPromise() {
var deferred = $q.defer();
deferred.resolve($scope.folders);
return deferred.promise;
}
}); });

View File

@ -2,9 +2,9 @@
.module('bit.vault') .module('bit.vault')
.controller('vaultEditLoginController', function ($scope, apiService, $uibModalInstance, cryptoService, cipherService, .controller('vaultEditLoginController', function ($scope, apiService, $uibModalInstance, cryptoService, cipherService,
passwordService, loginId, folders, $analytics) { passwordService, loginId, $analytics, $rootScope) {
$analytics.eventTrack('vaultEditLoginController', { category: 'Modal' }); $analytics.eventTrack('vaultEditLoginController', { category: 'Modal' });
$scope.folders = folders; $scope.folders = $rootScope.vaultFolders;
$scope.login = {}; $scope.login = {};
$scope.readOnly = false; $scope.readOnly = false;

View File

@ -1,21 +1,22 @@
<section class="content-header"> <section class="content-header">
<h1> <h1>
My Vault My Vault
<small>{{folders.length > 0 ? folders.length - 1 : 0}} folders, {{logins.length}} logins</small> <small>{{vaultFolders.length > 0 ? vaultFolders.length - 1 : 0}} folders, {{logins.length}} logins</small>
</h1> </h1>
</section> </section>
<section class="content"> <section class="content">
<div ng-show="loading && !folders.length"> <div ng-show="loading && !vaultFolders.length">
<p>Loading...</p> <p>Loading...</p>
</div> </div>
<div class="box box-primary" ng-class="{'collapsed-box': favoriteCollapsed}" style="margin-bottom: 40px;" <div class="box box-primary" ng-class="{'collapsed-box': favoriteCollapsed}" style="margin-bottom: 40px;"
ng-show="folders.length && (!main.searchVaultText || favoriteLogins.length)"> ng-show="vaultFolders.length && (!main.searchVaultText || favoriteLogins.length)">
<div class="box-header with-border"> <div class="box-header with-border">
<h3 class="box-title"> <h3 class="box-title">
<i class="fa fa-star"></i> <i class="fa fa-star"></i>
Favorites <small>{{favoriteLogins.length}} logins</small> Favorites <small>{{favoriteLogins.length}} logins</small>
</h3> </h3>
<div class="box-tools"> <div class="box-tools">
<!--
<div class="btn-group" uib-dropdown> <div class="btn-group" uib-dropdown>
<button type="button" class="btn btn-box-tool" uib-tooltip="Options" uib-dropdown-toggle> <button type="button" class="btn btn-box-tool" uib-tooltip="Options" uib-dropdown-toggle>
<i class="fa fa-gear"></i> <i class="fa fa-gear"></i>
@ -29,6 +30,7 @@
</li> </li>
</ul> </ul>
</div> </div>
-->
<button type="button" class="btn btn-box-tool" data-widget="collapse" uib-tooltip="Collapse/Expand" <button type="button" class="btn btn-box-tool" data-widget="collapse" uib-tooltip="Collapse/Expand"
ng-click="collapseExpand(null, true)"> ng-click="collapseExpand(null, true)">
<i class="fa" ng-class="{'fa-minus': !favoriteCollapsed, 'fa-plus': favoriteCollapsed}"></i> <i class="fa" ng-class="{'fa-minus': !favoriteCollapsed, 'fa-plus': favoriteCollapsed}"></i>
@ -44,7 +46,8 @@
<table class="table table-striped table-hover table-vmiddle"> <table class="table table-striped table-hover table-vmiddle">
<tbody> <tbody>
<tr ng-repeat="login in favoriteLogins = (logins | filter: { favorite: true } | <tr ng-repeat="login in favoriteLogins = (logins | filter: { favorite: true } |
filter: (main.searchVaultText || ''))"> filter: (main.searchVaultText || '')) track by login.id">
<!--
<td style="width: 70px;"> <td style="width: 70px;">
<div class="btn-group" uib-dropdown dropdown-append-to-body> <div class="btn-group" uib-dropdown dropdown-append-to-body>
<button type="button" class="btn btn-default" uib-dropdown-toggle> <button type="button" class="btn btn-default" uib-dropdown-toggle>
@ -74,6 +77,7 @@
</ul> </ul>
</div> </div>
</td> </td>
-->
<td> <td>
<a href="javascript:void(0)" ng-click="editLogin(login)">{{login.name}}</a> <a href="javascript:void(0)" ng-click="editLogin(login)">{{login.name}}</a>
<i class="fa fa-share-alt text-muted" uib-tooltip="Shared" ng-show="login.organizationId"></i> <i class="fa fa-share-alt text-muted" uib-tooltip="Shared" ng-show="login.organizationId"></i>
@ -85,8 +89,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="box" ng-class="{'collapsed-box': folder.collapsed}" ng-repeat="folder in folders" <div class="box" ng-class="{'collapsed-box': folder.collapsed}" ng-repeat="folder in vaultFolders track by folder.id"
ng-show="folders.length && (!main.searchVaultText || folderLogins.length)"> ng-show="vaultFolders.length && (!main.searchVaultText || folderLogins.length)">
<div class="box-header with-border"> <div class="box-header with-border">
<h3 class="box-title"> <h3 class="box-title">
<i class="fa" ng-class="{'fa-folder-open': folder.id !== null, 'fa-folder-open-o': folder.id === null}"></i> <i class="fa" ng-class="{'fa-folder-open': folder.id !== null, 'fa-folder-open-o': folder.id === null}"></i>
@ -131,7 +135,8 @@
<table class="table table-striped table-hover table-vmiddle"> <table class="table table-striped table-hover table-vmiddle">
<tbody> <tbody>
<tr ng-repeat="login in folderLogins = (logins | filter: { folderId: folder.id } | <tr ng-repeat="login in folderLogins = (logins | filter: { folderId: folder.id } |
filter: (main.searchVaultText || ''))"> filter: (main.searchVaultText || '')) track by login.id">
<!--
<td style="width: 70px;"> <td style="width: 70px;">
<div class="btn-group" uib-dropdown dropdown-append-to-body> <div class="btn-group" uib-dropdown dropdown-append-to-body>
<button type="button" class="btn btn-default" uib-dropdown-toggle> <button type="button" class="btn btn-default" uib-dropdown-toggle>
@ -161,6 +166,7 @@
</ul> </ul>
</div> </div>
</td> </td>
-->
<td> <td>
<a href="javascript:void(0)" ng-click="editLogin(login)">{{login.name}}</a> <a href="javascript:void(0)" ng-click="editLogin(login)">{{login.name}}</a>
<i class="fa fa-star text-muted" uib-tooltip="Favorite" ng-show="login.favorite"></i> <i class="fa fa-star text-muted" uib-tooltip="Favorite" ng-show="login.favorite"></i>