yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

workspace views

Browse Source
This commit is contained in:
Niels Lyngsø
2024-01-16 12:31:57 +01:00
parent 0939c10f2b
commit 5f295991e5
5 changed files with 374 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace-editor.element.ts
View File

@@ -24,7 +24,7 @@ export class UmbBlockWorkspaceEditorElement extends UmbLitElement {
this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (instance) => {
this.#workspaceContext = instance;
this.#workspaceContext?.createPropertyDatasetContext(this);
this.#workspaceContext?.content.createPropertyDatasetContext(this);
});
}

18
src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/manifests.ts
View File

@@ -31,4 +31,22 @@ export const manifests: Array<ManifestTypes> = [
entityType: 'block',
},
},
{
type: 'workspaceView',
alias: 'Umb.WorkspaceView.Block.Content',
name: 'Block Workspace Content View',
js: () => import('./views/edit/block-workspace-view-edit.element.js'),
weight: 1000,
meta: {
label: 'Content',
pathname: 'content',
icon: 'icon-document',
},
conditions: [
{
alias: 'Umb.Condition.WorkspaceAlias',
match: UMB_BLOCK_WORKSPACE_ALIAS,
},
],
},
];

72
src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-properties.element.ts Normal file
View File

@@ -0,0 +1,72 @@
import { UMB_BLOCK_WORKSPACE_CONTEXT } from '../../block-workspace.context.js';
import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbContentTypePropertyStructureHelper, PropertyContainerTypes } from '@umbraco-cms/backoffice/content-type';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { PropertyTypeModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
@customElement('umb-block-workspace-view-edit-properties')
export class UmbBlockWorkspaceViewEditPropertiesElement extends UmbLitElement {
@property({ type: String, attribute: 'container-name', reflect: false })
public get containerName(): string | undefined {
return this._propertyStructureHelper.getContainerName();
}
public set containerName(value: string | undefined) {
this._propertyStructureHelper.setContainerName(value);
}
@property({ type: String, attribute: 'container-type', reflect: false })
public get containerType(): PropertyContainerTypes | undefined {
return this._propertyStructureHelper.getContainerType();
}
public set containerType(value: PropertyContainerTypes | undefined) {
this._propertyStructureHelper.setContainerType(value);
}
_propertyStructureHelper = new UmbContentTypePropertyStructureHelper(this);
@state()
_propertyStructure: Array<PropertyTypeModelBaseModel> = [];
constructor() {
super();
this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (workspaceContext) => {
this._propertyStructureHelper.setStructureManager(workspaceContext.content.structure);
});
this.observe(this._propertyStructureHelper.propertyStructure, (propertyStructure) => {
this._propertyStructure = propertyStructure;
});
}
render() {
return repeat(
this._propertyStructure,
(property) => property.alias,
(property) =>
html`<umb-property-type-based-property
class="property"
.property=${property}></umb-property-type-based-property> `,
);
}
static styles = [
UmbTextStyles,
css`
.property {
border-bottom: 1px solid var(--uui-color-divider);
}
.property:last-child {
border-bottom: 0;
}
`,
];
}
export default UmbBlockWorkspaceViewEditPropertiesElement;
declare global {
interface HTMLElementTagNameMap {
'umb-block-workspace-view-edit-properties': UmbBlockWorkspaceViewEditPropertiesElement;
}
}

112
src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit-tab.element.ts Normal file
View File

@@ -0,0 +1,112 @@
import { UMB_BLOCK_WORKSPACE_CONTEXT } from '../../block-workspace.context.js';
import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbContentTypeContainerStructureHelper } from '@umbraco-cms/backoffice/content-type';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { PropertyTypeContainerModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
import './block-workspace-view-edit-properties.element.js';
@customElement('umb-block-workspace-view-edit-tab')
export class UmbBlockWorkspaceViewEditTabElement extends UmbLitElement {
private _tabName?: string | undefined;
@property({ type: String })
public get tabName(): string | undefined {
return this._groupStructureHelper.getName();
}
public set tabName(value: string | undefined) {
if (value === this._tabName) return;
const oldValue = this._tabName;
this._tabName = value;
this._groupStructureHelper.setName(value);
this.requestUpdate('tabName', oldValue);
}
@property({ type: Boolean })
public get noTabName(): boolean {
return this._groupStructureHelper.getIsRoot();
}
public set noTabName(value: boolean) {
this._groupStructureHelper.setIsRoot(value);
}
private _ownerTabId?: string | null;
@property({ type: String })
public get ownerTabId(): string | null | undefined {
return this._ownerTabId;
}
public set ownerTabId(value: string | null | undefined) {
if (value === this._ownerTabId) return;
this._ownerTabId = value;
this._groupStructureHelper.setOwnerId(value);
}
_groupStructureHelper = new UmbContentTypeContainerStructureHelper(this);
@state()
_groups: Array<PropertyTypeContainerModelBaseModel> = [];
@state()
_hasProperties = false;
constructor() {
super();
this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (workspaceContext) => {
this._groupStructureHelper.setStructureManager(workspaceContext.content.structure);
});
this.observe(this._groupStructureHelper.containers, (groups) => {
this._groups = groups;
});
this.observe(this._groupStructureHelper.hasProperties, (hasProperties) => {
this._hasProperties = hasProperties;
});
}
render() {
return html`
${this._hasProperties
? html`
<uui-box>
<umb-block-workspace-view-edit-properties
class="properties"
container-type="Tab"
container-name=${this.tabName || ''}></umb-block-workspace-view-edit-properties>
</uui-box>
`
: ''}
${repeat(
this._groups,
(group) => group.name,
(group) =>
html`<uui-box .headline=${group.name || ''}>
<umb-block-workspace-view-edit-properties
class="properties"
container-type="Group"
container-name=${group.name || ''}></umb-block-workspace-view-edit-properties>
</uui-box>`,
)}
`;
}
static styles = [
UmbTextStyles,
css`
uui-box {
--uui-box-default-padding: 0 var(--uui-size-space-5);
}
uui-box:not(:first-child) {
margin-top: var(--uui-size-layout-1);
}
`,
];
}
export default UmbBlockWorkspaceViewEditTabElement;
declare global {
interface HTMLElementTagNameMap {
'umb-block-workspace-view-edit-tab': UmbBlockWorkspaceViewEditTabElement;
}
}

