diff --git a/client/src/views/collapsed-modal-bar.js b/client/src/views/collapsed-modal-bar.js
index a996cdbc8b..31a17c529d 100644
--- a/client/src/views/collapsed-modal-bar.js
+++ b/client/src/views/collapsed-modal-bar.js
@@ -30,15 +30,19 @@ import View from 'view';
class CollapsedModalBar extends View {
- maxNumberToDisplay = 3
-
// language=Handlebars
templateContent = `
{{#each dataList}}
-
{{var key ../this}}
+ {{var key ../this}}
{{/each}}
`
+ /**
+ * @private
+ * @type {number}
+ */
+ maxNumberToDisplay = 3
+
data() {
return {
dataList: this.getDataList(),
@@ -60,10 +64,14 @@ class CollapsedModalBar extends View {
this.numberList = [];
}
+ /**
+ * @private
+ * @return {Record[]}
+ */
getDataList() {
const list = [];
- let numberList = Espo.Utils.clone(this.numberList);
+ let numberList = [...this.numberList];
if (this.numberList.length > this.maxNumberToDisplay) {
numberList = numberList.slice(this.numberList.length - this.maxNumberToDisplay);
@@ -82,6 +90,11 @@ class CollapsedModalBar extends View {
return list;
}
+ /**
+ * @private
+ * @param {string} title
+ * @return {number|null}
+ */
calculateDuplicateNumber(title) {
let duplicateNumber = 0;
@@ -104,41 +117,50 @@ class CollapsedModalBar extends View {
return duplicateNumber;
}
+ /**
+ * @param {number} number
+ * @return {import('views/modal').default|null}
+ */
getModalViewByNumber(number) {
const key = 'key-' + number;
return this.getView(key);
}
+ /**
+ * @param {import('views/modal').default} modalView
+ * @param {{title: string}} options
+ */
addModalView(modalView, options) {
const number = this.lastNumber;
this.numberList.push(this.lastNumber);
- const key = 'key-' + number;
+ const key = `key-${number}`;
this.createView(key, 'views/collapsed-modal', {
title: options.title,
duplicateNumber: this.calculateDuplicateNumber(options.title),
- selector: '[data-number="' + number + '"]',
+ selector: `[data-number="${number}"]`,
})
.then(view => {
- this.listenToOnce(view, 'close', () => {
- this.removeModalView(number);
- });
+ this.listenToOnce(view, 'close', () => this.removeModalView(number));
this.listenToOnce(view, 'expand', () => {
this.removeModalView(number, true);
// Use timeout to prevent DOM being updated after modal is re-rendered.
setTimeout(() => {
- const key = 'dialog-' + number;
+ const key = `dialog-${number}`;
this.setView(key, modalView);
modalView.setSelector(modalView.containerSelector);
- this.getView(key).render();
+ this.getView(key).render()
+ .then(() => {
+ modalView.trigger('after:expand');
+ });
}, 5);
});
@@ -148,7 +170,12 @@ class CollapsedModalBar extends View {
this.lastNumber++;
}
- removeModalView(number, noReRender) {
+ /**
+ *
+ * @param {number} number
+ * @param {boolean} [noReRender]
+ */
+ removeModalView(number, noReRender = false) {
const key = 'key-' + number;
const index = this.numberList.indexOf(number);
diff --git a/client/src/views/modal.js b/client/src/views/modal.js
index 30724d4011..9de33bb753 100644
--- a/client/src/views/modal.js
+++ b/client/src/views/modal.js
@@ -425,6 +425,8 @@ class ModalView extends View {
if (this.isCollapsable) {
this.addActionHandler('collapseModal', () => this.collapse());
}
+
+ this.on('after:expand', () => this.afterExpand());
}
setupFinal() {
@@ -1165,6 +1167,14 @@ class ModalView extends View {
return new Promise(resolve => resolve());
}
+ /**
+ * Called after expanding.
+ *
+ * @protected
+ * @since 9.1.0
+ */
+ afterExpand() {}
+
/** @private */
adjustButtons() {
this.adjustLeftButtons();