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();