From 970984516455b4eca662c156fe6a6a25a60a3166 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Thu, 3 Nov 2022 21:07:58 -0400
Subject: [PATCH] SearchKit - Add clone button for search displays

---
 .../ang/crmSearchAdmin/crmSearchAdmin.component.js       | 9 +++++++++
 ext/search_kit/ang/crmSearchAdmin/tabs.html              | 7 +++++--
 ext/search_kit/css/crmSearchAdmin.css                    | 5 ++++-
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.component.js b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.component.js
index 7b88ee1db9..15bebbe477 100644
--- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdmin.component.js
@@ -187,6 +187,15 @@
         }
       };
 
+      this.cloneDisplay = function(display) {
+        var newDisplay = angular.copy(display);
+        delete newDisplay.name;
+        delete newDisplay.id;
+        newDisplay.label += ts(' (copy)');
+        ctrl.savedSearch.displays.push(newDisplay);
+        $scope.selectTab('display_' + (ctrl.savedSearch.displays.length - 1));
+      };
+
       this.addGroup = function() {
         ctrl.savedSearch.groups.push({
           title: '',
diff --git a/ext/search_kit/ang/crmSearchAdmin/tabs.html b/ext/search_kit/ang/crmSearchAdmin/tabs.html
index 22841b6d04..b738e7d99d 100644
--- a/ext/search_kit/ang/crmSearchAdmin/tabs.html
+++ b/ext/search_kit/ang/crmSearchAdmin/tabs.html
@@ -12,7 +12,7 @@
     <i class="crm-i fa-users"></i>
     {{:: ts('Smart Group') }} {{ $ctrl.savedSearch.groups[0].title }}
   </a>
-  <button type="button" class="btn-xs btn-danger-outline crm-search-delete-display" ng-click="$ctrl.removeGroup()" title="{{ $ctrl.groupExists ? ts('Delete') : ts('Undelete') }}">
+  <button type="button" class="btn-xs btn-danger-outline crm-search-display-control" ng-click="$ctrl.removeGroup()" title="{{ $ctrl.groupExists ? ts('Delete') : ts('Undelete') }}">
     <i class="crm-i fa-{{ $ctrl.groupExists ? 'trash' : 'undo' }}"></i>
   </button>
 </li>
@@ -21,9 +21,12 @@
     <i class="crm-i {{ $ctrl.displayTypes[display.type].icon }}"></i>
     {{ display.label || ts('Untitled') }}
   </a>
-  <button type="button" class="btn-xs btn-danger-outline crm-search-delete-display" ng-click="$ctrl.removeDisplay($index)" title="{{ display.trashed ? ts('Undelete') : ts('Delete') }}">
+  <button type="button" class="btn btn-xs btn-danger-outline crm-search-display-control" ng-click="$ctrl.removeDisplay($index)" title="{{ display.trashed ? ts('Undelete') : ts('Delete') }}">
     <i class="crm-i fa-{{ display.trashed ? 'undo' : 'trash' }}"></i>
   </button>
+  <button type="button" class="btn btn-xs btn-primary-outline crm-search-display-control" ng-if="!display.trashed" ng-click="$ctrl.cloneDisplay(display)" title="{{:: ts('Clone display') }}">
+    <i class="crm-i fa-copy"></i>
+  </button>
 </li>
 <li role="presentation">
   <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
diff --git a/ext/search_kit/css/crmSearchAdmin.css b/ext/search_kit/css/crmSearchAdmin.css
index d5417be04f..0c51a57aa9 100644
--- a/ext/search_kit/css/crmSearchAdmin.css
+++ b/ext/search_kit/css/crmSearchAdmin.css
@@ -167,11 +167,14 @@
   height: 36px;
 }
 
-#bootstrap-theme .crm-search-delete-display {
+#bootstrap-theme .crm-search-display-control {
   position: absolute;
   right: 0;
   top: 0;
 }
+#bootstrap-theme .crm-search-display-control+.crm-search-display-control {
+  right: 20px;
+}
 
 #bootstrap-theme .crm-search-admin-edit-columns {
   height: 100%;
-- 
2.25.1