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

align script create options with current backoffice

Browse Source
This commit is contained in:
Mads Rasmussen
2024-01-10 15:44:30 +01:00
parent b604c0ae29
commit 9c943ac459
8 changed files with 158 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/Umbraco.Web.UI.Client/src/packages/templating/scripts/entity-actions/create/create-empty.action.ts
View File

@@ -1,17 +0,0 @@
import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
export class UmbCreateScriptAction<T extends { copy(): Promise<void> }> extends UmbEntityActionBase<T> {
constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
super(host, repositoryAlias, unique);
}
async execute() {
if (this.unique !== null) {
// Note: %2F is a slash (/)
this.unique = this.unique.replace(/\//g, '%2F');
}
history.pushState(null, '', `section/settings/workspace/script/create/${this.unique ?? 'null'}`);
}
}

27
src/Umbraco.Web.UI.Client/src/packages/templating/scripts/entity-actions/create/create.action.ts Normal file
View File

@@ -0,0 +1,27 @@
import { UMB_SCRIPT_CREATE_OPTIONS_MODAL } from './options-modal/index.js';
import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
import { UmbModalManagerContext, UMB_MODAL_MANAGER_CONTEXT_TOKEN } from '@umbraco-cms/backoffice/modal';
export class UmbScriptCreateOptionsEntityAction extends UmbEntityActionBase<never> {
#modalManagerContext?: UmbModalManagerContext;
constructor(host: UmbControllerHostElement, repositoryAlias: string, unique: string) {
super(host, repositoryAlias, unique);
this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
this.#modalManagerContext = instance;
});
}
async execute() {
if (!this.#modalManagerContext) throw new Error('Modal manager context is not available');
if (!this.repository) throw new Error('Repository is not available');
this.#modalManagerContext?.open(UMB_SCRIPT_CREATE_OPTIONS_MODAL, {
data: {
parentUnique: this.unique,
},
});
}
}

26
src/Umbraco.Web.UI.Client/src/packages/templating/scripts/entity-actions/create/manifests.ts Normal file
View File

@@ -0,0 +1,26 @@
import { UMB_SCRIPT_FOLDER_ENTITY_TYPE, UMB_SCRIPT_ROOT_ENTITY_TYPE } from '../../entity.js';
import { UMB_SCRIPT_DETAIL_REPOSITORY_ALIAS } from '../../repository/manifests.js';
import { UmbScriptCreateOptionsEntityAction } from './create.action.js';
import { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
export const manifests: Array<ManifestTypes> = [
{
type: 'entityAction',
alias: 'Umb.EntityAction.Script.CreateOptions',
name: 'Script Create Options Entity Action',
weight: 1000,
api: UmbScriptCreateOptionsEntityAction,
meta: {
icon: 'icon-add',
label: 'Create...',
repositoryAlias: UMB_SCRIPT_DETAIL_REPOSITORY_ALIAS,
entityTypes: [UMB_SCRIPT_ROOT_ENTITY_TYPE, UMB_SCRIPT_FOLDER_ENTITY_TYPE],
},
},
{
type: 'modal',
alias: 'Umb.Modal.Script.CreateOptions',
name: 'Script Create Options Modal',
js: () => import('./options-modal/script-create-options-modal.element.js'),
},
];

15
src/Umbraco.Web.UI.Client/src/packages/templating/scripts/entity-actions/create/options-modal/index.ts Normal file
View File

@@ -0,0 +1,15 @@
import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
export interface UmbScriptCreateOptionsModalData {
parentUnique: string | null;
}
export const UMB_SCRIPT_CREATE_OPTIONS_MODAL = new UmbModalToken<UmbScriptCreateOptionsModalData>(
'Umb.Modal.Script.CreateOptions',
{
modal: {
type: 'sidebar',
size: 'small',
},
},
);

84
src/Umbraco.Web.UI.Client/src/packages/templating/scripts/entity-actions/create/options-modal/script-create-options-modal.element.ts Normal file
View File

@@ -0,0 +1,84 @@
import { UMB_SCRIPT_FOLDER_REPOSITORY_ALIAS } from '../../../tree/folder/index.js';
import { UmbScriptCreateOptionsModalData } from './index.js';
import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import {
UMB_MODAL_MANAGER_CONTEXT_TOKEN,
UmbModalManagerContext,
UmbModalBaseElement,
} from '@umbraco-cms/backoffice/modal';
import { UmbCreateFolderEntityAction } from '@umbraco-cms/backoffice/tree';
@customElement('umb-script-create-options-modal')
export class UmbScriptCreateOptionsModalElement extends UmbModalBaseElement<UmbScriptCreateOptionsModalData, string> {
#modalManager?: UmbModalManagerContext;
#createFolderAction?: UmbCreateFolderEntityAction<any>;
constructor() {
super();
this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (instance) => {
this.#modalManager = instance;
});
}
connectedCallback(): void {
super.connectedCallback();
if (this.data?.parentUnique === undefined) throw new Error('A parent unique is required to create a folder');
this.#createFolderAction = new UmbCreateFolderEntityAction(
this,
UMB_SCRIPT_FOLDER_REPOSITORY_ALIAS,
this.data.parentUnique,
);
}
async #onCreateFolderClick(event: PointerEvent) {
event.stopPropagation();
try {
await this.#createFolderAction?.execute();
this._submitModal();
} catch (error) {
console.error(error);
}
}
// close the modal when navigating to data type
#onNavigate() {
this._submitModal();
}
render() {
return html`
<umb-body-layout headline="Create Script">
<uui-box>
<!-- TODO: construct url -->
<uui-menu-item
href=${`section/settings/workspace/script/create/${this.data?.parentUnique || 'null'}`}
label="New Javascript file"
@click=${this.#onNavigate}>
<uui-icon slot="icon" name="icon-article"></uui-icon>}
</uui-menu-item>
<uui-menu-item @click=${this.#onCreateFolderClick} label="New Folder...">
<uui-icon slot="icon" name="icon-folder"></uui-icon>}
</uui-menu-item>
</uui-box>
<uui-button slot="actions" id="cancel" label="Cancel" @click="${this._rejectModal}">Cancel</uui-button>
</umb-body-layout>
`;
}
static styles = [UmbTextStyles];
}
export default UmbScriptCreateOptionsModalElement;
declare global {
interface HTMLElementTagNameMap {
'umb-script-create-options-modal': UmbScriptCreateOptionsModalElement;
}
}

