implement folder list and selection

src/js/controller/mail-list.js

@@ -7,10 +7,9 @@ define(function(require) {
 
     var MailListCtrl = function($scope) {
         var offset = 0,
-            num = 100;
+            num = 100,
+            loggedIn = false;
 
-        // show inbox at the beginning
-        $scope.folder = 'INBOX';
         emailDao = appController._emailDao;
 
         //
@@ -18,7 +17,9 @@ define(function(require) {
         //
 
         $scope.select = function(email) {
-            email.bodyDisplayParts = email.body.split('\n');
+            if (email && typeof email.body === 'string') {
+                email.bodyDisplayParts = email.body.split('\n');
+            }
             $scope.selected = email;
             // set selected in parent scope ro it can be displayed in the read view
             $scope.$parent.selected = $scope.selected;
@@ -26,16 +27,15 @@ define(function(require) {
 
         $scope.synchronize = function() {
             updateStatus('Syncing ...');
-
             // sync from imap to local db
             syncImapFolder({
-                folder: $scope.folder,
+                folder: getFolder().path,
                 offset: -num,
                 num: offset
             }, function() {
                 // list again from local db after syncing
                 listLocalMessages({
-                    folder: $scope.folder,
+                    folder: getFolder().path,
                     offset: offset,
                     num: num
                 }, function() {
@@ -44,17 +44,18 @@ define(function(require) {
             });
         };
 
-        // production... in chrome packaged app
+        $scope.$watch('currentFolder', function() {
-        if (window.chrome && chrome.identity) {
+            // production... in chrome packaged app
-            initList();
+            if (window.chrome && chrome.identity) {
-            return;
+                initList();
-        }
+                return;
-
+            }
-        // development
+            // development... display dummy mail objects
-        createDummyMails(function(emails) {
+            createDummyMails(function(emails) {
-            updateStatus('Last update: ', new Date());
+                updateStatus('Last update: ', new Date());
-            $scope.emails = emails;
+                $scope.emails = emails;
-            $scope.select($scope.emails[0]);
+                $scope.select($scope.emails[0]);
+            });
         });
 
         //
@@ -66,25 +67,35 @@ define(function(require) {
 
             // list messaged from local db
             listLocalMessages({
-                folder: $scope.folder,
+                folder: getFolder().path,
                 offset: offset,
                 num: num
             }, function() {
-                updateStatus('Login ...');
+                if (loggedIn) {
-                $scope.$apply();
+                    // user is already logged in
-
+                    sync();
+                    return;
+                }
                 // login to imap
                 loginImap(function() {
-                    updateStatus('Syncing ...');
+                    loggedIn = true;
-                    $scope.$apply();
+                    sync();
-
-                    // sync imap folder to local db
-                    $scope.synchronize();
                 });
             });
+
+            function sync() {
+                updateStatus('Syncing ...');
+                $scope.$apply();
+
+                // sync imap folder to local db
+                $scope.synchronize();
+            }
         }
 
         function loginImap(callback) {
+            updateStatus('Login ...');
+            $scope.$apply();
+
             emailDao.imapLogin(function(err) {
                 if (err) {
                     console.error(err);
@@ -96,13 +107,23 @@ define(function(require) {
         }
 
         function syncImapFolder(options, callback) {
-            emailDao.imapSync(options, function(err) {
+            emailDao.unreadMessages(getFolder().path, function(err, unreadCount) {
                 if (err) {
                     console.error(err);
                     return;
                 }
+                // set unread count in folder model
+                getFolder().count = unreadCount;
+                $scope.$apply();
 
-                callback();
+                emailDao.imapSync(options, function(err) {
+                    if (err) {
+                        console.error(err);
+                        return;
+                    }
+
+                    callback();
+                });
             });
         }
 
@@ -114,7 +135,6 @@ define(function(require) {
                 }
 
                 callback(emails);
-                // add display dates
                 displayEmails(emails);
             });
         }
@@ -128,6 +148,9 @@ define(function(require) {
 
         function displayEmails(emails) {
             if (!emails || emails.length < 1) {
+                $scope.emails = [];
+                $scope.select();
+                $scope.$apply();
                 return;
             }
 
@@ -140,6 +163,10 @@ define(function(require) {
             $scope.select($scope.emails[0]);
             $scope.$apply();
         }
+
+        function getFolder() {
+            return $scope.$parent.currentFolder;
+        }
     };
 
     function createDummyMails(callback) {

src/js/controller/navigation.js

@@ -3,6 +3,27 @@ define(function() {
 
     var NavigationCtrl = function($scope) {
         $scope.navOpen = false;
+        $scope.folders = [{
+            type: 'Inbox',
+            count: undefined,
+            path: 'INBOX'
+        }, {
+            type: 'Sent',
+            count: undefined,
+            path: '[Gmail]/Gesendet'
+        }, {
+            type: 'Outbox',
+            count: undefined,
+            path: 'OUTBOX'
+        }, {
+            type: 'Drafts',
+            count: undefined,
+            path: '[Gmail]/Entw&APw-rfe'
+        }, {
+            type: 'Trash',
+            count: undefined,
+            path: '[Gmail]/Papierkorb'
+        }];
 
         $scope.openNav = function() {
             $scope.navOpen = true;
@@ -12,6 +33,13 @@ define(function() {
             $scope.navOpen = false;
         };
 
+        $scope.openFolder = function(folder) {
+            $scope.currentFolder = folder;
+            $scope.closeNav();
+        };
+        // select inbox as the current folder on init
+        $scope.openFolder($scope.folders[0]);
+
         $scope.write = function(replyTo) {
             var replyToId = (replyTo) ? replyTo.uid : '',
                 url = 'index.html#/write/' + replyToId;

src/tpl/mail-list.html

@@ -1,6 +1,6 @@
 <!-- nav controll and section headline -->
 <header data-icon="&#xe004;" ng-click="openNav(); $event.stopPropagation()">
-  <h2>Inbox</h2>
+  <h2>{{currentFolder.type}}</h2>
 </header>
 
 <ul class="mail-list">

src/tpl/navigation.html

@@ -2,37 +2,22 @@
   <header>
     <h1>WHITEOUT<span>.IO</span></h1>
   </header>
+
   <ul class="nav-primary">
-    <li>
+    <li ng-repeat="folder in folders" ng-switch="folder.count !== undefined">
-      <a href="#">
+      <a href="#" ng-click="openFolder(folder); $event.preventDefault()">
-        Inbox
+        {{folder.type}}
-        <span class="label-wrapper"><span class="label label-light">1000+</span></span>
+        <span class="label-wrapper" ng-switch-when="true"><span class="label label-light">{{folder.count}}</span></span>
-      </a>
-    </li>
-    <li>
-      <a href="#">Sent</a>
-    </li>
-    <li>
-      <a href="#">Outbox</a>
-    </li>
-    <li>
-      <a href="#">
-        Drafts
-        <span class="label-wrapper"><span class="label label-light">2</span></span>
-      </a>
-    </li>
-    <li>
-      <a href="#">
-        Trash
-        <span class="label-wrapper"><span class="label label-light">100</span></span>
       </a>
     </li>
   </ul>
+
   <ul class="nav-secondary">
     <li><a href="#">Account</a></li>
     <li><a href="#">About whiteout.io</a></li>
     <li><a href="#">Help</a></li>
   </ul>
+
   <footer>
     {{lastUpdateLbl}} {{lastUpdate | date:'shortTime'}}
   </footer>