Skip to content

Instantly share code, notes, and snippets.

@navarr

navarr/VRTX-tax-slowness.patch

Created December 13, 2019 15:25
Show Gist options
  • Save navarr/2ec2f22f71a769d8438fb237f58eabd4 to your computer and use it in GitHub Desktop.
Save navarr/2ec2f22f71a769d8438fb237f58eabd4 to your computer and use it in GitHub Desktop.
Download ZIP
Resolution for BUNDLE-2320 - Slowness/JavaScript hang on Tax Configuration Page
Raw
VRTX-tax-slowness.patch
From 05aa7d9aaa12f3c0e2566f324e0312ffcc788555 Mon Sep 17 00:00:00 2001
From: Damir Korpar <[email protected]>
Date: Thu, 12 Dec 2019 17:24:25 +0100
Subject: [PATCH 1/3] VRTX-702 Loading Flexfields input fields on demand
---
.../web/js/form/caption-formatter.js | 25 +++++++
.../web/js/form/flex-field-select.js | 17 ++---
.../web/js/model/flex-field-table.js | 75 +++++++++++++++++--
.../web/template/flex-field-table.html | 44 +++++++----
4 files changed, 131 insertions(+), 30 deletions(-)
create mode 100644 view/adminhtml/web/js/form/caption-formatter.js
diff --git a/view/adminhtml/web/js/form/caption-formatter.js b/view/adminhtml/web/js/form/caption-formatter.js
new file mode 100644
index 00000000..8d0f5943
--- /dev/null
+++ b/view/adminhtml/web/js/form/caption-formatter.js
@@ -0,0 +1,25 @@
+/*
+ * @copyright Vertex. All rights reserved. https://www.vertexinc.com/
+ * @author Mediotype https://www.mediotype.com/
+ */
+
+define(function () {
+ 'use strict';
+
+ return {
+ /**
+ * Return formatted selected option value
+ * @param {Object} selected
+ * @returns {String}
+ */
+ getFormattedValue: function (selected) {
+ var label = '';
+
+ if (selected.parent) {
+ label = selected.parent + ' - ';
+ }
+ label += selected.label;
+ return label;
+ }
+ };
+});
diff --git a/view/adminhtml/web/js/form/flex-field-select.js b/view/adminhtml/web/js/form/flex-field-select.js
index 6f17b71e..6cc81b6f 100644
--- a/view/adminhtml/web/js/form/flex-field-select.js
+++ b/view/adminhtml/web/js/form/flex-field-select.js
@@ -3,7 +3,11 @@
* @author Mediotype https://www.mediotype.com/
*/
-define(['underscore', 'Magento_Ui/js/form/element/ui-select'], function (_, Component) {
+define([
+ 'underscore',
+ 'Magento_Ui/js/form/element/ui-select',
+ 'Vertex_Tax/js/form/caption-formatter'
+], function (_, Component, captionFormatter) {
'use strict';
return Component.extend({
@@ -20,9 +24,7 @@ define(['underscore', 'Magento_Ui/js/form/element/ui-select'], function (_, Comp
* Set Caption
*/
setCaption: function () {
- var length,
- label = '',
- selected;
+ var length, label;
if (!_.isArray(this.value()) && this.value()) {
length = 1;
@@ -34,12 +36,7 @@ define(['underscore', 'Magento_Ui/js/form/element/ui-select'], function (_, Comp
}
if (length && this.getSelected().length) {
- selected = this.getSelected()[0];
-
- if (selected.parent) {
- label = selected.parent + ' - ';
- }
- label += selected.label;
+ label = captionFormatter.getFormattedValue(this.getSelected()[0]);
this.placeholder(label);
} else {
this.placeholder(this.selectedPlaceholders.defaultPlaceholder);
diff --git a/view/adminhtml/web/js/model/flex-field-table.js b/view/adminhtml/web/js/model/flex-field-table.js
index 10644b9d..4a356282 100644
--- a/view/adminhtml/web/js/model/flex-field-table.js
+++ b/view/adminhtml/web/js/model/flex-field-table.js
@@ -3,7 +3,12 @@
* @author Mediotype https://www.mediotype.com/
*/
-define(['uiComponent', 'ko', 'uiLayout'], function (Component, ko, layout) {
+define([
+ 'uiComponent',
+ 'ko',
+ 'uiLayout',
+ 'Vertex_Tax/js/form/caption-formatter'
+], function (Component, ko, layout, captionFormatter) {
'use strict';
return Component.extend({
@@ -12,14 +17,20 @@ define(['uiComponent', 'ko', 'uiLayout'], function (Component, ko, layout) {
fieldType: '', // One of code, numeric, or date
tableId: '',
template: 'Vertex_Tax/flex-field-table',
+ editMode: false,
selectOptions: [
{
label: 'No Data',
value: 'none'
}
- ]
+ ],
+ tracks: {
+ editMode: true,
+ isEmpty: true
+ }
},
retrieveFields: [],
+ hasFields: false,
/**
* Initializes the table
@@ -38,11 +49,13 @@ define(['uiComponent', 'ko', 'uiLayout'], function (Component, ko, layout) {
* Initialize the select components and link them to the form values
*/
initializeFields: function () {
- var i, name, toLayOut = [];
+ var i, name, fieldId, fieldSource, toLayOut = [];
for (i in this.values) {
if (this.values.hasOwnProperty(i)) {
- name = this.fieldType + 'FlexField' + this.values[i]['field_id'];
+ fieldSource = this.values[i]['field_source'];
+ fieldId = this.values[i]['field_id'];
+ name = this.fieldType + 'FlexField' + fieldId;
toLayOut.push({
component: 'Vertex_Tax/js/form/flex-field-select',
@@ -64,11 +77,13 @@ define(['uiComponent', 'ko', 'uiLayout'], function (Component, ko, layout) {
filterOptions: true,
isDisplayMissingValuePlaceholder: true,
options: this.selectOptions,
- value: this.values[i]['field_source']
+ value: fieldSource
});
this.retrieveFields.push({
- fieldId: this.values[i]['field_id'],
+ fieldId: fieldId,
+ fieldSource: fieldSource,
+ fieldLabel: this.getFieldLabelFromSource(fieldSource),
childName: name
});
}
@@ -87,6 +102,29 @@ define(['uiComponent', 'ko', 'uiLayout'], function (Component, ko, layout) {
return this.elementName + '[' + fieldId + '][field_id]';
},
+ /**
+ * Retrieve the label for the selected source
+ * @param {String} source
+ * @returns {String}
+ */
+ getFieldLabelFromSource: function (source) {
+ var i, j, selected;
+
+ for (i in this.selectOptions) {
+ if (this.selectOptions[i].optgroup === undefined) {
+ continue;
+ }
+ for (j in this.selectOptions[i].optgroup) {
+ selected = this.selectOptions[i].optgroup[j];
+
+ if (selected.value === source) {
+ return captionFormatter.getFormattedValue(selected);
+ }
+ }
+ }
+ return '';
+ },
+
/**
* Retrieve the name for a Field Value input
* @param {String} fieldId
@@ -102,6 +140,31 @@ define(['uiComponent', 'ko', 'uiLayout'], function (Component, ko, layout) {
*/
getEmptyName: function () {
return this.elementName + '[__empty]';
+ },
+
+ /**
+ * Returns if there are any flexible fields selected
+ * @returns {Boolean}
+ */
+ isEmpty: function () {
+ var i, fieldSource;
+
+ for (i in this.retrieveFields()) {
+ fieldSource = this.retrieveFields()[i].fieldSource;
+
+ if (fieldSource && fieldSource !== 'none') {
+ return false;
+ }
+ }
+ return true;
+ },
+
+ /**
+ * Toggles edit mode
+ * @returns {Boolean}
+ */
+ toggleEditMode: function (e) {
+ this.editMode = !this.editMode;
}
});
});
diff --git a/view/adminhtml/web/template/flex-field-table.html b/view/adminhtml/web/template/flex-field-table.html
index 5b1039bd..9480c481 100644
--- a/view/adminhtml/web/template/flex-field-table.html
+++ b/view/adminhtml/web/template/flex-field-table.html
@@ -5,6 +5,7 @@
*/
-->
<div class="admin__control-table-wrapper admin__control-flexfield-table">
+ <!-- ko if: editMode || !isEmpty() -->
<table class="admin__control-table">
<thead>
<tr>
@@ -14,22 +15,37 @@
</thead>
<tbody>
<!-- ko foreach: retrieveFields -->
- <tr>
- <td>
- <input type="hidden"
- data-bind="attr: { name: $parent.getFieldIdInputName(fieldId) }, value: fieldId"/>
- <span data-bind="text: fieldId"></span>
- </td>
- <td>
- <input type="hidden"
- data-bind="attr: { name: $parent.getFieldValueInputName(fieldId) }, value: $parent.getChild(childName) ? $parent.getChild(childName).value : ''"/>
- <!-- ko with: $parent.getChild(childName) -->
- <!-- ko template: getTemplate() --><!-- /ko -->
- <!-- /ko -->
- </td>
- </tr>
+ <!-- ko if: $parent.editMode || !$parent.editMode && fieldSource-->
+ <tr>
+ <td>
+ <!-- ko if: $parent.editMode -->
+ <input type="hidden"
+ data-bind="attr: { name: $parent.getFieldIdInputName(fieldId) }, value: fieldId"/>
+ <!-- /ko -->
+ <span data-bind="text: fieldId"></span>
+ </td>
+ <td>
+ <!-- ko if: $parent.editMode -->
+ <input type="hidden"
+ data-bind="attr: { name: $parent.getFieldValueInputName(fieldId) }, value: $parent.getChild(childName) ? $parent.getChild(childName).value : ''"/>
+ <!-- ko with: $parent.getChild(childName) -->
+ <!-- ko template: getTemplate() --><!-- /ko -->
+ <!-- /ko -->
+ <!-- /ko -->
+ <!-- ko ifnot: $parent.editMode -->
+ <p data-bind="text: fieldLabel"></p>
+ <!-- /ko -->
+ </td>
+ </tr>
+ <!-- /ko -->
<!-- /ko -->
</tbody>
</table>
+ <!-- /ko -->
+ <!-- ko ifnot: editMode -->
+ <button data-bind="i18n: 'Edit Fields', click: toggleEditMode"></button>
+ <!-- /ko -->
</div>
+<!-- ko if: editMode -->
<input type="hidden" data-bind="attr: { name: getEmptyName() }" value="" />
+<!-- /ko -->
From 07bd8ffa4e22989c059525d6eb46db681c76ae2b Mon Sep 17 00:00:00 2001
From: Damir Korpar <[email protected]>
Date: Fri, 13 Dec 2019 13:01:55 +0100
Subject: [PATCH 2/3] VRTX-702 Editing each flex field individually
---
view/adminhtml/web/css/source/_module.less | 13 +++
.../web/js/model/flex-field-table.js | 92 ++++++++-----------
.../web/template/flex-field-table.html | 25 ++---
3 files changed, 59 insertions(+), 71 deletions(-)
diff --git a/view/adminhtml/web/css/source/_module.less b/view/adminhtml/web/css/source/_module.less
index 08ee97ed..603bb61b 100644
--- a/view/adminhtml/web/css/source/_module.less
+++ b/view/adminhtml/web/css/source/_module.less
@@ -39,6 +39,19 @@
transform: rotate(180deg);
}
}
+ .admin__control-table {
+ .field-edit {
+ color: @color-very-dark-gray-black;
+ text-decoration: none;
+ cursor: pointer;
+ }
+ .icon-edit:before {
+ &:extend(.abs-icon all);
+ content: @data-grid-row-changed__icon;
+ font-size: 1.6rem;
+ padding-left: 5px;
+ }
+ }
}
.vertex__comment-field-type {
diff --git a/view/adminhtml/web/js/model/flex-field-table.js b/view/adminhtml/web/js/model/flex-field-table.js
index 4a356282..997ec9ae 100644
--- a/view/adminhtml/web/js/model/flex-field-table.js
+++ b/view/adminhtml/web/js/model/flex-field-table.js
@@ -18,19 +18,15 @@ define([
tableId: '',
template: 'Vertex_Tax/flex-field-table',
editMode: false,
+ defaultPlaceholder: 'No Data',
selectOptions: [
{
label: 'No Data',
value: 'none'
}
- ],
- tracks: {
- editMode: true,
- isEmpty: true
- }
+ ]
},
retrieveFields: [],
- hasFields: false,
/**
* Initializes the table
@@ -57,33 +53,11 @@ define([
fieldId = this.values[i]['field_id'];
name = this.fieldType + 'FlexField' + fieldId;
- toLayOut.push({
- component: 'Vertex_Tax/js/form/flex-field-select',
- template: 'ui/grid/filters/elements/ui-select',
- parent: this.name,
- name: name,
- dataScope: '',
- multiple: false,
- selectType: 'optgroup',
- selectedPlaceholders: {
- defaultPlaceholder: 'No Data'
- },
- showOpenLevelsActionIcon: true,
- presets: {
- optgroup: {
- showOpenLevelsActionIcon: true
- }
- },
- filterOptions: true,
- isDisplayMissingValuePlaceholder: true,
- options: this.selectOptions,
- value: fieldSource
- });
-
this.retrieveFields.push({
fieldId: fieldId,
fieldSource: fieldSource,
fieldLabel: this.getFieldLabelFromSource(fieldSource),
+ editMode: ko.observable(false),
childName: name
});
}
@@ -92,6 +66,39 @@ define([
layout(toLayOut);
},
+ /**
+ * Replace the label value with a dropdown
+ * @param {Object} child
+ */
+ enableEditMode: function (child) {
+ child.editMode(true);
+
+ var toLayOut = {
+ component: 'Vertex_Tax/js/form/flex-field-select',
+ template: 'ui/grid/filters/elements/ui-select',
+ parent: this.name,
+ name: child.childName,
+ dataScope: '',
+ multiple: false,
+ selectType: 'optgroup',
+ selectedPlaceholders: {
+ defaultPlaceholder: this.defaultPlaceholder
+ },
+ showOpenLevelsActionIcon: true,
+ presets: {
+ optgroup: {
+ showOpenLevelsActionIcon: true
+ }
+ },
+ filterOptions: true,
+ isDisplayMissingValuePlaceholder: true,
+ options: this.selectOptions,
+ value: child.fieldSource
+ };
+
+ layout([toLayOut]);
+ },
+
/**
* Retrieve the name for a Field ID input
*
@@ -122,7 +129,7 @@ define([
}
}
}
- return '';
+ return this.defaultPlaceholder;
},
/**
@@ -140,31 +147,6 @@ define([
*/
getEmptyName: function () {
return this.elementName + '[__empty]';
- },
-
- /**
- * Returns if there are any flexible fields selected
- * @returns {Boolean}
- */
- isEmpty: function () {
- var i, fieldSource;
-
- for (i in this.retrieveFields()) {
- fieldSource = this.retrieveFields()[i].fieldSource;
-
- if (fieldSource && fieldSource !== 'none') {
- return false;
- }
- }
- return true;
- },
-
- /**
- * Toggles edit mode
- * @returns {Boolean}
- */
- toggleEditMode: function (e) {
- this.editMode = !this.editMode;
}
});
});
diff --git a/view/adminhtml/web/template/flex-field-table.html b/view/adminhtml/web/template/flex-field-table.html
index 9480c481..0761ca61 100644
--- a/view/adminhtml/web/template/flex-field-table.html
+++ b/view/adminhtml/web/template/flex-field-table.html
@@ -5,7 +5,6 @@
*/
-->
<div class="admin__control-table-wrapper admin__control-flexfield-table">
- <!-- ko if: editMode || !isEmpty() -->
<table class="admin__control-table">
<thead>
<tr>
@@ -15,37 +14,31 @@
</thead>
<tbody>
<!-- ko foreach: retrieveFields -->
- <!-- ko if: $parent.editMode || !$parent.editMode && fieldSource-->
<tr>
<td>
- <!-- ko if: $parent.editMode -->
<input type="hidden"
data-bind="attr: { name: $parent.getFieldIdInputName(fieldId) }, value: fieldId"/>
- <!-- /ko -->
<span data-bind="text: fieldId"></span>
</td>
<td>
- <!-- ko if: $parent.editMode -->
- <input type="hidden"
- data-bind="attr: { name: $parent.getFieldValueInputName(fieldId) }, value: $parent.getChild(childName) ? $parent.getChild(childName).value : ''"/>
+ <input type="hidden"
+ data-bind="attr: { name: $parent.getFieldValueInputName(fieldId) }, value: $parent.getChild(childName) ? $parent.getChild(childName).value : fieldSource"/>
+
+ <!-- ko if: editMode() -->
<!-- ko with: $parent.getChild(childName) -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->
<!-- /ko -->
- <!-- ko ifnot: $parent.editMode -->
- <p data-bind="text: fieldLabel"></p>
+ <!-- ko ifnot: editMode() -->
+ <a class="field-edit" data-bind="click: $parent.enableEditMode.bind($parent)">
+ <span data-bind="text: fieldLabel"></span>
+ <span class="icon-edit" data-bind="title: $t('Edit')"></span>
+ </a>
<!-- /ko -->
</td>
</tr>
- <!-- /ko -->
<!-- /ko -->
</tbody>
</table>
- <!-- /ko -->
- <!-- ko ifnot: editMode -->
- <button data-bind="i18n: 'Edit Fields', click: toggleEditMode"></button>
- <!-- /ko -->
</div>
-<!-- ko if: editMode -->
<input type="hidden" data-bind="attr: { name: getEmptyName() }" value="" />
-<!-- /ko -->
From eaffe4a54ea630f93a7f7ef21c428fd1e2c9565c Mon Sep 17 00:00:00 2001
From: Damir Korpar <[email protected]>
Date: Fri, 13 Dec 2019 16:03:20 +0100
Subject: [PATCH 3/3] VRTX-702 Code cleanup
---
view/adminhtml/web/js/model/flex-field-table.js | 7 ++-----
1 file changed, 2 insertions(+), 5 deletions(-)
diff --git a/view/adminhtml/web/js/model/flex-field-table.js b/view/adminhtml/web/js/model/flex-field-table.js
index 997ec9ae..1ea30722 100644
--- a/view/adminhtml/web/js/model/flex-field-table.js
+++ b/view/adminhtml/web/js/model/flex-field-table.js
@@ -17,7 +17,6 @@ define([
fieldType: '', // One of code, numeric, or date
tableId: '',
template: 'Vertex_Tax/flex-field-table',
- editMode: false,
defaultPlaceholder: 'No Data',
selectOptions: [
{
@@ -73,7 +72,7 @@ define([
enableEditMode: function (child) {
child.editMode(true);
- var toLayOut = {
+ layout([{
component: 'Vertex_Tax/js/form/flex-field-select',
template: 'ui/grid/filters/elements/ui-select',
parent: this.name,
@@ -94,9 +93,7 @@ define([
isDisplayMissingValuePlaceholder: true,
options: this.selectOptions,
value: child.fieldSource
- };
-
- layout([toLayOut]);
+ }]);
},
/**
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment