From 40cf25ca4f086724f9427c7541fd41853a8c5a9c Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Tue, 7 Sep 2021 19:31:29 -0400
Subject: [PATCH] SearchKit - Support bootstrap styles in search display tables

---
 .../searchAdminDisplayTable.component.js      | 21 +++++++++++++++++++
 .../displays/searchAdminDisplayTable.html     |  9 ++++++++
 .../crmSearchDisplayTable.html                |  2 +-
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.component.js b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.component.js
index 23b7c4daeb..7d546a38ef 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.component.js
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.component.js
@@ -15,13 +15,34 @@
       var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'),
         ctrl = this;
 
+      this.tableClasses = [
+        {name: 'table', label: ts('Row Borders')},
+        {name: 'table-bordered', label: ts('Column Borders')},
+        {name: 'table-striped', label: ts('Even/Odd Stripes')}
+      ];
+
+      // Check if array conatains item
+      this.includes = _.includes;
+
+      // Add or remove an item from an array
+      this.toggle = function(collection, item) {
+        if (_.includes(collection, item)) {
+          _.pull(collection, item);
+        } else {
+          collection.push(item);
+        }
+      };
+
       this.$onInit = function () {
         if (!ctrl.display.settings) {
           ctrl.display.settings = {
             limit: CRM.crmSearchAdmin.defaultPagerSize,
+            classes: ['table'],
             pager: {}
           };
         }
+        // Displays created prior to 5.43 may not have this property
+        ctrl.display.settings.classes = ctrl.display.settings.classes || [];
         ctrl.parent.initColumns({label: true});
       };
 
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
index c2961ecf25..c467764726 100644
--- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
@@ -9,6 +9,15 @@
     </div>
     <div class="form-group" ng-include="'~/crmSearchAdmin/displays/common/searchButtonConfig.html'"></div>
   </div>
+  <div class="form-inline">
+    <label>{{:: ts('Table Style') }}</label>
+    <div class="checkbox-inline form-control" ng-repeat="style in $ctrl.tableClasses">
+      <label>
+        <input type="checkbox" ng-checked="$ctrl.includes($ctrl.display.settings.classes, style.name)" ng-click="$ctrl.toggle($ctrl.display.settings.classes, style.name)">
+        <span>{{:: style.label }}</span>
+      </label>
+    </div>
+  </div>
   <search-admin-pager-config display="$ctrl.display"></search-admin-pager-config>
 </fieldset>
 <fieldset class="crm-search-admin-edit-columns-wrapper">
diff --git a/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html b/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html
index 86c5b1ca07..f3bd7b697b 100644
--- a/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html
+++ b/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html
@@ -3,7 +3,7 @@
     <div class="btn-group" ng-include="'~/crmSearchDisplay/SearchButton.html'" ng-if="$ctrl.settings.button"></div>
     <crm-search-tasks ng-if="$ctrl.settings.actions" entity="$ctrl.apiEntity" ids="$ctrl.selectedRows" search="$ctrl.search" display="$ctrl.display" display-controller="$ctrl" refresh="$ctrl.refreshAfterTask()"></crm-search-tasks>
   </div>
-  <table>
+  <table class="{{:: $ctrl.settings.classes.join(' ') }}">
     <thead>
       <tr>
         <th class="crm-search-result-select" ng-if=":: $ctrl.settings.actions">
-- 
2.25.1