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

add media type folder workspace

Browse Source
This commit is contained in:
Mads Rasmussen
2024-09-27 08:31:45 +02:00
parent cd0c712e6d
commit 96bcf3f97d
8 changed files with 178 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/index.ts
View File

@@ -1 +1,2 @@
export * from './repository/index.js';
export * from './workspace/index.js';

2
src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/manifests.ts
View File

@@ -1,6 +1,7 @@
import { UMB_MEDIA_TYPE_FOLDER_ENTITY_TYPE } from '../../entity.js';
import { UMB_MEDIA_TYPE_FOLDER_REPOSITORY_ALIAS } from './repository/constants.js';
import { manifests as repositoryManifests } from './repository/manifests.js';
import { manifests as workspaceManifests } from './workspace/manifests.js';
export const manifests: Array<UmbExtensionManifest> = [
{
@@ -24,4 +25,5 @@ export const manifests: Array<UmbExtensionManifest> = [
},
},
...repositoryManifests,
...workspaceManifests,
];

1
src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/constants.ts Normal file
View File

@@ -0,0 +1 @@
export const UMB_MEDIA_TYPE_FOLDER_WORKSPACE_ALIAS = 'Umb.Workspace.MediaType.Folder';

2
src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export * from './constants.js';
export * from './media-type-folder.workspace.context-token.js';

34
src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/manifests.ts Normal file
View File

@@ -0,0 +1,34 @@
import { UMB_MEDIA_TYPE_FOLDER_ENTITY_TYPE } from '../../../entity.js';
import { UMB_MEDIA_TYPE_FOLDER_WORKSPACE_ALIAS } from './constants.js';
import { UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
export const manifests: Array<UmbExtensionManifest> = [
{
type: 'workspace',
kind: 'routable',
alias: UMB_MEDIA_TYPE_FOLDER_WORKSPACE_ALIAS,
name: 'Media Type Folder Workspace',
api: () => import('./media-type-folder-workspace.context.js'),
meta: {
entityType: UMB_MEDIA_TYPE_FOLDER_ENTITY_TYPE,
},
},
{
type: 'workspaceAction',
kind: 'default',
alias: 'Umb.WorkspaceAction.MediaType.Folder.Save',
name: 'Save Media Type Folder Workspace Action',
api: UmbSubmitWorkspaceAction,
meta: {
label: '#buttons_save',
look: 'primary',
color: 'positive',
},
conditions: [
{
alias: 'Umb.Condition.WorkspaceAlias',
match: UMB_MEDIA_TYPE_FOLDER_WORKSPACE_ALIAS,
},
],
},
];

75
src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/media-type-folder-editor.element.ts Normal file
View File

@@ -0,0 +1,75 @@
import { UMB_MEDIA_TYPE_FOLDER_WORKSPACE_ALIAS } from './constants.js';
import { UMB_MEDIA_TYPE_FOLDER_WORKSPACE_CONTEXT } from './media-type-folder.workspace.context-token.js';
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
import { umbFocus, UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { umbBindToValidation } from '@umbraco-cms/backoffice/validation';
const elementName = 'umb-media-type-folder-workspace-editor';
@customElement(elementName)
export class UmbMediaTypeFolderWorkspaceEditorElement extends UmbLitElement {
@state()
private _name = '';
#workspaceContext?: typeof UMB_MEDIA_TYPE_FOLDER_WORKSPACE_CONTEXT.TYPE;
constructor() {
super();
this.consumeContext(UMB_MEDIA_TYPE_FOLDER_WORKSPACE_CONTEXT, (workspaceContext) => {
this.#workspaceContext = workspaceContext;
this.#observeName();
});
}
#observeName() {
if (!this.#workspaceContext) return;
this.observe(this.#workspaceContext.name, (name) => {
if (name !== this._name) {
this._name = name ?? '';
}
});
}
#handleInput(event: UUIInputEvent) {
if (event instanceof UUIInputEvent) {
const target = event.composedPath()[0] as UUIInputElement;
if (typeof target?.value === 'string') {
this.#workspaceContext?.setName(target.value);
}
}
}
override render() {
return html`<umb-workspace-editor alias=${UMB_MEDIA_TYPE_FOLDER_WORKSPACE_ALIAS}>
<uui-input
slot="header"
id="nameInput"
.value=${this._name ?? ''}
@input="${this.#handleInput}"
required
${umbBindToValidation(this, `$.name`, this._name)}
${umbFocus()}></uui-input>
</umb-workspace-editor>`;
}
static override styles = [
UmbTextStyles,
css`
#nameInput {
flex: 1 1 auto;
}
`,
];
}
export { UmbMediaTypeFolderWorkspaceEditorElement as element };
declare global {
interface HTMLElementTagNameMap {
[elementName]: UmbMediaTypeFolderWorkspaceEditorElement;
}
}

