-
Notifications
You must be signed in to change notification settings - Fork 50
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature: Collection: Sets label and icon of Workspace View #2113
base: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,108 @@ | ||
import { createExtensionElement, UmbExtensionsManifestInitializer } from '@umbraco-cms/backoffice/extension-api'; | ||
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; | ||
import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api'; | ||
import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; | ||
import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; | ||
import type { ManifestWorkspaceView } from '@umbraco-cms/backoffice/extension-registry'; | ||
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; | ||
import type { UmbRoute } from '@umbraco-cms/backoffice/router'; | ||
|
||
export type UmbWorkspaceEditorView = { | ||
alias: string; | ||
label: string; | ||
icon: string; | ||
pathName: string; | ||
}; | ||
|
||
export class UmbWorkspaceEditorContext extends UmbContextBase<UmbWorkspaceEditorContext> { | ||
#routes = new UmbArrayState<UmbRoute>([], (x) => x.path); | ||
public readonly routes = this.#routes.asObservable(); | ||
|
||
#views = new UmbArrayState<UmbWorkspaceEditorView>([], (x) => x.alias); | ||
public readonly views = this.#views.asObservable(); | ||
|
||
constructor(host: UmbControllerHost) { | ||
super(host, UMB_WORKSPACE_EDITOR_CONTEXT); | ||
|
||
new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'workspaceView', null, (workspaceViews) => { | ||
const manifests = workspaceViews.map((view) => view.manifest); | ||
this.#createRoutes(manifests); | ||
this.#createViews(manifests); | ||
}); | ||
} | ||
|
||
#createRoutes(manifests: Array<ManifestWorkspaceView> | null) { | ||
let routes: UmbRoute[] = []; | ||
|
||
if (manifests?.length) { | ||
routes = manifests.map((manifest) => { | ||
return { | ||
path: `view/${manifest.meta.pathname}`, | ||
component: () => createExtensionElement(manifest), | ||
setup: (component) => { | ||
if (component) { | ||
(component as any).manifest = manifest; | ||
} | ||
}, | ||
} as UmbRoute; | ||
}); | ||
|
||
// Duplicate first workspace and use it for the empty path scenario. [NL] | ||
routes.push({ ...routes[0], path: '' }); | ||
|
||
routes.push({ | ||
path: `**`, | ||
component: async () => (await import('@umbraco-cms/backoffice/router')).UmbRouteNotFoundElement, | ||
}); | ||
} | ||
|
||
this.#routes.setValue(routes); | ||
} | ||
|
||
#createViews(manifests: Array<ManifestWorkspaceView> | null) { | ||
if (!manifests?.length) return; | ||
|
||
const views = manifests | ||
? manifests.map((manifest) => ({ | ||
alias: manifest.alias, | ||
icon: manifest.meta.icon, | ||
label: manifest.meta.label ?? manifest.name, | ||
pathName: manifest.meta.pathname, | ||
})) | ||
: []; | ||
|
||
this.#views.setValue(views); | ||
} | ||
|
||
setWorkspaceViewMeta(alias: string, icon: string | undefined, label: string | undefined, showContentFirst: boolean) { | ||
if (!alias) return; | ||
|
||
// NOTE: Edge-case, as the server sets "icon-badge" as the default icon, but that particular icon doesn't exist in the backoffice. [LK] | ||
// https://github.com/umbraco/Umbraco-CMS/blob/release-14.0.0/src/Umbraco.Infrastructure/Migrations/Upgrade/V_14_0_0/MigrateDataTypeConfigurations.cs#L718 | ||
if (icon === 'icon-badge color-black') { | ||
icon = 'icon-grid'; | ||
} | ||
|
||
const views = [...this.#views.getValue()].map((view) => | ||
view.alias === alias ? { ...view, ...(icon && { icon }), ...(label && { label }) } : view, | ||
); | ||
|
||
this.#views.setValue(views); | ||
|
||
// TODO: Review how `showContentFirst` is implemented, and how to re-route/redirect the path. | ||
// e.g. the "Content" tab shows the "Collection" view. [LK] | ||
if (showContentFirst) { | ||
// const views = [...this.#views.getValue()]; | ||
// const idx = views.findIndex((view) => view === 'Umb.WorkspaceView.Document.Edit'); | ||
// if (idx > -1) { | ||
// const [edit] = views.splice(idx, 1); | ||
// views.unshift(edit); | ||
// this.#views.setValue(views); | ||
// } | ||
} | ||
} | ||
} | ||
|
||
export default UmbWorkspaceEditorContext; | ||
|
||
export const UMB_WORKSPACE_EDITOR_CONTEXT = new UmbContextToken<UmbWorkspaceEditorContext>('UmbWorkspaceEditorContext'); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,12 @@ | ||
import { UmbWorkspaceEditorContext } from './workspace-editor.context.js'; | ||
import type { UmbWorkspaceEditorView } from './workspace-editor.context.js'; | ||
import { css, customElement, html, nothing, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit'; | ||
import { createExtensionElement, UmbExtensionsManifestInitializer } from '@umbraco-cms/backoffice/extension-api'; | ||
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; | ||
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; | ||
import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; | ||
import type { ManifestWorkspaceView } from '@umbraco-cms/backoffice/extension-registry'; | ||
import type { UmbRoute, UmbRouterSlotInitEvent, UmbRouterSlotChangeEvent } from '@umbraco-cms/backoffice/router'; | ||
|
||
const elementName = 'umb-workspace-editor'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is this a optimization we want to implement in general, I think it is a bit of an overload and I must admit i'm in for consistency. And using a variable twice use is not directly enough to trigger my need for this, especially because the later one is only used by TypeScript, so basically we are crating a const to use it once. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There have been many cases where there has been a mismatch between the registered element name and the type because we have renamed elements over time. I think this is a reasonable way to avoid that. |
||
|
||
/** | ||
* @element umb-workspace-editor | ||
* @description | ||
|
@@ -20,7 +21,7 @@ import type { UmbRoute, UmbRouterSlotInitEvent, UmbRouterSlotChangeEvent } from | |
* @extends {UmbLitElement} | ||
*/ | ||
// TODO: This element has a bug in the tabs. After the url changes - for example a new entity/file is chosen in the tree and loaded to the workspace the links in the tabs still point to the previous url and therefore views do not change correctly | ||
@customElement('umb-workspace-editor') | ||
@customElement(elementName) | ||
export class UmbWorkspaceEditorElement extends UmbLitElement { | ||
@property() | ||
public headline = ''; | ||
|
@@ -35,7 +36,7 @@ export class UmbWorkspaceEditorElement extends UmbLitElement { | |
public backPath?: string; | ||
|
||
@state() | ||
private _workspaceViews: Array<ManifestWorkspaceView> = []; | ||
private _workspaceViews: Array<UmbWorkspaceEditorView> = []; | ||
|
||
@state() | ||
private _routes?: UmbRoute[]; | ||
|
@@ -46,41 +47,18 @@ export class UmbWorkspaceEditorElement extends UmbLitElement { | |
@state() | ||
private _activePath?: string; | ||
|
||
#workspaceEditorContext = new UmbWorkspaceEditorContext(this); | ||
|
||
constructor() { | ||
super(); | ||
|
||
new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'workspaceView', null, (workspaceViews) => { | ||
this._workspaceViews = workspaceViews.map((view) => view.manifest); | ||
this._createRoutes(); | ||
this.observe(this.#workspaceEditorContext.views, (workspaceViews) => { | ||
this._workspaceViews = workspaceViews; | ||
}); | ||
} | ||
|
||
private _createRoutes() { | ||
let newRoutes: UmbRoute[] = []; | ||
|
||
if (this._workspaceViews.length > 0) { | ||
newRoutes = this._workspaceViews.map((manifest) => { | ||
return { | ||
path: `view/${manifest.meta.pathname}`, | ||
component: () => createExtensionElement(manifest), | ||
setup: (component) => { | ||
if (component) { | ||
(component as any).manifest = manifest; | ||
} | ||
}, | ||
} as UmbRoute; | ||
}); | ||
|
||
// Duplicate first workspace and use it for the empty path scenario. [NL] | ||
newRoutes.push({ ...newRoutes[0], path: '' }); | ||
|
||
newRoutes.push({ | ||
path: `**`, | ||
component: async () => (await import('@umbraco-cms/backoffice/router')).UmbRouteNotFoundElement, | ||
}); | ||
} | ||
|
||
this._routes = newRoutes; | ||
this.observe(this.#workspaceEditorContext.routes, (routes) => { | ||
this._routes = routes; | ||
}); | ||
} | ||
|
||
override render() { | ||
|
@@ -112,26 +90,27 @@ export class UmbWorkspaceEditorElement extends UmbLitElement { | |
<uui-tab-group slot="navigation"> | ||
${repeat( | ||
this._workspaceViews, | ||
(view) => view.alias, | ||
(view, index) => | ||
// Notice how we use index 0 to determine which workspace that is active with empty path. [NL] | ||
html` | ||
<uui-tab | ||
href="${this._routerPath}/view/${view.meta.pathname}" | ||
.label="${view.meta.label ? this.localize.string(view.meta.label) : view.name}" | ||
?active=${'view/' + view.meta.pathname === this._activePath || | ||
(index === 0 && this._activePath === '')}> | ||
<umb-icon slot="icon" name=${view.meta.icon}></umb-icon> | ||
${view.meta.label ? this.localize.string(view.meta.label) : view.name} | ||
</uui-tab> | ||
`, | ||
(view) => view, | ||
(view, index) => this.#renderView(view, index), | ||
)} | ||
</uui-tab-group> | ||
` | ||
: nothing} | ||
`; | ||
} | ||
|
||
#renderView(view: UmbWorkspaceEditorView, index: number) { | ||
// Notice how we use index 0 to determine which workspace that is active with empty path. [NL] | ||
return html` | ||
<uui-tab | ||
href="${this._routerPath}/view/${view.pathName}" | ||
?active=${'view/' + view.pathName === this._activePath || (index === 0 && this._activePath === '')}> | ||
<umb-icon slot="icon" name=${view.icon}></umb-icon> | ||
${this.localize.string(view.label)} | ||
</uui-tab> | ||
`; | ||
} | ||
|
||
#renderBackButton() { | ||
if (!this.backPath) return nothing; | ||
return html` | ||
|
@@ -200,6 +179,6 @@ export class UmbWorkspaceEditorElement extends UmbLitElement { | |
|
||
declare global { | ||
interface HTMLElementTagNameMap { | ||
'umb-workspace-editor': UmbWorkspaceEditorElement; | ||
[elementName]: UmbWorkspaceEditorElement; | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think the only right way to do this, would be to manipulate the weight of the Collection based on this setting. (
Maybe assuming that content has a certain weight?)
Not completely sure how at the moment of writing this, but if feels wrong to sort the views, also notice how they can come and go depending on conditions. Atleast of now, then it should use the weight to sort and then make sure to sort(& change weight based on setting) in the
#createViews
method.