Add "Move" option for deleted items in the media tree (#3914)

src/Umbraco.Web.UI.Client/src/views/media/media.restore.controller.js

@@ -1,63 +1,134 @@
 angular.module("umbraco").controller("Umbraco.Editors.Media.RestoreController",
-    function ($scope, relationResource, mediaResource, navigationService, appState, treeService, localizationService) {
+    function ($scope, relationResource, mediaResource, navigationService, appState, treeService, userService) {
 		var dialogOptions = $scope.dialogOptions;
 
-		var node = dialogOptions.currentNode;
+        $scope.source = _.clone(dialogOptions.currentNode);
 
-		$scope.error = null;
-	    $scope.success = false;
+        $scope.error = null;
+        $scope.loading = true;
+        $scope.moving = false;
+        $scope.success = false;
 
-		relationResource.getByChildId(node.id, "relateParentDocumentOnDelete").then(function (data) {
+        $scope.dialogTreeEventHandler = $({});
+        $scope.searchInfo = {
+            showSearch: false,
+            results: [],
+            selectedSearchResults: []
+        }
+        $scope.treeModel = {
+            hideHeader: false
+        }
+        userService.getCurrentUser().then(function (userData) {
+            $scope.treeModel.hideHeader = userData.startContentIds.length > 0 && userData.startContentIds.indexOf(-1) == -1;
+        });
 
-            if (data.length == 0) {
-                $scope.success = false;
-                $scope.error = {
-                    errorMsg: localizationService.localize('recycleBin_itemCannotBeRestored'),
-                    data: {
-                        Message: localizationService.localize('recycleBin_noRestoreRelation')
-                    }
-                }
-                return;
+        function nodeSelectHandler(ev, args) {
+
+            if (args && args.event) {
+                args.event.preventDefault();
+                args.event.stopPropagation();
             }
 
+            if ($scope.target) {
+                //un-select if there's a current one selected
+                $scope.target.selected = false;
+            }
+
+            $scope.target = args.node;
+            $scope.target.selected = true;
+
+        }
+
+        function nodeExpandedHandler(ev, args) {
+            // open mini list view for list views
+            if (args.node.metaData.isContainer) {
+                openMiniListView(args.node);
+            }
+        }
+
+        $scope.hideSearch = function () {
+            $scope.searchInfo.showSearch = false;
+            $scope.searchInfo.results = [];
+        }
+
+        // method to select a search result 
+        $scope.selectResult = function (evt, result) {
+            result.selected = result.selected === true ? false : true;
+            nodeSelectHandler(evt, { event: evt, node: result });
+        };
+
+        //callback when there are search results 
+        $scope.onSearchResults = function (results) {
+            $scope.searchInfo.results = results;
+            $scope.searchInfo.showSearch = true;
+        };
+
+        $scope.dialogTreeEventHandler.bind("treeNodeSelect", nodeSelectHandler);
+        $scope.dialogTreeEventHandler.bind("treeNodeExpanded", nodeExpandedHandler);
+
+        $scope.$on('$destroy', function () {
+            $scope.dialogTreeEventHandler.unbind("treeNodeSelect", nodeSelectHandler);
+            $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;
+        }
+
+        relationResource.getByChildId($scope.source.id, "relateParentDocumentOnDelete").then(function (data) {
+		    $scope.loading = false;
+
+		    if (!data.length) {
+		        $scope.moving = true;
+		        return;
+		    }
+
 		    $scope.relation = data[0];
 
 			if ($scope.relation.parentId == -1) {
 				$scope.target = { id: -1, name: "Root" };
 
 			} else {
+                $scope.loading = true;
+
 			    mediaResource.getById($scope.relation.parentId).then(function (data) {
+                    $scope.loading = false;
                     $scope.target = data;
 
-                    // make sure the target item isn't in the recycle bin
-                    if ($scope.target.path.indexOf("-20") !== -1) {
-                        $scope.error = {
-                            errorMsg: localizationService.localize('recycleBin_itemCannotBeRestored'),
-                            data: {
-                                Message: localizationService.localize('recycleBin_restoreUnderRecycled').then(function (value) {
-                                    value.replace('%0%', $scope.target.name);
-                                })
-                            }
-                        };
-                        $scope.success = false;
+					// make sure the target item isn't in the recycle bin
+                    if ($scope.target.path.indexOf("-21") !== -1) {
+                        $scope.moving = true;
+                        $scope.target = null;
                     }
-
 				}, function (err) {
-					$scope.success = false;
+                    $scope.loading = false;
 					$scope.error = err;
 				});
 			}
 
 		}, function (err) {
-			$scope.success = false;
-			$scope.error = err;
+		    $scope.loading = false;
+		    $scope.error = err;
 		});
 
-		$scope.restore = function () {
+        $scope.restore = function () {
+            $scope.loading = true;
+
 			// this code was copied from `content.move.controller.js`
-			mediaResource.move({ parentId: $scope.target.id, id: node.id })
+            mediaResource.move({ parentId: $scope.target.id, id: $scope.source.id })
 				.then(function (path) {
 
+                    $scope.loading = false;
 					$scope.success = true;
 
 					//first we need to remove the node that launched the dialog
@@ -78,7 +149,7 @@ angular.module("umbraco").controller("Umbraco.Editors.Media.RestoreController",
 					});
 
 				}, function (err) {
-					$scope.success = false;
+                    $scope.loading = false;
 					$scope.error = err;
 				});
 		};

src/Umbraco.Web.UI.Client/src/views/media/restore.html

@@ -1,25 +1,96 @@
 <div ng-controller="Umbraco.Editors.Media.RestoreController">
-	<div class="umb-dialog-body">
+	<div class="umb-dialog-body" ng-cloak>
 		<umb-pane>
+		    <umb-load-indicator
+		        ng-if="loading">
+		    </umb-load-indicator>
 
-			<p class="abstract" ng-hide="error != null || success == true">
-				<localize key="actions_restore">Restore</localize> <strong>{{currentNode.name}}</strong> <localize key="general_under">under</localize> <strong>{{target.name}}</strong>?
-            </p>
+		    <div ng-show="error">
+		        <div class="alert alert-error">
+		            <div><strong>{{error.errorMsg}}</strong></div>
+		            <div>{{error.data.Message}}</div>
+		        </div>
+		    </div>
 
-            <div class="alert alert-error" ng-show="error != null">
-                <div><strong>{{error.errorMsg}}</strong></div>
-                <div>{{error.data.Message}}</div>
-            </div>
+		    <div ng-show="success">
+		        <div class="alert alert-success">
+		            <strong>{{source.name}}</strong>
+		            <span ng-hide="moving"><localize key="recycleBin_wasRestored">was restored under</localize></span>
+		            <span ng-show="moving"><localize key="editdatatype_wasMoved">was moved underneath</localize></span>
+		            <strong>{{target.name}}</strong>
+		        </div>
+		        <button class="btn btn-primary" ng-click="nav.hideDialog()">Ok</button>
+		    </div>
 
-			<div class="alert alert-success" ng-show="success == true">
-				<p><strong>{{currentNode.name}}</strong> <localize key="editdatatype_wasMoved">was moved underneath</localize> <strong>{{target.name}}</strong></p>
-				<button class="btn btn-primary" ng-click="nav.hideDialog()"><localize key="general_ok">OK</localize></button>
-			</div>
+		    <div ng-hide="moving || loading || success">
+
+		        <p class="abstract" ng-hide="error || success">
+		            <localize key="actions_restore">Restore</localize> <strong>{{source.name}}</strong> <localize key="general_under">under</localize> <strong>{{target.name}}</strong>?
+		        </p>
+
+		    </div>
+
+		    <div ng-hide="!moving || loading || success">
+		        <div>
+		            <div class="alert alert-info">
+		                <div><strong><localize key="recycleBin_itemCannotBeRestored">Cannot automatically restore this item</localize></strong></div>
+		                <div><localize key="recycleBin_itemCannotBeRestoredHelpText">There is no location where this item can be automatically restored. You can move the item manually using the tree below.</localize></div>
+		            </div>
+		        </div>
+
+		        <div ng-hide="miniListView">
+		            <umb-tree-search-box 
+		                hide-search-callback="hideSearch"
+		                search-callback="onSearchResults"
+		                show-search="{{searchInfo.showSearch}}"
+		                section="media">
+		            </umb-tree-search-box>
+
+		            <br />
+
+		            <umb-tree-search-results
+		                ng-if="searchInfo.showSearch"
+		                results="searchInfo.results"
+		                select-result-callback="selectResult">
+		            </umb-tree-search-results>
+
+		            <div ng-hide="searchInfo.showSearch">
+		                <umb-tree
+		                    section="media"
+		                    hideheader="{{treeModel.hideHeader}}"
+		                    hideoptions="true"
+		                    isdialog="true"
+		                    eventhandler="dialogTreeEventHandler"
+		                    enablelistviewexpand="true"
+		                    enablecheckboxes="true">
+		                </umb-tree>
+		            </div>
+		        </div>
+
+		        <umb-mini-list-view
+		            ng-if="miniListView"
+		            node="miniListView"
+		            entity-type="Document"
+		            on-select="selectListViewNode(node)"
+		            on-close="closeMiniListView()">
+		        </umb-mini-list-view>
+
+		    </div>
 
 		</umb-pane>
 	</div>
 
-	<div class="umb-dialog-footer btn-toolbar umb-btn-toolbar" ng-hide="success == true">
+    <div class="umb-dialog-footer btn-toolbar umb-btn-toolbar" ng-hide="loading || moving || success">
+        <a class="btn btn-link" ng-click="nav.hideDialog()"><localize key="general_cancel">Cancel</localize></a>
+        <button class="btn btn-primary" ng-click="restore()" ng-show="error == null"><localize key="actions_restore">Restore</localize></button>
+    </div>
+
+    <div class="umb-dialog-footer btn-toolbar umb-btn-toolbar" ng-hide="loading || !moving || success">
+        <a class="btn btn-link" ng-click="nav.hideDialog()"><localize key="general_cancel">Cancel</localize></a>
+        <button class="btn btn-primary" ng-click="restore()" ng-show="error == null" ng-disabled="!target"><localize key="actions_move">Move</localize></button>
+    </div>
+
+    <div class="umb-dialog-footer btn-toolbar umb-btn-toolbar" ng-hide="success == true">
 		<a class="btn btn-link" ng-click="nav.hideDialog()"><localize key="general_cancel">Cancel</localize></a>
 		<button class="btn btn-primary" ng-click="restore()" ng-show="error == null"><localize key="actions_restore">Restore</localize></button>
 	</div>