Api4 Explorer - Add code styles and display in tabs

diff --git a/ang/api4Explorer/Explorer.html b/ang/api4Explorer/Explorer.html
index 4a3da7b4d67633d8cd6d4251a3d15f660e0c61e1..f1a43e0017e00bcb81e0c1ef02c8f6f955dcc39b 100644 (file)
--- a/ang/api4Explorer/Explorer.html
+++ b/ang/api4Explorer/Explorer.html
@@ -137,22 +137,26 @@
   </div>
   <div class="api4-explorer-row">
       <div class="panel panel-warning explorer-code-panel">
-        <div class="panel-heading">
-          <h3 class="panel-title" crm-icon="fa-code">{{ ts('Code') }}</h3>
-        </div>
+        <ul class="panel-heading nav nav-tabs">
+          <li role="presentation" ng-repeat="tab in code" ng-class="{active: selectedTab.code === tab.lang}">
+            <a href ng-click="selectedTab.code = tab.lang">
+              {{ tab.lang }}
+            </a>
+          </li>
+        </ul>
         <div class="panel-body">
-          <table>
-            <tr ng-repeat="(type, item) in code">
-              <td>{{ codeLabel[type] }}</td>
-              <td><pre class="prettyprint" ng-bind-html="item"></pre></td>
+          <table ng-repeat="tab in code" ng-show="selectedTab.code === tab.lang">
+            <tr ng-repeat="style in tab.style">
+              <td>{{ style.label }}</td>
+              <td><pre class="prettyprint" ng-bind-html="style.code"></pre></td>
             </tr>
           </table>
         </div>
       </div>
       <div class="panel explorer-result-panel panel-{{ status }}" >
         <ul class="panel-heading nav nav-tabs">
-          <li role="presentation" ng-class="{active: resultTab.selected === 'result'}">
-            <a href ng-click="resultTab.selected = 'result'">
+          <li role="presentation" ng-class="{active: selectedTab.result === 'result'}">
+            <a href ng-click="selectedTab.result = 'result'">
               <i class="fa fa-fw fa-circle-o" ng-if="status === 'default'"></i>
               <i class="fa fa-fw fa-check-circle" ng-if="status === 'success'"></i>
               <i class="fa fa-fw fa-minus-circle" ng-if="status === 'danger'"></i>
@@ -160,18 +164,18 @@
               <span>{{ ts('Result') }}</span>
             </a>
           </li>
-          <li role="presentation" ng-if="perm.accessDebugOutput" ng-class="{active: resultTab.selected === 'debug'}">
-            <a href ng-click="resultTab.selected = 'debug'">
+          <li role="presentation" ng-if="perm.accessDebugOutput" ng-class="{active: selectedTab.result === 'debug'}">
+            <a href ng-click="selectedTab.result = 'debug'">
               <i class="fa fa-fw fa-{{ debug ? 'bug' : 'circle-o' }}"></i>
               <span>{{ ts('Debug') }}</span>
             </a>
           </li>
         </ul>
         <div class="panel-body">
-          <div ng-show="resultTab.selected === 'result'">
+          <div ng-show="selectedTab.result === 'result'">
             <pre class="prettyprint" ng-repeat="code in result" ng-bind-html="code"></pre>
           </div>
-          <div ng-show="resultTab.selected === 'debug'">
+          <div ng-show="selectedTab.result === 'debug'">
             <pre ng-if="debug" class="prettyprint" ng-bind-html="debug"></pre>
             <p ng-if="!debug">
               {{ ts('To view debugging output, enable the debug param before executing.') }}
@@ -183,6 +187,4 @@
         </div>
       </div>
   </div>
-
-
 </div>

diff --git a/ang/api4Explorer/Explorer.js b/ang/api4Explorer/Explorer.js
index 3c5c5ca0b98da59577702cbaa1bb5e4a81505251..1023b73914b41cfb083fdac8177a1e105849deb6 100644 (file)
--- a/ang/api4Explorer/Explorer.js
+++ b/ang/api4Explorer/Explorer.js
@@ -30,7 +30,7 @@
     $scope.availableParams = {};
     $scope.params = {};
     $scope.index = '';
-    $scope.resultTab = {selected: 'result'};
+    $scope.selectedTab = {result: 'result', code: 'php'};
     $scope.perm = {
       accessDebugOutput: CRM.checkPerm('access debug output')
     };
@@ -47,19 +47,35 @@
     $scope.status = 'default';
     $scope.loading = false;
     $scope.controls = {};
