Allow filtering by folder

services/web/app/views/project/list.jade

@@ -44,19 +44,19 @@ block content
 							li
 								a.menu-indent(href="/templates") View All »
 					.row-spaced
-						ul.list-unstyled.folders-menu.js-folders-menu
-							li
-								a.menu-indent(href="#") All projects
-							li
-								a.menu-indent(href="#") Your projects
-							li
-								a.menu-indent(href="#") Shared with you
+						ul.list-unstyled.folders-menu.js-folders-menu(ng-controller="TagListController")
+							li(ng-class="{active: (view == 'all')}")
+								a.menu-indent(href="#", ng-click="selectAllProjects()") All projects
+							//- li
+							//- 	a.menu-indent(href="#") Your projects
+							//- li
+							//- 	a.menu-indent(href="#") Shared with you
 							li 
 								h2 Folders
-							li(ng-repeat="tag in tags", ng-controller="TagController")
-								a.menu-indent(href="#")
-									i.icon.fa.fa-folder-o
-									|  {{tag.name}}
+							li(ng-repeat="tag in tags", ng-controller="TagListItemController", ng-class="{active: tag.selected}")
+								a.menu-indent(href="#", ng-click="selectTag()")
+									i.icon.fa(ng-class="{'fa-folder-open-o': tag.selected, 'fa-folder-o': !tag.selected}")
+									|  {{tag.name}} 
 								span.small ({{tag.project_ids.length}})
 
 					.row-spaced-small
@@ -70,7 +70,7 @@ block content
 						.row-spaced
 							a(href="/user/bonus").btn.btn-info Upgrade Account
 
-				.col-md-10(ng-controller="ProjectListController")
+				.col-md-10
 					.container-fluid
 						.row
 							.col-md-12
@@ -95,7 +95,7 @@ block content
 												span.caret
 											ul.dropdown-menu.dropdown-menu-right(role="menu")
 												li.dropdown-header Add to folder
-												li(ng-repeat="tag in tags", ng-controller="TagDropdownController")
+												li(ng-repeat="tag in tags", ng-controller="TagDropdownItemController")
 													a.menu-indent(href="#", ng-click="addOrRemoveProjectsFromTag()")
 														i.fa.fa-check(ng-if="areSelectedProjectsInTag")
 														|  {{tag.name}}
@@ -126,7 +126,7 @@ block content
 														span.owner OWNER
 													.col-md-4
 														span.last-modified LAST MODIFIED
-											li.project_entry.container-fluid(ng-repeat="project in visibleProjects", ng-controller="ProjectController")
+											li.project_entry.container-fluid(ng-repeat="project in visibleProjects", ng-controller="ProjectListItemController")
 												.row
 													.col-md-6
 														input.select-item(type="checkbox", ng-model="project.selected", ng-change="onSelectedChange()")

services/web/public/coffee/project-list.coffee

@@ -6,11 +6,9 @@ ProjectPageApp.filter "formatDate", () ->
 
 ProjectPageApp.controller "ProjectPageController", ($scope) ->
 	$scope.projects = window.data.projects
+	$scope.visibleProjects = $scope.projects
 	$scope.tags = window.data.tags
-
-ProjectPageApp.controller "ProjectListController", ($scope) ->
 	$scope.allSelected = false
-	$scope.visibleProjects = $scope.projects
 
 	# Any individual changes to the selection buttons invalidates
 	# our 'select all'
@@ -24,39 +22,70 @@ ProjectPageApp.controller "ProjectListController", ($scope) ->
 			project.selected = $scope.allSelected
 		$scope.$broadcast "selection:change"
 
-	$scope.clearSelections = () ->
+	$scope.$watch "searchText", (value) ->
+		$scope.updateVisibleProjects()
+
+	$scope.clearProjectSelections = () ->
 		for project in $scope.projects
 			project.selected = false
 		$scope.allSelected = false
 		$scope.$broadcast "selection:change"
 
