yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Moves querybuilder to a overlay

Browse Source
This commit is contained in:
Per Ploug
2016-06-13 15:48:47 +02:00
parent 8a66943f4a
commit b2ea92940e
2 changed files with 237 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.controller.js Normal file
View File

@@ -0,0 +1,101 @@
angular.module("umbraco").controller('Umbraco.Overlays.QueryBuilderController',
function($scope, $http, dialogService){
$http.get("backoffice/UmbracoApi/TemplateQuery/GetAllowedProperties").then(function(response) {
$scope.properties = response.data;
});
$http.get("backoffice/UmbracoApi/TemplateQuery/GetContentTypes").then(function (response) {
$scope.contentTypes = response.data;
});
$http.get("backoffice/UmbracoApi/TemplateQuery/GetFilterConditions").then(function (response) {
$scope.conditions = response.data;
});
$scope.query = {
contentType: {
name: "Everything"
},
source:{
name: "My website"
},
filters:[
{
property:undefined,
operator: undefined
}
],
sort:{
property:{
alias: "",
name: "",
},
direction: "ascending"
}
};
$scope.chooseSource = function(query){
dialogService.contentPicker({
callback: function (data) {
if (data.id > 0) {
query.source = { id: data.id, name: data.name };
} else {
query.source.name = "My website";
delete query.source.id;
}
}
});
};
var throttledFunc = _.throttle(function() {
$http.post("backoffice/UmbracoApi/TemplateQuery/PostTemplateQuery", $scope.query).then(function (response) {
$scope.model.result = response.data;
});
}, 200);
$scope.$watch("query", function(value) {
throttledFunc();
}, true);
$scope.getPropertyOperators = function (property) {
var conditions = _.filter($scope.conditions, function(condition) {
var index = condition.appliesTo.indexOf(property.type);
return index >= 0;
});
return conditions;
};
$scope.addFilter = function(query){
query.filters.push({});
};
$scope.trashFilter = function (query) {
query.filters.splice(query,1);
};
$scope.changeSortOrder = function(query){
if(query.sort.direction === "ascending"){
query.sort.direction = "descending";
}else{
query.sort.direction = "ascending";
}
};
$scope.setSortProperty = function(query, property){
query.sort.property = property;
if(property.type === "datetime"){
query.sort.direction = "descending";
}else{
query.sort.direction = "ascending";
}
};
});

136
src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.html Normal file
View File

@@ -0,0 +1,136 @@
<div
ng-controller="Umbraco.Overlays.QueryBuilderController">
<style>
.umb-querybuilder .row {font-size: 12px; line-height: 12px}
.umb-querybuilder .row a.btn{font-size: 12px; background: lightyellow}
.umb-querybuilder .row > div{
padding: 20px;
border-bottom: 1px solid #efefef;
}
</style>
<div class="umb-control-group umb-querybuilder">
<div class="row">
<div>
I want
<div class="btn-group">
<a class="btn btn-link dropdown-toggle"
data-toggle="dropdown" href="#">
{{query.contentType.name}}
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li ng-repeat="contentType in contentTypes">
<a href ng-click="query.contentType = contentType">
{{contentType.name}}
</a>
</li>
</ul>
</div>
<span>from</span>
<a href class="btn btn-link" ng-click="chooseSource(query)">
{{query.source.name}}
<span class="caret"></span>
</a>
</div>
<div ng-repeat="filter in query.filters">
<span ng-if="$first">Where</span>
<span ng-if="!$first">And</span>
<div class="btn-group">
<a class="btn btn-link dropdown-toggle"
data-toggle="dropdown" href="#">
{{filter.property.name}}
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li ng-repeat="property in properties">
<a href ng-click="filter.property = property">
{{property.name}}
</a>
</li>
</ul>
</div>
<div class="btn-group" ng-if="filter.property">
<a class="btn btn-link dropdown-toggle"
data-toggle="dropdown" href="#">
{{filter.term.name}}
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li ng-repeat="term in getPropertyOperators(filter.property)">
<a href ng-click="filter.term = term">
{{term.name}}
</a>
</li>
</ul>
</div>
<input type="text" ng-if="filter.term" style="width:90px;" ng-model="filter.constraintValue" />
<a href ng-click="addFilter(query)">
<i class="icon-add"></i>
</a>
<a href ng-if="query.filters.length > 1" ng-click="trashFilter(query)">
<i class="icon-trash"></i>
</a>
</div>
<div>
Order by
<div class="btn-group">
<a class="btn btn-link dropdown-toggle"
data-toggle="dropdown" href="#">
{{query.sort.property.name}}
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li ng-repeat="property in properties">
<a href ng-click="setSortProperty(query, property)">
{{property.name}}
</a>
</li>
</ul>
</div>
<a href class="btn" ng-click="changeSortOrder(query)">
{{query.sort.direction}}
</a>
</div>
</div>
<h4>Returns {{model.result.resultCount}} items in {{model.result.executionTime}} miliseconds</h4>
<ul class="nav unstyled">
<li ng-repeat="item in model.result.sampleResults">
<i class="icon icon-document blue"></i> {{item.name}}
</li>
</ul>
<pre>
{{model.result.queryExpression}}
</pre>
</div>
</div>