From b2ea92940ef5a8d9de9a0e558c9bcd4357a1200c Mon Sep 17 00:00:00 2001
From: Per Ploug <per@umbraco.dk>
Date: Mon, 13 Jun 2016 15:48:47 +0200
Subject: [PATCH] Moves querybuilder to a overlay

---
 .../querybuilder/querybuilder.controller.js   | 101 +++++++++++++
 .../overlays/querybuilder/querybuilder.html   | 136 ++++++++++++++++++
 2 files changed, 237 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.controller.js
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.html

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.controller.js
new file mode 100644
index 0000000000..1680c4f9d1
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.controller.js
@@ -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";
+				}
+			};
+		});
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.html
new file mode 100644
index 0000000000..d18cb3a412
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.html
@@ -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>
\ No newline at end of file