From 8ff9c94936e71bc1f1f1e89cb7b93a01da4ebd27 Mon Sep 17 00:00:00 2001 From: Yuri Kuznetsov Date: Sun, 17 Jul 2022 11:08:51 +0300 Subject: [PATCH] tabs improvements --- client/res/templates/record/detail.tpl | 2 +- client/res/templates/record/edit.tpl | 2 +- client/src/views/record/base.js | 1 + client/src/views/record/detail.js | 140 ++++++++++++++++++++++--- 4 files changed, 131 insertions(+), 14 deletions(-) diff --git a/client/res/templates/record/detail.tpl b/client/res/templates/record/detail.tpl index eb1b63f9f3..a3b64feffd 100644 --- a/client/res/templates/record/detail.tpl +++ b/client/res/templates/record/detail.tpl @@ -94,7 +94,7 @@
{{#each middleTabDataList}} {{/each}} diff --git a/client/res/templates/record/edit.tpl b/client/res/templates/record/edit.tpl index 21fb097dd5..65a9cd3fb9 100644 --- a/client/res/templates/record/edit.tpl +++ b/client/res/templates/record/edit.tpl @@ -44,7 +44,7 @@
{{#each middleTabDataList}} {{/each}} diff --git a/client/src/views/record/base.js b/client/src/views/record/base.js index ec2b31805f..34ea21ea11 100644 --- a/client/src/views/record/base.js +++ b/client/src/views/record/base.js @@ -566,6 +566,7 @@ function (Dep, ViewRecordHelper, DynamicLogic, _) { throw new Error('Model has not been injected into record view.'); } + /** @type {module:view-record-helper.Class} */ this.recordHelper = new ViewRecordHelper(); this.once('remove', () => { diff --git a/client/src/views/record/detail.js b/client/src/views/record/detail.js index 18ae9060c0..778bedabf3 100644 --- a/client/src/views/record/detail.js +++ b/client/src/views/record/detail.js @@ -372,6 +372,18 @@ function (Dep, ViewRecordHelper, ActionItemSetup) { */ currentMiddleTab: 0, + /** + * @protected + * @type {Object.|null} + */ + middlePanelDefs: null, + + /** + * @protected + * @type {Object.[]|null} + */ + middlePanelDefsList: null, + /** * @inheritDoc */ @@ -877,6 +889,10 @@ function (Dep, ViewRecordHelper, ActionItemSetup) { } this.recordHelper.setPanelStateParam(name, 'hidden', false); + + if (this.middlePanelDefs[name]) { + this.controlMiddleTabVisibilityShow(this.middlePanelDefs[name].tabNumber); + } }, /** @@ -947,6 +963,11 @@ function (Dep, ViewRecordHelper, ActionItemSetup) { } this.recordHelper.setPanelStateParam(name, 'hidden', true); + + + if (this.middlePanelDefs[name]) { + this.controlMiddleTabVisibilityHide(this.middlePanelDefs[name].tabNumber); + } }, afterRender: function () { @@ -1406,9 +1427,7 @@ function (Dep, ViewRecordHelper, ActionItemSetup) { throw new Error('Model has not been injected into record view.'); } - /** - * @inheritDoc - */ + /** @type {module:view-record-helper.Class} */ this.recordHelper = new ViewRecordHelper(this.defaultFieldStates, this.defaultFieldStates); this._initInlineEditSave(); @@ -1428,6 +1447,12 @@ function (Dep, ViewRecordHelper, ActionItemSetup) { } } + /** @type {Object.|null} */ + this.middlePanelDefs = {}; + + /** @type {Object.[]} */ + this.middlePanelDefsList = []; + if (this.getUser().isPortal() && !this.portalLayoutDisabled) { if ( this.getMetadata().get( @@ -2444,16 +2469,20 @@ function (Dep, ViewRecordHelper, ActionItemSetup) { } } - panel.name = item.name || null; + panel.name = item.name || 'panel-' + p.toString(); panel.style = item.style || 'default'; panel.rows = []; panel.tabNumber = tabNumber; - if (item.dynamicLogicVisible || item.dynamicLogicStyled) { - if (!panel.name) { - panel.name = 'panel-' + p.toString(); - } - } + this.middlePanelDefs[panel.name] = { + name: panel.name, + style: panel.style, + tabNumber: panel.tabNumber, + tabBreak: tabBreak, + tabLabel: item.tabLabel, + }; + + this.middlePanelDefsList.push(this.middlePanelDefs[panel.name]); if (item.dynamicLogicVisible && this.dynamicLogic) { this.dynamicLogic.addPanelVisibleCondition(panel.name, item.dynamicLogicVisible); @@ -2465,7 +2494,6 @@ function (Dep, ViewRecordHelper, ActionItemSetup) { if (item.hidden && tabNumber === 0) { panel.hidden = true; - panel.name = panel.name || 'panel-' + p.toString(); this.hidePanel(panel.name); @@ -2920,21 +2948,49 @@ function (Dep, ViewRecordHelper, ActionItemSetup) { }); }, + /** + * @protected + * @return {Number} + */ + getMiddleTabCount: function () { + if (!this.hasMiddleTabs()) { + return 0; + } + + let count = 1; + + (this.detailLayout || []).forEach(item => { + if (item.tabBreak) { + count ++; + } + }); + + return count; + }, + /** * @protected * @return {boolean} */ hasMiddleTabs: function () { + if (typeof this._hasMiddleTabs !== 'undefined') { + return this._hasMiddleTabs; + } + if (!this.detailLayout) { return false; } for (let item of this.detailLayout) { if (item.tabBreak) { + this._hasMiddleTabs = true; + return true; } } + this._hasMiddleTabs = false; + return false; }, @@ -2945,11 +3001,21 @@ function (Dep, ViewRecordHelper, ActionItemSetup) { getMiddleTabDataList: function () { let currentTab = this.currentMiddleTab; - return (this.detailLayout || []) + let panelDataList = this.middlePanelDefsList; + + return panelDataList .filter((item, i) => i === 0 || item.tabBreak) .map((item, i) => { let label = item.tabLabel; + let hidden = false; + + if (i > 0) { + hidden = panelDataList + .filter(panel => panel.tabNumber === i) + .findIndex(panel => !this.recordHelper.getPanelStateParam(panel.name, 'hidden')) === -1; + } + if (!label) { label = i === 0 ? this.translate('Overview') : @@ -2962,6 +3028,7 @@ function (Dep, ViewRecordHelper, ActionItemSetup) { return { label: label, isActive: currentTab === i, + hidden: hidden, }; }); }, @@ -3021,7 +3088,7 @@ function (Dep, ViewRecordHelper, ActionItemSetup) { let $tabs = this.$el.find('.middle-tabs'); tabList.forEach(tab => { - let $tab = $tabs.find(`> [data-tab=${tab.toString()}]`); + let $tab = $tabs.find(`> [data-tab="${tab.toString()}"]`); $tab.addClass('invalid'); @@ -3030,5 +3097,54 @@ function (Dep, ViewRecordHelper, ActionItemSetup) { }); }) }, + + /** + * @private + */ + controlMiddleTabVisibilityShow: function (tab) { + if (!this.hasMiddleTabs() || tab === 0) { + return; + } + + if (this.isBeingRendered()) { + this.once('after:render', () => this.controlMiddleTabVisibilityShow(tab)); + + return; + } + + this.$el.find(`.middle-tabs > [data-tab="${tab.toString()}"]`).removeClass('hidden'); + }, + + /** + * @private + */ + controlMiddleTabVisibilityHide: function (tab) { + if (!this.hasMiddleTabs() || tab === 0) { + return; + } + + if (this.isBeingRendered()) { + this.once('after:render', () => this.controlMiddleTabVisibilityHide(tab)); + + return; + } + + let panelList = this.middlePanelDefsList.filter(panel => panel.tabNumber === tab); + + let allIsHidden = panelList + .findIndex(panel => !this.recordHelper.getPanelStateParam(panel.name, 'hidden')) === -1; + + if (!allIsHidden) { + return; + } + + let $tab = this.$el.find(`.middle-tabs > [data-tab="${tab.toString()}"]`); + + $tab.addClass('hidden'); + + if (this.currentMiddleTab === tab) { + this.selectMiddleTab(0); + } + } }); });