diff --git a/client/web/compose/src/components/PageBlocks/TabsBase.vue b/client/web/compose/src/components/PageBlocks/TabsBase.vue index be02b4508..ff7aeb939 100644 --- a/client/web/compose/src/components/PageBlocks/TabsBase.vue +++ b/client/web/compose/src/components/PageBlocks/TabsBase.vue @@ -2,6 +2,7 @@
+ + import('corteza-webapp-compose/src/components/PageBlocks'), }, + extends: base, computed: { @@ -129,6 +168,17 @@ export default { }, methods: { + editTabbedBlock (tab) { + const blockIndex = this.blocks.findIndex(block => fetchID(block) === tab.block.blockID) + if (blockIndex > -1) { + this.$emit('edit-block', blockIndex) + } + }, + + deleteTab (tabIndex) { + this.$emit('delete-tab', { tabIndex, blockIndex: this.blockIndex }) + }, + getTitleItemClass (index) { const { justify, alignment } = this.block.options.style return `order-${index} text-truncate text-${alignment} ${justify !== 'none' ? 'flex-fill' : ''}` @@ -146,3 +196,11 @@ export default { }, } + + diff --git a/client/web/compose/src/components/PageBlocks/base.vue b/client/web/compose/src/components/PageBlocks/base.vue index 148baa307..31b0178ca 100644 --- a/client/web/compose/src/components/PageBlocks/base.vue +++ b/client/web/compose/src/components/PageBlocks/base.vue @@ -72,6 +72,11 @@ export default { required: false, default: false, }, + + unsavedBlocks: { + type: Set, + default: () => new Set(), + }, }, data () { diff --git a/client/web/compose/src/views/Admin/Pages/Builder.vue b/client/web/compose/src/views/Admin/Pages/Builder.vue index 8c289cc35..74f5e1ece 100644 --- a/client/web/compose/src/views/Admin/Pages/Builder.vue +++ b/client/web/compose/src/views/Admin/Pages/Builder.vue @@ -151,8 +151,11 @@ :module="module" :record="record" :resizing="resizing" + :unsaved-blocks="unsavedBlocks" editable class="p-2" + @edit-block="editBlock" + @delete-tab="deleteTab" />
@@ -613,6 +616,17 @@ export default { if (this.editor) this.editor = undefined }, + deleteTab ({ blockIndex, tabIndex }) { + const { blockID } = this.blocks[blockIndex] || {} + + if (!blockID) return + + this.unsavedBlocks.add(blockID) + this.blocks[blockIndex].options.tabs.splice(tabIndex, 1) + + this.showUntabbedHiddenBlocks() + }, + // Changes meta.hidden property to false, for all blocks that are hidden but not in a tab showUntabbedHiddenBlocks () { const tabbedBlocks = new Set() @@ -678,7 +692,7 @@ export default { tabbedBlock.meta.hidden = true }) - this.showUnusedHiddenBlocks() + this.showUntabbedHiddenBlocks() } if (this.editor.block.kind === block.kind) { @@ -686,27 +700,6 @@ export default { } }, - showUnusedHiddenBlocks () { - const allTabBlocks = this.blocks.filter(({ kind }) => kind === 'Tabs') - - this.blocks.forEach(block => { - if (!block.meta.hidden) return - - const hiddenBlockID = fetchID(block) - - // Go through all hidden blocks to see if they are tabbed anywhere - const tabbed = allTabBlocks.some(({ options }) => { - const { tabs = [] } = options - return tabs.some(({ blockID }) => blockID === hiddenBlockID) - }) - - if (!tabbed) { - this.calculateNewBlockPosition(block) - block.meta.hidden = false - } - }) - }, - cloneBlock (index) { this.appendBlock(this.blocks[index].clone(), this.$t('notification:page.cloneSuccess')) }, diff --git a/locale/en/corteza-webapp-compose/block.yaml b/locale/en/corteza-webapp-compose/block.yaml index 720056ddf..ddad8f15e 100644 --- a/locale/en/corteza-webapp-compose/block.yaml +++ b/locale/en/corteza-webapp-compose/block.yaml @@ -798,6 +798,7 @@ tabs: displayTitle: Display Options preview: Live example newBlockModal: Add new block + unsavedChanges: Unsaved Changes placeholder: block: Select a block to tab style: