media library - get and show child folders

src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html

@@ -15,6 +15,13 @@
          files-queued="vm.onFilesQueue">
       </umb-file-dropzone>
 
+      <umb-folder-grid
+         ng-if="vm.folders.length > 0"
+         folders="vm.folders"
+         on-select="vm.selectFolder"
+         on-click="vm.clickFolder">
+      </umb-folder-grid>
+
       <umb-media-grid
          items="listViewResultSet.items"
          details-hover="vm.showMediaDetailsTooltip">

src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js

@@ -9,10 +9,11 @@
 (function() {
    "use strict";
 
-   function ListViewGridLayoutController($scope, $routeParams, mediaHelper) {
+   function ListViewGridLayoutController($scope, $routeParams, mediaHelper, mediaResource, $location) {
 
       var vm = this;
 
+      vm.folders = [];
       vm.nodeId = $routeParams.id;
       vm.acceptedFileTypes = mediaHelper.formatFileTypes(Umbraco.Sys.ServerVariables.umbracoSettings.imageFileTypes);
       vm.activeDrag = false;
@@ -22,6 +23,16 @@
 		vm.onFilesQueue = onFilesQueue;
       vm.onUploadComplete = onUploadComplete;
       vm.showMediaDetailsTooltip = showMediaDetailsTooltip;
+      vm.selectFolder = selectFolder;
+      vm.clickFolder = clickFolder;
+
+      function activate() {
+
+         mediaResource.getChildFolders(vm.nodeId)
+            .then(function(folders) {
+               vm.folders = folders;
+            });
+      }
 
       function dragEnter(el, event) {
          vm.activeDrag = true;
@@ -61,6 +72,16 @@
 
       }
 
+      function selectFolder(folder) {
+         folder.selected = !folder.selected;
+      }
+
+      function clickFolder(folder) {
+         $location.path($scope.entityType + '/' + $scope.entityType + '/edit/' + folder.id);
+      }
+
+      activate();
+
    }
 
    angular.module("umbraco").controller("Umbraco.PropertyEditors.ListView.GridLayoutController", ListViewGridLayoutController);