22
src/Umbraco.Web.UI.Client/src/packages/templating/scripts/entity-actions/manifests.ts
View File

@@ -1,11 +1,10 @@
import { UMB_SCRIPT_DETAIL_REPOSITORY_ALIAS } from '../repository/index.js';
import { UMB_SCRIPT_ENTITY_TYPE, UMB_SCRIPT_FOLDER_ENTITY_TYPE, UMB_SCRIPT_ROOT_ENTITY_TYPE } from '../entity.js';
import { UmbCreateScriptAction } from './create/create-empty.action.js';
import { UMB_SCRIPT_ENTITY_TYPE } from '../entity.js';
import { manifests as createManifests } from './create/manifests.js';
import { UmbDeleteEntityAction } from '@umbraco-cms/backoffice/entity-action';
import { ManifestEntityAction } from '@umbraco-cms/backoffice/extension-registry';
export const UMB_DELETE_SCRIPT_ENTITY_ACTION_ALIAS = 'Umb.EntityAction.Script.Delete';
export const UMB_CREATE_SCRIPT_ENTITY_ACTION_ALIAS = 'Umb.EntityAction.Script.Create';
const scriptViewActions: Array<ManifestEntityAction> = [
{
@@ -22,19 +21,4 @@ const scriptViewActions: Array<ManifestEntityAction> = [
},
];
const scriptFolderActions: Array<ManifestEntityAction> = [
{
type: 'entityAction',
alias: UMB_CREATE_SCRIPT_ENTITY_ACTION_ALIAS,
name: 'Create Script Under Directory Entity Action',
api: UmbCreateScriptAction,
meta: {
icon: 'icon-article',
label: 'New empty script',
repositoryAlias: UMB_SCRIPT_DETAIL_REPOSITORY_ALIAS,
entityTypes: [UMB_SCRIPT_FOLDER_ENTITY_TYPE, UMB_SCRIPT_ROOT_ENTITY_TYPE],
},
},
];
export const manifests = [...scriptViewActions, ...scriptFolderActions];
export const manifests = [...scriptViewActions, ...createManifests];

6
src/Umbraco.Web.UI.Client/src/packages/templating/scripts/tree/folder/index.ts
View File

@@ -1,6 +1,2 @@
export { UmbScriptFolderRepository } from './script-folder.repository.js';
export {
UMB_SCRIPT_FOLDER_REPOSITORY_ALIAS,
UMB_DELETE_SCRIPT_FOLDER_ENTITY_ACTION_ALIAS,
UMB_CREATE_SCRIPT_FOLDER_ENTITY_ACTION_ALIAS,
} from './manifests.js';
export { UMB_SCRIPT_FOLDER_REPOSITORY_ALIAS, UMB_DELETE_SCRIPT_FOLDER_ENTITY_ACTION_ALIAS } from './manifests.js';

17
src/Umbraco.Web.UI.Client/src/packages/templating/scripts/tree/folder/manifests.ts
View File

@@ -1,6 +1,6 @@
import { UMB_SCRIPT_FOLDER_ENTITY_TYPE, UMB_SCRIPT_ROOT_ENTITY_TYPE } from '../../entity.js';
import { UMB_SCRIPT_FOLDER_ENTITY_TYPE } from '../../entity.js';
import { UmbScriptFolderRepository } from './script-folder.repository.js';
import { UmbCreateFolderEntityAction, UmbDeleteFolderEntityAction } from '@umbraco-cms/backoffice/tree';
import { UmbDeleteFolderEntityAction } from '@umbraco-cms/backoffice/tree';
import type { ManifestRepository } from '@umbraco-cms/backoffice/extension-registry';
export const UMB_SCRIPT_FOLDER_REPOSITORY_ALIAS = 'Umb.Repository.Script.Folder';
@@ -13,21 +13,8 @@ const folderRepository: ManifestRepository = {
};
export const UMB_DELETE_SCRIPT_FOLDER_ENTITY_ACTION_ALIAS = 'Umb.EntityAction.Script.Folder.Delete';
export const UMB_CREATE_SCRIPT_FOLDER_ENTITY_ACTION_ALIAS = 'Umb.EntityAction.Script.Folder.Create';
const entityActions = [
{
type: 'entityAction',
alias: UMB_CREATE_SCRIPT_FOLDER_ENTITY_ACTION_ALIAS,
name: 'Create Script folder',
api: UmbCreateFolderEntityAction,
meta: {
icon: 'icon-add',
label: 'Create folder...',
repositoryAlias: UMB_SCRIPT_FOLDER_REPOSITORY_ALIAS,
entityTypes: [UMB_SCRIPT_ROOT_ENTITY_TYPE, UMB_SCRIPT_FOLDER_ENTITY_TYPE],
},
},
{
type: 'entityAction',
alias: UMB_DELETE_SCRIPT_FOLDER_ENTITY_ACTION_ALIAS,