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:
@@ -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
|
||||||
>`;
|
>`;
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user