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

render create options

Browse Source
This commit is contained in:
Mads Rasmussen
2024-10-29 17:03:27 +01:00
committed by Niels Lyngsø
parent 811951b8b6
commit 6acdda0385
1 changed files with 65 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/Umbraco.Web.UI.Client/src/packages/user/user/collection/action/create-user-collection-action.element.ts
View File

@@ -1,13 +1,7 @@
import { UMB_CREATE_USER_MODAL } from '../../modals/create/create-user-modal.token.js';
import type { UmbUserKindType } from '../../utils/index.js';
import { UmbUserKind } from '../../utils/index.js';
import { html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_MODAL_MANAGER_CONTEXT } 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';
import { UmbExtensionsApiInitializer } from '@umbraco-cms/backoffice/extension-api';
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
const elementName = 'umb-create-user-collection-action-button';
@customElement(elementName)
@@ -15,83 +9,92 @@ export class UmbCollectionActionButtonElement extends UmbLitElement {
@state()
private _popoverOpen = false;
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);
@state()
private _multipleOptions = false;
const unique = entityContext.getUnique();
const entityType = entityContext.getEntityType();
#apiControllers: Array<any> = [];
#createLabel = this.localize.term('general_create');
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);
}
#onPopoverToggle(event: ToggleEvent) {
#onPopoverToggle(event: PointerEvent) {
// TODO: This ignorer is just neede for JSON SCHEMA TO WORK, As its not updated with latest TS jet.
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
this._popoverOpen = event.newState === 'open';
}
override render() {
const label = this.localize.term('general_create');
async #onClick(event: Event, controller: any) {
event.stopPropagation();
await controller.api.execute();
}
constructor() {
super();
new UmbExtensionsApiInitializer(
this,
umbExtensionsRegistry,
'entityCreateOptionAction',
[],
undefined,
(controllers) => {
this.#apiControllers = controllers;
this._multipleOptions = controllers.length > 1;
},
);
}
override render() {
return this._multipleOptions ? this.#renderMultiOptionAction() : this.#renderSingleOptionAction();
}
#renderSingleOptionAction() {
return html` <uui-button
label=${this.#createLabel}
color="default"
look="outline"
@click=${(event: Event) => this.#onClick(event, this.#apiControllers[0])}></uui-button>`;
}
#renderMultiOptionAction() {
return html`
<uui-button popovertarget="collection-action-menu-popover" label=${label} color="default" look="outline">
${label}
<uui-button
popovertarget="collection-action-menu-popover"
label=${this.#createLabel}
color="default"
look="outline">
${this.#createLabel}
<uui-symbol-expand .open=${this._popoverOpen}></uui-symbol-expand>
</uui-button>
${this.#renderDropdown()}
`;
}
#renderDropdown() {
return html`
<uui-popover-container
id="collection-action-menu-popover"
placement="bottom-start"
@toggle=${this.#onPopoverToggle}>
<umb-popover-layout>
<uui-scroll-container>
<uui-menu-item
label=${this.localize.term('user_userKindDefault')}
@click=${(event: Event) => this.#onClick(event, UmbUserKind.DEFAULT)}>
<umb-icon slot="icon" name="icon-user"></umb-icon>
</uui-menu-item>
<uui-menu-item
label=${this.localize.term('user_userKindApi')}
@click=${(event: Event) => this.#onClick(event, UmbUserKind.API)}>
<umb-icon slot="icon" name="icon-unplug"></umb-icon>
</uui-menu-item>
${this.#apiControllers.map((controller) => this.#renderMenuItem(controller))}
</uui-scroll-container>
</umb-popover-layout>
</uui-popover-container>
`;
}
#renderMenuItem(controller: any) {
const label = controller.manifest.meta.label
? this.localize.string(controller.manifest.meta.label)
: controller.manifest.meta.name;
return html`
<uui-menu-item label=${label} @click=${(event: Event) => this.#onClick(event, controller)}>
<umb-icon slot="icon" name="icon-user"></umb-icon>
</uui-menu-item>
`;
}
}
export { UmbCollectionActionButtonElement as element };