Fix block list inline mode (#20745)

* Fix block list inline mode

https://github.com/umbraco/Umbraco-CMS/issues/20618

* Fixed potential runtime errors

* Code cleanup

* Fixed Code Health Review

* Revert some changes

Commented out unused state properties and related code.

* Remove commented-out state property in block workspace view

* fix localization

* no need for question mark after ids, they should be presented as required

---------

Co-authored-by: Niels Lyngsø <niels.lyngso@gmail.com>
Co-authored-by: Niels Lyngsø <nsl@umbraco.dk>
This commit is contained in:
Andrej Davidovic
2025-11-10 18:17:30 +02:00
committed by GitHub
parent ab51aac5c6
commit 9fa382e84d

View File

@@ -14,7 +14,7 @@ import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/workspace'
*/ */
@customElement('umb-block-workspace-view-edit-content-no-router') @customElement('umb-block-workspace-view-edit-content-no-router')
export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitElement implements UmbWorkspaceViewElement { export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitElement implements UmbWorkspaceViewElement {
//private _hasRootProperties = false; // private _hasRootProperties = false;
@state() @state()
private _hasRootGroups = false; private _hasRootGroups = false;
@@ -25,9 +25,6 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
@state() @state()
private _activeTabKey?: string | null | undefined; private _activeTabKey?: string | null | undefined;
//@state()
//private _activeTabName?: string | null | undefined;
#blockWorkspace?: typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE; #blockWorkspace?: typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE;
#tabsStructureHelper = new UmbContentTypeContainerStructureHelper(this); #tabsStructureHelper = new UmbContentTypeContainerStructureHelper(this);
@@ -67,46 +64,45 @@ export class UmbBlockWorkspaceViewEditContentNoRouterElement extends UmbLitEleme
#checkDefaultTabName() { #checkDefaultTabName() {
if (!this._tabs || !this.#blockWorkspace) return; if (!this._tabs || !this.#blockWorkspace) return;
// Find the default tab to grab: // Find the default tab to grab
if (this._activeTabKey === undefined) { if (this._activeTabKey === undefined) {
if (this._hasRootGroups) { if (this._hasRootGroups) {
//this._activeTabName = null;
this._activeTabKey = null; this._activeTabKey = null;
} else if (this._tabs.length > 0) { } else if (this._tabs.length > 0) {
//this._activeTabName = this._tabs[0].name; const tab = this._tabs[0];
this._activeTabKey = this._tabs[0].key; this._activeTabKey = tab.ownerId ?? tab.ids[0];
} }
} }
} }
#setTabName(tabName: string | undefined | null, tabKey: string | null | undefined) { #setTabKey(tabKey: string | null | undefined) {
//this._activeTabName = tabName;
this._activeTabKey = tabKey; this._activeTabKey = tabKey;
} }
override render() { override render() {
if (!this._tabs) return; if (!this._tabs) return;
return html` return html`
${this._tabs.length > 1 || (this._tabs.length === 1 && this._hasRootGroups) ${this._tabs.length > 1 || (this._tabs.length === 1 && this._hasRootGroups)
? html` <uui-tab-group slot="header"> ? html`<uui-tab-group slot="header">
${this._hasRootGroups && this._tabs.length > 0 ${this._hasRootGroups && this._tabs.length > 0
? html` ? html`<uui-tab
<uui-tab label=${this.localize.term('general_generic')}
label="Content" .active=${this._activeTabKey === null}
.active=${null === this._activeTabKey} @click=${() => this.#setTabKey(null)}
@click=${() => this.#setTabName(null, null)} >Content</uui-tab
>Content</uui-tab >`
>
`
: nothing} : nothing}
${repeat( ${repeat(
this._tabs, this._tabs,
(tab) => tab.name, (tab) => tab.name,
(tab) => { (tab) => {
const tabKey = tab.ownerId ?? tab.ids[0];
return html`<uui-tab return html`<uui-tab
label=${tab.name ?? 'Unnamed'} label=${this.localize.string(tab.name ?? '#general_unnamed')}
.active=${tab.key === this._activeTabKey} .active=${this._activeTabKey === tabKey}
@click=${() => this.#setTabName(tab.name, tab.key)} @click=${() => this.#setTabKey(tabKey)}
>${tab.name}</uui-tab >${tab.name}</uui-tab
>`; >`;
}, },