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

implement workspace contentEditor kind

Browse Source
This commit is contained in:
Niels Lyngsø
2024-04-15 12:41:31 +02:00
parent a32f619323
commit 67c44c5fcc
8 changed files with 2 additions and 636 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/manifests.ts
View File

@@ -39,9 +39,9 @@ const workspaceViews: Array<ManifestWorkspaceView> = [
},
{
type: 'workspaceView',
kind: 'contentEditor',
alias: 'Umb.WorkspaceView.Media.Edit',
name: 'Media Workspace Edit View',
js: () => import('./views/edit/media-workspace-view-edit.element.js'),
weight: 200,
meta: {
label: '#general_details',

64
src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/edit/media-workspace-view-edit-properties.element.ts
View File

@@ -1,64 +0,0 @@
import { UMB_MEDIA_WORKSPACE_CONTEXT } from '../../media-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';
@customElement('umb-media-workspace-view-edit-properties')
export class UmbMediaWorkspaceViewEditPropertiesElement extends UmbLitElement {
@property({ type: String, attribute: 'container-name', 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<any>(this);
@state()
_propertyStructure: Array<UmbPropertyTypeModel> = [];
constructor() {
super();
this.consumeContext(UMB_MEDIA_WORKSPACE_CONTEXT, (workspaceContext) => {
this._propertyStructureHelper.setStructureManager(workspaceContext.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 UmbMediaWorkspaceViewEditPropertiesElement;
declare global {
interface HTMLElementTagNameMap {
'umb-media-workspace-view-edit-properties': UmbMediaWorkspaceViewEditPropertiesElement;
}
}

87
src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/edit/media-workspace-view-edit-tab.element.ts
View File

@@ -1,87 +0,0 @@
import { UMB_MEDIA_WORKSPACE_CONTEXT } from '../../media-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 './media-workspace-view-edit-properties.element.js';
@customElement('umb-media-workspace-view-edit-tab')
export class UmbMediaWorkspaceViewEditTabElement 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_MEDIA_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-media-workspace-view-edit-properties
class="properties"
.containerId=${this._containerId}></umb-media-workspace-view-edit-properties>
</uui-box>
`
: ''}
${repeat(
this._groups,
(group) => group.name,
(group) =>
html`<uui-box .headline=${group.name || ''}>
<umb-media-workspace-view-edit-properties
class="properties"
.containerId=${group.id}></umb-media-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 UmbMediaWorkspaceViewEditTabElement;
declare global {
interface HTMLElementTagNameMap {
'umb-media-workspace-view-edit-tab': UmbMediaWorkspaceViewEditTabElement;
}
}

166
src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/edit/media-workspace-view-edit.element.ts
View File

@@ -1,166 +0,0 @@
import { UMB_MEDIA_WORKSPACE_CONTEXT } from '../../media-workspace.context-token.js';
import type { UmbMediaWorkspaceViewEditTabElement } from './media-workspace-view-edit-tab.element.js';
import { css, html, customElement, state, repeat, nothing } 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-media-workspace-view-edit')
export class UmbMediaWorkspaceViewEditElement 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_MEDIA_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();
});
// _hasRootProperties can be gotten via _tabsStructureHelper.hasProperties. But we do not support root properties currently.
this.consumeContext(UMB_MEDIA_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('./media-workspace-view-edit-tab.element.js'),
setup: (component) => {
(component as UmbMediaWorkspaceViewEditTabElement).containerId = tab.id;
},
});
});
}
if (this._hasRootGroups) {
routes.push({
path: '',
component: () => import('./media-workspace-view-edit-tab.element.js'),
setup: (component) => {
(component as UmbMediaWorkspaceViewEditTabElement).containerId = null;
},
});
}
if (routes.length !== 0) {
routes.push({
path: '',
redirectTo: routes[0]?.path,
});
}
this._routes = routes;
}
render() {
if (!this._routes || !this._tabs) return nothing;
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 UmbMediaWorkspaceViewEditElement;
declare global {
interface HTMLElementTagNameMap {
'umb-media-workspace-view-edit': UmbMediaWorkspaceViewEditElement;
}
}

2
src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/manifests.ts
View File

@@ -43,9 +43,9 @@ const workspaceActions: Array<ManifestWorkspaceActions> = [
export const workspaceViews: Array<ManifestWorkspaceView> = [
{
type: 'workspaceView',
kind: 'contentEditor',
alias: 'Umb.WorkspaceView.Member.Content',
name: 'Member Workspace Content View',
js: () => import('./views/content/member-workspace-view-content.element.js'),
weight: 100,
meta: {
label: '#general_details',

64
src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/views/content/member-workspace-view-content-properties.element.ts
View File

@@ -1,64 +0,0 @@
import { UMB_MEMBER_WORKSPACE_CONTEXT } from '../../member-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';
@customElement('umb-member-workspace-view-content-properties')
export class UmbMemberWorkspaceViewContentPropertiesElement extends UmbLitElement {
@property({ type: String, attribute: 'container-name', 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<any>(this);
@state()
_propertyStructure: Array<UmbPropertyTypeModel> = [];
constructor() {
super();
this.consumeContext(UMB_MEMBER_WORKSPACE_CONTEXT, (workspaceContext) => {
this._propertyStructureHelper.setStructureManager(workspaceContext.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 UmbMemberWorkspaceViewContentPropertiesElement;
declare global {
interface HTMLElementTagNameMap {
'umb-member-workspace-view-content-properties': UmbMemberWorkspaceViewContentPropertiesElement;
}
}

87
src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/views/content/member-workspace-view-content-tab.element.ts
View File

@@ -1,87 +0,0 @@
import { UMB_MEMBER_WORKSPACE_CONTEXT } from '../../member-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 './member-workspace-view-content-properties.element.js';
@customElement('umb-member-workspace-view-content-tab')
export class UmbMemberWorkspaceViewContentTabElement 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_MEMBER_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-member-workspace-view-content-properties
class="properties"
.containerId=${this._containerId}></umb-member-workspace-view-content-properties>
</uui-box>
`
: ''}
${repeat(
this._groups,
(group) => group.name,
(group) =>
html`<uui-box .headline=${group.name || ''}>
<umb-member-workspace-view-content-properties
class="properties"
.containerId=${group.id}></umb-member-workspace-view-content-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 UmbMemberWorkspaceViewContentTabElement;
declare global {
interface HTMLElementTagNameMap {
'umb-member-workspace-view-content-tab': UmbMemberWorkspaceViewContentTabElement;
}
}

166
src/Umbraco.Web.UI.Client/src/packages/members/member/workspace/views/content/member-workspace-view-content.element.ts
View File

@@ -1,166 +0,0 @@
import { UMB_MEMBER_WORKSPACE_CONTEXT } from '../../member-workspace.context-token.js';
import type { UmbMemberWorkspaceViewContentTabElement } from './member-workspace-view-content-tab.element.js';
import { css, html, customElement, state, repeat, nothing } 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-member-workspace-view-edit')
export class UmbMemberWorkspaceViewEditElement 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_MEMBER_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();
});
// _hasRootProperties can be gotten via _tabsStructureHelper.hasProperties. But we do not support root properties currently.
this.consumeContext(UMB_MEMBER_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('./member-workspace-view-content-tab.element.js'),
setup: (component) => {
(component as UmbMemberWorkspaceViewContentTabElement).containerId = tab.id;
},
});
});
}
if (this._hasRootGroups) {
routes.push({
path: '',
component: () => import('./member-workspace-view-content-tab.element.js'),
setup: (component) => {
(component as UmbMemberWorkspaceViewContentTabElement).containerId = null;
},
});
}
if (routes.length !== 0) {
routes.push({
path: '',
redirectTo: routes[0]?.path,
});
}
this._routes = routes;
}
render() {
if (!this._routes || !this._tabs) return nothing;
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 UmbMemberWorkspaceViewEditElement;
declare global {
interface HTMLElementTagNameMap {
'umb-member-workspace-view-edit': UmbMemberWorkspaceViewEditElement;
}
}