From 2ac563e4cb780542036c151d35152efa4c912960 Mon Sep 17 00:00:00 2001
From: Kurund Jalmi <kurundjalmi@thirdsectordesign.org>
Date: Fri, 20 Aug 2021 15:04:15 +0100
Subject: [PATCH] add grid layout support for searchkit

---
 css/civicrm.css                               | 24 ++++++++++
 .../searchAdminDisplayGrid.component.js       | 32 +++++++++++++
 .../displays/searchAdminDisplayGrid.html      | 46 +++++++++++++++++++
 .../ang/crmSearchDisplayGrid.ang.php          | 17 +++++++
 .../ang/crmSearchDisplayGrid.module.js        |  7 +++
 .../crmSearchDisplayGrid.component.js         | 29 ++++++++++++
 .../crmSearchDisplayGrid.html                 |  8 ++++
 .../crmSearchDisplayGridItems.html            |  8 ++++
 .../managed/SearchDisplayType.mgd.php         | 11 +++++
 9 files changed, 182 insertions(+)
 create mode 100644 ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.component.js
 create mode 100644 ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.html
 create mode 100644 ext/search_kit/ang/crmSearchDisplayGrid.ang.php
 create mode 100644 ext/search_kit/ang/crmSearchDisplayGrid.module.js
 create mode 100644 ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGrid.component.js
 create mode 100644 ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGrid.html
 create mode 100644 ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGridItems.html

diff --git a/css/civicrm.css b/css/civicrm.css
index 5aa2cf87fb..ff7f073938 100644
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -3899,3 +3899,27 @@ span.crm-status-icon {
   border-radius: 3px;
   border: 1px solid grey;
 }
