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

render as ref item

Browse Source
This commit is contained in:
Mads Rasmussen
2024-10-29 20:00:45 +01:00
committed by Niels Lyngsø
parent 340dff742c
commit 38dc028d5a
5 changed files with 52 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/create-option-action/global-components/entity-create-option-action-list.element.ts
View File

@@ -1,109 +0,0 @@
import type { UmbEntityCreateOptionActionArgs } from '../types.js';
import type {
ManifestEntityCreateOptionAction,
MetaEntityCreateOptionAction,
} from '../entity-create-option-action.extension.js';
import { UmbEntityContext } from '@umbraco-cms/backoffice/entity';
import { html, customElement, property, state, css } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UmbApiConstructorArgumentsMethodType } from '@umbraco-cms/backoffice/extension-api';
const elementName = 'umb-entity-create-option-action-list';
@customElement(elementName)
export class UmbEntityCreateOptionActionListElement extends UmbLitElement {
@property({ type: String, attribute: 'entity-type' })
public get entityType(): string | undefined {
return this._props.entityType;
}
public set entityType(value: string | undefined) {
if (value === undefined || value === this._props.entityType) return;
this._props.entityType = value;
this.#generateApiArgs();
this.requestUpdate('_props');
// Update filter:
//const oldValue = this._filter;
this._filter = (extension: ManifestEntityCreateOptionAction<MetaEntityCreateOptionAction>) =>
extension.forEntityTypes.includes(value);
//this.requestUpdate('_filter', oldValue);
}
@state()
_filter?: (extension: ManifestEntityCreateOptionAction<MetaEntityCreateOptionAction>) => boolean;
@property({ type: String })
public get unique(): string | null | undefined {
return this._props.unique;
}
public set unique(value: string | null | undefined) {
if (value === this._props.unique) return;
this._props.unique = value;
this.#generateApiArgs();
this.requestUpdate('_props');
}
@state()
_props: Partial<UmbEntityCreateOptionActionArgs<unknown>> = {};
@state()
_apiArgs?: UmbApiConstructorArgumentsMethodType<
ManifestEntityCreateOptionAction<MetaEntityCreateOptionAction>,
[UmbEntityCreateOptionActionArgs<MetaEntityCreateOptionAction>]
>;
#entityContext = new UmbEntityContext(this);
#extensionType = 'entityCreateOptionAction';
#generateApiArgs() {
if (!this._props.entityType || this._props.unique === undefined) return;
this.#entityContext.setEntityType(this._props.entityType);
this.#entityContext.setUnique(this._props.unique);
this.#hasRenderedOnce = false;
this._apiArgs = (manifest: ManifestEntityCreateOptionAction<MetaEntityCreateOptionAction>) => {
return [{ entityType: this._props.entityType!, unique: this._props.unique!, meta: manifest.meta }];
};
}
#hasRenderedOnce?: boolean;
override render() {
return this._filter
? html`
<umb-extension-with-api-slot
type=${this.#extensionType}
.filter=${this._filter}
.elementProps=${this._props}
.apiArgs=${this._apiArgs}
.renderMethod=${(ext: any, i: number) => {
if (!this.#hasRenderedOnce && i === 0) {
// TODO: Replace this block:
ext.component?.updateComplete.then(async () => {
const menuitem = ext.component?.shadowRoot?.querySelector('uui-menu-item');
menuitem?.updateComplete.then(async () => {
menuitem?.shadowRoot?.querySelector('#label-button')?.focus?.();
});
});
// end of block, with this, when this PR is part of UI Lib: https://github.com/umbraco/Umbraco.UI/pull/789
// ext.component?.focus();
this.#hasRenderedOnce = true;
}
return ext.component;
}}></umb-extension-with-api-slot>
`
: '';
}
static override styles = [
css`
:host {
--uui-menu-item-flat-structure: 1;
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
[elementName]: UmbEntityCreateOptionActionListElement;
}
}

3
src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/create-option-action/global-components/index.ts
View File

@@ -1,3 +0,0 @@
import './entity-create-option-action-list.element.js';
export * from './entity-create-option-action-list.element.js';

3
src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/create-option-action/index.ts
View File

@@ -1,6 +1,3 @@
import './global-components/index.js';
export * from './global-components/index.js';
export * from './entity-create-option-action-base.js';
export * from './entity-create-option-action.extension.js';
export * from './entity-create-option-action.interface.js';

50
src/Umbraco.Web.UI.Client/src/packages/core/entity-action/common/create/modal/entity-create-option-action-list-modal.element.ts
View File

@@ -2,7 +2,9 @@ import type {
UmbEntityCreateOptionActionListModalData,
UmbEntityCreateOptionActionListModalValue,
} from './entity-create-option-action-list-modal.token.js';
import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbExtensionsApiInitializer } from '@umbraco-cms/backoffice/extension-api';
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
import { html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
const elementName = 'umb-entity-create-option-action-list-modal';
@@ -11,13 +13,40 @@ export class UmbEntityCreateOptionActionListModalElement extends UmbModalBaseEle
UmbEntityCreateOptionActionListModalData,
UmbEntityCreateOptionActionListModalValue
> {
@state()
private _apiControllers: Array<any> = [];
constructor() {
super();
new UmbExtensionsApiInitializer(
this,
umbExtensionsRegistry,
'entityCreateOptionAction',
[],
undefined,
(controllers) => {
this._apiControllers = controllers;
},
);
}
async #onClick(event: Event, controller: any) {
event.stopPropagation();
await controller.api.execute();
}
override render() {
return html`
<umb-body-layout headline="${this.localize.term('user_createUser')}">
<uui-box>
<umb-entity-create-option-action-list
.entityType=${this.data?.entityType}
.unique=${this.data?.unique}></umb-entity-create-option-action-list>
<uui-ref-list>
${repeat(
this._apiControllers,
(controller) => controller.manifest.alias,
(controller) => this.#renderRefItem(controller),
)}
</uui-ref-list>
</uui-box>
<uui-button
slot="actions"
@@ -26,6 +55,19 @@ export class UmbEntityCreateOptionActionListModalElement extends UmbModalBaseEle
</umb-body-layout>
`;
}
#renderRefItem(controller: any) {
const manifest = controller.manifest;
const label = manifest.meta.label ? this.localize.string(manifest.meta.label) : manifest.meta.name;
return html`
<umb-ref-item
name=${label}
detail=${manifest.meta.description}
icon=${manifest.meta.icon}
@click=${(event: Event) => this.#onClick(event, controller)}></umb-ref-item>
`;
}
}
export { UmbEntityCreateOptionActionListModalElement as element };

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

@@ -12,7 +12,9 @@ export class UmbCollectionCreateActionButtonElement extends UmbLitElement {
@state()
private _multipleOptions = false;
#apiControllers: Array<any> = [];
@state()
private _apiControllers: Array<any> = [];
#createLabel = this.localize.term('general_create');
#onPopoverToggle(event: PointerEvent) {
@@ -37,7 +39,7 @@ export class UmbCollectionCreateActionButtonElement extends UmbLitElement {
[],
undefined,
(controllers) => {
this.#apiControllers = controllers;
this._apiControllers = controllers;
this._multipleOptions = controllers.length > 1;
},
);
@@ -52,7 +54,7 @@ export class UmbCollectionCreateActionButtonElement extends UmbLitElement {
label=${this.#createLabel}
color="default"
look="outline"
@click=${(event: Event) => this.#onClick(event, this.#apiControllers[0])}></uui-button>`;
@click=${(event: Event) => this.#onClick(event, this._apiControllers[0])}></uui-button>`;
}
#renderMultiOptionAction() {
@@ -77,7 +79,7 @@ export class UmbCollectionCreateActionButtonElement extends UmbLitElement {
@toggle=${this.#onPopoverToggle}>
<umb-popover-layout>
<uui-scroll-container>
${this.#apiControllers.map((controller) => this.#renderMenuItem(controller))}
${this._apiControllers.map((controller) => this.#renderMenuItem(controller))}
</uui-scroll-container>
</umb-popover-layout>
</uui-popover-container>