Merge pull request #929 from umbraco/temp-U4-7387

Fixes: U4-7387 It's not possible to select folders in listview in media section

src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js

@@ -25,10 +25,7 @@
          }
 
          function setItemData(item) {
-
              item.isFolder = !mediaHelper.hasFilePropertyType(item);
-             item.hidden = item.isFolder;
-
              if(!item.isFolder){
                  item.thumbnail = mediaHelper.resolveFile(item, true);
                  item.image = mediaHelper.resolveFile(item, false);

src/Umbraco.Web.UI.Client/src/common/services/listviewhelper.service.js

@@ -57,7 +57,7 @@
                isSelected = true;
             }
          }
-         if(!isSelected && !item.hidden) {
+         if(!isSelected) {
             selection.push({id: item.id});
             item.selected = true;
          }

src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html

@@ -1,6 +1,6 @@
 <div class="umb-media-grid">
 
-   <a href="" ng-click="clickItem(item)" ng-repeat="item in items" ng-style="item.flexStyle" class="umb-media-grid__item" ng-hide="item.hidden">
+   <a href="" ng-click="clickItem(item)" ng-repeat="item in items" ng-style="item.flexStyle" class="umb-media-grid__item">
 
       <div class="umb-media-grid__actions">
          <i ng-if="onDetailsHover" class="icon-info umb-media-grid__action -not-clickable" ng-mouseover="hoverItemDetails(item, $event, true)" ng-mouseleave="hoverItemDetails(item, $event, false)"></i>

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

@@ -1,4 +1,4 @@
-<div ng-controller="Umbraco.PropertyEditors.ListView.GridLayoutController as vm">
+<div ng-controller="Umbraco.PropertyEditors.ListView.GridLayoutController as vm" ng-if="items">
 
    <div
       ng-if="entityType !== 'media'">
@@ -35,7 +35,7 @@
       </umb-folder-grid>
 
       <umb-media-grid
-         items="items"
+         items="vm.itemsWithoutFolders"
          on-details-hover="vm.hoverMediaItemDetails"
          on-select="vm.selectItem"
          on-click="vm.clickItem">

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

@@ -17,6 +17,7 @@
       vm.acceptedFileTypes = mediaHelper.formatFileTypes(Umbraco.Sys.ServerVariables.umbracoSettings.imageFileTypes);
       vm.activeDrag = false;
       vm.mediaDetailsTooltip = {};
+      vm.itemsWithoutFolders = [];
 
       vm.dragEnter = dragEnter;
       vm.dragLeave = dragLeave;
@@ -27,6 +28,26 @@
       vm.selectFolder = selectFolder;
       vm.clickItem = clickItem;
 
+      function activate() {
+          vm.itemsWithoutFolders = filterOutFolders($scope.items);
+      }
+
+      function filterOutFolders(items) {
+
+          var newArray = [];
+
+          for (var i = 0; items.length > i; i++) {
+              var item = items[i];
+              var isFolder = !mediaHelper.hasFilePropertyType(item);
+
+              if (!isFolder) {
+                  newArray.push(item);
+              }
+          }
+
+          return newArray;
+      }
+
       function dragEnter(el, event) {
          vm.activeDrag = true;
       }
@@ -60,7 +81,7 @@
       }
 
       function selectItem(selectedItem, $event, index) {
-         listViewHelper.selectHandler(selectedItem, index, $scope.items, $scope.selection, $event);
+         listViewHelper.selectHandler(selectedItem, index, vm.itemsWithoutFolders, $scope.selection, $event);
       }
 
       function selectFolder(selectedItem, $event, index) {
@@ -71,6 +92,8 @@
          $location.path($scope.entityType + '/' + $scope.entityType + '/edit/' + item.id);
       }
 
+      activate();
+
    }
 
    angular.module("umbraco").controller("Umbraco.PropertyEditors.ListView.GridLayoutController", ListViewGridLayoutController);