From d0f217d952a52fd5130b320dffa34117f328e1e5 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Sun, 6 Mar 2022 11:57:54 -0500
Subject: [PATCH] APIv4 Explorer - Add "copy" button and output executable php

Makes it easy to select and copy generated code.

This makes the "Export" action easier to use, a "Copy" button automatically
selects text, and the PHP formatted code begins with "return" and ends with a semicolon.
---
 ang/api4Explorer/Explorer.html | 18 ++++++++++++++++--
 ang/api4Explorer/Explorer.js   | 12 +++++++++++-
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/ang/api4Explorer/Explorer.html b/ang/api4Explorer/Explorer.html
index a48a68f50a..0e720442bc 100644
--- a/ang/api4Explorer/Explorer.html
+++ b/ang/api4Explorer/Explorer.html
@@ -224,8 +224,14 @@
           </p>
         </div>
         <div ng-repeat="style in code[selectedTab.code]">
+          <button class="btn btn-xs btn-default pull-right" ng-click="$ctrl.copyCode('api4-code-' + selectedTab.code + '-' + style.name)">
+            <i class="crm-i fa-clipboard"></i>
+            {{:: ts('Copy') }}
+          </button>
           <label>{{:: style.label }}</label>
-          <div><pre class="prettyprint" ng-bind-html="style.code"></pre></div>
+          <div>
+            <pre class="prettyprint" id="api4-code-{{ selectedTab.code + '-' + style.name }}" ng-bind-html="style.code"></pre>
+          </div>
         </div>
       </div>
     </div>
@@ -261,7 +267,15 @@
       </div>
       <div class="panel-body">
         <div ng-show="selectedTab.result === 'result'">
-          <pre class="prettyprint" ng-repeat="code in result" ng-bind-html="code"></pre>
+          <div ng-repeat="code in result">
+            <div class="clearfix">
+              <button ng-if="$index" class="btn btn-xs btn-default pull-right" ng-click="$ctrl.copyCode('api4-result-' + $index)">
+                <i class="crm-i fa-clipboard"></i>
+                {{:: ts('Copy') }}
+              </button>
+            </div>
+            <pre class="prettyprint" id="api4-result-{{ $index }}" ng-bind-html="code"></pre>
+          </div>
         </div>
         <div ng-if="::perm.accessDebugOutput" ng-show="selectedTab.result === 'debug'">
           <pre ng-if="debug" class="prettyprint" ng-bind-html="debug"></pre>
diff --git a/ang/api4Explorer/Explorer.js b/ang/api4Explorer/Explorer.js
index 113d9db832..ee6e9864ea 100644
--- a/ang/api4Explorer/Explorer.js
+++ b/ang/api4Explorer/Explorer.js
@@ -116,6 +116,16 @@
       default: 'json'
     });
 
+    // Copy text to the clipboard
+    this.copyCode = function(domId) {
+      var node = document.getElementById(domId);
+      var range = document.createRange();
+      range.selectNode(node);
+      window.getSelection().removeAllRanges();
+      window.getSelection().addRange(range);
+      document.execCommand('copy');
+    };
+
     function ucfirst(str) {
       return str[0].toUpperCase() + str.slice(1);
     }
@@ -976,7 +986,7 @@
           break;
 
         case 'php':
-          $scope.result.push(prettyPrintOne((_.isArray(response.values) ? '(' + response.values.length + ') ' : '') + _.escape(phpFormat(response.values, 2, 2)), 'php', 1));
+          $scope.result.push(prettyPrintOne('return ' + _.escape(phpFormat(response.values, 2, 2)) + ';', 'php', 1));
           break;
       }
     };
-- 
2.25.1