171
src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/views/edit/block-workspace-view-edit.element.ts Normal file
View File

@@ -0,0 +1,171 @@
import { UMB_BLOCK_WORKSPACE_CONTEXT } from '../../block-workspace.context.js';
import type { UmbBlockWorkspaceViewEditTabElement } from './block-workspace-view-edit-tab.element.js';
import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbContentTypeContainerStructureHelper } from '@umbraco-cms/backoffice/content-type';
import {
encodeFolderName,
UmbRoute,
UmbRouterSlotChangeEvent,
UmbRouterSlotInitEvent,
} from '@umbraco-cms/backoffice/router';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { PropertyTypeContainerModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
import { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
@customElement('umb-block-workspace-view-edit')
export class UmbBlockWorkspaceViewEditElement extends UmbLitElement implements UmbWorkspaceViewElement {
//private _hasRootProperties = false;
private _hasRootGroups = false;
@state()
private _routes: UmbRoute[] = [];
@state()
_tabs?: Array<PropertyTypeContainerModelBaseModel>;
@state()
private _routerPath?: string;
@state()
private _activePath = '';
private _workspaceContext?: typeof UMB_BLOCK_WORKSPACE_CONTEXT.TYPE;
private _tabsStructureHelper = new UmbContentTypeContainerStructureHelper(this);
constructor() {
super();
this._tabsStructureHelper.setIsRoot(true);
this._tabsStructureHelper.setContainerChildType('Tab');
this.observe(this._tabsStructureHelper.containers, (tabs) => {
this._tabs = tabs;
this._createRoutes();
});
// _hasRootProperties can be gotten via _tabsStructureHelper.hasProperties. But we do not support root properties currently.
this.consumeContext(UMB_BLOCK_WORKSPACE_CONTEXT, (workspaceContext) => {
this._workspaceContext = workspaceContext;
this._tabsStructureHelper.setStructureManager(workspaceContext.content.structure);
this._observeRootGroups();
});
}
private _observeRootGroups() {
if (!this._workspaceContext) return;
this.observe(
this._workspaceContext.content.structure.hasRootContainers('Group'),
(hasRootGroups) => {
this._hasRootGroups = hasRootGroups;
this._createRoutes();
},
'_observeGroups',
);
}
private _createRoutes() {
if (!this._tabs || !this._workspaceContext) return;
const routes: UmbRoute[] = [];
if (this._tabs.length > 0) {
this._tabs?.forEach((tab) => {
const tabName = tab.name ?? '';
routes.push({
path: `tab/${encodeFolderName(tabName).toString()}`,
component: () => import('./block-workspace-view-edit-tab.element.js'),
setup: (component) => {
(component as UmbBlockWorkspaceViewEditTabElement).tabName = tabName;
// TODO: Consider if we can link these more simple, and not parse this on.
// Instead have the structure manager looking at wether one of the OwnerALikecontainers is in the owner document.
(component as UmbBlockWorkspaceViewEditTabElement).ownerTabId =
this._workspaceContext?.content.structure.isOwnerContainer(tab.id!) ? tab.id : undefined;
},
});
});
}
if (this._hasRootGroups) {
routes.push({
path: '',
component: () => import('./block-workspace-view-edit-tab.element.js'),
setup: (component) => {
(component as UmbBlockWorkspaceViewEditTabElement).noTabName = true;
(component as UmbBlockWorkspaceViewEditTabElement).ownerTabId = null;
},
});
}
if (routes.length !== 0) {
routes.push({
path: '',
redirectTo: routes[0]?.path,
});
}
this._routes = routes;
}
render() {
if (!this._routes || !this._tabs) return;
return html`
<umb-body-layout header-fit-height>
${this._routerPath && (this._tabs.length > 1 || (this._tabs.length === 1 && this._hasRootGroups))
? html` <uui-tab-group slot="header">
${this._hasRootGroups && this._tabs.length > 0
? html`
<uui-tab
label="Content"
.active=${this._routerPath + '/' === this._activePath}
href=${this._routerPath + '/'}
>Content</uui-tab
>
`
: ''}
${repeat(
this._tabs,
(tab) => tab.name,
(tab) => {
const path = this._routerPath + '/tab/' + encodeFolderName(tab.name || '');
return html`<uui-tab label=${tab.name ?? 'Unnamed'} .active=${path === this._activePath} href=${path}
>${tab.name}</uui-tab
>`;
},
)}
</uui-tab-group>`
: ''}
<umb-router-slot
.routes=${this._routes}
@init=${(event: UmbRouterSlotInitEvent) => {
this._routerPath = event.target.absoluteRouterPath;
}}
@change=${(event: UmbRouterSlotChangeEvent) => {
this._activePath = event.target.absoluteActiveViewPath || '';
}}>
</umb-router-slot>
</umb-body-layout>
`;
}
static styles = [
UmbTextStyles,
css`
:host {
display: block;
height: 100%;
--uui-tab-background: var(--uui-color-surface);
}
`,
];
}
export default UmbBlockWorkspaceViewEditElement;
declare global {
interface HTMLElementTagNameMap {
'umb-block-workspace-view-edit': UmbBlockWorkspaceViewEditElement;
}
}