From 49f521e2dca6acb9f37c3db6274954725fb129ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Wed, 1 Nov 2023 20:57:54 +1300 Subject: [PATCH] init workspace views --- .../media/media-types/workspace/manifests.ts | 57 +++++++++++++++- ...edia-type-design-workspace-view.element.ts | 68 +++++++++++++++++++ ...a-type-list-view-workspace-view.element.ts | 68 +++++++++++++++++++ ...type-permissions-workspace-view.element.ts | 68 +++++++++++++++++++ 4 files changed, 260 insertions(+), 1 deletion(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/details/media-type-design-workspace-view.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/details/media-type-list-view-workspace-view.element.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/details/media-type-permissions-workspace-view.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/manifests.ts index 56fbe793be..106f5b391a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/manifests.ts @@ -15,7 +15,62 @@ const workspace: ManifestWorkspace = { }, }; -const workspaceViews: Array = []; +const workspaceViews: Array = [ + { + type: 'workspaceEditorView', + alias: 'Umb.WorkspaceView.MediaType.Design', + name: 'Media Type Workspace Design View', + loader: () => import('./views/details/media-type-design-workspace-view.element.js'), + weight: 90, + meta: { + label: 'Details', + pathname: 'details', + icon: 'document', + }, + conditions: [ + { + alias: 'Umb.Condition.WorkspaceAlias', + match: workspace.alias, + }, + ], + }, + { + type: 'workspaceEditorView', + alias: 'Umb.WorkspaceView.MediaType.ListView', + name: 'Media Type Workspace ListView View', + loader: () => import('./views/details/media-type-list-view-workspace-view.element.js'), + weight: 90, + meta: { + label: 'List View', + pathname: 'list-view', + icon: 'bug', + }, + conditions: [ + { + alias: 'Umb.Condition.WorkspaceAlias', + match: workspace.alias, + }, + ], + }, + { + type: 'workspaceEditorView', + alias: 'Umb.WorkspaceView.MediaType.Permissions', + name: 'Media Type Workspace Permissions View', + loader: () => import('./views/details/media-type-permissions-workspace-view.element.js'), + weight: 90, + meta: { + label: 'Permissions', + pathname: 'permissions', + icon: 'bug', + }, + conditions: [ + { + alias: 'Umb.Condition.WorkspaceAlias', + match: workspace.alias, + }, + ], + }, +]; const workspaceViewCollections: Array = []; const workspaceActions: Array = []; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/details/media-type-design-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/details/media-type-design-workspace-view.element.ts new file mode 100644 index 0000000000..77b9b97f99 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/details/media-type-design-workspace-view.element.ts @@ -0,0 +1,68 @@ +import { UMB_MEDIA_TYPE_WORKSPACE_CONTEXT } from '../../media-type-workspace.context.js'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { css, html, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit'; +import { + UmbModalManagerContext, + UMB_MODAL_MANAGER_CONTEXT_TOKEN, + UMB_PROPERTY_EDITOR_UI_PICKER_MODAL, +} from '@umbraco-cms/backoffice/modal'; +import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import type { MediaTypeResponseModel } from '@umbraco-cms/backoffice/backend-api'; +import { UmbWorkspaceEditorViewExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; + +@customElement('umb-media-type-design-workspace-view') +export class UmbMediaTypeDesignWorkspaceViewEditElement + extends UmbLitElement + implements UmbWorkspaceEditorViewExtensionElement +{ + @state() + _mediaType?: MediaTypeResponseModel; + + private _workspaceContext?: typeof UMB_MEDIA_TYPE_WORKSPACE_CONTEXT.TYPE; + + constructor() { + super(); + + this.consumeContext(UMB_MEDIA_TYPE_WORKSPACE_CONTEXT, (_instance) => { + this._workspaceContext = _instance; + this._observeMediaType(); + }); + } + + private _observeMediaType() { + if (!this._workspaceContext) { + return; + } + + this.observe(this._workspaceContext.data, (mediaType) => { + this._mediaType = mediaType; + }); + } + + render() { + return html` ${this._mediaType?.alias}`; + } + + static styles = [ + UmbTextStyles, + css` + :host { + display: block; + margin: var(--uui-size-layout-1); + padding-bottom: var(--uui-size-layout-1); + } + + uui-box { + margin-top: var(--uui-size-layout-1); + } + `, + ]; +} + +export default UmbMediaTypeDesignWorkspaceViewEditElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-media-type-design-workspace-view': UmbMediaTypeDesignWorkspaceViewEditElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/details/media-type-list-view-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/details/media-type-list-view-workspace-view.element.ts new file mode 100644 index 0000000000..46a63c562c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/details/media-type-list-view-workspace-view.element.ts @@ -0,0 +1,68 @@ +import { UMB_MEDIA_TYPE_WORKSPACE_CONTEXT } from '../../media-type-workspace.context.js'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { css, html, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit'; +import { + UmbModalManagerContext, + UMB_MODAL_MANAGER_CONTEXT_TOKEN, + UMB_PROPERTY_EDITOR_UI_PICKER_MODAL, +} from '@umbraco-cms/backoffice/modal'; +import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import type { MediaTypeResponseModel } from '@umbraco-cms/backoffice/backend-api'; +import { UmbWorkspaceEditorViewExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; + +@customElement('umb-media-type-list-view-workspace-view') +export class UmbMediaTypeListViewWorkspaceViewEditElement + extends UmbLitElement + implements UmbWorkspaceEditorViewExtensionElement +{ + @state() + _mediaType?: MediaTypeResponseModel; + + private _workspaceContext?: typeof UMB_MEDIA_TYPE_WORKSPACE_CONTEXT.TYPE; + + constructor() { + super(); + + this.consumeContext(UMB_MEDIA_TYPE_WORKSPACE_CONTEXT, (_instance) => { + this._workspaceContext = _instance; + this._observeMediaType(); + }); + } + + private _observeMediaType() { + if (!this._workspaceContext) { + return; + } + + this.observe(this._workspaceContext.data, (mediaType) => { + this._mediaType = mediaType; + }); + } + + render() { + return html` List View view for ${this._mediaType?.alias}`; + } + + static styles = [ + UmbTextStyles, + css` + :host { + display: block; + margin: var(--uui-size-layout-1); + padding-bottom: var(--uui-size-layout-1); + } + + uui-box { + margin-top: var(--uui-size-layout-1); + } + `, + ]; +} + +export default UmbMediaTypeListViewWorkspaceViewEditElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-media-type-list-view-workspace-view': UmbMediaTypeListViewWorkspaceViewEditElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/details/media-type-permissions-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/details/media-type-permissions-workspace-view.element.ts new file mode 100644 index 0000000000..5dc1a4eab3 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/details/media-type-permissions-workspace-view.element.ts @@ -0,0 +1,68 @@ +import { UMB_MEDIA_TYPE_WORKSPACE_CONTEXT } from '../../media-type-workspace.context.js'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import { css, html, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit'; +import { + UmbModalManagerContext, + UMB_MODAL_MANAGER_CONTEXT_TOKEN, + UMB_PROPERTY_EDITOR_UI_PICKER_MODAL, +} from '@umbraco-cms/backoffice/modal'; +import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; +import type { MediaTypeResponseModel } from '@umbraco-cms/backoffice/backend-api'; +import { UmbWorkspaceEditorViewExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; + +@customElement('umb-media-type-permissions-workspace-view') +export class UmbMediaTypePermissionsWorkspaceViewEditElement + extends UmbLitElement + implements UmbWorkspaceEditorViewExtensionElement +{ + @state() + _mediaType?: MediaTypeResponseModel; + + private _workspaceContext?: typeof UMB_MEDIA_TYPE_WORKSPACE_CONTEXT.TYPE; + + constructor() { + super(); + + this.consumeContext(UMB_MEDIA_TYPE_WORKSPACE_CONTEXT, (_instance) => { + this._workspaceContext = _instance; + this._observeMediaType(); + }); + } + + private _observeMediaType() { + if (!this._workspaceContext) { + return; + } + + this.observe(this._workspaceContext.data, (mediaType) => { + this._mediaType = mediaType; + }); + } + + render() { + return html`Permissions View for ${this._mediaType?.alias}`; + } + + static styles = [ + UmbTextStyles, + css` + :host { + display: block; + margin: var(--uui-size-layout-1); + padding-bottom: var(--uui-size-layout-1); + } + + uui-box { + margin-top: var(--uui-size-layout-1); + } + `, + ]; +} + +export default UmbMediaTypePermissionsWorkspaceViewEditElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-media-type-permissions-workspace-view': UmbMediaTypePermissionsWorkspaceViewEditElement; + } +}