From e7515b5be0596131ab40fd4312067d5d54ee5d22 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Wed, 28 Oct 2020 14:02:36 -0400
Subject: [PATCH] Search ext: Dynamic templates and a preview button for
 displays

---
 ext/search/Civi/Search/Admin.php              | 19 +------
 ext/search/Civi/Search/Display.php            | 46 ++++++++++++++++
 ext/search/ang/crmSearchPage.ang.php          |  1 +
 ext/search/ang/crmSearchPage.module.js        | 19 ++++++-
 ext/search/ang/crmSearchPage/display.html     |  7 ---
 .../ang/searchAdmin/crmSearchAdmin.html       |  2 +-
 .../crmSearchAdminDisplay.component.js        | 54 +++++++++++++++++++
 .../searchAdmin/crmSearchAdminDisplay.html    |  7 +++
 ext/search/ang/searchAdmin/display.html       |  9 ----
 .../searchAdminDisplayTable.component.js      |  1 -
 .../ang/searchAdmin/displays/table.html       |  3 --
 ext/search/ang/searchAdmin/tabs.html          |  1 +
 ext/search/search.php                         |  2 +-
 13 files changed, 129 insertions(+), 42 deletions(-)
 create mode 100644 ext/search/Civi/Search/Display.php
 delete mode 100644 ext/search/ang/crmSearchPage/display.html
 create mode 100644 ext/search/ang/searchAdmin/crmSearchAdminDisplay.component.js
 create mode 100644 ext/search/ang/searchAdmin/crmSearchAdminDisplay.html
 delete mode 100644 ext/search/ang/searchAdmin/display.html
 delete mode 100644 ext/search/ang/searchAdmin/displays/table.html

diff --git a/ext/search/Civi/Search/Admin.php b/ext/search/Civi/Search/Admin.php
index 6d2a2a7d2f..58f8d5e192 100644
--- a/ext/search/Civi/Search/Admin.php
+++ b/ext/search/Civi/Search/Admin.php
@@ -24,7 +24,7 @@ class Admin {
     return [
       'operators' => \CRM_Utils_Array::makeNonAssociative(self::getOperators()),
       'functions' => \CRM_Api4_Page_Api4Explorer::getSqlFunctions(),
-      'displayTypes' => self::getDisplayTypes(['name', 'label', 'description', 'icon']),
+      'displayTypes' => Display::getDisplayTypes(['name', 'label', 'description', 'icon']),
     ];
   }
 
@@ -105,21 +105,4 @@ class Admin {
     return array_filter($results);
   }
 
-  /**
-   * @param array $props
-   * @return array
-   */
-  public static function getDisplayTypes(array $props):array {
-    try {
-      return \Civi\Api4\SearchDisplay::getFields(FALSE)
-        ->setLoadOptions($props)
-        ->addWhere('name', '=', 'type')
-        ->execute()
-        ->first()['options'];
-    }
-    catch (\Exception $e) {
-      return [];
-    }
-  }
-
 }