-    $scope.codeLabel = {
-      oop: ts('PHP (oop style)'),
-      php: ts('PHP (traditional)'),
-      js: ts('Javascript'),
-      cli: ts('Command Line')
-    };
-    $scope.code = codeDefaults();
-
-    function codeDefaults() {
-      return _.mapValues($scope.codeLabel, function(val, key) {
-        return key === 'oop' ? ts('Select an entity and action') : '';
-      });
-    }
+    $scope.code = [
+      {
+        lang: 'php',
+        style: [
+          {name: 'oop', label: ts('OOP Style'), code: ''},
+          {name: 'php', label: ts('Traditional'), code: ''}
+        ]
+      },
+      {
+        lang: 'js',
+        style: [
+          {name: 'js', label: ts('Single Call'), code: ''},
+          {name: 'js2', label: ts('Batch Calls'), code: ''}
+        ]
+      },
+      {
+        lang: 'ang',
+        style: [
+          {name: 'ang', label: ts('Single Call'), code: ''},
+          {name: 'ang2', label: ts('Batch Calls'), code: ''}
+        ]
+      },
+      {
+        lang: 'cli',
+        style: [
+          {name: 'cv', label: ts('CV'), code: ''}
+        ]
+      },
+    ];
 
     if (!entities.length) {
       formatForSelect2(schema, entities, 'name', ['description']);
@@ -380,7 +396,7 @@
     }
 
     function writeCode() {
-      var code = codeDefaults(),
+      var code = {},
         entity = $scope.entity,
         action = $scope.action,
         params = getParams(),
@@ -401,19 +417,22 @@
         }
 
         // Write javascript
-        code.js = "CRM.api4('" + entity + "', '" + action + "', {";
+        var js = "'" + entity + "', '" + action + "', {";
         _.each(params, function(param, key) {
-          code.js += "\n  " + key + ': ' + stringify(param) +
+          js += "\n  " + key + ': ' + stringify(param) +
             (++i < paramCount ? ',' : '');
           if (key === 'checkPermissions') {
-            code.js += ' // IGNORED: permissions are always enforced from client-side requests';
+            js += ' // IGNORED: permissions are always enforced from client-side requests';
           }
         });
-        code.js += "\n}";
+        js += "\n}";
         if (index || index === 0) {
-          code.js += ', ' + JSON.stringify(index);
+          js += ', ' + JSON.stringify(index);
         }
-        code.js += ").then(function(" + results + ") {\n  // do something with " + results + " array\n}, function(failure) {\n  // handle failure\n});";
+        code.js = "CRM.api4(" + js + ").then(function(" + results + ") {\n  // do something with " + results + " array\n}, function(failure) {\n  // handle failure\n});";
+        code.js2 = "CRM.api4({" + results + ': [' + js + "]}).then(function(batch) {\n  // do something with batch." + results + " array\n}, function(failure) {\n  // handle failure\n});";
+        code.ang = "crmApi4(" + js + ").then(function(" + results + ") {\n  // do something with " + results + " array\n}, function(failure) {\n  // handle failure\n});";
+        code.ang2 = "crmApi4({" + results + ': [' + js + "]}).then(function(batch) {\n  // do something with batch." + results + " array\n}, function(failure) {\n  // handle failure\n});";
 
         // Write php code
         code.php = '$' + results + " = civicrm_api4('" + entity + "', '" + action + "', [";
@@ -472,10 +491,12 @@
         }
 
         // Write cli code
-        code.cli = 'cv api4 ' + entity + '.' + action + " '" + stringify(params) + "'";
+        code.cv = 'cv api4 ' + entity + '.' + action + " '" + stringify(params) + "'";
       }
-      _.each(code, function(val, type) {
-        $scope.code[type] = prettyPrintOne(_.escape(val));
+      _.each($scope.code, function(vals) {
+        _.each(vals.style, function(style) {
+          style.code = code[style.name] ? prettyPrintOne(code[style.name]) : '';
+        });
       });
     }
 

diff --git a/css/api4-explorer.css b/css/api4-explorer.css
index 8041edda26dd6cb750ab37db7721e06152388222..b549bbb9a33200fdbb5a6fd9c13fa0d8b9c79a74 100644 (file)
--- a/css/api4-explorer.css
+++ b/css/api4-explorer.css
@@ -40,7 +40,14 @@
   background-color: #f1f1f18c
 }
 #bootstrap-theme.api4-explorer-page .explorer-code-panel table td:first-child {
-  width: 5em;
+  width: 6em;
+  word-break: break-word;
+}
+#bootstrap-theme.api4-explorer-page .explorer-code-panel table td pre {
+  min-height: 3.3em;
+}
+#bootstrap-theme.api4-explorer-page .explorer-code-panel .panel-heading.nav li a {
+  text-transform: uppercase;
 }
 
 #bootstrap-theme.api4-explorer-page .explorer-params-panel > .panel-body > div.api4-input {