-	$scope.getSelectedProjects = () ->
-		$scope.projects.filter (project) -> project.selected
-
-	$scope.getSelectedProjectIds = () ->
-		$scope.getSelectedProjects().map (project) -> project._id
-
-	$scope.$watch "searchText", (value) ->
-		$scope.updateVisibleProjects()
-
 	$scope.updateVisibleProjects = () ->
 		$scope.visibleProjects = []
+		selectedTag = $scope.getSelectedTag()
 		for project in $scope.projects
 			visible = true
+			# Only show if it matches any search text
 			if $scope.searchText? and $scope.searchText != ""
 				if !project.name.toLowerCase().match($scope.searchText.toLowerCase())
 					visible = false
+			# Only show if it matches the selected tag
+			if selectedTag? and project._id not in selectedTag.project_ids
+				visible = false
 			if visible
 				$scope.visibleProjects.push project
-		$scope.clearSelections()
+		console.log "visible", $scope.visibleProjects
+		$scope.clearProjectSelections()
+
+	$scope.getSelectedProjects = () ->
+		$scope.projects.filter (project) -> project.selected
+
+	$scope.getSelectedProjectIds = () ->
+		$scope.getSelectedProjects().map (project) -> project._id
 
-ProjectPageApp.controller "ProjectController", ($scope) ->
+	$scope.getSelectedTag = () ->
+		for tag in $scope.tags
+			return tag if tag.selected
+		return null
+
+ProjectPageApp.controller "ProjectListItemController", ($scope) ->
 	$scope.onSelectedChange = () ->
 		$scope.$emit "selected:on-change"
 
-ProjectPageApp.controller "TagController", ($scope) ->
+ProjectPageApp.controller "TagListController", ($scope) ->
+	$scope.view = "all"
+
+	$scope.selectAllProjects = () ->
+		$scope._clearTags()
+		$scope.setActiveItem("all")
+		$scope.updateVisibleProjects()
+
+	$scope._clearTags = () ->
+		for tag in $scope.tags
+			tag.selected = false
+
+	$scope.setActiveItem = (view) ->
+		$scope.view = view
+
+ProjectPageApp.controller "TagListItemController", ($scope) ->
+	$scope.selectTag = () ->
+		$scope._clearTags()
+		$scope.tag.selected = true
+		$scope.setActiveItem("tag")
+		$scope.updateVisibleProjects()
 
-ProjectPageApp.controller "TagDropdownController", ($scope) ->
+ProjectPageApp.controller "TagDropdownItemController", ($scope) ->
 	$scope.$on "selection:change", (e, newValue, oldValue) ->
 		console.log "selected watch listen"
 		$scope.recalculateProjectsInTag()

services/web/public/stylesheets/app/project-list.less

@@ -14,29 +14,31 @@
 }
 
 ul.folders-menu {
-  margin: 0;
-  font-weight: 700;
-  a {
-  	font-size: 0.8rem;
-    padding: 3px;
-  }
-  .active {
-    background-color: @red;
-    color: white;
-    padding-left: 6px;
-    a {
-      color: white;
-    }
-  }
+	margin: 0;
+	li {
+		line-height: 1;
+		padding: (@line-height-computed / 4) 0;
+		a {
+			font-size: 0.8rem;
+			color: #333;
+			padding-left: (@line-height-computed / 4);
+		}
+		.small {
+			font-size: 0.8rem;
+			color: @gray-light;
+		}
+  	}
+	li.active {
+		border-right: 4px solid @red;
+		a {
+			font-weight: 700;
+			color: @link-color;
+		}
+	}
   h2 {
-  	margin-top: @line-height-computed / 2;
-  	margin-bottom: @line-height-computed / 4;
+  	margin-top: @line-height-computed / 4;
+  	margin-bottom: 0;
   	font-size: @font-size-base;
-  	margin-left: 3px;
-  }
-  .small {
-  	font-size: 0.8rem;
-  	color: @gray-light;
   }
 }