diff --git a/ext/search/Civi/Search/Display.php b/ext/search/Civi/Search/Display.php
new file mode 100644
index 0000000000..aa23ac4bd8
--- /dev/null
+++ b/ext/search/Civi/Search/Display.php
@@ -0,0 +1,46 @@
+<?php
+/*
+ +--------------------------------------------------------------------+
+ | Copyright CiviCRM LLC. All rights reserved.                        |
+ |                                                                    |
+ | This work is published under the GNU AGPLv3 license with some      |
+ | permitted exceptions and without any warranty. For full license    |
+ | and copyright information, see https://civicrm.org/licensing       |
+ +--------------------------------------------------------------------+
+ */
+
+namespace Civi\Search;
+
+/**
+ * Class Display
+ * @package Civi\Search
+ */
+class Display {
+
+  /**
+   * @return array
+   */
+  public static function getPageSettings():array {
+    return [
+      'displayTypes' => self::getDisplayTypes(['name']),
+    ];
+  }
+
+  /**
+   * @param array $props
+   * @return array
+   */
+  public static function getDisplayTypes(array $props):array {
+    try {
+      return \Civi\Api4\SearchDisplay::getFields(FALSE)
+        ->setLoadOptions($props)
+        ->addWhere('name', '=', 'type')
+        ->execute()
+        ->first()['options'];
+    }
+    catch (\Exception $e) {
+      return [];
+    }
+  }
+
+}
diff --git a/ext/search/ang/crmSearchPage.ang.php b/ext/search/ang/crmSearchPage.ang.php
index 54442bdcd0..b806777464 100644
--- a/ext/search/ang/crmSearchPage.ang.php
+++ b/ext/search/ang/crmSearchPage.ang.php
@@ -11,4 +11,5 @@ return [
   ],
   'basePages' => ['civicrm/search'],
   'requires' => ['ngRoute', 'api4', 'crmUi', 'crmSearchDisplay'],
+  'settingsFactory' => ['\Civi\Search\Display', 'getPageSettings'],
 ];
diff --git a/ext/search/ang/crmSearchPage.module.js b/ext/search/ang/crmSearchPage.module.js
index 0c8862c869..8eafa0e169 100644
--- a/ext/search/ang/crmSearchPage.module.js
+++ b/ext/search/ang/crmSearchPage.module.js
@@ -4,11 +4,24 @@
   // Declare module
   angular.module('crmSearchPage', CRM.angRequires('crmSearchPage'))
 