49
src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/media-type-folder-workspace.context.ts Normal file
View File

@@ -0,0 +1,49 @@
import { UMB_MEDIA_TYPE_FOLDER_ENTITY_TYPE } from '../../../entity.js';
import { UMB_MEDIA_TYPE_FOLDER_REPOSITORY_ALIAS, type UmbMediaTypeFolderRepository } from '../repository/index.js';
import { UMB_MEDIA_TYPE_FOLDER_WORKSPACE_ALIAS } from './constants.js';
import { UmbMediaTypeFolderWorkspaceEditorElement } from './media-type-folder-editor.element.js';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import {
UmbEntityDetailWorkspaceContextBase,
type UmbRoutableWorkspaceContext,
type UmbSubmittableWorkspaceContext,
} from '@umbraco-cms/backoffice/workspace';
import type { IRoutingInfo, PageComponent } from '@umbraco-cms/backoffice/router';
import type { UmbFolderModel } from '@umbraco-cms/backoffice/tree';
export class UmbMediaTypeFolderWorkspaceContext
extends UmbEntityDetailWorkspaceContextBase<UmbFolderModel, UmbMediaTypeFolderRepository>
implements UmbSubmittableWorkspaceContext, UmbRoutableWorkspaceContext
{
public readonly name = this._data.createObservablePartOfCurrent((data) => data?.name);
constructor(host: UmbControllerHost) {
super(host, {
workspaceAlias: UMB_MEDIA_TYPE_FOLDER_WORKSPACE_ALIAS,
entityType: UMB_MEDIA_TYPE_FOLDER_ENTITY_TYPE,
detailRepositoryAlias: UMB_MEDIA_TYPE_FOLDER_REPOSITORY_ALIAS,
});
this.routes.setRoutes([
{
path: 'edit/:unique',
component: UmbMediaTypeFolderWorkspaceEditorElement,
setup: (component: PageComponent, info: IRoutingInfo) => {
const unique = info.match.params.unique;
this.load(unique);
},
},
]);
}
/**
* @description Set the name of the script
* @param {string} value
* @memberof UmbScriptWorkspaceContext
*/
public setName(value: string) {
this._data.updateCurrent({ name: value });
}
}
export { UmbMediaTypeFolderWorkspaceContext as api };

14
src/Umbraco.Web.UI.Client/src/packages/media/media-types/tree/folder/workspace/media-type-folder.workspace.context-token.ts Normal file
View File

@@ -0,0 +1,14 @@
import { UMB_MEDIA_TYPE_FOLDER_ENTITY_TYPE } from '../../../entity.js';
import type { UmbMediaTypeFolderWorkspaceContext } from './media-type-folder-workspace.context.js';
import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
import type { UmbWorkspaceContext } from '@umbraco-cms/backoffice/workspace';
export const UMB_MEDIA_TYPE_FOLDER_WORKSPACE_CONTEXT = new UmbContextToken<
UmbWorkspaceContext,
UmbMediaTypeFolderWorkspaceContext
>(
'UmbWorkspaceContext',
undefined,
(context): context is UmbMediaTypeFolderWorkspaceContext =>
context.getEntityType?.() === UMB_MEDIA_TYPE_FOLDER_ENTITY_TYPE,
);