From aa5d068b84f7ccd6370dd94339ecdc82c052a2c1 Mon Sep 17 00:00:00 2001 From: Coleman Watts Date: Tue, 23 Nov 2021 20:57:24 -0500 Subject: [PATCH] SearchKit - Improve UX for refresh after editing After bulk-editing or in-place-editing, ensures the pager count is correctly updated. Does the update and refresh for in-place-edit in a single ajax request, without the loading placeholders. --- .../ang/crmSearchDisplay/colType/field.html | 2 +- .../crmSearchDisplayEditable.component.js | 8 ++---- .../traits/searchDisplayBaseTrait.service.js | 28 +++++++++++++------ .../traits/searchDisplayTasksTrait.service.js | 3 +- 4 files changed, 25 insertions(+), 16 deletions(-) diff --git a/ext/search_kit/ang/crmSearchDisplay/colType/field.html b/ext/search_kit/ang/crmSearchDisplay/colType/field.html index 0979969bb1..cee95047ff 100644 --- a/ext/search_kit/ang/crmSearchDisplay/colType/field.html +++ b/ext/search_kit/ang/crmSearchDisplay/colType/field.html @@ -1,4 +1,4 @@ - + {{:: $ctrl.formatFieldValue(colData) }} diff --git a/ext/search_kit/ang/crmSearchDisplay/crmSearchDisplayEditable.component.js b/ext/search_kit/ang/crmSearchDisplay/crmSearchDisplayEditable.component.js index 2df08087f8..052b9dcfbc 100644 --- a/ext/search_kit/ang/crmSearchDisplay/crmSearchDisplayEditable.component.js +++ b/ext/search_kit/ang/crmSearchDisplay/crmSearchDisplayEditable.component.js @@ -9,10 +9,10 @@ row: '<', col: '<', cancel: '&', - onSuccess: '&' + doSave: '&' }, templateUrl: '~/crmSearchDisplay/crmSearchDisplayEditable.html', - controller: function($scope, $element, crmApi4, crmStatus) { + controller: function($scope, $element, crmApi4) { var ctrl = this, initialValue, col; @@ -58,9 +58,7 @@ var record = _.cloneDeep(col.edit.record); record[col.edit.value_key] = ctrl.value; $('input', $element).attr('disabled', true); - crmStatus({}, crmApi4(col.edit.entity, 'update', { - values: record - })).then(ctrl.onSuccess); + ctrl.doSave({apiCall: [col.edit.entity, 'update', {values: record}]}); }; function loadOptions() { diff --git a/ext/search_kit/ang/crmSearchDisplay/traits/searchDisplayBaseTrait.service.js b/ext/search_kit/ang/crmSearchDisplay/traits/searchDisplayBaseTrait.service.js index e1e49cbf8d..41c07dda55 100644 --- a/ext/search_kit/ang/crmSearchDisplay/traits/searchDisplayBaseTrait.service.js +++ b/ext/search_kit/ang/crmSearchDisplay/traits/searchDisplayBaseTrait.service.js @@ -2,7 +2,7 @@ "use strict"; // Trait provides base methods and properties common to all search display types - angular.module('crmSearchDisplay').factory('searchDisplayBaseTrait', function(crmApi4) { + angular.module('crmSearchDisplay').factory('searchDisplayBaseTrait', function(crmApi4, crmStatus) { // Return a base trait shared by all search display controllers // Gets mixed in using angular.extend() @@ -90,23 +90,29 @@ }, // Call SearchDisplay.run and update ctrl.results and ctrl.rowCount - runSearch: function(editedRow) { + runSearch: function(apiCalls, statusParams, editedRow) { var ctrl = this, requestId = ++this._runCount, apiParams = this.getApiParams(); - this.loading = true; + if (!statusParams) { + this.loading = true; + } _.each(ctrl.onPreRun, function(callback) { callback.call(ctrl, apiParams); }); - return crmApi4('SearchDisplay', 'run', apiParams).then(function(results) { + apiCalls = apiCalls || []; + apiCalls.push(['SearchDisplay', 'run', apiParams]); + var apiRequest = crmApi4(apiCalls); + apiRequest.then(function(apiResults) { if (requestId < ctrl._runCount) { return; // Another request started after this one } - ctrl.results = results; + ctrl.results = _.last(apiResults); ctrl.editing = ctrl.loading = false; - if (!ctrl.rowCount) { - if (!ctrl.limit || results.length < ctrl.limit) { - ctrl.rowCount = results.length; + // Update rowCount if running for the first time or during an update op + if (!ctrl.rowCount || editedRow) { + if (!ctrl.limit || ctrl.results.length < ctrl.limit) { + ctrl.rowCount = ctrl.results.length; } else if (ctrl.settings.pager) { var params = ctrl.getApiParams('row_count'); crmApi4('SearchDisplay', 'run', params).then(function(result) { @@ -115,7 +121,7 @@ } } _.each(ctrl.onPostRun, function(callback) { - callback.call(ctrl, results, 'success', editedRow); + callback.call(ctrl, ctrl.results, 'success', editedRow); }); }, function(error) { if (requestId < ctrl._runCount) { @@ -127,6 +133,10 @@ callback.call(ctrl, error, 'error', editedRow); }); }); + if (statusParams) { + crmStatus(statusParams, apiRequest); + } + return apiRequest; }, formatFieldValue: function(colData) { return angular.isArray(colData.val) ? colData.val.join(', ') : colData.val; diff --git a/ext/search_kit/ang/crmSearchTasks/traits/searchDisplayTasksTrait.service.js b/ext/search_kit/ang/crmSearchTasks/traits/searchDisplayTasksTrait.service.js index f7cb558d76..4dc4e14a12 100644 --- a/ext/search_kit/ang/crmSearchTasks/traits/searchDisplayTasksTrait.service.js +++ b/ext/search_kit/ang/crmSearchTasks/traits/searchDisplayTasksTrait.service.js @@ -55,6 +55,7 @@ refreshAfterTask: function() { this.selectedRows.length = 0; this.allRowsSelected = false; + this.rowCount = undefined; this.runSearch(); }, @@ -70,7 +71,7 @@ if (editedRow && status === 'success') { // If edited row disappears (because edits cause it to not meet search criteria), deselect it var index = this.selectedRows.indexOf(editedRow.key); - if (index > -1 && !_.findWhere(results, {id: editedRow.key})) { + if (index > -1 && !_.findWhere(results, {key: editedRow.key})) { this.selectedRows.splice(index, 1); } } -- 2.25.1