-
     .config(function($routeProvider) {
+      // Load & render a SearchDisplay
       $routeProvider.when('/display/:savedSearchName/:displayName', {
         controller: 'crmSearchPageDisplay',
-        templateUrl: '~/crmSearchPage/display.html',
+        // Dynamic template generates the directive for each display type
+        template: function() {
+          var html =
+            '<h1 crm-page-title>{{:: $ctrl.display.label }}</h1>\n' +
+            '<div ng-switch="$ctrl.display.type" id="bootstrap-theme">\n';
+          _.each(CRM.crmSearchPage.displayTypes, function(type) {
+            html +=
+            '  <div ng-switch-when="' + type.name + '">\n' +
+            '    <crm-search-display-' + type.name + ' api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams" settings="$ctrl.display.settings"></crm-search-display-' + type.name + '>\n' +
+            '  </div>\n';
+          });
+          html += '</div>';
+          return html;
+        },
         resolve: {
           // Load saved search display
           display: function($route, crmApi4) {
@@ -25,6 +38,8 @@
     // Controller for displaying a search
     .controller('crmSearchPageDisplay', function($scope, $routeParams, $location, display) {
       this.display = display;
+      this.apiEntity = display['saved_search.api_entity'];
+      this.apiParams = display['saved_search.api_params'];
       $scope.$ctrl = this;
     });
 
diff --git a/ext/search/ang/crmSearchPage/display.html b/ext/search/ang/crmSearchPage/display.html
deleted file mode 100644
index 789963a44c..0000000000
--- a/ext/search/ang/crmSearchPage/display.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<h1 crm-page-title>{{:: $ctrl.display.label }}</h1>
-
-<div ng-switch="$ctrl.display.type" id="bootstrap-theme">
-  <div ng-switch-when="table">
-    <crm-search-display-table api-entity="$ctrl.display['saved_search.api_entity']" api-params="$ctrl.display['saved_search.api_params']" settings="$ctrl.display.settings"></crm-search-display-table>
-  </div>
-</div>
diff --git a/ext/search/ang/searchAdmin/crmSearchAdmin.html b/ext/search/ang/searchAdmin/crmSearchAdmin.html
index a4b184b6ec..fb5ada405b 100644
--- a/ext/search/ang/searchAdmin/crmSearchAdmin.html
+++ b/ext/search/ang/searchAdmin/crmSearchAdmin.html
@@ -41,7 +41,7 @@
         </div>
         <div ng-switch-default>
           <div ng-repeat="display in $ctrl.savedSearch.displays" ng-if="controls.tab === ('display_' + $index)">
-            <div ng-include="'~/searchAdmin/display.html'"></div>
+            <crm-search-admin-display display="display" saved-search="$ctrl.savedSearch"></crm-search-admin-display>
           </div>
         </div>
       </div>
diff --git a/ext/search/ang/searchAdmin/crmSearchAdminDisplay.component.js b/ext/search/ang/searchAdmin/crmSearchAdminDisplay.component.js
new file mode 100644
index 0000000000..cc771b468d
--- /dev/null
+++ b/ext/search/ang/searchAdmin/crmSearchAdminDisplay.component.js
@@ -0,0 +1,54 @@
+(function(angular, $, _) {
+  "use strict";
+
+  angular.module('searchAdmin').component('crmSearchAdminDisplay', {
+    bindings: {
+      savedSearch: '<',
+      display: '<'
+    },
+    template: function() {
+      // Dynamic template generates switch condition for each display type
+      var html =
+        '<div ng-include="\'~/searchAdmin/crmSearchAdminDisplay.html\'"></div>\n' +
+        '<div ng-switch="$ctrl.display.type">\n';
+      _.each(CRM.searchAdmin.displayTypes, function(type) {
+        html +=
+          '<div ng-switch-when="' + type.name + '">\n' +
+          '  <search-admin-display-' + type.name + ' api-entity="$ctrl.savedSearch.api_entity" api-params="$ctrl.savedSearch.api_params" display="$ctrl.display"></search-admin-display-' + type.name + '>\n' +
+          '  <hr>\n' +
+          '  <button type="button" class="btn btn-{{ !$ctrl.stale ? \'success\' : $ctrl.preview ? \'warning\' : \'primary\' }}" ng-click="$ctrl.previewDisplay()" ng-disabled="!$ctrl.stale">\n' +
+          '  <i class="crm-i ' + type.icon + '"></i>' +
+          '  {{ $ctrl.preview && $ctrl.stale ? ts("Refresh") : ts("Preview") }}\n' +
+          '  </button>\n' +
+          '  <hr>\n' +
+          '  <div ng-if="$ctrl.preview">\n' +
+          '    <crm-search-display-' + type.name + ' api-entity="$ctrl.savedSearch.api_entity" api-params="$ctrl.savedSearch.api_params" settings="$ctrl.display.settings"></crm-search-display-' + type.name + '>\n' +
+          '  </div>\n' +
+          '</div>\n';
+      });
+      html += '</div>';
+      return html;
+    },
+    controller: function($scope, $timeout) {
+      var ts = $scope.ts = CRM.ts(),
+        ctrl = this;
+
+      this.preview = this.stale = false;
+
+      this.previewDisplay = function() {
+        ctrl.preview = !ctrl.preview;
+        ctrl.stale = false;
+        if (!ctrl.preview) {
+          $timeout(function() {
+            ctrl.preview = true;
+          }, 100);
+        }
+      };
+
+      $scope.$watch('$ctrl.display.settings', function() {
+        ctrl.stale = true;
+      }, true);
+    }
+  });
+
+})(angular, CRM.$, CRM._);
diff --git a/ext/search/ang/searchAdmin/crmSearchAdminDisplay.html b/ext/search/ang/searchAdmin/crmSearchAdminDisplay.html
new file mode 100644
index 0000000000..812b0bb48a
--- /dev/null
+++ b/ext/search/ang/searchAdmin/crmSearchAdminDisplay.html
@@ -0,0 +1,7 @@
+<fieldset>
+  <div class="form-inline">
+    <label for="search_display_label">{{:: ts('Name:') }} <span class="crm-marker">*</span></label>
+    <input id="search_display_label" type="text" class="form-control" ng-model="$ctrl.display.label" required />
+    <label class="pull-right">{{:: $ctrl.displayTypes[$ctrl.display.type].label }}</label>
+  </div>
+</fieldset>
diff --git a/ext/search/ang/searchAdmin/display.html b/ext/search/ang/searchAdmin/display.html
deleted file mode 100644
index 7e954ed8e9..0000000000
--- a/ext/search/ang/searchAdmin/display.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<fieldset>
-  <div class="form-inline">
-    <label for="search_display_label">{{:: ts('Name:') }} <span class="crm-marker">*</span></label>
-    <input id="search_display_label" type="text" class="form-control" ng-model="display.label" required />
-    <label class="pull-right">{{:: $ctrl.displayTypes[display.type].label }}</label>
-  </div>
-</fieldset>
-<!-- Load template with the name of this display type, e.g. 'table.html' -->
-<div ng-if="display.type" ng-include="'~/searchAdmin/displays/' + display.type + '.html'"></div>
diff --git a/ext/search/ang/searchAdmin/displays/searchAdminDisplayTable.component.js b/ext/search/ang/searchAdmin/displays/searchAdminDisplayTable.component.js
index 5d3b6b97b0..b2206148ce 100644
--- a/ext/search/ang/searchAdmin/displays/searchAdminDisplayTable.component.js
+++ b/ext/search/ang/searchAdmin/displays/searchAdminDisplayTable.component.js
@@ -40,7 +40,6 @@
       };
 
       this.$onInit = function () {
-        ctrl.display.settings.limit = parseInt(ctrl.display.settings.limit || 0, 10);
         ctrl.getFieldLabel = ctrl.crmSearchAdmin.getFieldLabel;
         if (!ctrl.display.settings.columns) {
           ctrl.display.settings.columns = _.transform(ctrl.apiParams.select, function(columns, fieldExpr) {
diff --git a/ext/search/ang/searchAdmin/displays/table.html b/ext/search/ang/searchAdmin/displays/table.html
deleted file mode 100644
index fb5bf38723..0000000000
--- a/ext/search/ang/searchAdmin/displays/table.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<search-admin-display-table api-entity="$ctrl.savedSearch.api_entity" api-params="$ctrl.savedSearch.api_params" display="display"></search-admin-display-table>
-<hr>
-<!--<crm-search-display-table api-entity="$ctrl.apiEntity" api-params="$ctrl.apiParams" settings="display.settings"></crm-search-display-table>-->
diff --git a/ext/search/ang/searchAdmin/tabs.html b/ext/search/ang/searchAdmin/tabs.html
index 6f581bc714..1880310b7f 100644
--- a/ext/search/ang/searchAdmin/tabs.html
+++ b/ext/search/ang/searchAdmin/tabs.html
@@ -33,6 +33,7 @@
         {{:: ts('Smart Group') }}
       </a>
     </li>
+    <li class="dropdown-header">{{ ts('Display:') }}</li>
     <li ng-repeat="type in ::$ctrl.displayTypes">
       <a href ng-click="$ctrl.addDisplay(type.name)">
         <i class="crm-i {{:: type.icon }}"></i>
diff --git a/ext/search/search.php b/ext/search/search.php
index 88448c8c2d..ce37a88868 100644
--- a/ext/search/search.php
+++ b/ext/search/search.php
@@ -151,7 +151,7 @@ function search_civicrm_pre($op, $entity, $id, &$params) {
 function search_civicrm_alterAngular($angular) {
   $changeSet = \Civi\Angular\ChangeSet::create('searchSettings')
     ->alterHtml(';\\.aff\\.html$;', function($doc, $path) {
-      $displayTypes = array_column(\Civi\Search\Admin::getDisplayTypes(['name']), 'name');
+      $displayTypes = array_column(\Civi\Search\Display::getDisplayTypes(['name']), 'name');
 
       if ($displayTypes) {
         $componentNames = 'crm-search-display-' . implode(', crm-search-display-', $displayTypes);
-- 
2.25.1