From 10cd9d3706bd5dd76869845ab87169e5b7c7f598 Mon Sep 17 00:00:00 2001 From: Coleman Watts Date: Fri, 6 Aug 2021 12:26:09 -0400 Subject: [PATCH] SearchKit - Improve searchDisplay pager with additional options Adds 'show_count' and 'expose_limit' as options to searchDisplay pagers --- .../Civi/Api4/Action/SearchDisplay/Run.php | 9 +++- ext/search_kit/ang/crmSearchAdmin.ang.php | 1 + .../crmSearchAdminDisplay.component.js | 11 ---- .../searchAdminPagerConfig.component.js | 48 ++++++++++++++++++ .../common/searchAdminPagerConfig.html | 33 ++++++++++++ .../searchAdminDisplayList.component.js | 2 +- .../displays/searchAdminDisplayList.html | 16 +----- .../searchAdminDisplayTable.component.js | 2 +- .../displays/searchAdminDisplayTable.html | 14 +----- .../ang/crmSearchDisplay/Pager.html | 50 +++++++++++++------ .../traits/searchDisplayBaseTrait.service.js | 12 ++++- .../traits/searchDisplayTasksTrait.service.js | 2 +- 12 files changed, 141 insertions(+), 59 deletions(-) create mode 100644 ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminPagerConfig.component.js create mode 100644 ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminPagerConfig.html diff --git a/ext/search_kit/Civi/Api4/Action/SearchDisplay/Run.php b/ext/search_kit/Civi/Api4/Action/SearchDisplay/Run.php index a4ef5d8f5a..d5a93d5aac 100644 --- a/ext/search_kit/Civi/Api4/Action/SearchDisplay/Run.php +++ b/ext/search_kit/Civi/Api4/Action/SearchDisplay/Run.php @@ -34,6 +34,12 @@ class Run extends \Civi\Api4\Generic\AbstractAction { */ protected $sort = []; + /** + * Number of results to return + * @var int + */ + protected $limit; + /** * Should this api call return a page of results or the row_count or the ids * E.g. "page:1" or "row_count" or "id" @@ -123,7 +129,8 @@ class Run extends \Civi\Api4\Generic\AbstractAction { if (!empty($settings['pager']) && preg_match('/^page:\d+$/', $this->return)) { $page = explode(':', $this->return)[1]; } - $apiParams['limit'] = $settings['limit'] ?? NULL; + $limit = !empty($settings['pager']['expose_limit']) && $this->limit ? $this->limit : NULL; + $apiParams['limit'] = $limit ?? $settings['limit'] ?? NULL; $apiParams['offset'] = $page ? $apiParams['limit'] * ($page - 1) : 0; $apiParams['orderBy'] = $this->getOrderByFromSort(); $this->augmentSelectClause($apiParams); diff --git a/ext/search_kit/ang/crmSearchAdmin.ang.php b/ext/search_kit/ang/crmSearchAdmin.ang.php index 31ff79962f..f6c673415c 100644 --- a/ext/search_kit/ang/crmSearchAdmin.ang.php +++ b/ext/search_kit/ang/crmSearchAdmin.ang.php @@ -5,6 +5,7 @@ return [ 'ang/crmSearchAdmin.module.js', 'ang/crmSearchAdmin/*.js', 'ang/crmSearchAdmin/*/*.js', + 'ang/crmSearchAdmin/*/*/*.js', ], 'css' => [ 'css/crmSearchAdmin.css', diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js index f151226aa3..f895d2d538 100644 --- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js +++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js @@ -70,17 +70,6 @@ }, }; - this.toggleLimit = function() { - if (ctrl.display.settings.limit) { - ctrl.display.settings.limit = 0; - if (ctrl.display.settings.pager) { - ctrl.display.settings.pager = false; - } - } else { - ctrl.display.settings.limit = CRM.crmSearchAdmin.defaultPagerSize; - } - }; - // Drag-n-drop settings for reordering columns this.sortableOptions = { connectWith: '.crm-search-admin-edit-columns', diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminPagerConfig.component.js b/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminPagerConfig.component.js new file mode 100644 index 0000000000..d4fd289d2e --- /dev/null +++ b/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminPagerConfig.component.js @@ -0,0 +1,48 @@ +(function(angular, $, _) { + "use strict"; + + angular.module('crmSearchAdmin').component('searchAdminPagerConfig', { + bindings: { + display: '<', + }, + templateUrl: '~/crmSearchAdmin/displays/common/searchAdminPagerConfig.html', + controller: function($scope) { + var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'), + ctrl = this; + + function getDefaultSettings() { + return _.cloneDeep({ + show_count: false, + expose_limit: false + }); + } + + this.$onInit = function() { + // Legacy support + if (this.display.settings.pager === true) { + this.display.settings.pager = getDefaultSettings(); + } + if (this.display.settings.pager && !this.display.settings.limit) { + this.toggleLimit(); + } + }; + + this.togglePager = function() { + this.display.settings.pager = this.display.settings.pager ? false : getDefaultSettings(); + if (this.display.settings.pager && !this.display.settings.limit) { + this.toggleLimit(); + } + }; + + this.toggleLimit = function() { + if (ctrl.display.settings.limit) { + ctrl.display.settings.limit = 0; + } else { + ctrl.display.settings.limit = CRM.crmSearchAdmin.defaultPagerSize; + } + }; + + } + }); + +})(angular, CRM.$, CRM._); diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminPagerConfig.html b/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminPagerConfig.html new file mode 100644 index 0000000000..184f6ff2cb --- /dev/null +++ b/ext/search_kit/ang/crmSearchAdmin/displays/common/searchAdminPagerConfig.html @@ -0,0 +1,33 @@ +
+
+ +
+
+ + +
+
+ + +
+ +
+
+ +
+
+
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.component.js b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.component.js index 081b45393f..dc4ceda0d8 100644 --- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.component.js +++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.component.js @@ -35,7 +35,7 @@ ctrl.display.settings = { style: 'ul', limit: CRM.crmSearchAdmin.defaultPagerSize, - pager: true + pager: {} }; } ctrl.parent.initColumns({key: true, dataType: true, type: 'field'}); diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html index 51aeaccf72..3cbb992d93 100644 --- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html +++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html @@ -13,21 +13,7 @@ -
-
- - -
-
- -
-
+
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.component.js b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.component.js index 937b85d174..6c95159180 100644 --- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.component.js +++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.component.js @@ -19,7 +19,7 @@ if (!ctrl.display.settings) { ctrl.display.settings = { limit: CRM.crmSearchAdmin.defaultPagerSize, - pager: true + pager: {} }; } ctrl.parent.initColumns({key: true, label: true, dataType: true, type: 'field'}); diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html index f068b4bcda..1fe4a157c7 100644 --- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html +++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html @@ -1,19 +1,6 @@
-
- - -
-
- -
+
diff --git a/ext/search_kit/ang/crmSearchDisplay/Pager.html b/ext/search_kit/ang/crmSearchDisplay/Pager.html index d760bec287..d33473c687 100644 --- a/ext/search_kit/ang/crmSearchDisplay/Pager.html +++ b/ext/search_kit/ang/crmSearchDisplay/Pager.html @@ -1,16 +1,36 @@ -
-
    +
    +
    +
    + + +
    +
    +
    +
      +
      +
      +
      + + +
      +
      diff --git a/ext/search_kit/ang/crmSearchDisplay/traits/searchDisplayBaseTrait.service.js b/ext/search_kit/ang/crmSearchDisplay/traits/searchDisplayBaseTrait.service.js index d7b2da89c1..733105f74f 100644 --- a/ext/search_kit/ang/crmSearchDisplay/traits/searchDisplayBaseTrait.service.js +++ b/ext/search_kit/ang/crmSearchDisplay/traits/searchDisplayBaseTrait.service.js @@ -83,6 +83,7 @@ // Called by the controller's $onInit function initializeDisplay: function($scope, $element) { var ctrl = this; + this.limit = this.settings.limit; this.sort = this.settings.sort ? _.cloneDeep(this.settings.sort) : []; this.getResults = _.debounce(function() { @@ -109,9 +110,17 @@ ctrl.getResults(); } + function onChangePageSize() { + ctrl.page = 1; + ctrl.getResults(); + } + if (this.afFieldset) { $scope.$watch(this.afFieldset.getFieldData, onChangeFilters, true); } + if (this.settings.pager && this.settings.pager.expose_limit) { + $scope.$watch('$ctrl.limit', onChangePageSize); + } $scope.$watch('$ctrl.filters', onChangeFilters, true); }, @@ -122,6 +131,7 @@ savedSearch: this.search, display: this.display, sort: this.sort, + limit: this.limit, filters: _.assign({}, (this.afFieldset ? this.afFieldset.getFieldData() : {}), this.filters), afform: this.afFieldset ? this.afFieldset.getFormName() : null }; @@ -134,7 +144,7 @@ ctrl.results = results; ctrl.editing = false; if (!ctrl.rowCount) { - if (!ctrl.settings.limit || results.length < ctrl.settings.limit) { + if (!ctrl.limit || results.length < ctrl.limit) { ctrl.rowCount = results.length; } else if (ctrl.settings.pager) { var params = ctrl.getApiParams('row_count'); diff --git a/ext/search_kit/ang/crmSearchTasks/traits/searchDisplayTasksTrait.service.js b/ext/search_kit/ang/crmSearchTasks/traits/searchDisplayTasksTrait.service.js index bfbb4f9aa9..1644052869 100644 --- a/ext/search_kit/ang/crmSearchTasks/traits/searchDisplayTasksTrait.service.js +++ b/ext/search_kit/ang/crmSearchTasks/traits/searchDisplayTasksTrait.service.js @@ -22,7 +22,7 @@ } // Select all ctrl.allRowsSelected = true; - if (ctrl.page === 1 && ctrl.results.length < ctrl.settings.limit) { + if (ctrl.page === 1 && ctrl.results.length < ctrl.limit) { ctrl.selectedRows = _.pluck(ctrl.results, 'id'); return; } -- 2.25.1