folders management pages implemented

src/popup/app/config.js

@@ -148,16 +148,16 @@
                 params: { animation: null }
             })
             .state('addFolder', {
-                url: '/folders',
+                url: '/addFolder',
                 templateUrl: 'app/settings/views/settingsAddFolder.html',
-                controller: 'settingsFoldersController',
+                controller: 'settingsAddFolderController',
                 data: { authorize: true },
                 params: { animation: null }
             })
-            .state('editFolder?folderId', {
-                url: '/folders',
+            .state('editFolder', {
+                url: '/editFolder?folderId',
                 templateUrl: 'app/settings/views/settingsEditFolder.html',
-                controller: 'settingsFoldersController',
+                controller: 'settingsEditFolderController',
                 data: { authorize: true },
                 params: { animation: null }
             });

src/popup/app/settings/settingsAddFolderController.js

@@ -1,6 +1,18 @@
-angular
+angular
     .module('bit.settings')
 
-    .controller('settingsAddFolderController', function ($scope) {
-        
+    .controller('settingsAddFolderController', function ($scope, $q, folderService, $state, toastr) {
+        popupUtils.initListSectionItemListeners();
+        $('#name').focus();
+
+        $scope.savePromise = null;
+        $scope.save = function (model) {
+            $scope.savePromise = $q.when(folderService.encrypt(model)).then(function (folderModel) {
+                var folder = new Folder(folderModel, true);
+                return $q.when(folderService.saveWithServer(folder)).then(function (folder) {
+                    toastr.success('Added folder');
+                    $state.go('folders', { animation: 'out-slide-down' });
+                });
+            });
+        };
     });

src/popup/app/settings/settingsEditFolderController.js

@@ -1,6 +1,25 @@
 angular
     .module('bit.settings')
 
-    .controller('settingsEditFolderController', function ($scope) {
-        
+    .controller('settingsEditFolderController', function ($scope, $stateParams, folderService, toastr, $q, $state) {
+        var folderId = $stateParams.folderId;
+
+        folderService.get(folderId, function (folder) {
+            $q.when(folder.decrypt()).then(function (model) {
+                $scope.folder = model;
+            });
+        });
+
+        popupUtils.initListSectionItemListeners();
+
+        $scope.savePromise = null;
+        $scope.save = function (model) {
+            $scope.savePromise = $q.when(folderService.encrypt(model)).then(function (folderModel) {
+                var folder = new Folder(folderModel, true);
+                return $q.when(folderService.saveWithServer(folder)).then(function (folder) {
+                    toastr.success('Edited folder');
+                    $state.go('folders', { animation: 'out-slide-down' });
+                });
+            });
+        };
     });

src/popup/app/settings/settingsFoldersController.js

@@ -1,15 +1,26 @@
 angular
     .module('bit.settings')
 
-    .controller('settingsFoldersController', function ($scope, folderService, $q) {
+    .controller('settingsFoldersController', function ($scope, folderService, $q, $state) {
         $scope.loaded = false;
 
         load();
         function load() {
             var foldersPromise = $q.when(folderService.getAllDecrypted());
             foldersPromise.then(function (folders) {
+                if (folders.length > 0 && folders[0].id === null) {
+                    // remove the "none" folder
+                    folders.splice(0, 1);
+                }
                 $scope.loaded = true;
                 $scope.folders = folders;
             });
         }
+
+        $scope.editFolder = function (folder) {
+            $state.go('editFolder', {
+                folderId: folder.id,
+                animation: 'in-slide-up'
+            });
+        };
     });

src/popup/app/settings/settingsModule.js

@@ -1,2 +1,2 @@
 angular
-    .module('bit.settings', ['oitozero.ngSweetAlert']);
+    .module('bit.settings', ['oitozero.ngSweetAlert', 'toastr']);

src/popup/app/settings/views/settingsAddFolder.html

@@ -1,7 +1,7 @@
 <form name="theForm" ng-submit="theForm.$valid && save(folder)" bit-form="savePromise">
     <div class="header">
         <div class="left">
-            <a ng-click="close()" href="">Cancel</a>
+            <a ui-sref="folders({animation: 'out-slide-down'})">Cancel</a>
         </div>
         <div class="right">
             <button type="submit" class="btn btn-link" ng-show="!theForm.$loading">Save</button>

src/popup/app/settings/views/settingsEditFolder.html

@@ -1,7 +1,7 @@
 <form name="theForm" ng-submit="theForm.$valid && save(folder)" bit-form="savePromise">
     <div class="header">
         <div class="left">
-            <a ng-click="close()" href="">Cancel</a>
+            <a ui-sref="folders({animation: 'out-slide-down'})">Cancel</a>
         </div>
         <div class="right">
             <button type="submit" class="btn btn-link" ng-show="!theForm.$loading">Save</button>

src/popup/app/settings/views/settingsFolders.html

@@ -3,7 +3,7 @@
         <a ui-sref="tabs.settings({animation: 'out-slide-right'})"><i class="fa fa-chevron-left"></i> Settings</a>
     </div>
     <div class="right">
-        <a href="" ng-click="addFolder()"><i class="fa fa-plus fa-lg"></i></a>
+        <a ui-sref="addFolder({animation: 'in-slide-up'})"><i class="fa fa-plus fa-lg"></i></a>
     </div>
     <div class="title">Folders</div>
 </div>
@@ -11,7 +11,7 @@
     <div ng-if="folders.length">
         <div class="list">
             <div class="list-grouped">
-                <a ng-click="editFolder(folder)" class="list-grouped-item"
+                <a href="" ng-click="editFolder(folder)" class="list-grouped-item"
                    ng-repeat="folder in theFolders = (folders | orderBy: ['name'])">
                     <span class="text">{{folder.name}}</span>
                 </a>
@@ -19,7 +19,7 @@
         </div>
     </div>
     <div class="centered-message" ng-if="loaded && !folders.length">
-        <p>No folders to list. <a href="" ng-click="addFolder()">Add one</a></p>
+        <p>No folders to list. <a ui-sref="addFolder({animation: 'in-slide-up'})">Add one</a></p>
     </div>
     <div class="page-loading" ng-if="!loaded">
         <i class="fa fa-lg fa-spinner fa-spin"></i>