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

block + block type

Browse Source
This commit is contained in:
Niels Lyngsø
2024-03-20 13:26:48 +01:00
parent 86da8fe758
commit bf8e516965
9 changed files with 103 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/manifests.ts
View File

@@ -6,11 +6,10 @@ export const manifests: Array<ManifestTypes> = [
...workspaceViewManifests,
{
type: 'workspace',
kind: 'routable',
name: 'Block Grid Type Workspace',
alias: UMB_BLOCK_GRID_TYPE_WORKSPACE_ALIAS,
element: () => import('../../block-type/workspace/block-type-workspace.element.js'),
api: () => import('../../block-type/workspace/block-type-workspace.context.js'),
weight: 900,
meta: {
entityType: 'block-grid-type',
},

3
src/Umbraco.Web.UI.Client/src/packages/block/block-list/workspace/manifests.ts
View File

@@ -6,11 +6,10 @@ export const manifests: Array<ManifestTypes> = [
...workspaceViewManifests,
{
type: 'workspace',
kind: 'routable',
name: 'Block List Type Workspace',
alias: UMB_BLOCK_LIST_TYPE_WORKSPACE_ALIAS,
element: () => import('../../block-type/workspace/block-type-workspace.element.js'),
api: () => import('../../block-type/workspace/block-type-workspace.context.js'),
weight: 900,
meta: {
entityType: 'block-list-type',
},

3
src/Umbraco.Web.UI.Client/src/packages/block/block-rte/workspace/manifests.ts
View File

@@ -6,11 +6,10 @@ export const manifests: Array<ManifestTypes> = [
...workspaceViewManifests,
{
type: 'workspace',
kind: 'routable',
name: 'Block Rte Type Workspace',
alias: UMB_BLOCK_RTE_TYPE_WORKSPACE_ALIAS,
element: () => import('../../block-type/workspace/block-type-workspace.element.js'),
api: () => import('../../block-type/workspace/block-type-workspace.context.js'),
weight: 900,
meta: {
entityType: 'block-rte-type',
},

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

@@ -1,4 +1,4 @@
import { UMB_BLOCK_TYPE_WORKSPACE_CONTEXT } from './block-type-workspace.context.js';
import { UMB_BLOCK_TYPE_WORKSPACE_CONTEXT } from './block-type-workspace.context-token.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { customElement, css, html, state, property } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -51,7 +51,7 @@ export class UmbBlockTypeWorkspaceEditorElement extends UmbLitElement {
alias=${this.workspaceAlias}
headline=${this.localize.term('blockEditor_blockConfigurationOverlayTitle', [this._name])}>
</umb-workspace-editor>
`
`
: '';
}

12
src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context-token.ts Normal file
View File

@@ -0,0 +1,12 @@
import type { UmbBlockTypeWorkspaceContext } from './block-type-workspace.context.js';
import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
import type { UmbWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace';
export const UMB_BLOCK_TYPE_WORKSPACE_CONTEXT = new UmbContextToken<
UmbWorkspaceContextInterface,
UmbBlockTypeWorkspaceContext
>(
'UmbWorkspaceContext',
undefined,
(context): context is UmbBlockTypeWorkspaceContext => (context as any).IS_BLOCK_TYPE_WORKSPACE_CONTEXT,
);

54
src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.context.ts
View File

@@ -1,22 +1,24 @@
import type { UmbBlockTypeBaseModel, UmbBlockTypeWithGroupKey } from '../types.js';
import { UmbBlockTypeWorkspaceEditorElement } from './block-type-workspace-editor.element.js';
import type { UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property';
import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
import type {
UmbInvariantableWorkspaceContextInterface,
UmbWorkspaceContextInterface,
UmbRoutableWorkspaceContext,
} from '@umbraco-cms/backoffice/workspace';
import {
UmbEditableWorkspaceContextBase,
UmbInvariantWorkspacePropertyDatasetContext,
UmbWorkspaceIsNewRedirectController,
UmbWorkspaceRouteManager,
} from '@umbraco-cms/backoffice/workspace';
import { UmbArrayState, UmbObjectState, appendToFrozenArray } from '@umbraco-cms/backoffice/observable-api';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
import type { ManifestWorkspace, PropertyEditorSettingsProperty } from '@umbraco-cms/backoffice/extension-registry';
export class UmbBlockTypeWorkspaceContext<BlockTypeData extends UmbBlockTypeWithGroupKey = UmbBlockTypeWithGroupKey>
extends UmbEditableWorkspaceContextBase<BlockTypeData>
implements UmbInvariantableWorkspaceContextInterface
implements UmbInvariantableWorkspaceContextInterface, UmbRoutableWorkspaceContext
{
// Just for context token safety:
public readonly IS_BLOCK_TYPE_WORKSPACE_CONTEXT = true;
@@ -32,11 +34,46 @@ export class UmbBlockTypeWorkspaceContext<BlockTypeData extends UmbBlockTypeWith
#properties = new UmbArrayState<PropertyEditorSettingsProperty>([], (x) => x.alias);
readonly properties = this.#properties.asObservable();
readonly routes = new UmbWorkspaceRouteManager(this);
constructor(host: UmbControllerHost, workspaceArgs: { manifest: ManifestWorkspace }) {
super(host, workspaceArgs.manifest.alias);
this.#entityType = workspaceArgs.manifest.meta?.entityType;
}
public set manifest(manifest: ManifestWorkspace) {
this.routes.setRoutes([
{
// Would it make more sense to have groupKey before elementTypeKey?
path: 'create/:elementTypeKey/:groupKey',
component: UmbBlockTypeWorkspaceEditorElement,
setup: async (component, info) => {
(component as UmbBlockTypeWorkspaceEditorElement).workspaceAlias = manifest.alias;
const elementTypeKey = info.match.params.elementTypeKey;
const groupKey = info.match.params.groupKey === 'null' ? null : info.match.params.groupKey;
this.create(elementTypeKey, groupKey);
new UmbWorkspaceIsNewRedirectController(
this,
this,
this.getHostElement().shadowRoot!.querySelector('umb-router-slot')!,
);
},
},
{
path: 'edit/:id',
component: UmbBlockTypeWorkspaceEditorElement,
setup: (component, info) => {
(component as UmbBlockTypeWorkspaceEditorElement).workspaceAlias = manifest.alias;
const id = info.match.params.id;
this.load(id);
},
},
]);
}
protected resetState() {
super.resetState();
this.#data.setValue(undefined);
@@ -131,13 +168,4 @@ export class UmbBlockTypeWorkspaceContext<BlockTypeData extends UmbBlockTypeWith
}
}
export default UmbBlockTypeWorkspaceContext;
export const UMB_BLOCK_TYPE_WORKSPACE_CONTEXT = new UmbContextToken<
UmbWorkspaceContextInterface,
UmbBlockTypeWorkspaceContext
>(
'UmbWorkspaceContext',
undefined,
(context): context is UmbBlockTypeWorkspaceContext => (context as any).IS_BLOCK_TYPE_WORKSPACE_CONTEXT,
);
export { UmbBlockTypeWorkspaceContext as api };

81
src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/block-type-workspace.element.ts
View File

@@ -1,81 +0,0 @@
import type { UmbBlockTypeWorkspaceContext } from './block-type-workspace.context.js';
import { UmbBlockTypeWorkspaceEditorElement } from './block-type-workspace-editor.element.js';
import { html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import type { UmbRoute } from '@umbraco-cms/backoffice/router';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbWorkspaceIsNewRedirectController } from '@umbraco-cms/backoffice/workspace';
import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
import { UmbExtensionsApiInitializer, createExtensionApi } from '@umbraco-cms/backoffice/extension-api';
import type { ManifestWorkspace } from '@umbraco-cms/backoffice/extension-registry';
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
@customElement('umb-block-type-workspace')
export class UmbBlockTypeWorkspaceElement extends UmbLitElement {
//
#manifest?: ManifestWorkspace;
#workspaceContext?: UmbBlockTypeWorkspaceContext;
#editorElement = () => {
const element = new UmbBlockTypeWorkspaceEditorElement();
element.workspaceAlias = this.#manifest!.alias;
return element;
};
@state()
_routes: UmbRoute[] = [];
public set manifest(manifest: ManifestWorkspace) {
this.#manifest = manifest;
createExtensionApi(this, manifest, [{ manifest: manifest }]).then((context) => {
if (context) {
this.#gotWorkspaceContext(context);
}
});
}
#gotWorkspaceContext(context: UmbApi) {
this.#workspaceContext = context as UmbBlockTypeWorkspaceContext;
this._routes = [
{
// Would it make more sense to have groupKey before elementTypeKey?
path: 'create/:elementTypeKey/:groupKey',
component: this.#editorElement,
setup: async (_component, info) => {
const elementTypeKey = info.match.params.elementTypeKey;
const groupKey = info.match.params.groupKey === 'null' ? null : info.match.params.groupKey;
this.#workspaceContext!.create(elementTypeKey, groupKey);
new UmbWorkspaceIsNewRedirectController(
this,
this.#workspaceContext!,
this.shadowRoot!.querySelector('umb-router-slot')!,
);
},
},
{
path: 'edit/:id',
component: this.#editorElement,
setup: (_component, info) => {
const id = info.match.params.id;
this.#workspaceContext!.load(id);
},
},
];
// TODO: We need to recreate when ID changed?
new UmbExtensionsApiInitializer(this, umbExtensionsRegistry, 'workspaceContext', [this, this.#workspaceContext]);
}
render() {
return html`<umb-router-slot .routes="${this._routes}"></umb-router-slot>`;
}
}
export default UmbBlockTypeWorkspaceElement;
declare global {
interface HTMLElementTagNameMap {
'umb-block-type-workspace': UmbBlockTypeWorkspaceElement;
}
}

48
src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts
View File

@@ -1,6 +1,12 @@
import type { UmbBlockDataType, UmbBlockLayoutBaseModel } from '../types.js';
import { UmbBlockElementManager } from './block-element-manager.js';
import { UmbEditableWorkspaceContextBase } from '@umbraco-cms/backoffice/workspace';
import { UmbBlockWorkspaceEditorElement } from './block-workspace-editor.element.js';
import {
UmbEditableWorkspaceContextBase,
UmbWorkspaceRouteManager,
type UmbRoutableWorkspaceContext,
UmbWorkspaceIsNewRedirectController,
} from '@umbraco-cms/backoffice/workspace';
import { UmbBooleanState, UmbObjectState, UmbStringState } from '@umbraco-cms/backoffice/observable-api';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import type { ManifestWorkspace } from '@umbraco-cms/backoffice/extension-registry';
@@ -10,11 +16,13 @@ import {
type UmbBlockWorkspaceData,
} from '@umbraco-cms/backoffice/block';
import { UMB_MODAL_CONTEXT } from '@umbraco-cms/backoffice/modal';
import { decodeFilePath } from '@umbraco-cms/backoffice/utils';
export type UmbBlockWorkspaceElementManagerNames = 'content' | 'settings';
export class UmbBlockWorkspaceContext<
LayoutDataType extends UmbBlockLayoutBaseModel = UmbBlockLayoutBaseModel,
> extends UmbEditableWorkspaceContextBase<LayoutDataType> {
export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseModel = UmbBlockLayoutBaseModel>
extends UmbEditableWorkspaceContextBase<LayoutDataType>
implements UmbRoutableWorkspaceContext
{
// Just for context token safety:
public readonly IS_BLOCK_WORKSPACE_CONTEXT = true;
//
@@ -52,6 +60,8 @@ export class UmbBlockWorkspaceContext<
#label = new UmbStringState<string | undefined>(undefined);
readonly name = this.#label.asObservable();
readonly routes = new UmbWorkspaceRouteManager(this);
constructor(host: UmbControllerHost, workspaceArgs: { manifest: ManifestWorkspace }) {
super(host, workspaceArgs.manifest.alias);
this.#entityType = workspaceArgs.manifest.meta?.entityType;
@@ -81,6 +91,36 @@ export class UmbBlockWorkspaceContext<
}).asPromise();
}
set manifest(manifest: ManifestWorkspace) {
this.routes.setRoutes([
{
path: 'create/:elementTypeKey',
component: UmbBlockWorkspaceEditorElement,
setup: async (component, info) => {
(component as UmbBlockWorkspaceEditorElement).workspaceAlias = manifest.alias;
const elementTypeKey = info.match.params.elementTypeKey;
this.create(elementTypeKey);
new UmbWorkspaceIsNewRedirectController(
this,
this,
this.getHostElement().shadowRoot!.querySelector('umb-router-slot')!,
);
},
},
{
path: 'edit/:udi',
component: UmbBlockWorkspaceEditorElement,
setup: (component, info) => {
(component as UmbBlockWorkspaceEditorElement).workspaceAlias = manifest.alias;
const udi = decodeFilePath(info.match.params.udi);
this.load(udi);
},
},
]);
}
async load(unique: string) {
await this.#retrieveBlockManager;
await this.#retrieveBlockEntries;

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

@@ -22,11 +22,10 @@ export const manifests: Array<ManifestTypes> = [
},
{
type: 'workspace',
kind: 'routable',
name: 'Block List Type Workspace',
alias: UMB_BLOCK_WORKSPACE_ALIAS,
element: () => import('./block-workspace.element.js'),
api: () => import('./block-workspace.context.js'),
weight: 900,
meta: {
entityType: 'block',
},