From d0aeca745999eb359d520b5b09b88a2686b39866 Mon Sep 17 00:00:00 2001 From: Coleman Watts Date: Sun, 18 Jul 2021 23:58:21 -0400 Subject: [PATCH] Refactor SearchKit displays to inherit traits from a common base This refactors searchDisplayUtils to searchDisplayBaseTrait service, which acts like a PHP trait, controllers use it via angular.extend(). --- ext/search_kit/ang/crmSearchDisplay.module.js | 116 +++++++++++++----- .../ang/crmSearchDisplay/Pager.html | 2 +- .../ang/crmSearchDisplay/colType/buttons.html | 2 +- .../ang/crmSearchDisplay/colType/links.html | 2 +- .../ang/crmSearchDisplay/colType/menu.html | 2 +- .../crmSearchDisplayList.component.js | 53 +------- .../crmSearchDisplayListItems.html | 4 +- .../crmSearchDisplayTable.component.js | 59 ++------- .../crmSearchDisplayTable.html | 4 +- 9 files changed, 105 insertions(+), 139 deletions(-) diff --git a/ext/search_kit/ang/crmSearchDisplay.module.js b/ext/search_kit/ang/crmSearchDisplay.module.js index 64b6bd3c86..14b863f67b 100644 --- a/ext/search_kit/ang/crmSearchDisplay.module.js +++ b/ext/search_kit/ang/crmSearchDisplay.module.js @@ -4,7 +4,9 @@ // Declare module angular.module('crmSearchDisplay', CRM.angRequires('crmSearchDisplay')) - .factory('searchDisplayUtils', function(crmApi4) { + // Provides base methods and properties common to all search display types + .factory('searchDisplayBaseTrait', function(crmApi4) { + var ts = CRM.ts('org.civicrm.search_kit'); // Replace tokens keyed to rowData. // If rowMeta is provided, values will be formatted; if omitted, raw values will be provided. @@ -74,41 +76,91 @@ return result; } - function getApiParams(ctrl, mode) { - return { - return: mode || 'page:' + ctrl.page, - savedSearch: ctrl.search, - display: ctrl.display, - sort: ctrl.sort, - filters: _.assign({}, (ctrl.afFieldset ? ctrl.afFieldset.getFieldData() : {}), ctrl.filters), - afform: ctrl.afFieldset ? ctrl.afFieldset.getFormName() : null - }; - } + // Return a base trait shared by all search display controllers + // Gets mixed in using angular.extend() + return { + page: 1, + rowCount: null, + getUrl: getUrl, + + // Called by the controller's $onInit function + initializeDisplay: function($scope, $element) { + var ctrl = this; + this.sort = this.settings.sort ? _.cloneDeep(this.settings.sort) : []; + + $scope.getResults = _.debounce(function() { + ctrl.getResults(); + }, 100); - function getResults(ctrl) { - return crmApi4('SearchDisplay', 'run', getApiParams(ctrl)).then(function(results) { - ctrl.results = results; - ctrl.editing = false; - if (!ctrl.rowCount) { - if (!ctrl.settings.limit || results.length < ctrl.settings.limit) { - ctrl.rowCount = results.length; - } else if (ctrl.settings.pager) { - var params = getApiParams(ctrl, 'row_count'); - crmApi4('SearchDisplay', 'run', params).then(function(result) { - ctrl.rowCount = result.count; - }); + // If search is embedded in contact summary tab, display count in tab-header + var contactTab = $element.closest('.crm-contact-page .ui-tabs-panel').attr('id'); + if (contactTab) { + var unwatchCount = $scope.$watch('$ctrl.rowCount', function(rowCount) { + if (typeof rowCount === 'number') { + unwatchCount(); + CRM.tabHeader.updateCount(contactTab.replace('contact-', '#tab_'), rowCount); + } + }); + } + + function onChangeFilters() { + ctrl.page = 1; + ctrl.rowCount = null; + if (ctrl.onChangeFilters) { + ctrl.onChangeFilters(); } + $scope.getResults(); } - }); - } - return { - formatDisplayValue: formatDisplayValue, - formatLinks: formatLinks, - getApiParams: getApiParams, - getResults: getResults, - replaceTokens: replaceTokens, - getUrl: getUrl + if (this.afFieldset) { + $scope.$watch(this.afFieldset.getFieldData, onChangeFilters, true); + } + $scope.$watch('$ctrl.filters', onChangeFilters, true); + }, + + // Generate params for the SearchDisplay.run api + getApiParams: function(mode) { + return { + return: mode || 'page:' + this.page, + savedSearch: this.search, + display: this.display, + sort: this.sort, + filters: _.assign({}, (this.afFieldset ? this.afFieldset.getFieldData() : {}), this.filters), + afform: this.afFieldset ? this.afFieldset.getFormName() : null + }; + }, + + // Call SearchDisplay.run and update ctrl.results and ctrl.rowCount + getResults: function() { + var ctrl = this; + return crmApi4('SearchDisplay', 'run', ctrl.getApiParams()).then(function(results) { + ctrl.results = results; + ctrl.editing = false; + if (!ctrl.rowCount) { + if (!ctrl.settings.limit || results.length < ctrl.settings.limit) { + ctrl.rowCount = results.length; + } else if (ctrl.settings.pager) { + var params = ctrl.getApiParams('row_count'); + crmApi4('SearchDisplay', 'run', params).then(function(result) { + ctrl.rowCount = result.count; + }); + } + } + }); + }, + replaceTokens: function(value, row) { + return replaceTokens(value, row, this.settings.columns); + }, + getLinks: function(rowData, col) { + rowData._links = rowData._links || {}; + if (!(col.key in rowData._links)) { + rowData._links[col.key] = formatLinks(rowData, col.key, this.settings.columns); + } + return rowData._links[col.key]; + }, + formatFieldValue: function(rowData, col) { + return formatDisplayValue(rowData, col.key, this.settings.columns); + } }; }); diff --git a/ext/search_kit/ang/crmSearchDisplay/Pager.html b/ext/search_kit/ang/crmSearchDisplay/Pager.html index d760bec287..868bc8b855 100644 --- a/ext/search_kit/ang/crmSearchDisplay/Pager.html +++ b/ext/search_kit/ang/crmSearchDisplay/Pager.html @@ -4,7 +4,7 @@ boundary-links="true" total-items="$ctrl.rowCount" ng-model="$ctrl.page" - ng-change="$ctrl.getResults()" + ng-change="getResults()" items-per-page="$ctrl.settings.limit" max-size="6" force-ellipses="true" diff --git a/ext/search_kit/ang/crmSearchDisplay/colType/buttons.html b/ext/search_kit/ang/crmSearchDisplay/colType/buttons.html index 4909f20dbf..1c178db16d 100644 --- a/ext/search_kit/ang/crmSearchDisplay/colType/buttons.html +++ b/ext/search_kit/ang/crmSearchDisplay/colType/buttons.html @@ -1,5 +1,5 @@ - + {{:: $ctrl.replaceTokens(item.text, row) }} diff --git a/ext/search_kit/ang/crmSearchDisplay/colType/links.html b/ext/search_kit/ang/crmSearchDisplay/colType/links.html index b4a6dea220..5d59a7960d 100644 --- a/ext/search_kit/ang/crmSearchDisplay/colType/links.html +++ b/ext/search_kit/ang/crmSearchDisplay/colType/links.html @@ -1,5 +1,5 @@ - + {{:: $ctrl.replaceTokens(item.text, row) }} diff --git a/ext/search_kit/ang/crmSearchDisplay/colType/menu.html b/ext/search_kit/ang/crmSearchDisplay/colType/menu.html index f4f9afb340..fa961dcf37 100644 --- a/ext/search_kit/ang/crmSearchDisplay/colType/menu.html +++ b/ext/search_kit/ang/crmSearchDisplay/colType/menu.html @@ -5,7 +5,7 @@
  • - + {{:: $ctrl.replaceTokens(item.text, row) }} diff --git a/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayList.component.js b/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayList.component.js index e8137cba17..718452d35e 100644 --- a/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayList.component.js +++ b/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayList.component.js @@ -14,63 +14,18 @@ afFieldset: '?^^afFieldset' }, templateUrl: '~/crmSearchDisplayList/crmSearchDisplayList.html', - controller: function($scope, $element, crmApi4, searchDisplayUtils) { + controller: function($scope, $element, searchDisplayBaseTrait) { var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'), - ctrl = this; - - this.page = 1; - this.rowCount = null; + // Mix in properties of searchDisplayBaseTrait + ctrl = angular.extend(this, searchDisplayBaseTrait); this.$onInit = function() { - this.sort = this.settings.sort ? _.cloneDeep(this.settings.sort) : []; - $scope.displayUtils = searchDisplayUtils; - - // If search is embedded in contact summary tab, display count in tab-header - var contactTab = $element.closest('.crm-contact-page .ui-tabs-panel').attr('id'); - if (contactTab) { - var unwatchCount = $scope.$watch('$ctrl.rowCount', function(rowCount) { - if (typeof rowCount === 'number') { - unwatchCount(); - CRM.tabHeader.updateCount(contactTab.replace('contact-', '#tab_'), rowCount); - } - }); - } - - if (this.afFieldset) { - $scope.$watch(this.afFieldset.getFieldData, onChangeFilters, true); - } - $scope.$watch('$ctrl.filters', onChangeFilters, true); + this.initializeDisplay($scope, $element); }; - this.getResults = _.debounce(function() { - searchDisplayUtils.getResults(ctrl); - }, 100); - // Refresh current page this.refresh = function(row) { - searchDisplayUtils.getResults(ctrl); - }; - - function onChangeFilters() { - ctrl.page = 1; - ctrl.rowCount = null; ctrl.getResults(); - } - - this.formatFieldValue = function(rowData, col) { - return searchDisplayUtils.formatDisplayValue(rowData, col.key, ctrl.settings.columns); - }; - - this.replaceTokens = function(value, row, raw) { - return searchDisplayUtils.replaceTokens(value, row, raw ? null : ctrl.settings.columns); - }; - - this.getLinks = function(rowData, col) { - rowData._links = rowData._links || {}; - if (!(col.key in rowData._links)) { - rowData._links[col.key] = searchDisplayUtils.formatLinks(rowData, col.key, ctrl.settings.columns); - } - return rowData._links[col.key]; }; } diff --git a/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayListItems.html b/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayListItems.html index 59bae1aab8..50d0637074 100644 --- a/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayListItems.html +++ b/ext/search_kit/ang/crmSearchDisplayList/crmSearchDisplayListItems.html @@ -1,7 +1,7 @@
  • -
    +
    diff --git a/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.component.js b/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.component.js index 2d82221e90..c4ed51c7d0 100644 --- a/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.component.js +++ b/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.component.js @@ -13,44 +13,22 @@ afFieldset: '?^^afFieldset' }, templateUrl: '~/crmSearchDisplayTable/crmSearchDisplayTable.html', - controller: function($scope, $element, crmApi4, searchDisplayUtils) { + controller: function($scope, $element, crmApi4, searchDisplayBaseTrait) { var ts = $scope.ts = CRM.ts('org.civicrm.search_kit'), - ctrl = this; + // Mix in properties of searchDisplayBaseTrait + ctrl = angular.extend(this, searchDisplayBaseTrait); - this.page = 1; - this.rowCount = null; this.selectedRows = []; this.allRowsSelected = false; this.$onInit = function() { - this.sort = this.settings.sort ? _.cloneDeep(this.settings.sort) : []; - $scope.displayUtils = searchDisplayUtils; - - // If search is embedded in contact summary tab, display count in tab-header - var contactTab = $element.closest('.crm-contact-page .ui-tabs-panel').attr('id'); - if (contactTab) { - var unwatchCount = $scope.$watch('$ctrl.rowCount', function(rowCount) { - if (typeof rowCount === 'number') { - unwatchCount(); - CRM.tabHeader.updateCount(contactTab.replace('contact-', '#tab_'), rowCount); - } - }); - } - - if (this.afFieldset) { - $scope.$watch(this.afFieldset.getFieldData, onChangeFilters, true); - } - $scope.$watch('$ctrl.filters', onChangeFilters, true); + this.initializeDisplay($scope, $element); }; - this.getResults = _.debounce(function() { - searchDisplayUtils.getResults(ctrl); - }, 100); - // Refresh page after inline-editing a row this.refresh = function(row) { var rowId = row.id; - searchDisplayUtils.getResults(ctrl) + ctrl.getResults() .then(function() { // If edited row disappears (because edits cause it to not meet search criteria), deselect it var index = ctrl.selectedRows.indexOf(rowId); @@ -60,13 +38,10 @@ }); }; - function onChangeFilters() { - ctrl.page = 1; - ctrl.rowCount = null; + this.onChangeFilters = function() { ctrl.selectedRows.legth = 0; ctrl.allRowsSelected = false; - ctrl.getResults(); - } + }; /** * Returns crm-i icon class for a sortable column @@ -102,23 +77,7 @@ } else { ctrl.sort.push([col.key, dir]); } - ctrl.getResults(); - }; - - this.formatFieldValue = function(rowData, col) { - return searchDisplayUtils.formatDisplayValue(rowData, col.key, ctrl.settings.columns); - }; - - this.replaceTokens = function(value, row, raw) { - return searchDisplayUtils.replaceTokens(value, row, raw ? null : ctrl.settings.columns); - }; - - this.getLinks = function(rowData, col) { - rowData._links = rowData._links || {}; - if (!(col.key in rowData._links)) { - rowData._links[col.key] = searchDisplayUtils.formatLinks(rowData, col.key, ctrl.settings.columns); - } - return rowData._links[col.key]; + $scope.getResults(); }; $scope.selectAllRows = function() { @@ -136,7 +95,7 @@ } // If more than one page of results, use ajax to fetch all ids $scope.loadingAllRows = true; - var params = searchDisplayUtils.getApiParams(ctrl, 'id'); + var params = ctrl.getApiParams('id'); crmApi4('SearchDisplay', 'run', params, ['id']).then(function(ids) { $scope.loadingAllRows = false; ctrl.selectedRows = _.toArray(ids); diff --git a/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html b/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html index 9cf6fcfdbd..ba1eed9e13 100644 --- a/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html +++ b/ext/search_kit/ang/crmSearchDisplayTable/crmSearchDisplayTable.html @@ -1,6 +1,6 @@
    - +
    @@ -19,7 +19,7 @@ - -- 2.25.1
    +