From a97e624744a045129ccbc8496f1b43f054039189 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Fri, 14 Jan 2022 11:52:56 -0500
Subject: [PATCH] [REF] SearchKit - Simplify import/export popup code

The new crmDialogPopup directive makes buttons significantly easier to add,
and its auto-refresh action removes the need for the hack in crmSearchAdmin
which was triggering a refresh by adjusting the filters.
---
 ext/search_kit/ang/crmSearchAdmin.module.js      | 16 ----------------
 .../ang/crmSearchAdmin/crmSearchAdminImport.html |  2 +-
 .../crmSearchAdmin/searchListing/buttons.html    |  2 +-
 .../crmSearchAdminSearchListing.component.js     | 13 ++-----------
 .../crmSearchAdmin/searchListing/searchList.html |  6 +++---
 5 files changed, 7 insertions(+), 32 deletions(-)

diff --git a/ext/search_kit/ang/crmSearchAdmin.module.js b/ext/search_kit/ang/crmSearchAdmin.module.js
index 7edab31d64..5b47b82747 100644
--- a/ext/search_kit/ang/crmSearchAdmin.module.js
+++ b/ext/search_kit/ang/crmSearchAdmin.module.js
@@ -72,22 +72,6 @@
       if (!this.tab) {
         this.tab = this.tabs[0].name;
       }
-
-      this.openImportDialog = function() {
-        var options = CRM.utils.adjustDialogDefaults({
-          autoOpen: false,
-          title: ts('Import Saved Search')
-        });
-        dialogService.open('crmSearchAdminImport', '~/crmSearchAdmin/searchListing/import.html', {}, options)
-          .then(function() {
-            // Refresh the custom tab by resetting the filters
-            ctrl.tabs[0].filters = {};
-            // Timeout ensures the change gets noticed by the display's $watch
-            $timeout(function() {
-              ctrl.tabs[0].filters = {has_base: false};
-            }, 300);
-          }, _.noop);
-      };
     })
 
     // Controller for creating a new search
diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminImport.html b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminImport.html
index 64872d10d7..153b5dc2cb 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminImport.html
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminImport.html
@@ -2,7 +2,7 @@
   <div class="alert alert-info">
     <p>
       <i class="crm-i fa-info-circle"></i>
-      {{:: ts('A Search configuration copied from the "Export" action can be pasted here.') }}
+      {{:: ts('Search configuration copied from the "Export" action can be pasted here.') }}
     </p>
     <p>
       {{:: ts('Note: a Saved Search with the same name must not already exist.') }}
diff --git a/ext/search_kit/ang/crmSearchAdmin/searchListing/buttons.html b/ext/search_kit/ang/crmSearchAdmin/searchListing/buttons.html
index af8fde59a1..f77738780c 100644
--- a/ext/search_kit/ang/crmSearchAdmin/searchListing/buttons.html
+++ b/ext/search_kit/ang/crmSearchAdmin/searchListing/buttons.html
@@ -20,7 +20,7 @@
       </a>
     </li>
     <li title="{{:: ts('Export this saved search to a file') }}">
-      <a href ng-click="$ctrl.export(row)">
+      <a href crm-dialog-popup="crmSearchAdminExport" popup-data="row" popup-tpl="~/crmSearchAdmin/searchListing/export.html" title="{{:: ts('Export %1', {1: row.data.label}) }}">
         <i class="crm-i fa-download"></i>
         {{:: ts('Export...') }}
       </a>
diff --git a/ext/search_kit/ang/crmSearchAdmin/searchListing/crmSearchAdminSearchListing.component.js b/ext/search_kit/ang/crmSearchAdmin/searchListing/crmSearchAdminSearchListing.component.js
index 519557734c..80fbb10432 100644
--- a/ext/search_kit/ang/crmSearchAdmin/searchListing/crmSearchAdminSearchListing.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/searchListing/crmSearchAdminSearchListing.component.js
@@ -8,7 +8,7 @@
       tabCount: '='
     },
     templateUrl: '~/crmSearchDisplayTable/crmSearchDisplayTable.html',
-    controller: function($scope, $q, crmApi4, crmStatus, searchMeta, searchDisplayBaseTrait, searchDisplaySortableTrait, dialogService) {
+    controller: function($scope, $element, $q, crmApi4, crmStatus, searchMeta, searchDisplayBaseTrait, searchDisplaySortableTrait) {
       var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'),
         // Mix in traits to this controller
         ctrl = angular.extend(this, searchDisplayBaseTrait, searchDisplaySortableTrait),
@@ -61,7 +61,7 @@
 
       this.$onInit = function() {
         buildDisplaySettings();
-        this.initializeDisplay($scope, $());
+        this.initializeDisplay($scope, $element);
         // Keep tab counts up-to-date - put rowCount in current tab if there are no other filters
         $scope.$watch('$ctrl.rowCount', function(val) {
           if (typeof val === 'number' && angular.equals(['has_base'], _.keys(ctrl.filters))) {
@@ -160,15 +160,6 @@
         );
       };
 
-      this.export = function(row) {
-        var options = CRM.utils.adjustDialogDefaults({
-          autoOpen: false,
-          height: 600,
-          title: ts('Export %1', {1: row.data.label})
-        });
-        dialogService.open('crmSearchAdminExport', '~/crmSearchAdmin/searchListing/export.html', row, options);
-      };
-
       function buildDisplaySettings() {
         ctrl.display = {
           type: 'table',
diff --git a/ext/search_kit/ang/crmSearchAdmin/searchListing/searchList.html b/ext/search_kit/ang/crmSearchAdmin/searchListing/searchList.html
index 9eaa2bfda1..770e7b7236 100644
--- a/ext/search_kit/ang/crmSearchAdmin/searchListing/searchList.html
+++ b/ext/search_kit/ang/crmSearchAdmin/searchListing/searchList.html
@@ -1,4 +1,4 @@
-<div id="bootstrap-theme" class="crm-search">
+<form id="bootstrap-theme" class="crm-search">
   <h1 crm-page-title>{{:: ts('Saved Searches') }}</h1>
 
   <!-- Tabs based on the has_base filter -->
@@ -28,11 +28,11 @@
       <span ng-if="$ctrl.getTags().results.length">
         <input class="form-control" ng-model="tab.filters.tags" ng-list crm-ui-select="{multiple: true, data: $ctrl.getTags, placeholder: ts('Filter by tags...')}">
       </span>
-      <a class="btn btn-secondary btn-sm pull-right" ng-if="tab.name === 'custom'" href ng-click="$ctrl.openImportDialog()">
+      <a class="btn btn-secondary btn-sm pull-right" ng-if="tab.name === 'custom'" href crm-dialog-popup="crmSearchAdminImport" popup-tpl="~/crmSearchAdmin/searchListing/import.html">
         <i class="crm-i fa-upload"></i>
         {{:: ts('Import') }}
       </a>
     </div>
     <crm-search-admin-search-listing filters="tab.filters" tab-count="tab.rowCount"></crm-search-admin-search-listing>
   </div>
-</div>
+</form>
-- 
2.25.1