From 4099cd6b65eb97d46ad05d7a02f000a36ee77240 Mon Sep 17 00:00:00 2001 From: colemanw Date: Wed, 20 Dec 2023 16:03:18 -0500 Subject: [PATCH] SearchKit - Improve layout of admin displays Collapse columns to save space. Split addColMenu in two, allows toggling multiple columns at once. --- .../crmSearchAdminDisplay.component.js | 46 +++++++------ .../crmSearchAdmin/crmSearchAdminFields.html | 2 +- .../displays/common/addColMenu.html | 43 +++++++----- ...earchAdminDisplayAutocomplete.component.js | 7 +- .../searchAdminDisplayAutocomplete.html | 6 +- .../searchAdminDisplayEntity.component.js | 7 +- .../displays/searchAdminDisplayEntity.html | 6 +- .../displays/searchAdminDisplayGrid.html | 51 +++++++------- .../displays/searchAdminDisplayList.html | 51 +++++++------- .../displays/searchAdminDisplayTable.html | 67 ++++++++++--------- ext/search_kit/css/crmSearchAdmin.css | 4 ++ 11 files changed, 157 insertions(+), 133 deletions(-) diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js index 1c49b0ecbe..7d1b856fb2 100644 --- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js +++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminDisplay.component.js @@ -35,6 +35,7 @@ controller: function($scope, $timeout, searchMeta) { var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'), ctrl = this; + let initDefaults; this.isSuperAdmin = CRM.checkPerm('all CiviCRM permissions and ACLs'); this.aclBypassHelp = ts('Only users with "all CiviCRM permissions and ACLs" can disable permission checks.'); @@ -87,6 +88,10 @@ this.styles = CRM.crmSearchAdmin.styles; + function selectToKey(selectExpr) { + return selectExpr.split(' AS ').slice(-1)[0]; + } + this.addCol = function(type) { var col = _.cloneDeep(this.colTypes[type].defaults); col.type = type; @@ -97,15 +102,25 @@ }; this.removeCol = function(index) { - if (ctrl.display.settings.columns[index].type === 'field') { - ctrl.hiddenColumns.push(ctrl.display.settings.columns[index]); - } ctrl.display.settings.columns.splice(index, 1); }; - this.restoreCol = function(index) { - ctrl.display.settings.columns.push(ctrl.hiddenColumns[index]); - ctrl.hiddenColumns.splice(index, 1); + this.getColumnIndex = function(key) { + key = selectToKey(key); + return ctrl.display.settings.columns.findIndex(col => key === col.key); + }; + + this.columnExists = function(key) { + return ctrl.getColumnIndex(key) > -1; + }; + + this.toggleColumn = function(key) { + let index = ctrl.getColumnIndex(key); + if (index > -1) { + ctrl.removeCol(index); + } else { + ctrl.display.settings.columns.push(searchMeta.fieldToColumn(key, initDefaults)); + } }; this.getExprFromSelect = function(key) { @@ -121,7 +136,7 @@ }; this.getFieldLabel = function(key) { - var expr = ctrl.getExprFromSelect(key); + var expr = ctrl.getExprFromSelect(selectToKey(key)); return searchMeta.getDefaultLabel(expr); }; @@ -294,23 +309,16 @@ // Helper function to sort active from hidden columns and initialize each column with defaults this.initColumns = function(defaults) { + initDefaults = defaults; if (!ctrl.display.settings.columns) { ctrl.display.settings.columns = _.transform(ctrl.savedSearch.api_params.select, function(columns, fieldExpr) { columns.push(searchMeta.fieldToColumn(fieldExpr, defaults)); }); - ctrl.hiddenColumns = []; } else { - var activeColumns = _.collect(ctrl.display.settings.columns, 'key'), - selectAliases = _.map(ctrl.savedSearch.api_params.select, function(select) { - return _.last(select.split(' AS ')); - }); - ctrl.hiddenColumns = _.transform(ctrl.savedSearch.api_params.select, function(hiddenColumns, fieldExpr) { - var key = _.last(fieldExpr.split(' AS ')); - if (!_.includes(activeColumns, key)) { - hiddenColumns.push(searchMeta.fieldToColumn(fieldExpr, defaults)); - } - }); - _.eachRight(activeColumns, function(key, index) { + let activeColumns = ctrl.display.settings.columns.map(col => col.key); + let selectAliases = ctrl.savedSearch.api_params.select.map(selectExpr => selectToKey(selectExpr)); + // Delete any column that is no longer in the + activeColumns.reverse().forEach((key, index) => { if (key && !_.includes(selectAliases, key)) { ctrl.display.settings.columns.splice(index, 1); } diff --git a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminFields.html b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminFields.html index 9bb43b853d..b1c2a804bb 100644 --- a/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminFields.html +++ b/ext/search_kit/ang/crmSearchAdmin/crmSearchAdminFields.html @@ -3,7 +3,7 @@ - diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/common/addColMenu.html b/ext/search_kit/ang/crmSearchAdmin/displays/common/addColMenu.html index 7ce59d1a95..f533663068 100644 --- a/ext/search_kit/ang/crmSearchAdmin/displays/common/addColMenu.html +++ b/ext/search_kit/ang/crmSearchAdmin/displays/common/addColMenu.html @@ -1,15 +1,28 @@ - - +
+ + +
+
+ + +
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.component.js b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.component.js index c8803ef76d..fe728842f8 100644 --- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.component.js +++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.component.js @@ -13,12 +13,7 @@ templateUrl: '~/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.html', controller: function($scope, searchMeta) { var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'), - ctrl = this, - colTypes = []; - - this.getColTypes = function() { - return colTypes; - }; + ctrl = this; this.$onInit = function () { if (!ctrl.display.settings) { diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.html index 7cf9be2c1b..52d56a88b7 100644 --- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.html +++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayAutocomplete.html @@ -4,13 +4,13 @@
{{:: ts('Fields') }} -
+

{{:: ts("The top-most line will be shown as the searchable title (combine multiple fields using rewrite + tokens).") }} {{:: ts("Other lines will be shown below in smaller text, and will not be searchable (except for ID which is always searchable).") }}

-
+
@@ -37,5 +37,5 @@
- + diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayEntity.component.js b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayEntity.component.js index bf1ffc98f8..9efe7d99cd 100644 --- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayEntity.component.js +++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayEntity.component.js @@ -13,12 +13,7 @@ templateUrl: '~/crmSearchAdmin/displays/searchAdminDisplayEntity.html', controller: function($scope, crmApi4) { var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'), - ctrl = this, - colTypes = []; - - this.getColTypes = function() { - return colTypes; - }; + ctrl = this; this.$onInit = function () { ctrl.jobFrequency = CRM.crmSearchAdmin.jobFrequency; diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayEntity.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayEntity.html index 168f182bfe..e33757c899 100644 --- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayEntity.html +++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayEntity.html @@ -33,9 +33,9 @@
{{:: ts('Columns') }} -
-
+
+
@@ -49,5 +49,5 @@
- + diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.html index a2a3cf6a11..f23c796e4f 100644 --- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.html +++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayGrid.html @@ -18,32 +18,35 @@
{{:: ts('Fields') }} -
-
+
+
- {{ $ctrl.parent.getColLabel(col) }} -
- - -
-
- - - -
-
- -
- + + +
+ {{ $ctrl.parent.getColLabel(col) }} +
+
-
-
+
+ + + +
+
+ +
+ +
+
+
+
-
+
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html index fa385a3297..d38f00aadc 100644 --- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html +++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayList.html @@ -22,32 +22,35 @@
{{:: ts('Fields') }} -
-
+
+
- {{ $ctrl.parent.getColLabel(col) }} -
- - -
-
- - - -
-
- -
- + + +
+ {{ $ctrl.parent.getColLabel(col) }} +
+
-
-
+
+ + + +
+
+ +
+ +
+
+
+
-
+
diff --git a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html index 27e9f4da5d..03582cc826 100644 --- a/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html +++ b/ext/search_kit/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html @@ -48,39 +48,42 @@
{{:: ts('Columns') }} -
-
+
+
- {{ $ctrl.parent.getColLabel(col) }} -
- - - -
-
- - -
-
- -
-
-
- - - - -
+ + +
+ {{ $ctrl.parent.getColLabel(col) }} +
+ + +
+
+ + +
+
+ +
+
+
+ + + + +
+
-
+
diff --git a/ext/search_kit/css/crmSearchAdmin.css b/ext/search_kit/css/crmSearchAdmin.css index 71093879f4..00674384c3 100644 --- a/ext/search_kit/css/crmSearchAdmin.css +++ b/ext/search_kit/css/crmSearchAdmin.css @@ -314,3 +314,7 @@ crm-search-admin-import { right: 0; background-color: white; } + +#bootstrap-theme .crm-search-admin-edit-columns details summary { + font-size: inherit; +} -- 2.25.1