Moves some of the search parts into directives so we can start re-using them.
This commit is contained in:
Shannon
@@ -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);
|
||||
@@ -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);
|
||||
@@ -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);
|
||||
|
||||
@@ -1,20 +1,14 @@
|
||||
<div class="umb-panel" ng-controller="Umbraco.Dialogs.TreePickerController">
|
||||
<div class="umb-panel-header">
|
||||
<div class="umb-el-wrap umb-panel-buttons">
|
||||
<div class="form-search">
|
||||
<i class="icon icon-search" ng-if="!searchInfo.showSearch"></i>
|
||||
<a class="icon icon-arrow-left" ng-if="searchInfo.showSearch" title="Back" ng-click="hideSearch()"></a>
|
||||
<input type="text"
|
||||
ng-model="searchInfo.term"
|
||||
class="umb-search-field search-query"
|
||||
placeholder="{{searchPlaceholderText}}"
|
||||
on-keyup="performSearch()"
|
||||
focus-when="{{searchInfo.showSearch}}">
|
||||
<h4 ng-if="searchInfo.showSearch && searchInfo.searchFromName">
|
||||
<small><localize key="general_search">Search</localize>: </small>
|
||||
{{searchInfo.searchFromName}}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<umb-tree-search-box hide-search-callback="hideSearch"
|
||||
search-callback="performSearch"
|
||||
search-from="{{searchInfo.searchFrom}}"
|
||||
search-from-name="{{searchInfo.searchFromName}}"
|
||||
show-search="{{searchInfo.showSearch}}">
|
||||
</umb-tree-search-box>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="umb-panel-body with-footer">
|
||||
@@ -40,36 +34,24 @@
|
||||
</div>
|
||||
|
||||
<div class="tab-content umb-control-group">
|
||||
|
||||
<!-- Search results -->
|
||||
<div ng-if="searchInfo.showSearch">
|
||||
<ul class="umb-tree">
|
||||
<li class="root">
|
||||
<ul class="umb-search-group">
|
||||
<li ng-repeat="result in searchInfo.results">
|
||||
<div style="padding-left: 20px">
|
||||
<a ng-class="{first:$first}" ng-click="selectResult($event, result)">
|
||||
<i class="icon umb-tree-icon sprTree {{result.selected ? 'icon-check blue temporary' : result.icon}}"></i>
|
||||
{{result.name}}
|
||||
<small class="search-subtitle" ng-if="result.subTitle">{{result.subTitle}}</small>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<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="{{section}}"
|
||||
treealias="{{treeAlias}}"
|
||||
hideheader="{{hideHeader}}"
|
||||
hideoptions="true"
|
||||
isdialog="true"
|
||||
customtreeparams="{{customTreeParams}}"
|
||||
eventhandler="dialogTreeEventHandler"
|
||||
enablelistviewsearch="true"
|
||||
enablecheckboxes="{{multiPicker}}">
|
||||
<umb-tree
|
||||
section="{{section}}"
|
||||
treealias="{{treeAlias}}"
|
||||
hideheader="{{hideHeader}}"
|
||||
hideoptions="true"
|
||||
isdialog="true"
|
||||
customtreeparams="{{customTreeParams}}"
|
||||
eventhandler="dialogTreeEventHandler"
|
||||
enablelistviewsearch="true"
|
||||
enablecheckboxes="{{multiPicker}}">
|
||||
</umb-tree>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
<div class="form-search">
|
||||
<i class="icon icon-search" ng-if="showSearch == 'false'"></i>
|
||||
<a class="icon icon-arrow-left" ng-if="showSearch == 'true'" title="Back" ng-click="hideSearch()"></a>
|
||||
<input type="text"
|
||||
ng-model="term"
|
||||
class="umb-search-field search-query"
|
||||
placeholder="{{searchPlaceholderText}}"
|
||||
focus-when="{{showSearch}}">
|
||||
<h4 ng-if="showSearch && searchFromName">
|
||||
<small><localize key="general_search">Search</localize>: </small>
|
||||
{{searchFromName}}
|
||||
</h4>
|
||||
</div>
|
||||
@@ -0,0 +1,17 @@
|
||||
<div>
|
||||
<ul class="umb-tree">
|
||||
<li class="root">
|
||||
<ul class="umb-search-group">
|
||||
<li ng-repeat="result in results">
|
||||
<div style="padding-left: 20px">
|
||||
<a ng-class="{first:$first}" ng-click="selectResultCallback($event, result)">
|
||||
<i class="icon umb-tree-icon sprTree {{result.selected ? 'icon-check blue temporary' : result.icon}}"></i>
|
||||
{{result.name}}
|
||||
<small class="search-subtitle" ng-if="result.subTitle">{{result.subTitle}}</small>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
Reference in New Issue
Block a user