From 21f9ffa0cae0d2ab6cb8dbe53c3f4465b92f9b46 Mon Sep 17 00:00:00 2001 From: Coleman Watts Date: Sun, 21 Nov 2021 11:26:40 -0500 Subject: [PATCH] SearchKit - Improve custom/packaged tab UI to be more responsive Instead of using one searchDisplay with a hidden filter, which causes ajax reload when switching tabs, this creates 2 search displays which are always present but shown/hidden by the tabs. --- .../ang/afAdmin/afAdminList.controller.js | 7 ++- ext/search_kit/ang/crmSearchAdmin.module.js | 37 +++++++++++++-- .../crmSearchAdminSearchListing.component.js | 38 ++++----------- .../crmSearchAdminSearchListing.html | 47 +++++++++---------- 4 files changed, 67 insertions(+), 62 deletions(-) diff --git a/ext/afform/admin/ang/afAdmin/afAdminList.controller.js b/ext/afform/admin/ang/afAdmin/afAdminList.controller.js index 2b1ee33b94..019281936b 100644 --- a/ext/afform/admin/ang/afAdmin/afAdminList.controller.js +++ b/ext/afform/admin/ang/afAdmin/afAdminList.controller.js @@ -57,10 +57,13 @@ $scope.$bindToRoute({ expr: '$ctrl.tab', param: 'tab', - format: 'raw', - default: ctrl.tabs[0].name + format: 'raw' }); + if (!ctrl.tab) { + ctrl.tab = ctrl.tabs[0].name; + } + this.createLinks = function() { ctrl.searchCreateLinks = ''; if ($scope.types[ctrl.tab].options) { diff --git a/ext/search_kit/ang/crmSearchAdmin.module.js b/ext/search_kit/ang/crmSearchAdmin.module.js index b920e7ba90..8ac46b3938 100644 --- a/ext/search_kit/ang/crmSearchAdmin.module.js +++ b/ext/search_kit/ang/crmSearchAdmin.module.js @@ -11,10 +11,9 @@ .config(function($routeProvider) { $routeProvider.when('/list', { - controller: function() { - searchEntity = 'SavedSearch'; - }, - template: '', + controller: 'searchList', + reloadOnSearch: false, + templateUrl: '~/crmSearchAdmin/searchListing/crmSearchAdminSearchListing.html', }); $routeProvider.when('/create/:entity', { controller: 'searchCreate', @@ -45,6 +44,36 @@ }); }) + // Controller for tabbed view of SavedSearches + .controller('searchList', function($scope, searchMeta, formatForSelect2) { + var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'), + ctrl = $scope.$ctrl = this; + searchEntity = 'SavedSearch'; + + // Metadata needed for filters + this.entitySelect = searchMeta.getPrimaryAndSecondaryEntitySelect(); + this.modules = _.sortBy(_.transform((CRM.crmSearchAdmin.modules), function(modules, label, key) { + modules.push({text: label, id: key}); + }, []), 'text'); + this.getTags = function() { + return {results: formatForSelect2(CRM.crmSearchAdmin.tags, 'id', 'name', ['color', 'description'])}; + }; + + // Tabs include a rowCount which will be updated by the search controller + this.tabs = [ + {name: 'custom', title: ts('Custom Searches'), icon: 'fa-search-plus', rowCount: null, filters: {has_base: false}}, + {name: 'packaged', title: ts('Packaged Searches'), icon: 'fa-gift', rowCount: null, filters: {has_base: true}} + ]; + $scope.$bindToRoute({ + expr: '$ctrl.tab', + param: 'tab', + format: 'raw' + }); + if (!this.tab) { + this.tab = this.tabs[0].name; + } + }) + // Controller for creating a new search .controller('searchCreate', function($scope, $routeParams, $location) { searchEntity = $routeParams.entity; diff --git a/ext/search_kit/ang/crmSearchAdmin/searchListing/crmSearchAdminSearchListing.component.js b/ext/search_kit/ang/crmSearchAdmin/searchListing/crmSearchAdminSearchListing.component.js index 9c28846a44..5b18b02ee0 100644 --- a/ext/search_kit/ang/crmSearchAdmin/searchListing/crmSearchAdminSearchListing.component.js +++ b/ext/search_kit/ang/crmSearchAdmin/searchListing/crmSearchAdminSearchListing.component.js @@ -3,8 +3,12 @@ // Specialized searchDisplay, only used by Admins angular.module('crmSearchAdmin').component('crmSearchAdminSearchListing', { - templateUrl: '~/crmSearchAdmin/searchListing/crmSearchAdminSearchListing.html', - controller: function($scope, $q, crmApi4, crmStatus, searchMeta, searchDisplayBaseTrait, searchDisplaySortableTrait, formatForSelect2) { + bindings: { + filters: '<', + tabCount: '=' + }, + templateUrl: '~/crmSearchDisplayTable/crmSearchDisplayTable.html', + controller: function($scope, $q, crmApi4, crmStatus, searchMeta, searchDisplayBaseTrait, searchDisplaySortableTrait) { var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'), // Mix in traits to this controller ctrl = angular.extend(this, searchDisplayBaseTrait, searchDisplaySortableTrait), @@ -14,13 +18,6 @@ this.afformPath = CRM.url('civicrm/admin/afform'); this.afformEnabled = CRM.crmSearchAdmin.afformEnabled; this.afformAdminEnabled = CRM.crmSearchAdmin.afformAdminEnabled; - this.entitySelect = searchMeta.getPrimaryAndSecondaryEntitySelect(); - this.modules = _.sortBy(_.transform((CRM.crmSearchAdmin.modules), function(modules, label, key) { - modules.push({text: label, id: key}); - }, []), 'text'); - - this.filters = {has_base: false}; - this.totals = {}; this.apiEntity = 'SavedSearch'; this.search = { @@ -67,25 +64,10 @@ this.initializeDisplay($scope, $()); // Keep tab counts up-to-date - put rowCount in current tab if there are no other filters $scope.$watch('$ctrl.rowCount', function(val) { - if (typeof val === 'number' && angular.equals({has_base: true}, ctrl.filters)) { - ctrl.totals.has_base = val; - } - else if (typeof val === 'number' && angular.equals({has_base: false}, ctrl.filters)) { - ctrl.totals.no_base = val; + if (typeof val === 'number' && angular.equals(['has_base'], _.keys(ctrl.filters))) { + ctrl.tabCount = val; } }); - // Initialize count for inactive tab - var params = ctrl.getApiParams('row_count'); - params.filters.has_base = true; - crmApi4('SearchDisplay', 'run', params).then(function(result) { - ctrl.totals.has_base = result.count; - }); - }; - - // Change tabs and clear other filters - this.setHasBaseFilter = function(val) { - ctrl.filters = {has_base: val}; - buildDisplaySettings(); }; this.onPostRun.push(function(result) { @@ -180,10 +162,6 @@ ); }; - this.getTags = function() { - return {results: formatForSelect2(CRM.crmSearchAdmin.tags, 'id', 'name', ['color', 'description'])}; - }; - function buildDisplaySettings() { ctrl.display = { type: 'table', diff --git a/ext/search_kit/ang/crmSearchAdmin/searchListing/crmSearchAdminSearchListing.html b/ext/search_kit/ang/crmSearchAdmin/searchListing/crmSearchAdminSearchListing.html index 84e8358a4f..2f0361fd1a 100644 --- a/ext/search_kit/ang/crmSearchAdmin/searchListing/crmSearchAdminSearchListing.html +++ b/ext/search_kit/ang/crmSearchAdmin/searchListing/crmSearchAdminSearchListing.html @@ -3,35 +3,30 @@ - -
- - - - - - - - - - - - {{:: ts('New Search') }} - +
+
+ + + + + + + + + + + + {{:: ts('New Search') }} + +
+
-
-- 2.25.1