diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/create-user-entity-action.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/create-user-entity-action.ts new file mode 100644 index 0000000000..a6da26da4f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/create-user-entity-action.ts @@ -0,0 +1,21 @@ +import { UMB_USER_CREATE_OPTIONS_MODAL } from './modal/index.js'; +import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action'; +import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; + +export class UmbCreateUserEntityAction extends UmbEntityActionBase { + override async execute() { + const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT); + const modalContext = modalManager.open(this, UMB_USER_CREATE_OPTIONS_MODAL, { + data: { + parent: { + unique: this.args.unique, + entityType: this.args.entityType, + }, + }, + }); + + await modalContext.onSubmit(); + } +} + +export { UmbCreateUserEntityAction as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/manifests.ts new file mode 100644 index 0000000000..7915152337 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/manifests.ts @@ -0,0 +1,22 @@ +import { UMB_USER_ROOT_ENTITY_TYPE } from '../../entity.js'; + +import { manifests as modalManifests } from './modal/manifests.js'; + +import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ + { + type: 'entityAction', + kind: 'default', + alias: 'Umb.EntityAction.User.Create', + name: 'Create User Entity Action', + weight: 1200, + api: () => import('./create-user-entity-action.js'), + forEntityTypes: [UMB_USER_ROOT_ENTITY_TYPE], + meta: { + icon: 'icon-add', + label: '#actions_create', + }, + }, + ...modalManifests, +]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/index.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/index.ts new file mode 100644 index 0000000000..778a1fe38d --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/index.ts @@ -0,0 +1,8 @@ +import { UmbModalToken } from '@umbraco-cms/backoffice/modal'; + +export const UMB_USER_CREATE_OPTIONS_MODAL = new UmbModalToken('Umb.Modal.User.CreateOptions', { + modal: { + type: 'sidebar', + size: 'small', + }, +}); diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/manifests.ts new file mode 100644 index 0000000000..2c736c75fd --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/manifests.ts @@ -0,0 +1,10 @@ +import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ + { + type: 'modal', + alias: 'Umb.Modal.User.CreateOptions', + name: 'User Create Options Modal', + element: () => import('./user-create-options-modal.element.js'), + }, +]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/user-create-options-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/user-create-options-modal.element.ts new file mode 100644 index 0000000000..29932ea273 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/create/modal/user-create-options-modal.element.ts @@ -0,0 +1,108 @@ +import { UMB_CREATE_USER_MODAL } from '../../../modals/create/create-user-modal.token.js'; +import { UmbUserKind, type UmbUserKindType } from '../../../utils/index.js'; +import { html, customElement, map } from '@umbraco-cms/backoffice/external/lit'; +import { UMB_MODAL_MANAGER_CONTEXT, UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; +import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity'; +import { UMB_ENTITY_CONTEXT } from '@umbraco-cms/backoffice/entity'; +import { UMB_ACTION_EVENT_CONTEXT } from '@umbraco-cms/backoffice/action'; +import { UmbRequestReloadChildrenOfEntityEvent } from '@umbraco-cms/backoffice/entity-action'; + +interface UmbUserCreateOptionModel { + label: string; + description: string; + icon: string; + kind: UmbUserKindType; +} + +const elementName = 'umb-user-create-options-modal'; +@customElement(elementName) +export class UmbUserCreateOptionsModalElement extends UmbModalBaseElement { + #options: Array = [ + { + label: this.localize.term('user_userKindDefault'), + description: 'Donec augue nunc, ullamcorper non turpis ut, maximus facilisis lorem. Nunc id sagittis magna.', + icon: 'icon-user', + kind: UmbUserKind.DEFAULT, + }, + { + label: this.localize.term('user_userKindApi'), + description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', + icon: 'icon-unplug', + kind: UmbUserKind.API, + }, + ]; + + async #onClick(event: Event, kind: UmbUserKindType) { + event.stopPropagation(); + const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT); + const entityContext = await this.getContext(UMB_ENTITY_CONTEXT); + + const unique = entityContext.getUnique(); + const entityType = entityContext.getEntityType(); + + if (unique === undefined) throw new Error('Missing unique'); + if (!entityType) throw new Error('Missing entityType'); + + const modalContext = modalManager.open(this, UMB_CREATE_USER_MODAL, { + data: { + user: { + kind, + }, + }, + }); + + modalContext + ?.onSubmit() + .then(() => { + this.#requestReloadChildrenOfEntity({ entityType, unique }); + }) + .catch(async () => { + // modal is closed after creation instead of navigating to the new user. + // We therefore need to reload the children of the entity + this.#requestReloadChildrenOfEntity({ entityType, unique }); + }); + } + + async #requestReloadChildrenOfEntity({ entityType, unique }: UmbEntityModel) { + const eventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT); + const event = new UmbRequestReloadChildrenOfEntityEvent({ + entityType, + unique, + }); + + eventContext.dispatchEvent(event); + } + + override render() { + return html` + + + + ${map( + this.#options, + (item) => html` + this.#onClick(event, item.kind)}> + `, + )} + + + + + `; + } +} + +export { UmbUserCreateOptionsModalElement as element }; + +declare global { + interface HTMLElementTagNameMap { + [elementName]: UmbUserCreateOptionsModalElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/invite/invite-user-entity-action.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/invite/invite-user-entity-action.ts new file mode 100644 index 0000000000..4ac61a28d5 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/invite/invite-user-entity-action.ts @@ -0,0 +1,11 @@ +import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action'; +import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; + +export class UmbCreateUserEntityAction extends UmbEntityActionBase { + override async execute() { + const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT); + debugger; + } +} + +export { UmbCreateUserEntityAction as api }; diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/invite/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/invite/manifests.ts new file mode 100644 index 0000000000..0fc1e67e74 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/invite/manifests.ts @@ -0,0 +1,19 @@ +import { UMB_USER_ROOT_ENTITY_TYPE } from '../../entity.js'; + +import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry'; + +export const manifests: Array = [ + { + type: 'entityAction', + kind: 'default', + alias: 'Umb.EntityAction.User.Invite', + name: 'Invite User Entity Action', + weight: 1000, + api: () => import('./invite-user-entity-action.js'), + forEntityTypes: [UMB_USER_ROOT_ENTITY_TYPE], + meta: { + icon: 'icon-paper-plane', + label: '#user_invite', + }, + }, +]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/manifests.ts index b67955449e..493f108ff1 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/user/user/entity-actions/manifests.ts @@ -1,6 +1,10 @@ import { UMB_USER_DETAIL_REPOSITORY_ALIAS, UMB_USER_ITEM_REPOSITORY_ALIAS } from '../repository/index.js'; import { UMB_USER_ENTITY_TYPE } from '../entity.js'; -import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry'; + +import { manifests as createManifests } from './create/manifests.js'; +import { manifests as inviteManifests } from './invite/manifests.js'; + +import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry'; const entityActions: Array = [ { @@ -93,4 +97,8 @@ const entityActions: Array = [ }, ]; -export const manifests: Array = [...entityActions]; +export const manifests: Array = [ + ...entityActions, + ...createManifests, + ...inviteManifests, +];