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

view

Browse Source
This commit is contained in:
Lone Iversen
2024-04-10 15:47:49 +02:00
parent 2810ab6f20
commit df6a7d7829
5 changed files with 356 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/property-dataset-context/document-blueprint-property-dataset-context.ts
View File

@@ -50,6 +50,7 @@ export class UmbDocumentBlueprintPropertyDataContext
constructor(host: UmbControllerHost, workspace: UmbDocumentBlueprintWorkspaceContext, variantId?: UmbVariantId) {
// The controller alias, is a very generic name cause we want only one of these for this controller host.
super(host, UMB_PROPERTY_DATASET_CONTEXT);
this.#workspace = workspace;
this.#variantId = variantId ?? UmbVariantId.CreateInvariant();

29
src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/manifests.ts
View File

@@ -1,6 +1,10 @@
import { UMB_DOCUMENT_BLUEPRINT_ENTITY_TYPE } from '../entity.js';
import { UmbSaveWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
import type { ManifestWorkspace, ManifestWorkspaceActions } from '@umbraco-cms/backoffice/extension-registry';
import type {
ManifestWorkspace,
ManifestWorkspaceActions,
ManifestWorkspaceView,
} from '@umbraco-cms/backoffice/extension-registry';
export const UMB_DOCUMENT_BLUEPRINT_WORKSPACE_ALIAS = 'Umb.Workspace.DocumentBlueprint';
@@ -15,6 +19,27 @@ const workspace: ManifestWorkspace = {
},
};
const workspaceViews: Array<ManifestWorkspaceView> = [
{
type: 'workspaceView',
alias: 'Umb.WorkspaceView.DocumentBlueprint.Edit',
name: 'Document Blueprint Workspace Edit View',
element: () => import('./views/edit/document-blueprint-workspace-view-edit.element.js'),
weight: 200,
meta: {
label: '#general_content',
pathname: 'content',
icon: 'document',
},
conditions: [
{
alias: 'Umb.Condition.WorkspaceAlias',
match: workspace.alias,
},
],
},
];
const workspaceActions: Array<ManifestWorkspaceActions> = [
{
type: 'workspaceAction',
@@ -37,4 +62,4 @@ const workspaceActions: Array<ManifestWorkspaceActions> = [
},
];
export const manifests = [workspace, ...workspaceActions];
export const manifests = [workspace, ...workspaceViews, ...workspaceActions];

71
src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/views/edit/document-blueprint-workspace-view-edit-properties.element.ts Normal file
View File

@@ -0,0 +1,71 @@
import { UMB_DOCUMENT_BLUEPRINT_WORKSPACE_CONTEXT } from '../../document-blueprint-workspace.context-token.js';
import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
import { UmbContentTypePropertyStructureHelper } from '@umbraco-cms/backoffice/content-type';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UmbDocumentTypeDetailModel } from '@umbraco-cms/backoffice/document-type';
@customElement('umb-document-blueprint-workspace-view-edit-properties')
export class UmbDocumentBlueprintWorkspaceViewEditPropertiesElement extends UmbLitElement {
@property({ type: String, attribute: 'container-id', reflect: false })
public get containerId(): string | null | undefined {
return this.#propertyStructureHelper.getContainerId();
}
public set containerId(value: string | null | undefined) {
this.#propertyStructureHelper.setContainerId(value);
}
#propertyStructureHelper = new UmbContentTypePropertyStructureHelper<UmbDocumentTypeDetailModel>(this);
@state()
_propertyStructure?: Array<UmbPropertyTypeModel>;
constructor() {
super();
this.consumeContext(UMB_DOCUMENT_BLUEPRINT_WORKSPACE_CONTEXT, (workspaceContext) => {
this.#propertyStructureHelper.setStructureManager(workspaceContext.structure);
});
this.observe(
this.#propertyStructureHelper.propertyStructure,
(propertyStructure) => {
this._propertyStructure = propertyStructure;
},
null,
);
}
render() {
return this._propertyStructure
? 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 UmbDocumentBlueprintWorkspaceViewEditPropertiesElement;
declare global {
interface HTMLElementTagNameMap {
'umb-document-blueprint-workspace-view-edit-properties': UmbDocumentBlueprintWorkspaceViewEditPropertiesElement;
}
}

88
src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/views/edit/document-blueprint-workspace-view-edit-tab.element.ts Normal file
View File

@@ -0,0 +1,88 @@
import { UMB_DOCUMENT_BLUEPRINT_WORKSPACE_CONTEXT } from '../../document-blueprint-workspace.context-token.js';
import { css, html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import type { UmbPropertyTypeContainerModel } from '@umbraco-cms/backoffice/content-type';
import { UmbContentTypeContainerStructureHelper } from '@umbraco-cms/backoffice/content-type';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import './document-blueprint-workspace-view-edit-properties.element.js';
@customElement('umb-document-blueprint-workspace-view-edit-tab')
export class UmbDocumentBlueprintWorkspaceViewEditTabElement extends UmbLitElement {
@property({ type: String })
public get containerId(): string | null | undefined {
return this._containerId;
}
public set containerId(value: string | null | undefined) {
this._containerId = value;
this.#groupStructureHelper.setContainerId(value);
}
@state()
private _containerId?: string | null;
#groupStructureHelper = new UmbContentTypeContainerStructureHelper<any>(this);
@state()
_groups: Array<UmbPropertyTypeContainerModel> = [];
@state()
_hasProperties = false;
constructor() {
super();
this.consumeContext(UMB_DOCUMENT_BLUEPRINT_WORKSPACE_CONTEXT, (workspaceContext) => {
this.#groupStructureHelper.setStructureManager(workspaceContext.structure);
});
this.observe(this.#groupStructureHelper.mergedContainers, (groups) => {
this._groups = groups;
});
this.observe(this.#groupStructureHelper.hasProperties, (hasProperties) => {
this._hasProperties = hasProperties;
});
}
render() {
return html`
${this._hasProperties
? html`
<uui-box>
<umb-document-blueprint-workspace-view-edit-properties
class="properties"
.containerId=${this._containerId}></umb-document-blueprint-workspace-view-edit-properties>
</uui-box>
`
: ''}
${repeat(
this._groups,
(group) => group.id,
(group) =>
html`<uui-box .headline=${group.name ?? ''}>
<umb-document-blueprint-workspace-view-edit-properties
class="properties"
.containerId=${group.id}></umb-document-blueprint-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 UmbDocumentBlueprintWorkspaceViewEditTabElement;
declare global {
interface HTMLElementTagNameMap {
'umb-document-blueprint-workspace-view-edit-tab': UmbDocumentBlueprintWorkspaceViewEditTabElement;
}
}

169
src/Umbraco.Web.UI.Client/src/packages/documents/document-blueprints/workspace/views/edit/document-blueprint-workspace-view-edit.element.ts Normal file
View File

@@ -0,0 +1,169 @@
import { UMB_DOCUMENT_BLUEPRINT_WORKSPACE_CONTEXT } from '../../document-blueprint-workspace.context-token.js';
import type { UmbDocumentBlueprintWorkspaceViewEditTabElement } from './document-blueprint-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 type { UmbPropertyTypeContainerModel } from '@umbraco-cms/backoffice/content-type';
import { UmbContentTypeContainerStructureHelper } from '@umbraco-cms/backoffice/content-type';
import type { UmbRoute, UmbRouterSlotChangeEvent, UmbRouterSlotInitEvent } from '@umbraco-cms/backoffice/router';
import { encodeFolderName } from '@umbraco-cms/backoffice/router';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
@customElement('umb-document-blueprint-workspace-view-edit')
export class UmbDocumentBlueprintWorkspaceViewEditElement extends UmbLitElement implements UmbWorkspaceViewElement {
//@state()
//private _hasRootProperties = false;
@state()
private _hasRootGroups = false;
@state()
private _routes: UmbRoute[] = [];
@state()
private _tabs?: Array<UmbPropertyTypeContainerModel>;
@state()
private _routerPath?: string;
@state()
private _activePath = '';
private _workspaceContext?: typeof UMB_DOCUMENT_BLUEPRINT_WORKSPACE_CONTEXT.TYPE;
private _tabsStructureHelper = new UmbContentTypeContainerStructureHelper<any>(this);
constructor() {
super();
this._tabsStructureHelper.setIsRoot(true);
this._tabsStructureHelper.setContainerChildType('Tab');
this.observe(
this._tabsStructureHelper.mergedContainers,
(tabs) => {
this._tabs = tabs;
this._createRoutes();
},
null,
);
// _hasRootProperties can be gotten via _tabsStructureHelper.hasProperties. But we do not support root properties currently.
this.consumeContext(UMB_DOCUMENT_BLUEPRINT_WORKSPACE_CONTEXT, (workspaceContext) => {
this._workspaceContext = workspaceContext;
this._tabsStructureHelper.setStructureManager(workspaceContext.structure);
this._observeRootGroups();
});
}
private _observeRootGroups() {
if (!this._workspaceContext) return;
this.observe(
this._workspaceContext.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('./document-blueprint-workspace-view-edit-tab.element.js'),
setup: (component) => {
(component as UmbDocumentBlueprintWorkspaceViewEditTabElement).containerId = tab.id;
},
});
});
}
if (this._hasRootGroups) {
routes.push({
path: '',
component: () => import('./document-blueprint-workspace-view-edit-tab.element.js'),
setup: (component) => {
(component as UmbDocumentBlueprintWorkspaceViewEditTabElement).containerId = 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 UmbDocumentBlueprintWorkspaceViewEditElement;
declare global {
interface HTMLElementTagNameMap {
'umb-document-blueprint-workspace-view-edit': UmbDocumentBlueprintWorkspaceViewEditElement;
}
}