stylesheet

This commit is contained in:
Niels Lyngsø
2024-03-20 12:23:14 +01:00
parent c851fe82b5
commit 044a262c1a
5 changed files with 52 additions and 79 deletions

View File

@@ -1,5 +1,5 @@
import type {
ManifestWorkspace,
ManifestWorkspaces,
ManifestWorkspaceActions,
ManifestWorkspaceView,
} from '@umbraco-cms/backoffice/extension-registry';
@@ -7,11 +7,12 @@ import { UmbSaveWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
export const UMB_STYLESHEET_WORKSPACE_ALIAS = 'Umb.Workspace.StyleSheet';
const workspace: ManifestWorkspace = {
const workspace: ManifestWorkspaces = {
type: 'workspace',
kind: 'routable',
alias: UMB_STYLESHEET_WORKSPACE_ALIAS,
name: 'Stylesheet Workspace',
js: () => import('./stylesheet-workspace.element.js'),
api: () => import('./stylesheet-workspace.context.js'),
meta: {
entityType: 'stylesheet',
},

View File

@@ -0,0 +1,13 @@
import { UMB_STYLESHEET_ENTITY_TYPE } from '../entity.js';
import type { UmbStylesheetWorkspaceContext } from './stylesheet-workspace.context.js';
import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
import type { UmbSaveableWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace';
export const UMB_STYLESHEET_WORKSPACE_CONTEXT = new UmbContextToken<
UmbSaveableWorkspaceContextInterface,
UmbStylesheetWorkspaceContext
>(
'UmbWorkspaceContext',
undefined,
(context): context is UmbStylesheetWorkspaceContext => context.getEntityType?.() === UMB_STYLESHEET_ENTITY_TYPE,
);

View File

@@ -2,21 +2,25 @@ import { UmbStylesheetDetailRepository } from '../repository/stylesheet-detail.r
import type { UmbStylesheetDetailModel } from '../types.js';
import { UMB_STYLESHEET_ENTITY_TYPE } from '../entity.js';
import { UMB_STYLESHEET_WORKSPACE_ALIAS } from './manifests.js';
import { UmbStylesheetWorkspaceEditorElement } from './stylesheet-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 { UmbBooleanState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
import { loadCodeEditor } from '@umbraco-cms/backoffice/code-editor';
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 UmbStylesheetWorkspaceContext
extends UmbEditableWorkspaceContextBase<UmbStylesheetDetailModel>
implements UmbSaveableWorkspaceContextInterface
implements UmbSaveableWorkspaceContextInterface, UmbRoutableWorkspaceContext
{
public readonly repository = new UmbStylesheetDetailRepository(this);
@@ -31,9 +35,37 @@ export class UmbStylesheetWorkspaceContext
#isCodeEditorReady = new UmbBooleanState(false);
readonly isCodeEditorReady = this.#isCodeEditorReady.asObservable();
readonly routes = new UmbWorkspaceRouteManager(this);
constructor(host: UmbControllerHost) {
super(host, UMB_STYLESHEET_WORKSPACE_ALIAS);
this.#loadCodeEditor();
this.routes.setRoutes([
{
path: 'create/parent/:entityType/:parentUnique',
component: UmbStylesheetWorkspaceEditorElement,
setup: async (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: UmbStylesheetWorkspaceEditorElement,
setup: (component: PageComponent, info: IRoutingInfo) => {
const unique = info.match.params.unique;
this.load(unique);
},
},
]);
}
protected resetState(): void {
@@ -136,11 +168,4 @@ export class UmbStylesheetWorkspaceContext
}
}
export const UMB_STYLESHEET_WORKSPACE_CONTEXT = new UmbContextToken<
UmbSaveableWorkspaceContextInterface,
UmbStylesheetWorkspaceContext
>(
'UmbWorkspaceContext',
undefined,
(context): context is UmbStylesheetWorkspaceContext => context.getEntityType?.() === UMB_STYLESHEET_ENTITY_TYPE,
);
export { UmbStylesheetWorkspaceContext as api };

View File

@@ -1,51 +0,0 @@
import { UmbStylesheetWorkspaceContext } from './stylesheet-workspace.context.js';
import { UmbStylesheetWorkspaceEditorElement } from './stylesheet-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 { UmbWorkspaceIsNewRedirectController } from '@umbraco-cms/backoffice/workspace';
@customElement('umb-stylesheet-workspace')
export class UmbStylesheetWorkspaceElement extends UmbLitElement {
#workspaceContext = new UmbStylesheetWorkspaceContext(this);
#createElement = () => new UmbStylesheetWorkspaceEditorElement();
@state()
_routes: UmbRoute[] = [
{
path: 'create/parent/:entityType/:parentUnique',
component: this.#createElement,
setup: async (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) => {
const unique = info.match.params.unique;
this.#workspaceContext.load(unique);
},
},
];
render() {
return html`<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
}
}
export default UmbStylesheetWorkspaceElement;
declare global {
interface HTMLElementTagNameMap {
'umb-stylesheet-workspace': UmbStylesheetWorkspaceElement;
}
}

View File

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