From f5746a1a3c18f0ed79aeeb65e910c4600bc90c0b Mon Sep 17 00:00:00 2001 From: Shannon Date: Fri, 10 Oct 2014 00:42:37 +1100 Subject: [PATCH] Moves some of the search parts into directives so we can start re-using them. --- .../directives/umbtreesearchbox.directive.js | 47 +++++++++++ .../umbtreesearchresults.directive.js | 22 +++++ .../common/dialogs/treepicker.controller.js | 81 +++++++------------ .../src/views/common/dialogs/treepicker.html | 66 ++++++--------- .../views/directives/umb-tree-search-box.html | 13 +++ .../directives/umb-tree-search-results.html | 17 ++++ 6 files changed, 151 insertions(+), 95 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/umbtreesearchbox.directive.js create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/umbtreesearchresults.directive.js create mode 100644 src/Umbraco.Web.UI.Client/src/views/directives/umb-tree-search-box.html create mode 100644 src/Umbraco.Web.UI.Client/src/views/directives/umb-tree-search-results.html diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/umbtreesearchbox.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/umbtreesearchbox.directive.js new file mode 100644 index 0000000000..7729bdc285 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/umbtreesearchbox.directive.js @@ -0,0 +1,47 @@ +/** +* @ngdoc directive +* @name umbraco.directives.directive:umbTreeSearchBox +* @function +* @element ANY +* @restrict E +**/ +function treeSearchBox(localizationService) { + return { + scope: { + searchFrom: "@", + searchFromName: "@", + showSearch: "@", + hideSearchCallback: "=", + searchCallback: "=" + }, + restrict: "E", // restrict to an element + replace: true, // replace the html element with the template + templateUrl: 'views/directives/umb-tree-search-box.html', + link: function (scope, element, attrs, ctrl) { + + scope.term = ""; + scope.hideSearch = function() { + scope.term = ""; + scope.hideSearchCallback(); + }; + + localizationService.localize("general_typeToSearch").then(function (value) { + scope.searchPlaceholderText = value; + }); + + if (!scope.showSearch) { + scope.showSearch = "false"; + } + + scope.$watch("term", _.debounce(function(newVal, oldVal) { + scope.$apply(function() { + if (newVal !== null && newVal !== undefined && newVal !== oldVal) { + scope.searchCallback(newVal); + } + }); + }, 200)); + + } + }; +} +angular.module('umbraco.directives').directive("umbTreeSearchBox", treeSearchBox); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/umbtreesearchresults.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/umbtreesearchresults.directive.js new file mode 100644 index 0000000000..9542deb5eb --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/umbtreesearchresults.directive.js @@ -0,0 +1,22 @@ +/** +* @ngdoc directive +* @name umbraco.directives.directive:umbTreeSearchResults +* @function +* @element ANY +* @restrict E +**/ +function treeSearchResults() { + return { + scope: { + results: "=", + selectResultCallback: "=" + }, + restrict: "E", // restrict to an element + replace: true, // replace the html element with the template + templateUrl: 'views/directives/umb-tree-search-results.html', + link: function (scope, element, attrs, ctrl) { + + } + }; +} +angular.module('umbraco.directives').directive("umbTreeSearchResults", treeSearchResults); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.controller.js index 4100240d89..05bf0007a9 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.controller.js @@ -8,16 +8,11 @@ angular.module("umbraco").controller("Umbraco.Dialogs.TreePickerController", $scope.section = dialogOptions.section; $scope.treeAlias = dialogOptions.treeAlias; $scope.multiPicker = dialogOptions.multiPicker; - $scope.hideHeader = true; - localizationService.localize("general_typeToSearch").then(function (value) { - $scope.searchPlaceholderText = value; - }); + $scope.hideHeader = true; $scope.searchInfo = { searchFrom: null, searchFromName: null, showSearch: false, - term: null, - oldTerm: null, results: [] } @@ -194,18 +189,6 @@ angular.module("umbraco").controller("Umbraco.Dialogs.TreePickerController", //since result = an entity, we'll pass it in so we don't have to go back to the server select(result.name, result.id, result); - - //if (result.selected) { - // //add this to the list of selected search results so that when it's re-searched we - // // can show the checked boxes - // $scope.searchInfo.selectedSearchResults.push(result.id); - //} - //else { - // $scope.searchInfo.selectedSearchResults = _.reject($scope.searchInfo.selectedSearchResults, function(itemId) { - // return itemId == result.id; - // }); - //} - }; $scope.hideSearch = function () { @@ -242,47 +225,39 @@ angular.module("umbraco").controller("Umbraco.Dialogs.TreePickerController", $scope.searchInfo.showSearch = false; $scope.searchInfo.searchFromName = null; $scope.searchInfo.searchFrom = null; - $scope.searchInfo.term = null; - $scope.searchInfo.oldTerm = null; $scope.searchInfo.results = []; } //handles the on key up for searching, but we don't want to over query so the result is debounced - $scope.performSearch = _.debounce(function () { - angularHelper.safeApply($scope, function() { - if ($scope.searchInfo.term) { - if ($scope.searchInfo.oldTerm !== $scope.searchInfo.term) { - $scope.searchInfo.results = []; + $scope.performSearch = function(term) { + if (term) { + $scope.searchInfo.results = []; - var searchArgs = { - term: $scope.searchInfo.term - }; - //append a start node id, whether it's a global one, or based on a selected list view - if ($scope.searchInfo.searchFrom || dialogOptions.startNodeId) { - searchArgs["searchFrom"] = $scope.searchInfo.searchFrom ? $scope.searchInfo.searchFrom : dialogOptions.startNodeId; - } - searcher(searchArgs).then(function (data) { - $scope.searchInfo.results = data; - //now we need to look in the already selected search results and - // toggle the check boxes for those ones - _.each($scope.searchInfo.results, function(result) { - var exists = _.find($scope.dialogData.selection, function (selectedId) { - return result.id == selectedId; - }); - if (exists) { - result.selected = true; - } - }); - - }); - - $scope.searchInfo.showSearch = true; - $scope.searchInfo.oldTerm = $scope.searchInfo.term; - } + var searchArgs = { + term: term + }; + //append a start node id, whether it's a global one, or based on a selected list view + if ($scope.searchInfo.searchFrom || dialogOptions.startNodeId) { + searchArgs["searchFrom"] = $scope.searchInfo.searchFrom ? $scope.searchInfo.searchFrom : dialogOptions.startNodeId; } - }); - - }, 200); + searcher(searchArgs).then(function (data) { + $scope.searchInfo.results = data; + //now we need to look in the already selected search results and + // toggle the check boxes for those ones + _.each($scope.searchInfo.results, function (result) { + var exists = _.find($scope.dialogData.selection, function (selectedId) { + return result.id == selectedId; + }); + if (exists) { + result.selected = true; + } + }); + + }); + + $scope.searchInfo.showSearch = true; + } + }; $scope.dialogTreeEventHandler.bind("treeLoaded", treeLoadedHandler); $scope.dialogTreeEventHandler.bind("treeNodeSearch", nodeSearchHandler); diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.html b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.html index 88273cad01..67becc362e 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.html @@ -1,20 +1,14 @@
-
- - - -

- Search:  - {{searchInfo.searchFromName}} -

-
+ + + +
@@ -40,36 +34,24 @@
- - -
- -
+ + +
- +
diff --git a/src/Umbraco.Web.UI.Client/src/views/directives/umb-tree-search-box.html b/src/Umbraco.Web.UI.Client/src/views/directives/umb-tree-search-box.html new file mode 100644 index 0000000000..fde38dcb62 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/directives/umb-tree-search-box.html @@ -0,0 +1,13 @@ +
+ + + +

+ Search:  + {{searchFromName}} +

+
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/directives/umb-tree-search-results.html b/src/Umbraco.Web.UI.Client/src/views/directives/umb-tree-search-results.html new file mode 100644 index 0000000000..2dc864f00c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/directives/umb-tree-search-results.html @@ -0,0 +1,17 @@ +
+ +
\ No newline at end of file