Merge pull request #21194 from kurund/grid-display-layout

add grid layout support for searchkit

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);
+}

ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.component.js

+(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._);

ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.html

+<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>

ext/search_kit/ang/crmSearchDisplayGrid.ang.php

+<?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',
+  ],
+];

ext/search_kit/ang/crmSearchDisplayGrid.module.js

+(function(angular, $, _) {
+  "use strict";
+
+  // Declare module
+  angular.module('crmSearchDisplayGrid', CRM.angRequires('crmSearchDisplayGrid'));
+
+})(angular, CRM.$, CRM._);

ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGrid.component.js

+(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._);

ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGrid.html

+<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>

ext/search_kit/ang/crmSearchDisplayGrid/crmSearchDisplayGridItems.html

+<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>

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',
+    ],
+  ],
 ];