From 576fef3bbf1560de959dd146a205b8430e790539 Mon Sep 17 00:00:00 2001
From: Carole Rennie Logan <crgrieve@users.noreply.github.com>
Date: Fri, 4 Oct 2019 21:18:10 +0100
Subject: [PATCH] Copy to clipboard

Querybuilder copy to clipboard
---
 .../querybuilder/querybuilder.controller.js   |   6 +
 .../querybuilder/querybuilder.html            | 298 +++++++++---------
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml |   1 +
 .../Umbraco/config/lang/en_us.xml             |   1 +
 4 files changed, 155 insertions(+), 151 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/querybuilder/querybuilder.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/querybuilder/querybuilder.controller.js
index faca3b3fa089..4d537bd73c2f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/querybuilder/querybuilder.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/querybuilder/querybuilder.controller.js
@@ -31,6 +31,7 @@
         vm.datePickerChange = datePickerChange;
         vm.submit = submit;
         vm.close = close;
+        vm.copyQuery = copyQuery;
 
         function onInit() {
 
@@ -120,6 +121,11 @@
             query.filters.push({});
         }
 
+        function copyQuery() {
+            var copyText = $scope.model.result.queryExpression;
+            navigator.clipboard.writeText(copyText);
+        }
+
         function trashFilter(query, filter) {
             for (var i = 0; i < query.filters.length; i++) {
                 if (query.filters[i] == filter) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/querybuilder/querybuilder.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/querybuilder/querybuilder.html
index 779ca739d2e7..f01f325265cb 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/querybuilder/querybuilder.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/querybuilder/querybuilder.html
@@ -15,164 +15,160 @@
 			<umb-box>
 				<umb-box-content>
 
-					<div class="umb-control-group umb-querybuilder">
-
-						<div class="row">
-							<div class="query-items">
-
-								<span><localize key="template_iWant">I want</localize></span>
-
-								<div class="btn-group">
-
-									<umb-button
-										type="button"
-										button-style="outline"
-										action="vm.contentTypeSelectOpen = !vm.contentTypeSelectOpen"
-										label="{{vm.query.contentType.name}}"
-										show-caret="true">
-									</umb-button>
+                    <div class="umb-control-group umb-querybuilder">
 
-									<umb-dropdown ng-if="vm.contentTypeSelectOpen" on-close="vm.contentTypeSelectOpen = false">
-										<umb-dropdown-item ng-repeat="contentType in vm.contentTypes">
-											<a href ng-click="vm.setContentType(contentType); vm.contentTypeSelectOpen = false;">
-												{{contentType.name}}
-											</a>
-										</umb-dropdown-item>
-									</umb-dropdown>
-
-								</div>
+                        <div class="row">
+                            <div class="query-items">
 
-								<span><localize key="template_from">from</localize></span>
-
-								<umb-button
-									type="button"
-									button-style="outline"
-									action="vm.chooseSource(vm.query)"
-									label="{{vm.query.source.name}}">
-								</umb-button>
-
-							</div>
-
-							<div class="query-items" ng-repeat="filter in vm.query.filters ">
-
-								<span ng-if="$first">
-									<localize key="template_where">where</localize>
-								</span>
-								<span ng-if="!$first">
-									<localize key="template_and">and</localize>
-								</span>
-
-								<div class="btn-group">
-
-									<umb-button
-										type="button"
-										button-style="outline"
-										action="vm.propertyFilterOpen[$index] = !vm.propertyFilterOpen[$index]"
-										label="{{filter.property.name}}"
-										show-caret="true">
-									</umb-button>
-
-									<umb-dropdown ng-if="vm.propertyFilterOpen[$index]" on-close="console.log(1);vm.propertyFilterOpen[$index] = false">
-										<umb-dropdown-item ng-repeat="property in vm.properties">
-											<a href ng-click="vm.setFilterProperty(filter, property); vm.propertyFilterOpen[$parent.$parent.$index] = false;">
-												{{property.name}}
-											</a>
-										</umb-dropdown-item>
-									</umb-dropdown>
-
-								</div>
-
-								<div class="btn-group" ng-if="filter.property">
-
-									<umb-button
-										type="button"
-										button-style="outline"
-										action="vm.termFilterOpen[$index] = !vm.termFilterOpen[$index]"
-										label="{{filter.term.name}}"
-										show-caret="true">
-									</umb-button>
-
-									<umb-dropdown ng-if="vm.termFilterOpen[$index]" on-close="vm.termFilterOpen[$index] = false">
-										<umb-dropdown-item ng-repeat="term in vm.getPropertyOperators(filter.property)">
-											<a href ng-click="vm.setFilterTerm(filter, term); vm.termFilterOpen[$parent.$parent.$index] = false;">
-												{{term.name}}
-											</a>
-										</umb-dropdown-item>
-									</umb-dropdown>
-
-								</div>
-
-								<span ng-switch="filter.term.appliesTo[0]">
-
-									<!-- Filter term types  (string, int, date) -->
-									<input type="text" ng-switch-when="string" style="width:90px; margin-bottom: 0;" ng-model="filter.constraintValue" ng-change="vm.changeConstraintValue()" />
-									<input type="number" ng-switch-when="int" style="width:90px; margin-bottom: 0;" ng-model="filter.constraintValue" ng-change="vm.changeConstraintValue()" />
-
-									<span ng-switch-when="datetime">
-										<umb-date-time-picker
-											options="vm.datePickerConfig"
-											on-change="vm.datePickerChange(dateStr, filter)">
-										</umb-date-time-picker>
-									</span>
-
-								</span>
-
-								<a href ng-click="vm.addFilter(vm.query)">
-									<i class="icon-add"></i>
-								</a>
-
-								<a href ng-click="vm.trashFilter(vm.query, filter)">
-									<i class="icon-trash"></i>
-								</a>
-
-							</div>
-
-							<div class="query-items">
-
-								<span><localize key="template_orderBy">order by</localize></span>
-
-								<div class="btn-group">
-
-									<umb-button
-										type="button"
-										button-style="outline"
-										action="vm.sortPropertyOpen = !vm.sortPropertyOpen"
-										label="{{vm.query.sort.property.name}}"
-										show-caret="true">
-									</umb-button>
-
-									<umb-dropdown ng-if="vm.sortPropertyOpen" on-close="vm.sortPropertyOpen = false">
-										<umb-dropdown-item ng-repeat="property in vm.properties">
-											<a href ng-click="vm.setSortProperty(vm.query, property); vm.sortPropertyOpen = false;">
-												{{property.name}}
-											</a>
-										</umb-dropdown-item>
-									</umb-dropdown>
-
-								</div>
-
-								<umb-button
-									ng-show="vm.query.sort.property.name"
-									type="button"
-									button-style="outline"
-									action="vm.changeSortOrder(vm.query)"
-									label="{{vm.query.sort.translation.currentLabel}}">
-								</umb-button>
-
-							</div>
-						</div>
+                                <span><localize key="template_iWant">I want</localize></span>
+
+                                <div class="btn-group">
+
+                                    <umb-button type="button"
+                                                button-style="outline"
+                                                action="vm.contentTypeSelectOpen = !vm.contentTypeSelectOpen"
+                                                label="{{vm.query.contentType.name}}"
+                                                show-caret="true">
+                                    </umb-button>
+
+                                    <umb-dropdown ng-if="vm.contentTypeSelectOpen" on-close="vm.contentTypeSelectOpen = false">
+                                        <umb-dropdown-item ng-repeat="contentType in vm.contentTypes">
+                                            <a href ng-click="vm.setContentType(contentType); vm.contentTypeSelectOpen = false;">
+                                                {{contentType.name}}
+                                            </a>
+                                        </umb-dropdown-item>
+                                    </umb-dropdown>
+
+                                </div>
+
+                                <span><localize key="template_from">from</localize></span>
+
+                                <umb-button type="button"
+                                            button-style="outline"
+                                            action="vm.chooseSource(vm.query)"
+                                            label="{{vm.query.source.name}}">
+                                </umb-button>
+
+                            </div>
+
+                            <div class="query-items" ng-repeat="filter in vm.query.filters ">
+
+                                <span ng-if="$first">
+                                    <localize key="template_where">where</localize>
+                                </span>
+                                <span ng-if="!$first">
+                                    <localize key="template_and">and</localize>
+                                </span>
+
+                                <div class="btn-group">
+
+                                    <umb-button type="button"
+                                                button-style="outline"
+                                                action="vm.propertyFilterOpen[$index] = !vm.propertyFilterOpen[$index]"
+                                                label="{{filter.property.name}}"
+                                                show-caret="true">
+                                    </umb-button>
+
+                                    <umb-dropdown ng-if="vm.propertyFilterOpen[$index]" on-close="console.log(1);vm.propertyFilterOpen[$index] = false">
+                                        <umb-dropdown-item ng-repeat="property in vm.properties">
+                                            <a href ng-click="vm.setFilterProperty(filter, property); vm.propertyFilterOpen[$parent.$parent.$index] = false;">
+                                                {{property.name}}
+                                            </a>
+                                        </umb-dropdown-item>
+                                    </umb-dropdown>
+
+                                </div>
+
+                                <div class="btn-group" ng-if="filter.property">
+
+                                    <umb-button type="button"
+                                                button-style="outline"
+                                                action="vm.termFilterOpen[$index] = !vm.termFilterOpen[$index]"
+                                                label="{{filter.term.name}}"
+                                                show-caret="true">
+                                    </umb-button>
+
+                                    <umb-dropdown ng-if="vm.termFilterOpen[$index]" on-close="vm.termFilterOpen[$index] = false">
+                                        <umb-dropdown-item ng-repeat="term in vm.getPropertyOperators(filter.property)">
+                                            <a href ng-click="vm.setFilterTerm(filter, term); vm.termFilterOpen[$parent.$parent.$index] = false;">
+                                                {{term.name}}
+                                            </a>
+                                        </umb-dropdown-item>
+                                    </umb-dropdown>
+
+                                </div>
+
+                                <span ng-switch="filter.term.appliesTo[0]">
+
+                                    <!-- Filter term types  (string, int, date) -->
+                                    <input type="text" ng-switch-when="string" style="width:90px; margin-bottom: 0;" ng-model="filter.constraintValue" ng-change="vm.changeConstraintValue()" />
+                                    <input type="number" ng-switch-when="int" style="width:90px; margin-bottom: 0;" ng-model="filter.constraintValue" ng-change="vm.changeConstraintValue()" />
+
+                                    <span ng-switch-when="datetime">
+                                        <umb-date-time-picker options="vm.datePickerConfig"
+                                                              on-change="vm.datePickerChange(dateStr, filter)">
+                                        </umb-date-time-picker>
+                                    </span>
+
+                                </span>
+
+                                <a href ng-click="vm.addFilter(vm.query)">
+                                    <i class="icon-add"></i>
+                                </a>
+
+                                <a href ng-click="vm.trashFilter(vm.query, filter)">
+                                    <i class="icon-trash"></i>
+                                </a>
+
+                            </div>
+
+                            <div class="query-items">
+
+                                <span><localize key="template_orderBy">order by</localize></span>
+
+                                <div class="btn-group">
+
+                                    <umb-button type="button"
+                                                button-style="outline"
+                                                action="vm.sortPropertyOpen = !vm.sortPropertyOpen"
+                                                label="{{vm.query.sort.property.name}}"
+                                                show-caret="true">
+                                    </umb-button>
+
+                                    <umb-dropdown ng-if="vm.sortPropertyOpen" on-close="vm.sortPropertyOpen = false">
+                                        <umb-dropdown-item ng-repeat="property in vm.properties">
+                                            <a href ng-click="vm.setSortProperty(vm.query, property); vm.sortPropertyOpen = false;">
+                                                {{property.name}}
+                                            </a>
+                                        </umb-dropdown-item>
+                                    </umb-dropdown>
+
+                                </div>
+
+                                <umb-button ng-show="vm.query.sort.property.name"
+                                            type="button"
+                                            button-style="outline"
+                                            action="vm.changeSortOrder(vm.query)"
+                                            label="{{vm.query.sort.translation.currentLabel}}">
+                                </umb-button>
+
+                            </div>
+                        </div>
 
                         <h5>{{model.result.resultCount}} <localize key="template_itemsReturned">items, returned in</localize> {{model.result.executionTime}} ms</h5>
 
-						<ul class="nav unstyled">
-							<li ng-repeat="item in model.result.sampleResults">
-								<i class="icon icon-document turquoise-d1"></i> {{item.name}}
-							</li>
-						</ul>
+                        <ul class="nav unstyled">
+                            <li ng-repeat="item in model.result.sampleResults">
+                                <i class="icon icon-document turquoise-d1"></i> {{item.name}}
+                            </li>
+                        </ul>
 
-						<pre>{{model.result.queryExpression}}</pre>
+                        <pre>{{model.result.queryExpression}}</pre>
+                        <a href ng-click="vm.copyQuery()">
+                            <i class="icon-document"></i> <localize key="template_copyToClipboard">copy to clipboard</localize>
+                        </a>
 
-					</div>
+                    </div>
 
 				</umb-box-content>
 			</umb-box>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index 2d54ce1e2a55..fcf62f5e5c8e 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -1488,6 +1488,7 @@ To manage your website, simply open the Umbraco back office and start adding con
         </key>
     <key alias="queryBuilder">Query builder</key>
     <key alias="itemsReturned">items returned, in</key>
+    <key alias="copyToClipboard">copy to clipboard</key>
     <key alias="iWant">I want</key>
     <key alias="allContent">all content</key>
     <key alias="contentOfType">content of type "%0%"</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
index 96387b7d2651..0cb166072dc8 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -1500,6 +1500,7 @@ To manage your website, simply open the Umbraco back office and start adding con
         </key>
     <key alias="queryBuilder">Query builder</key>
     <key alias="itemsReturned">items returned, in</key>
+    <key alias="copyToClipboard">copy to clipboard</key>
     <key alias="iWant">I want</key>
     <key alias="allContent">all content</key>
     <key alias="contentOfType">content of type "%0%"</key>