Refactor boardlist loading process

Signed-off-by: Julius Härtl <jus@bitgrid.net>

js/controller/ListController.js

@@ -22,7 +22,8 @@
 
 /* global app angular */
 
-app.controller('ListController', function ($scope, $location, $filter, BoardService, $element, $timeout, $stateParams, $state) {
+app.controller('ListController', function ($scope, $location, $filter, BoardService, $element, $timeout, $stateParams, $state, StatusService) {
+
 	function calculateNewColor() {
 		var boards = BoardService.getAll();
 		var boardKeys = Object.keys(boards);
@@ -53,24 +54,21 @@ app.controller('ListController', function ($scope, $location, $filter, BoardServ
 	};
 	$scope.colors = ['0082c9', '00c9c6','00c906', 'c92b00', 'F1DB50', '7C31CC', '3A3B3D', 'CACBCD'];
 	$scope.boardservice = BoardService;
-	$scope.newBoard.color = calculateNewColor();
 	$scope.updatingBoard = null;
 
-	// FIXME: not nice, but we want to load this only once
-	if($element.attr('id') === 'app-navigation') {
-		BoardService.fetchAll().then(function(data) {
-			$scope.filterData();
-		}, function (error) {
-			// TODO: show error when loading fails
-		});
-	}
 
-	$scope.filterData = function () {
-		angular.copy($scope.boardservice.getData(), $scope.boardservice.sorted);
-		angular.copy($scope.boardservice.sorted, $scope.boardservice.sidebar);
+	var finishedLoading = function() {
+		filterData();
+		$scope.newBoard.color = calculateNewColor();
+	};
+
+	var filterData = function () {
+		if($element.attr('id') === 'app-navigation') {
+			$scope.boardservice.sidebar = $scope.boardservice.getData();
 			$scope.boardservice.sidebar = $filter('orderBy')($scope.boardservice.sidebar, 'title');
 			$scope.boardservice.sidebar = $filter('cardFilter')($scope.boardservice.sidebar, {archived: false});
-
+		} else {
+			$scope.boardservice.sorted = $scope.boardservice.getData();
 			if ($scope.status.filter === 'archived') {
 				var filter = {};
 				filter[$scope.status.filter] = true;
@@ -82,15 +80,41 @@ app.controller('ListController', function ($scope, $location, $filter, BoardServ
 				$scope.boardservice.sorted = $filter('cardFilter')($scope.boardservice.sorted, {archived: false});
 			}
 			$scope.boardservice.sorted = $filter('orderBy')($scope.boardservice.sorted, ['deletedAt', 'title']);
+		}
 	};
 
+	var initialize = function () {
+		$scope.statusservice = StatusService.listStatus;
+
+		if($element.attr('id') === 'app-navigation') {
+			$scope.statusservice.retainWaiting();
+			BoardService.fetchAll().then(function(data) {
+				finishedLoading();
+				$scope.statusservice.releaseWaiting();
+				BoardService.loaded = true;
+			}, function (error) {
+				$scope.statusservice.setError('Error occured', error);
+			});
+		} else {
+			/* Watch for data change of boardservice when boards are fetched */
+			var boardDataWatch = $scope.$watch(function () {
+				return $scope.boardservice.data;
+			}, function () {
+				if (BoardService.loaded === true) {
+					boardDataWatch();
+					finishedLoading();
+				}
+			}, true);
+		}
+		/* Watch for board filter change */
 		$scope.$watchCollection(function(){
 			return $state.params;
 		}, function(){
 			$scope.status.filter = $state.params.filter;
-		$scope.filterData();
+			filterData();
 		});
-
+	};
+	initialize();
 
 	$scope.selectColor = function(color) {
 		$scope.newBoard.color = color;
@@ -113,7 +137,7 @@ app.controller('ListController', function ($scope, $location, $filter, BoardServ
 				$scope.newBoard = {};
 				$scope.newBoard.color = calculateNewColor();
 				$scope.status.addBoard=false;
-				$scope.filterData();
+				filterData();
 			}, function(error) {
 				$scope.status.createBoard = 'Unable to insert board: ' + error.message;
 			});
@@ -121,8 +145,8 @@ app.controller('ListController', function ($scope, $location, $filter, BoardServ
 
 	$scope.boardUpdate = function(board) {
 		BoardService.update(board).then(function(data) {
-			$scope.filterData();
 			board.status.edit = false;
+			filterData();
 		});
 	};
 
@@ -133,33 +157,34 @@ app.controller('ListController', function ($scope, $location, $filter, BoardServ
 	$scope.boardUpdateReset = function(board) {
 		board.title = $scope.updatingBoard.title;
 		board.color = $scope.updatingBoard.color;
-		$scope.filterData();
+		console.log(board);
+		filterData();
 		board.status.edit = false;
 	};
 
 	$scope.boardArchive = function (board) {
 		board.archived = true;
 		BoardService.update(board).then(function(data) {
-			$scope.filterData();
+			filterData();
 		});
 	};
 
 	$scope.boardUnarchive = function (board) {
 		board.archived = false;
 		BoardService.update(board).then(function(data) {
-			$scope.filterData();
+			filterData();
 		});
 	};
 
 	$scope.boardDelete = function(board) {
 		BoardService.delete(board.id).then(function (data) {
-			$scope.filterData();
+			filterData();
 		});
 	};
 
 	$scope.boardDeleteUndo = function (board) {
 		BoardService.deleteUndo(board.id).then(function (data) {
-			$scope.filterData();
+			filterData();
 		});
 	};
 

js/service/StatusService.js

@@ -48,7 +48,11 @@ app.factory('StatusService', function () {
 
 	StatusService.prototype.releaseWaiting = function () {
 		if (this.counter > 0)
+<<<<<<< HEAD
 		{this.counter--;}
+=======
+			this.counter--;
+>>>>>>> Refactor boardlist loading process
 		if (this.counter <= 0) {
 			this.active = false;
 			this.counter = 0;
@@ -70,7 +74,9 @@ app.factory('StatusService', function () {
 	return {
 		getInstance: function () {
 			return new StatusService();
-		}
+		},
+		/* Shared StatusService instance between both ListController instances */
+		listStatus: new StatusService()
 	};
 
 });

templates/part.boardlist.php

@@ -1,10 +1,15 @@
+<div id="board-status" ng-if="statusservice.active">
+	<div id="emptycontent">
+		<div class="icon-{{ statusservice.icon }}" title="<?php p($l->t('Status')); ?>"><span class="hidden-visually"><?php p($l->t('Status')); ?></span></div>
+		<h2>{{ statusservice.title }}</h2>
+		<p>{{ statusservice.text }}</p></div>
+</div>
 <div id="controls">
 	<div class="breadcrumb">
 		<div class="crumb svg last">
 			<a href="#" class="icon-home" title="<?php p($l->t('All Boards')); ?>">
 				<span class="hidden-visually"><?php p($l->t('All Boards')); ?></span>
 			</a>
-			<span style="display: none;"></span>
 		</div>
 	</div>
 </div>