crmSearchDisplay - enable using default columns in table search displays

Author: ufundo

ext/search_kit/Civi/Api4/Action/SearchDisplay/Run.php

@@ -46,6 +46,12 @@ class Run extends AbstractRunAction {
   protected function processResult(SearchDisplayRunResult $result) {
     $entityName = $this->savedSearch['api_entity'];
     $apiParams =& $this->_apiParams;
+    if (!empty($this->display['settings']['useDefaultSearchColumns'])) {
+      $defaultDisplay = \Civi\Api4\SearchDisplay::getDefault(FALSE)
+        ->setSavedSearch($this->savedSearch)
+        ->execute()->single();
+      $this->display['settings']['columns'] = $defaultDisplay['settings']['columns'];
+    }
     $page = $index = NULL;
     $key = $this->return;
     // Pager can operate in "page" mode for traditional pager, or "scroll" mode for infinite scrolling

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

@@ -34,9 +34,30 @@
         // Table can be draggable if the main entity is a SortableEntity.
         ctrl.sortableEntity = _.includes(searchMeta.getEntity(ctrl.apiEntity).type, 'SortableEntity');
         ctrl.hierarchicalEntity = _.includes(searchMeta.getEntity(ctrl.apiEntity).type, 'HierarchicalEntity');
-        ctrl.parent.initColumns({label: true, sortable: true});
+        // if this is a brand new display, start with default columns
+        // instead of adding columns array
+        if (!ctrl.display.settings.columns) {
+          ctrl.display.settings.useDefaultSearchColumns = true;
+        }
+        // otherwise run the default columns initialiser
+        else {
+          ctrl.parent.initColumns({label: true, sortable: true});
+        }
       };
 
+      this.getSetCustomColumns = (value) => {
+        if (value !== undefined) {
+          this.display.settings.useDefaultSearchColumns = !value;
+          // if switching to custom columns and no columns already exist then
+          // initialise with all the columns to start
+          if (value && !(this.display.settings.columns && this.display.settings.columns.length)) {
+            this.parent.initColumns({label: true, sortable: true});
+          }
+          return value;
+        }
+        return !this.display.settings.useDefaultSearchColumns;
+      }
+
       this.toggleEditableRowMode = function(name, value) {
         ctrl.display.settings.editableRow = ctrl.display.settings.editableRow || {};
         if (arguments.length < 2) {

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

@@ -121,10 +121,19 @@
 
 <fieldset class="crm-search-admin-edit-columns-wrapper">
   <legend>
-    {{:: ts('Columns') }}
+    {{:: ts('Custom Columns') }}
   </legend>
-  <div ng-include="'~/crmSearchAdmin/displays/common/addColMenu.html'"></div>
-  <fieldset class="crm-search-admin-edit-columns" ng-model="$ctrl.display.settings.columns" ui-sortable="$ctrl.parent.sortableOptions">
+  <div class="crm-form-toggle-container">
+    <input type="checkbox" class="crm-form-toggle" ng-model="$ctrl.getSetCustomColumns" ng-model-options="{getterSetter: true}" />
+    <span class="crm-form-toggle-text crm-form-toggle-text-on">
+      {{:: ts('Use custom columns') }}
+    </span>
+    <span class="crm-form-toggle-text crm-form-toggle-text-off">
+      {{:: ts('Use default columns from Search') }}
+    </span>
+  </div>
+  <div ng-if="!$ctrl.display.settings.useDefaultSearchColumns" ng-include="'~/crmSearchAdmin/displays/common/addColMenu.html'"></div>
+  <fieldset ng-if="!$ctrl.display.settings.useDefaultSearchColumns" 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">
       <i class="crm-i fa-arrows crm-search-move-icon" role="img" aria-hidden="true"></i>
       <button type="button" class="btn btn-xs pull-right" ng-click="$ctrl.parent.removeCol($index)" title="{{:: ts('Remove') }}">

ext/search_kit/ang/crmSearchDisplay/traits/searchDisplayBaseTrait.service.js

@@ -30,14 +30,37 @@
         for (let p=0; p < placeholderCount; ++p) {
           this.placeholders.push({});
         }
-        this.columns = this.settings.columns.map((column) => {
+
+        if (this.settings.useDefaultSearchColumns) {
+          // start with no columns in case we run before
+          // we've fetched the right ones
+          this.columns = [];
+          // TODO: default permission is access CiviCRM
+          // need to tweak permissions for frontend forms
+          crmApi4('SearchDisplay', 'getDefault', {
+            savedSearch: this.search
+          })
+          .then((result) => this.columns = result[0].settings.columns)
+          .then(() => this.columns.forEach((col) => {
+            // Used by crmSearchDisplayTable.toggleColumns
+            col.enabled = true;
+            col.fetched = true;
+          }))
+          .catch((error) => CRM.alert(ts('Error loading search columns')));
+        }
+        else {
           // Break reference so original settings are preserved
-          const col = _.cloneDeep(column);
-          // Used by crmSearchDisplayTable.toggleColumns
-          col.enabled = true;
-          col.fetched = true;
-          return col;
-        });
+          this.columns = _.cloneDeep(this.settings.columns);
+
+          // Add keys used by crmSearchDisplayTable.toggleColumns
+          this.columns.forEach((col) => {
+            col.enabled = true;
+            col.fetched = true;
+          });
+          console.log(this.columns);
+          console.log(this.settings.columns);
+        }
+
         _.each(ctrl.onInitialize, function(callback) {
           callback.call(ctrl, $scope, $element);
         });
@@ -291,13 +314,13 @@
       },
 
       getFieldClass: function(colIndex, colData) {
-        return (colData.cssClass || '') + ' crm-search-col-type-' + this.settings.columns[colIndex].type + (this.settings.columns[colIndex].break ? '' : ' crm-inline-block');
+        return (colData.cssClass || '') + ' crm-search-col-type-' + this.columns[colIndex].type + (this.columns[colIndex].break ? '' : ' crm-inline-block');
       },
 
       getFieldTemplate: function(colIndex, colData) {
-        let colType = this.settings.columns[colIndex].type;
+        let colType = this.columns[colIndex].type;
         if (colType === 'include') {
-          return this.settings.columns[colIndex].path;
+          return this.columns[colIndex].path;
         }
         if (colType === 'field') {
           if (colData.edit) {