+
+/* search kit grid layout styling */
+.crm-search-display-grid-container {
+  display: grid;
+  grid-gap: 1em;
+  align-items: center;
+  justify-items: center;
+}
+
+.crm-search-display-grid-layout-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.crm-search-display-grid-layout-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.crm-search-display-grid-layout-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.crm-search-display-grid-layout-5 {
+  grid-template-columns: repeat(5, 1fr);
+}
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.component.js b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.component.js
new file mode 100644
index 0000000000..3a55a7aab1
--- /dev/null
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.component.js
@@ -0,0 +1,32 @@
+(function(angular, $, _) {
+  "use strict";
+
+  angular.module('crmSearchAdmin').component('searchAdminDisplayGrid', {
+    bindings: {
+      display: '<',
+      apiEntity: '<',
+      apiParams: '<'
+    },
+    require: {
+      parent: '^crmSearchAdminDisplay'
+    },
+    templateUrl: '~/crmSearchAdmin/displays/searchAdminDisplayGrid.html',
+    controller: function($scope) {
+      var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'),
+        ctrl = this;
+
+      this.$onInit = function () {
+        if (!ctrl.display.settings) {
+          ctrl.display.settings = {
+            colno: '3',
+            limit: CRM.crmSearchAdmin.defaultPagerSize,
+            pager: {}
+          };
+        }
+        ctrl.parent.initColumns({});
+      };
+
+    }
+  });
+
+})(angular, CRM.$, CRM._);
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.html
new file mode 100644
index 0000000000..2da44b5580
--- /dev/null
+++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.html
@@ -0,0 +1,46 @@
+<fieldset ng-include="'~/crmSearchAdmin/crmSearchAdminDisplaySort.html'"></fieldset>
+<fieldset>
+  <div class="form-inline">
+    <label for="crm-search-admin-display-colno">{{:: ts('Layout') }}</label>
+    <select id="crm-search-admin-display-colno" class="form-control" ng-model="$ctrl.display.settings.colno">
+      <option value="2">{{:: ts('2 x 2') }}</option>
+      <option value="3">{{:: ts('3 x 3') }}</option>
+      <option value="4">{{:: ts('4 x 4') }}</option>
+      <option value="5">{{:: ts('5 x 5') }}</option>
+    </select>
+    <div class="form-group" ng-include="'~/crmSearchAdmin/displays/common/searchButtonConfig.html'"></div>
+  </div>
+  <search-admin-pager-config display="$ctrl.display"></search-admin-pager-config>
+</fieldset>
+<fieldset class="crm-search-admin-edit-columns-wrapper">
+  <legend>
+    {{:: ts('Fields') }}
+    <div ng-include="'~/crmSearchAdmin/displays/common/addColMenu.html'" class="btn-group btn-group-xs"></div>
+  </legend>
+  <div class="crm-search-admin-edit-columns" ng-model="$ctrl.display.settings.columns" ui-sortable="$ctrl.parent.sortableOptions">
+    <fieldset ng-repeat="col in $ctrl.display.settings.columns" class="crm-draggable">
+      <legend><i class="crm-i fa-arrows crm-search-move-icon"></i> {{ $ctrl.parent.getColLabel(col) }}</legend>
+      <div class="form-inline" title="{{ ts('Should this item display on its own line or inline with other items?') }}">
+        <label><input type="checkbox" ng-model="col.break"> {{:: ts('New Line') }}</label>
+        <button type="button" class="btn-xs pull-right" ng-click="$ctrl.parent.removeCol($index)" title="{{:: ts('Remove') }}">
+          <i class="crm-i fa-ban"></i>
+        </button>
+      </div>
+      <div class="form-inline crm-search-admin-flex-row">
+        <label>
+          <input type="checkbox" ng-checked="col.label" ng-click="col.label = col.label ? null : $ctrl.parent.getColLabel(col)" >
+          {{:: ts('Label') }}
+        </label>
+        <input ng-if="col.label" class="form-control crm-flex-1" type="text" ng-model="col.label" ng-model-options="{updateOn: 'blur'}">
+        <crm-search-admin-token-select ng-if="col.label" model="col" field="label" suffix=":label"></crm-search-admin-token-select>
+      </div>
+      <div class="form-inline" ng-if="col.label">
+        <label style="visibility: hidden"><input type="checkbox" disabled></label><!--To indent by 1 checkbox-width-->
+        <div class="checkbox">
+          <label><input type="checkbox" ng-model="col.forceLabel"> {{:: ts('Show label even when field is blank') }}</label>
+        </div>
+      </div>
+      <div ng-include="'~/crmSearchAdmin/displays/colType/' + col.type + '.html'"></div>
+    </fieldset>
+  </div>
+</fieldset>
diff --git a/ext/search_kit/ang/crmSearchDisplayGrid.ang.php b/ext/search_kit/ang/crmSearchDisplayGrid.ang.php
new file mode 100644
index 0000000000..727e6d5f4f
--- /dev/null
+++ b/ext/search_kit/ang/crmSearchDisplayGrid.ang.php
@@ -0,0 +1,17 @@
+<?php
+// Module for rendering List Search Displays.
+return [
+  'js' => [
+    'ang/crmSearchDisplayGrid.module.js',
+    'ang/crmSearchDisplayGrid/*.js',
+  ],
+  'partials' => [
+    'ang/crmSearchDisplayGrid',
+  ],
+  'basePages' => ['civicrm/search', 'civicrm/admin/search'],
+  'requires' => ['crmSearchDisplay', 'crmUi', 'ui.bootstrap'],
+  'bundles' => ['bootstrap3'],
+  'exports' => [
+    'crm-search-display-grid' => 'E',
+  ],
+];
diff --git a/ext/search_kit/ang/crmSearchDisplayGrid.module.js b/ext/search_kit/ang/crmSearchDisplayGrid.module.js
new file mode 100644
index 0000000000..ae9b5aae95
--- /dev/null
+++ b/ext/search_kit/ang/crmSearchDisplayGrid.module.js
@@ -0,0 +1,7 @@
+(function(angular, $, _) {
+  "use strict";
+
+  // Declare module
+  angular.module('crmSearchDisplayGrid', CRM.angRequires('crmSearchDisplayGrid'));
+
+})(angular, CRM.$, CRM._);
diff --git a/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGrid.component.js b/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGrid.component.js
new file mode 100644
index 0000000000..d66e594382
--- /dev/null
+++ b/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGrid.component.js
@@ -0,0 +1,29 @@
+(function(angular, $, _) {
+  "use strict";
+
+  angular.module('crmSearchDisplayGrid').component('crmSearchDisplayGrid', {
+    bindings: {
+      apiEntity: '@',
+      search: '<',
+      display: '<',
+      apiParams: '<',
+      settings: '<',
+      filters: '<'
+    },
+    require: {
+      afFieldset: '?^^afFieldset'
+    },
+    templateUrl: '~/crmSearchDisplayGrid/crmSearchDisplayGrid.html',
+    controller: function($scope, $element, searchDisplayBaseTrait) {
+      var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'),
+        // Mix in properties of searchDisplayBaseTrait
+        ctrl = angular.extend(this, searchDisplayBaseTrait);
+
+      this.$onInit = function() {
+        this.initializeDisplay($scope, $element);
+      };
+
+    }
+  });
+
+})(angular, CRM.$, CRM._);
diff --git a/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGrid.html b/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGrid.html
new file mode 100644
index 0000000000..5d8c3b7196
--- /dev/null
+++ b/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGrid.html
@@ -0,0 +1,8 @@
+<div class="crm-search-display crm-search-display-grid">
+  <div ng-include="'~/crmSearchDisplay/SearchButton.html'" ng-if="$ctrl.settings.button"></div>
+  <div
+    class="crm-search-display-grid-container crm-search-display-grid-layout-{{$ctrl.settings.colno}}"
+    ng-include="'~/crmSearchDisplayGrid/crmSearchDisplayGridItems.html'"
+  ></div>
+  <div ng-include="'~/crmSearchDisplay/Pager.html'"></div>
+</div>
diff --git a/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGridItems.html b/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGridItems.html
new file mode 100644
index 0000000000..bb908bfbb6
--- /dev/null
+++ b/ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGridItems.html
@@ -0,0 +1,8 @@
+<div ng-repeat="(rowIndex, row) in $ctrl.results">
+  <div ng-repeat="col in $ctrl.settings.columns" title="{{:: $ctrl.replaceTokens(col.title, row) }}" class="{{:: col.break ? '' : 'crm-inline-block' }}">
+    <label ng-if=":: col.label && (col.type !== 'field' || col.forceLabel || row[col.key])">
+      {{:: $ctrl.replaceTokens(col.label, row) }}
+    </label>
+    <span ng-include="'~/crmSearchDisplay/colType/' + col.type + '.html'"></span>
+  </div>
+</div>
diff --git a/ext/search_kit/managed/SearchDisplayType.mgd.php b/ext/search_kit/managed/SearchDisplayType.mgd.php
index ed54c8fe83..694a37e753 100644
--- a/ext/search_kit/managed/SearchDisplayType.mgd.php
+++ b/ext/search_kit/managed/SearchDisplayType.mgd.php
@@ -32,4 +32,15 @@ return [
       'icon' => 'fa-list',
     ],
   ],
+  [
+    'name' => 'SearchDisplayType:grid',
+    'entity' => 'OptionValue',
+    'params' => [
+      'option_group_id' => 'search_display_type',
+      'value' => 'grid',
+      'name' => 'crm-search-display-grid',
+      'label' => 'Grid',
+      'icon' => 'fa-th',
+    ],
+  ],
 ];
-- 
2.25.1