fix: make sure workspaces reinitializes all main routes when they change

some workspaces such as data type had a problem when you switched from one datatype to another that it wouldn't refresh the sub-routes
This commit is contained in:
Jacob Overgaard
2023-12-14 16:54:31 +01:00
parent 5569299a4f
commit 846b5fdc66
17 changed files with 58 additions and 61 deletions

View File

@@ -1,22 +1,21 @@
import { UmbDataTypeWorkspaceEditorElement } from './data-type-workspace-editor.element.js';
import { UmbDataTypeWorkspaceContext } from './data-type-workspace.context.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
import type { UmbRoute } from '@umbraco-cms/backoffice/router';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import './data-type-workspace-editor.element.js';
import { UmbWorkspaceIsNewRedirectController } from '@umbraco-cms/backoffice/workspace';
@customElement('umb-data-type-workspace')
export class UmbDataTypeWorkspaceElement extends UmbLitElement {
#workspaceContext = new UmbDataTypeWorkspaceContext(this);
#element = document.createElement('umb-data-type-workspace-editor');
#createElement = () => new UmbDataTypeWorkspaceEditorElement();
private _routes: UmbRoute[] = [
{
path: 'create/:parentUnique',
component: () => this.#element,
component: this.#createElement,
setup: (_component, info) => {
const parentUnique = info.match.params.parentUnique === 'null' ? null : info.match.params.parentUnique;
this.#workspaceContext.create(parentUnique);
@@ -30,7 +29,7 @@ export class UmbDataTypeWorkspaceElement extends UmbLitElement {
},
{
path: 'edit/:unique',
component: () => this.#element,
component: this.#createElement,
setup: (_component, info) => {
const unique = info.match.params.unique;
this.#workspaceContext.load(unique);

View File

@@ -9,13 +9,13 @@ import { UmbWorkspaceIsNewRedirectController } from '@umbraco-cms/backoffice/wor
@customElement('umb-dictionary-workspace')
export class UmbWorkspaceDictionaryElement extends UmbLitElement {
#workspaceContext = new UmbDictionaryWorkspaceContext(this);
#element = new UmbDictionaryWorkspaceEditorElement();
#createElement = () => new UmbDictionaryWorkspaceEditorElement();
@state()
_routes: UmbRoute[] = [
{
path: 'edit/:id',
component: () => this.#element,
component: this.#createElement,
setup: (_component, info) => {
const id = info.match.params.id;
this.#workspaceContext.load(id);
@@ -23,7 +23,7 @@ export class UmbWorkspaceDictionaryElement extends UmbLitElement {
},
{
path: 'create/:parentId',
component: () => this.#element,
component: this.#createElement,
setup: async (_component, info) => {
const parentId = info.match.params.parentId === 'null' ? null : info.match.params.parentId;
await this.#workspaceContext.create(parentId);

View File

@@ -1,4 +1,5 @@
import { UmbDocumentTypeWorkspaceContext } from './document-type-workspace.context.js';
import { UmbDocumentTypeWorkspaceEditorElement } from './document-type-workspace-editor.element.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbRoute } from '@umbraco-cms/backoffice/router';
@@ -8,12 +9,13 @@ import { UmbWorkspaceIsNewRedirectController } from '@umbraco-cms/backoffice/wor
@customElement('umb-document-type-workspace')
export class UmbDocumentTypeWorkspaceElement extends UmbLitElement {
#workspaceContext = new UmbDocumentTypeWorkspaceContext(this);
#createElement = () => new UmbDocumentTypeWorkspaceEditorElement();
@state()
_routes: UmbRoute[] = [
{
path: 'create/:parentId',
component: import('./document-type-workspace-editor.element.js'),
component: this.#createElement,
setup: (_component, info) => {
const parentId = info.match.params.parentId === 'null' ? null : info.match.params.parentId;
this.#workspaceContext.create(parentId);
@@ -27,7 +29,7 @@ export class UmbDocumentTypeWorkspaceElement extends UmbLitElement {
},
{
path: 'edit/:id',
component: import('./document-type-workspace-editor.element.js'),
component: this.#createElement,
setup: (_component, info) => {
this.removeControllerByAlias('_observeIsNew');
const id = info.match.params.id;

View File

@@ -1,10 +1,10 @@
import type { UmbDocumentWorkspaceContext } from './document-workspace.context.js';
import { UmbDocumentWorkspaceEditorElement } from './document-workspace-editor.element.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import type { UmbRoute } from '@umbraco-cms/backoffice/router';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import './document-workspace-editor.element.js';
import { UmbWorkspaceIsNewRedirectController } from '@umbraco-cms/backoffice/workspace';
import { UmbApi, UmbExtensionsApiInitializer, createExtensionApi } from '@umbraco-cms/backoffice/extension-api';
import { ManifestWorkspace, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
@@ -12,6 +12,7 @@ import { ManifestWorkspace, umbExtensionsRegistry } from '@umbraco-cms/backoffic
@customElement('umb-document-workspace')
export class UmbDocumentWorkspaceElement extends UmbLitElement {
#workspaceContext?: UmbDocumentWorkspaceContext;
#createElement = () => new UmbDocumentWorkspaceEditorElement();
@state()
_routes: UmbRoute[] = [];
@@ -30,7 +31,7 @@ export class UmbDocumentWorkspaceElement extends UmbLitElement {
this._routes = [
{
path: 'create/:parentId/:documentTypeKey',
component: import('./document-workspace-editor.element.js'),
component: this.#createElement,
setup: async (_component, info) => {
// TODO: Remember the perspective of permissions here, we need to check if the user has access to create a document of this type under this parent?
const parentId = info.match.params.parentId === 'null' ? null : info.match.params.parentId;
@@ -46,7 +47,7 @@ export class UmbDocumentWorkspaceElement extends UmbLitElement {
},
{
path: 'edit/:id',
component: import('./document-workspace-editor.element.js'),
component: this.#createElement,
setup: (_component, info) => {
const id = info.match.params.id;
this.#workspaceContext!.load(id);

View File

@@ -9,13 +9,13 @@ import { UmbWorkspaceIsNewRedirectController } from '@umbraco-cms/backoffice/wor
@customElement('umb-media-type-workspace')
export class UmbMediaTypeWorkspaceElement extends UmbLitElement {
#workspaceContext = new UmbMediaTypeWorkspaceContext(this);
#element = new UmbMediaTypeWorkspaceEditorElement();
#createElement = () => new UmbMediaTypeWorkspaceEditorElement();
@state()
_routes: UmbRoute[] = [
{
path: 'create/:parentId',
component: import('./media-type-workspace-editor.element.js'),
component: this.#createElement,
setup: (_component, info) => {
const parentId = info.match.params.parentId === 'null' ? null : info.match.params.parentId;
this.#workspaceContext.create(parentId);
@@ -29,7 +29,7 @@ export class UmbMediaTypeWorkspaceElement extends UmbLitElement {
},
{
path: 'edit/:id',
component: () => this.#element,
component: this.#createElement,
setup: (_component, info) => {
const id = info.match.params.id;
this.#workspaceContext.load(id);

View File

@@ -1,4 +1,5 @@
import { type UmbMediaWorkspaceContext } from './media-workspace.context.js';
import { UmbMediaWorkspaceEditorElement } from './media-workspace-editor.element.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import type { UmbRoute } from '@umbraco-cms/backoffice/router';
@@ -10,6 +11,7 @@ import { UmbWorkspaceIsNewRedirectController } from '@umbraco-cms/backoffice/wor
@customElement('umb-media-workspace')
export class UmbMediaWorkspaceElement extends UmbLitElement {
#workspaceContext?: UmbMediaWorkspaceContext;
#createElement = () => new UmbMediaWorkspaceEditorElement();
@state()
_routes: UmbRoute[] = [];
@@ -28,7 +30,7 @@ export class UmbMediaWorkspaceElement extends UmbLitElement {
this._routes = [
{
path: 'create/:parentId', // /:mediaTypeKey
component: import('./media-workspace-editor.element.js'),
component: this.#createElement,
setup: async (_component, info) => {
// TODO: Remember the perspective of permissions here, we need to check if the user has access to create a document of this type under this parent?
const parentId = info.match.params.parentId === 'null' ? null : info.match.params.parentId;
@@ -44,7 +46,7 @@ export class UmbMediaWorkspaceElement extends UmbLitElement {
},
{
path: 'edit/:id',
component: import('./media-workspace-editor.element.js'),
component: this.#createElement,
setup: (_component, info) => {
const id = info.match.params.id;
this.#workspaceContext!.load(id);

View File

@@ -8,13 +8,13 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@customElement('umb-member-group-workspace')
export class UmbMemberGroupWorkspaceElement extends UmbLitElement {
#workspaceContext = new UmbMemberGroupWorkspaceContext(this);
#element = new UmbMemberGroupWorkspaceEditorElement();
#createElement = () => new UmbMemberGroupWorkspaceEditorElement();
@state()
_routes: UmbRoute[] = [
{
path: 'edit/:id',
component: () => this.#element,
component: this.#createElement,
setup: (_component, info) => {
const id = info.match.params.id;
this.#workspaceContext.load(id);

View File

@@ -9,13 +9,13 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
export class UmbMemberTypeWorkspaceElement extends UmbLitElement {
public readonly workspaceAlias = 'Umb.Workspace.MemberType';
#workspaceContext = new UmbMemberTypeWorkspaceContext(this);
#element = new UmbMemberTypeWorkspaceEditorElement();
#createElement = () => new UmbMemberTypeWorkspaceEditorElement();
@state()
_routes: UmbRoute[] = [
{
path: 'edit/:id',
component: () => this.#element,
component: this.#createElement,
setup: (_component, info) => {
const id = info.match.params.id;
this.#workspaceContext.load(id);

View File

@@ -8,13 +8,13 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@customElement('umb-member-workspace')
export class UmbMemberWorkspaceElement extends UmbLitElement {
#workspaceContext = new UmbMemberWorkspaceContext(this);
#element = new UmbMemberWorkspaceEditorElement();
#createElement = () => new UmbMemberWorkspaceEditorElement();
@state()
_routes: UmbRoute[] = [
{
path: 'edit/:id',
component: () => this.#element,
component: this.#createElement,
setup: (_component, info) => {
const id = info.match.params.id;
this.#workspaceContext.load(id);

View File

@@ -1,4 +1,5 @@
import { UmbLanguageWorkspaceContext } from './language-workspace.context.js';
import { UmbLanguageWorkspaceEditorElement } from './language-workspace-editor.element.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import type { UmbRoute } from '@umbraco-cms/backoffice/router';
@@ -8,25 +9,13 @@ import { UmbWorkspaceIsNewRedirectController } from '@umbraco-cms/backoffice/wor
@customElement('umb-language-workspace')
export class UmbLanguageWorkspaceElement extends UmbLitElement {
#languageWorkspaceContext = new UmbLanguageWorkspaceContext(this);
/**
* Workspace editor element, lazy loaded but shared across several user flows.
*/
#editorElement?: HTMLElement;
#getComponentElement = async () => {
if (this.#editorElement) {
return this.#editorElement;
}
this.#editorElement = new (await import('./language-workspace-editor.element.js')).default();
return this.#editorElement;
};
#createElement = () => new UmbLanguageWorkspaceEditorElement();
@state()
_routes: UmbRoute[] = [
{
path: 'edit/:isoCode',
component: this.#getComponentElement,
component: this.#createElement,
setup: (_component, info) => {
this.removeControllerByAlias('_observeIsNew');
this.#languageWorkspaceContext.load(info.match.params.isoCode);
@@ -34,7 +23,7 @@ export class UmbLanguageWorkspaceElement extends UmbLitElement {
},
{
path: 'create',
component: this.#getComponentElement,
component: this.#createElement,
setup: async () => {
this.#languageWorkspaceContext.create();

View File

@@ -1,10 +1,10 @@
import { UmbRelationTypeWorkspaceContext } from './relation-type-workspace.context.js';
import { UmbRelationTypeWorkspaceEditorElement } from './relation-type-workspace-editor.element.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import type { UmbRouterSlotInitEvent, UmbRoute } from '@umbraco-cms/backoffice/router';
import './relation-type-workspace-editor.element.js';
import { UmbWorkspaceIsNewRedirectController } from '@umbraco-cms/backoffice/workspace';
/**
@@ -14,17 +14,17 @@ import { UmbWorkspaceIsNewRedirectController } from '@umbraco-cms/backoffice/wor
@customElement('umb-relation-type-workspace')
export class UmbRelationTypeWorkspaceElement extends UmbLitElement {
#workspaceContext = new UmbRelationTypeWorkspaceContext(this);
#createElement = () => new UmbRelationTypeWorkspaceEditorElement();
#routerPath? = '';
#element = document.createElement('umb-relation-type-workspace-editor');
#key = '';
@state()
_routes: UmbRoute[] = [
{
path: 'create/:parentId',
component: () => this.#element,
component: this.#createElement,
setup: (_component, info) => {
const parentId = info.match.params.parentId;
this.#workspaceContext.createScaffold(parentId);
@@ -38,7 +38,7 @@ export class UmbRelationTypeWorkspaceElement extends UmbLitElement {
},
{
path: 'edit/:id',
component: () => this.#element,
component: this.#createElement,
setup: (_component, info) => {
const id = info.match.params.id;
this.#workspaceContext.load(id);

View File

@@ -1,10 +1,10 @@
import { UmbPartialViewWorkspaceContext } from './partial-view-workspace.context.js';
import { UmbPartialViewWorkspaceEditElement } from './partial-view-workspace-edit.element.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbRoute, IRoutingInfo, PageComponent } from '@umbraco-cms/backoffice/router';
import './partial-view-workspace-edit.element.js';
import '../../components/insert-menu/templating-insert-menu.element.js';
import { UmbWorkspaceIsNewRedirectController } from '@umbraco-cms/backoffice/workspace';
@@ -13,13 +13,13 @@ import { UmbWorkspaceIsNewRedirectController } from '@umbraco-cms/backoffice/wor
export class UmbPartialViewWorkspaceElement extends UmbLitElement {
#partialViewWorkspaceContext = new UmbPartialViewWorkspaceContext(this);
#element = document.createElement('umb-partial-view-workspace-edit');
#createElement = () => new UmbPartialViewWorkspaceEditElement();
@state()
_routes: UmbRoute[] = [
{
path: 'create/:parentKey/:snippetName',
component: () => this.#element,
component: this.#createElement,
setup: async (component: PageComponent, info: IRoutingInfo) => {
const parentKey = info.match.params.parentKey;
const decodePath = decodeURIComponent(parentKey);
@@ -35,7 +35,7 @@ export class UmbPartialViewWorkspaceElement extends UmbLitElement {
},
{
path: 'edit/:key',
component: () => this.#element,
component: this.#createElement,
setup: (component: PageComponent, info: IRoutingInfo) => {
const key = info.match.params.key;
const decodePath = decodeURIComponent(key).replace('-cshtml', '.cshtml');

View File

@@ -1,4 +1,5 @@
import { UmbScriptWorkspaceContext } from './script-workspace.context.js';
import { UmbScriptWorkspaceEditElement } from './script-workspace-edit.element.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -8,11 +9,13 @@ import { UmbWorkspaceIsNewRedirectController } from '@umbraco-cms/backoffice/wor
@customElement('umb-script-workspace')
export class UmbScriptWorkspaceElement extends UmbLitElement {
#workspaceContext = new UmbScriptWorkspaceContext(this);
#createElement = () => new UmbScriptWorkspaceEditElement();
@state()
_routes: UmbRoute[] = [
{
path: 'create/:parentKey',
component: import('./script-workspace-edit.element.js'),
component: this.#createElement,
setup: async (_component: PageComponent, info: IRoutingInfo) => {
const parentKey = info.match.params.parentKey;
const decodePath = decodeURIComponent(parentKey);
@@ -27,7 +30,7 @@ export class UmbScriptWorkspaceElement extends UmbLitElement {
},
{
path: 'edit/:key',
component: import('./script-workspace-edit.element.js'),
component: this.#createElement,
setup: (component: PageComponent, info: IRoutingInfo) => {
const key = info.match.params.key;
const decodePath = decodeURIComponent(key).replace('-js', '.js');

View File

@@ -1,4 +1,5 @@
import { UmbStylesheetWorkspaceContext } from './stylesheet-workspace.context.js';
import { UmbStylesheetWorkspaceEditorElement } from './stylesheet-workspace-editor.element.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import type { UmbRoute } from '@umbraco-cms/backoffice/router';
@@ -9,12 +10,13 @@ import { decodeFilePath } from '@umbraco-cms/backoffice/utils';
@customElement('umb-stylesheet-workspace')
export class UmbStylesheetWorkspaceElement extends UmbLitElement {
#workspaceContext = new UmbStylesheetWorkspaceContext(this);
#createElement = () => new UmbStylesheetWorkspaceEditorElement();
@state()
_routes: UmbRoute[] = [
{
path: 'create/:path',
component: import('./stylesheet-workspace-editor.element.js'),
component: this.#createElement,
setup: async (_component, info) => {
const path = info.match.params.path === 'null' ? null : info.match.params.path;
const serverPath = path === null ? null : decodeFilePath(path);
@@ -30,7 +32,7 @@ export class UmbStylesheetWorkspaceElement extends UmbLitElement {
},
{
path: 'edit/:path',
component: import('./stylesheet-workspace-editor.element.js'),
component: this.#createElement,
setup: (_component, info) => {
this.removeControllerByAlias('_observeIsNew');
const path = info.match.params.path;

View File

@@ -1,23 +1,22 @@
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/internal/lit-element';
import '../../components/insert-menu/templating-insert-menu.element.js';
import './template-workspace-editor.element.js';
import { UmbWorkspaceIsNewRedirectController } from '@umbraco-cms/backoffice/workspace';
@customElement('umb-template-workspace')
export class UmbTemplateWorkspaceElement extends UmbLitElement {
#templateWorkspaceContext = new UmbTemplateWorkspaceContext(this);
#element = document.createElement('umb-template-workspace-editor');
#createElement = () => new UmbTemplateWorkspaceEditorElement();
@state()
_routes: UmbRoute[] = [
{
path: 'create/:parentId',
component: () => this.#element,
component: this.#createElement,
setup: (component: PageComponent, info: IRoutingInfo) => {
const parentId = info.match.params.parentId === 'null' ? null : info.match.params.parentId;
this.#templateWorkspaceContext.create(parentId);
@@ -31,7 +30,7 @@ export class UmbTemplateWorkspaceElement extends UmbLitElement {
},
{
path: 'edit/:key',
component: () => this.#element,
component: this.#createElement,
setup: (component: PageComponent, info: IRoutingInfo): void => {
const key = info.match.params.key;
this.#templateWorkspaceContext.load(key);

View File

@@ -9,13 +9,13 @@ import { UmbWorkspaceIsNewRedirectController } from '@umbraco-cms/backoffice/wor
@customElement('umb-user-group-workspace')
export class UmbUserGroupWorkspaceElement extends UmbLitElement {
#workspaceContext = new UmbUserGroupWorkspaceContext(this);
#element = new UmbUserGroupWorkspaceEditorElement();
#createElement = () => new UmbUserGroupWorkspaceEditorElement();
@state()
_routes: UmbRoute[] = [
{
path: 'create',
component: () => this.#element,
component: this.#createElement,
setup: (component, info) => {
this.#workspaceContext.create();
@@ -28,7 +28,7 @@ export class UmbUserGroupWorkspaceElement extends UmbLitElement {
},
{
path: 'edit/:id',
component: () => this.#element,
component: this.#createElement,
setup: (component, info) => {
const id = info.match.params.id;
this.#workspaceContext.load(id);

View File

@@ -8,13 +8,13 @@ import type { UmbRoute } from '@umbraco-cms/backoffice/router';
@customElement('umb-user-workspace')
export class UmbUserWorkspaceElement extends UmbLitElement {
#workspaceContext = new UmbUserWorkspaceContext(this);
#element = new UmbUserWorkspaceEditorElement();
#createElement = () => new UmbUserWorkspaceEditorElement();
@state()
_routes: UmbRoute[] = [
{
path: ':id',
component: () => this.#element,
component: this.#createElement,
setup: (component, info) => {
const id = info.match.params.id;
this.#workspaceContext.load(id);