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

template + member group

Browse Source
This commit is contained in:
Niels Lyngsø
2024-03-20 12:19:56 +01:00
parent 25a8e55333
commit c851fe82b5
13 changed files with 121 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/Umbraco.Web.UI.Client/src/packages/members/member-group/section-view/member-group-section-view.element.ts
View File

@@ -1,4 +1,5 @@
import { UMB_MEMBER_GROUP_COLLECTION_ALIAS } from '../collection/manifests.js';
import { UMB_MEMBER_GROUP_ENTITY_TYPE } from '../entity.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -17,7 +18,11 @@ export class UmbMemberGroupSectionViewElement extends UmbLitElement {
},
{
path: 'member-group',
component: () => import('../workspace/member-group-workspace.element.js'),
component: () => {
const element = document.createElement('umb-workspace');
element.setAttribute('entityType', UMB_MEMBER_GROUP_ENTITY_TYPE);
return element;
},
},
{
path: '',

7
src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/manifests.ts
View File

@@ -1,18 +1,19 @@
import { UMB_MEMBER_GROUP_ENTITY_TYPE } from '../entity.js';
import { UmbSaveWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
import type {
ManifestWorkspace,
ManifestWorkspaces,
ManifestWorkspaceActions,
ManifestWorkspaceView,
} from '@umbraco-cms/backoffice/extension-registry';
export const UMB_MEMBER_GROUP_WORKSPACE_ALIAS = 'Umb.Workspace.MemberGroup';
const workspace: ManifestWorkspace = {
const workspace: ManifestWorkspaces = {
type: 'workspace',
kind: 'routable',
alias: UMB_MEMBER_GROUP_WORKSPACE_ALIAS,
name: 'MemberGroup Workspace',
js: () => import('./member-group-workspace.element.js'),
api: () => import('./member-group-workspace.context.js'),
meta: {
entityType: UMB_MEMBER_GROUP_ENTITY_TYPE,
},

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

@@ -1,4 +1,4 @@
import { UMB_MEMBER_GROUP_WORKSPACE_CONTEXT } from './member-group-workspace.context.js';
import { UMB_MEMBER_GROUP_WORKSPACE_CONTEXT } from './member-group-workspace.context-token.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement, property, state, nothing } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';

12
src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-workspace.context-token.ts Normal file
View File

@@ -0,0 +1,12 @@
import type { UmbMemberGroupWorkspaceContext } from './member-group-workspace.context.js';
import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
import type { UmbSaveableWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace';
export const UMB_MEMBER_GROUP_WORKSPACE_CONTEXT = new UmbContextToken<
UmbSaveableWorkspaceContextInterface,
UmbMemberGroupWorkspaceContext
>(
'UmbWorkspaceContext',
undefined,
(context): context is UmbMemberGroupWorkspaceContext => context.getEntityType?.() === 'member-group',
);

42
src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-workspace.context.ts
View File

@@ -1,17 +1,20 @@
import { UmbMemberGroupDetailRepository } from '../repository/index.js';
import type { UmbMemberGroupDetailModel } from '../types.js';
import { UMB_MEMBER_GROUP_WORKSPACE_ALIAS } from './manifests.js';
import { UmbMemberGroupWorkspaceEditorElement } from './member-group-workspace-editor.element.js';
import {
type UmbSaveableWorkspaceContextInterface,
UmbEditableWorkspaceContextBase,
UmbWorkspaceRouteManager,
UmbWorkspaceIsNewRedirectController,
type UmbRoutableWorkspaceContext,
} from '@umbraco-cms/backoffice/workspace';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
export class UmbMemberGroupWorkspaceContext
extends UmbEditableWorkspaceContextBase<UmbMemberGroupDetailModel>
implements UmbSaveableWorkspaceContextInterface
implements UmbSaveableWorkspaceContextInterface, UmbRoutableWorkspaceContext
{
public readonly repository = new UmbMemberGroupDetailRepository(this);
#getDataPromise?: Promise<any>;
@@ -22,8 +25,34 @@ export class UmbMemberGroupWorkspaceContext
readonly unique = this.#data.asObservablePart((data) => data?.unique);
readonly name = this.#data.asObservablePart((data) => data?.name);
readonly routes = new UmbWorkspaceRouteManager(this);
constructor(host: UmbControllerHost) {
super(host, UMB_MEMBER_GROUP_WORKSPACE_ALIAS);
this.routes.setRoutes([
{
path: 'create',
component: UmbMemberGroupWorkspaceEditorElement,
setup: () => {
this.create();
new UmbWorkspaceIsNewRedirectController(
this,
this,
this.getHostElement().shadowRoot!.querySelector('umb-router-slot')!,
);
},
},
{
path: 'edit/:unique',
component: UmbMemberGroupWorkspaceEditorElement,
setup: (_component, info) => {
const unique = info.match.params.unique;
this.load(unique);
},
},
]);
}
public isLoaded() {
@@ -112,11 +141,4 @@ export class UmbMemberGroupWorkspaceContext
}
}
export const UMB_MEMBER_GROUP_WORKSPACE_CONTEXT = new UmbContextToken<
UmbSaveableWorkspaceContextInterface,
UmbMemberGroupWorkspaceContext
>(
'UmbWorkspaceContext',
undefined,
(context): context is UmbMemberGroupWorkspaceContext => context.getEntityType?.() === 'member-group',
);
export { UmbMemberGroupWorkspaceContext as api };

49
src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-workspace.element.ts
View File

@@ -1,49 +0,0 @@
import { UmbMemberGroupWorkspaceContext } from './member-group-workspace.context.js';
import { UmbMemberGroupWorkspaceEditorElement } from './member-group-workspace-editor.element.js';
import { html, customElement } 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';
@customElement('umb-member-group-workspace')
export class UmbMemberGroupWorkspaceElement extends UmbLitElement {
#workspaceContext = new UmbMemberGroupWorkspaceContext(this);
#createElement = () => new UmbMemberGroupWorkspaceEditorElement();
private _routes: UmbRoute[] = [
{
path: 'create',
component: this.#createElement,
setup: (_component, info) => {
this.#workspaceContext.create();
new UmbWorkspaceIsNewRedirectController(
this,
this.#workspaceContext,
this.shadowRoot!.querySelector('umb-router-slot')!,
);
},
},
{
path: 'edit/:unique',
component: this.#createElement,
setup: (_component, info) => {
const unique = info.match.params.unique;
this.#workspaceContext.load(unique);
},
},
];
render() {
return html`<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
}
}
export default UmbMemberGroupWorkspaceElement;
declare global {
interface HTMLElementTagNameMap {
'umb-member-group-workspace': UmbMemberGroupWorkspaceElement;
}
}

18
src/Umbraco.Web.UI.Client/src/packages/members/member-group/workspace/member-group-workspace.stories.ts
View File

@@ -1,18 +0,0 @@
import './member-group-workspace.element.js';
import type { Meta, Story } from '@storybook/web-components';
import type { UmbMemberGroupWorkspaceElement } from './member-group-workspace.element.js';
import { html } from '@umbraco-cms/backoffice/external/lit';
export default {
title: 'Workspaces/MemberGroup',
component: 'umb-member-group-workspace',
id: 'umb-member-group-workspace',
} as Meta;
export const AAAOverview: Story<UmbMemberGroupWorkspaceElement> = () =>
html` <!--
<umb-member-group-workspace"></umb-member-group-workspace>
-->`;
AAAOverview.storyName = 'Overview';

10
src/Umbraco.Web.UI.Client/src/packages/members/member/section-view/member-section-view.element.ts
View File

@@ -1,8 +1,9 @@
import { UMB_MEMBER_COLLECTION_ALIAS } from '../collection/manifests.js';
import { UMB_MEMBER_ENTITY_TYPE } from '../entity.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { PageComponent, UmbRoute } from '@umbraco-cms/backoffice/router';
import type { UmbRoute } from '@umbraco-cms/backoffice/router';
@customElement('umb-member-section-view')
export class UmbMemberSectionViewElement extends UmbLitElement {
@@ -17,9 +18,10 @@ export class UmbMemberSectionViewElement extends UmbLitElement {
},
{
path: 'member',
component: () => import('src/packages/core/workspace/workspace.element.js'),
setup(component: PageComponent) {
(component as any).entityType = 'member';
component: () => {
const element = document.createElement('umb-workspace');
element.setAttribute('entityType', UMB_MEMBER_ENTITY_TYPE);
return element;
},
},
{

7
src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/manifests.ts
View File

@@ -1,17 +1,18 @@
import { UmbSaveWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
import type {
ManifestWorkspace,
ManifestWorkspaces,
ManifestWorkspaceActions,
ManifestWorkspaceView,
} from '@umbraco-cms/backoffice/extension-registry';
export const UMB_TEMPLATE_WORKSPACE_ALIAS = 'Umb.Workspace.Template';
const workspace: ManifestWorkspace = {
const workspace: ManifestWorkspaces = {
type: 'workspace',
kind: 'routable',
alias: 'Umb.Workspace.Template',
name: 'Template Workspace',
js: () => import('./template-workspace.element.js'),
api: () => import('./template-workspace.context.js'),
meta: {
entityType: 'template',
},

6
src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace-editor.element.ts
View File

@@ -2,7 +2,7 @@ import { UMB_TEMPLATING_SECTION_PICKER_MODAL } from '../../modals/templating-sec
import type { UmbTemplatingInsertMenuElement } from '../../components/templating-item-menu/templating-item-menu.element.js';
import { UMB_TEMPLATE_QUERY_BUILDER_MODAL } from '../modals/query-builder/index.js';
import { getQuerySnippet } from '../../utils/index.js';
import { UMB_TEMPLATE_WORKSPACE_CONTEXT } from './template-workspace.context.js';
import { UMB_TEMPLATE_WORKSPACE_CONTEXT } from './template-workspace.context-token.js';
import type { UmbCodeEditorElement } from '@umbraco-cms/backoffice/code-editor';
import { toCamelCase } from '@umbraco-cms/backoffice/utils';
import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
@@ -174,7 +174,7 @@ export class UmbTemplateWorkspaceEditorElement extends UmbLitElement {
${this._masterTemplateName
? html`<uui-button look="secondary" label=${this.localize.term('actions_remove')} compact>
<uui-icon name="icon-delete" @click=${this.#resetMasterTemplate}></uui-icon>
</uui-button>`
</uui-button>`
: nothing}
</uui-button-group>
`;
@@ -224,7 +224,7 @@ export class UmbTemplateWorkspaceEditorElement extends UmbLitElement {
? this.#renderCodeEditor()
: html`<div id="loader-container">
<uui-loader></uui-loader>
</div>`}
</div>`}
</uui-box>
</umb-workspace-editor>`;
}

12
src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace.context-token.ts Normal file
View File

@@ -0,0 +1,12 @@
import type { UmbTemplateWorkspaceContext } from './template-workspace.context.js';
import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
import type { UmbSaveableWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace';
export const UMB_TEMPLATE_WORKSPACE_CONTEXT = new UmbContextToken<
UmbSaveableWorkspaceContextInterface,
UmbTemplateWorkspaceContext
>(
'UmbWorkspaceContext',
undefined,
(context): context is UmbTemplateWorkspaceContext => context.getEntityType?.() === 'template',
);

54
src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace.context.ts
View File

@@ -2,19 +2,27 @@ import type { UmbTemplateDetailModel } from '../types.js';
import type { UmbTemplateItemModel } from '../repository/index.js';
import { UmbTemplateDetailRepository, UmbTemplateItemRepository } from '../repository/index.js';
import { UMB_TEMPLATE_WORKSPACE_ALIAS } from './manifests.js';
import { UmbTemplateWorkspaceEditorElement } from './template-workspace-editor.element.js';
import { loadCodeEditor } from '@umbraco-cms/backoffice/code-editor';
import type { UmbSaveableWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace';
import { UmbEditableWorkspaceContextBase } from '@umbraco-cms/backoffice/workspace';
import type {
UmbRoutableWorkspaceContext,
UmbSaveableWorkspaceContextInterface,
} from '@umbraco-cms/backoffice/workspace';
import {
UmbEditableWorkspaceContextBase,
UmbWorkspaceIsNewRedirectController,
UmbWorkspaceRouteManager,
} from '@umbraco-cms/backoffice/workspace';
import { UmbBooleanState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action';
import { UmbReloadTreeItemChildrenRequestEntityActionEvent } from '@umbraco-cms/backoffice/tree';
import { UmbRequestReloadStructureForEntityEvent } from '@umbraco-cms/backoffice/event';
import type { IRoutingInfo, PageComponent } from '@umbraco-cms/backoffice/router';
export class UmbTemplateWorkspaceContext
extends UmbEditableWorkspaceContextBase<UmbTemplateDetailModel>
implements UmbSaveableWorkspaceContextInterface
implements UmbSaveableWorkspaceContextInterface, UmbRoutableWorkspaceContext
{
public readonly detailRepository = new UmbTemplateDetailRepository(this);
public readonly itemRepository = new UmbTemplateItemRepository(this);
@@ -34,9 +42,37 @@ export class UmbTemplateWorkspaceContext
#isCodeEditorReady = new UmbBooleanState(false);
isCodeEditorReady = this.#isCodeEditorReady.asObservable();
readonly routes = new UmbWorkspaceRouteManager(this);
constructor(host: UmbControllerHost) {
super(host, UMB_TEMPLATE_WORKSPACE_ALIAS);
this.#loadCodeEditor();
this.routes.setRoutes([
{
path: 'create/parent/:entityType/:parentUnique',
component: UmbTemplateWorkspaceEditorElement,
setup: (component: PageComponent, info: IRoutingInfo) => {
const parentEntityType = info.match.params.entityType;
const parentUnique = info.match.params.parentUnique === 'null' ? null : info.match.params.parentUnique;
this.create({ entityType: parentEntityType, unique: parentUnique });
new UmbWorkspaceIsNewRedirectController(
this,
this,
this.getHostElement().shadowRoot!.querySelector('umb-router-slot')!,
);
},
},
{
path: 'edit/:unique',
component: UmbTemplateWorkspaceEditorElement,
setup: (component: PageComponent, info: IRoutingInfo): void => {
const unique = info.match.params.unique;
this.load(unique);
},
},
]);
}
protected resetState(): void {
@@ -194,12 +230,4 @@ ${currentContent}`;
super.destroy();
}
}
export const UMB_TEMPLATE_WORKSPACE_CONTEXT = new UmbContextToken<
UmbSaveableWorkspaceContextInterface,
UmbTemplateWorkspaceContext
>(
'UmbWorkspaceContext',
undefined,
(context): context is UmbTemplateWorkspaceContext => context.getEntityType?.() === 'template',
);
export { UmbTemplateWorkspaceContext as api };

53
src/Umbraco.Web.UI.Client/src/packages/templating/templates/workspace/template-workspace.element.ts
View File

@@ -1,53 +0,0 @@
import { UmbTemplateWorkspaceContext } from './template-workspace.context.js';
import { UmbTemplateWorkspaceEditorElement } from './template-workspace-editor.element.js';
import { html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import type { IRoutingInfo, PageComponent, UmbRoute } from '@umbraco-cms/backoffice/router';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import '../../components/templating-item-menu/templating-item-menu.element.js';
import { UmbWorkspaceIsNewRedirectController } from '@umbraco-cms/backoffice/workspace';
@customElement('umb-template-workspace')
export class UmbTemplateWorkspaceElement extends UmbLitElement {
#workspaceContext = new UmbTemplateWorkspaceContext(this);
#createElement = () => new UmbTemplateWorkspaceEditorElement();
@state()
_routes: UmbRoute[] = [
{
path: 'create/parent/:entityType/:parentUnique',
component: this.#createElement,
setup: (component: PageComponent, info: IRoutingInfo) => {
const parentEntityType = info.match.params.entityType;
const parentUnique = info.match.params.parentUnique === 'null' ? null : info.match.params.parentUnique;
this.#workspaceContext.create({ entityType: parentEntityType, unique: parentUnique });
new UmbWorkspaceIsNewRedirectController(
this,
this.#workspaceContext,
this.shadowRoot!.querySelector('umb-router-slot')!,
);
},
},
{
path: 'edit/:unique',
component: this.#createElement,
setup: (component: PageComponent, info: IRoutingInfo): void => {
const unique = info.match.params.unique;
this.#workspaceContext.load(unique);
},
},
];
render() {
return html`<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
}
}
export default UmbTemplateWorkspaceElement;
declare global {
interface HTMLElementTagNameMap {
'umb-template-workspace': UmbTemplateWorkspaceElement;
}
}