Implement mini list view for generic move overlay

src/Umbraco.Web.UI.Client/src/views/common/overlays/move/move.controller.js

@@ -1,7 +1,7 @@
  (function() {
 	"use strict";
 
-	function MoveOverlay($scope, localizationService, eventsService) {
+	function MoveOverlay($scope, localizationService, eventsService, entityHelper) {
 
       var vm = this;
 
@@ -32,54 +32,32 @@
           selectedSearchResults: []
       };
 
+      // get entity type based on the section
+      $scope.entityType = entityHelper.getEntityTypeFromSection(dialogOptions.section);
+
       function nodeSelectHandler(ev, args) {
-          args.event.preventDefault();
-          args.event.stopPropagation();
 
-          if (args.node.metaData.listViewNode) {
-              //check if list view 'search' node was selected
-
-              vm.searchInfo.showSearch = true;
-              vm.searchInfo.searchFromId = args.node.metaData.listViewNode.id;
-              vm.searchInfo.searchFromName = args.node.metaData.listViewNode.name;
+          if(args && args.event) {
+              args.event.preventDefault();
+              args.event.stopPropagation();
           }
-          else {
-              //eventsService.emit("editors.content.copyController.select", args);
 
-              if ($scope.model.target) {
-                  //un-select if there's a current one selected
-                  $scope.model.target.selected = false;
-              }
+          //eventsService.emit("editors.content.copyController.select", args);
 
-              $scope.model.target = args.node;
-              $scope.model.target.selected = true;
+          if ($scope.model.target) {
+              //un-select if there's a current one selected
+              $scope.model.target.selected = false;
           }
 
+          $scope.model.target = args.node;
+          $scope.model.target.selected = true;
+
       }
 
       function nodeExpandedHandler(ev, args) {
-          if (angular.isArray(args.children)) {
-
-              //iterate children
-              _.each(args.children, function (child) {
-                  //check if any of the items are list views, if so we need to add a custom
-                  // child: A node to activate the search
-                  if (child.metaData.isContainer) {
-                      child.hasChildren = true;
-                      child.children = [
-                          {
-                              level: child.level + 1,
-                              hasChildren: false,
-                              name: searchText,
-                              metaData: {
-                                  listViewNode: child,
-                              },
-                              cssClass: "icon umb-tree-icon sprTree icon-search",
-                              cssClasses: ["not-published"]
-                          }
-                      ];
-                  }
-              });
+          // open mini list view for list views
+          if (args.node.metaData.isContainer) {
+              openMiniListView(args.node);
           }
       }
 
@@ -110,6 +88,19 @@
           $scope.dialogTreeEventHandler.unbind("treeNodeExpanded", nodeExpandedHandler);
       });
 
+      // Mini list view
+      $scope.selectListViewNode = function (node) {
+	      node.selected = node.selected === true ? false : true;
+		  nodeSelectHandler({}, { node: node });
+      };
+
+      $scope.closeMiniListView = function () {
+        $scope.miniListView = undefined;
+      };
+
+      function openMiniListView(node) {
+        $scope.miniListView = node;
+      }
 
 	}
 

src/Umbraco.Web.UI.Client/src/views/common/overlays/move/move.html

@@ -1,33 +1,43 @@
 <div ng-controller="Umbraco.Overlays.MoveOverlay as vm">
+  <div ng-hide="miniListView">
+    <div class="umb-control-group">
+        <umb-tree-search-box
+          hide-search-callback="vm.hideSearch"
+          search-callback="vm.onSearchResults"
+          search-from-id="{{vm.searchInfo.searchFromId}}"
+          search-from-name="{{vm.searchInfo.searchFromName}}"
+          show-search="{{vm.searchInfo.showSearch}}"
+          section="{{model.section}}">
+        </umb-tree-search-box>
+    </div>
 
-   <div class="umb-control-group">
-      <umb-tree-search-box
-         hide-search-callback="vm.hideSearch"
-         search-callback="vm.onSearchResults"
-         search-from-id="{{vm.searchInfo.searchFromId}}"
-         search-from-name="{{vm.searchInfo.searchFromName}}"
-         show-search="{{vm.searchInfo.showSearch}}"
-         section="{{model.section}}">
-      </umb-tree-search-box>
+    <div class="umb-control-group" ng-show="vm.searchInfo.showSearch">
+        <umb-tree-search-results
+          ng-if="vm.searchInfo.showSearch"
+          results="vm.searchInfo.results"
+          select-result-callback="vm.selectResult">
+        </umb-tree-search-results>
+    </div>
+
+    <div class="umb-control-group -no-border" ng-hide="vm.searchInfo.showSearch">
+        <umb-tree
+          section="{{model.section}}"
+          hideheader="false"
+          hideoptions="true"
+          isdialog="true"
+          eventhandler="dialogTreeEventHandler"
+          enablelistviewexpand="true"
+          enablecheckboxes="true">
+        </umb-tree>
+    </div>
    </div>
 
-   <div class="umb-control-group" ng-show="vm.searchInfo.showSearch">
-      <umb-tree-search-results
-         ng-if="vm.searchInfo.showSearch"
-         results="vm.searchInfo.results"
-         select-result-callback="vm.selectResult">
-      </umb-tree-search-results>
-   </div>
-
-   <div class="umb-control-group -no-border" ng-hide="vm.searchInfo.showSearch">
-       <umb-tree
-         section="{{model.section}}"
-         hideheader="false"
-         hideoptions="true"
-         isdialog="true"
-         eventhandler="dialogTreeEventHandler"
-         enablecheckboxes="true">
-       </umb-tree>
-   </div>
+    <umb-mini-list-view
+      ng-if="miniListView"
+      node="miniListView"
+      entity-type="{{entityType}}"
+      on-select="selectListViewNode(node)"
+      on-close="closeMiniListView()">
+  </umb-mini-list-view>
 
 </div>