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

render entity action for extension collection

Browse Source
This commit is contained in:
Mads Rasmussen
2024-05-17 13:13:52 +02:00
parent 3098d56c49
commit 8524ca3c32
3 changed files with 41 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/collection/views/extension-table-action-column-layout.element.ts
View File

@@ -1,51 +0,0 @@
import { umbExtensionsRegistry } from '../../index.js';
import type { UmbExtensionCollectionFilterModel } from '../types.js';
import { UMB_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection';
import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { umbConfirmModal } from '@umbraco-cms/backoffice/modal';
import type { ManifestBase } from '@umbraco-cms/backoffice/extension-api';
import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection';
@customElement('umb-extension-table-action-column-layout')
export class UmbExtensionTableActionColumnLayoutElement extends UmbLitElement {
@property({ attribute: false })
value!: ManifestBase;
#collectionContext?: UmbDefaultCollectionContext<any, UmbExtensionCollectionFilterModel>;
constructor() {
super();
this.consumeContext(UMB_COLLECTION_CONTEXT, (instance) => {
this.#collectionContext = instance;
});
}
async #removeExtension() {
await umbConfirmModal(this, {
headline: 'Unload extension',
confirmLabel: 'Unload',
content: html`<p>Are you sure you want to unload the extension <strong>${this.value.alias}</strong>?</p>`,
color: 'danger',
});
umbExtensionsRegistry.unregister(this.value.alias);
this.#collectionContext?.requestCollection();
}
render() {
return html`
<uui-button label="Unload" color="danger" look="primary" @click=${this.#removeExtension}>
<uui-icon name="icon-trash"></uui-icon>
</uui-button>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-extension-table-action-column-layout': UmbExtensionTableActionColumnLayoutElement;
}
}

13
src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/collection/views/table/extension-table-collection-view.element.ts
View File

@@ -1,13 +1,12 @@
import type { UmbExtensionCollectionFilterModel } from '../../types.js';
import type { UmbExtensionCollectionFilterModel, UmbExtensionDetailModel } from '../../types.js';
import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection';
import { UMB_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection';
import type { UmbTableColumn, UmbTableConfig, UmbTableItem } from '@umbraco-cms/backoffice/components';
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { ManifestBase } from '@umbraco-cms/backoffice/extension-api';
import '../extension-table-action-column-layout.element.js';
import './extension-table-entity-actions-column-layout.element.js';
@customElement('umb-extension-table-collection-view')
export class UmbExtensionTableCollectionViewElement extends UmbLitElement {
@@ -37,14 +36,14 @@ export class UmbExtensionTableCollectionViewElement extends UmbLitElement {
{
name: '',
alias: 'extensionAction',
elementName: 'umb-extension-table-action-column-layout',
elementName: 'umb-extension-table-entity-actions-column-layout',
},
];
@state()
private _tableItems: Array<UmbTableItem> = [];
#collectionContext?: UmbDefaultCollectionContext<any, UmbExtensionCollectionFilterModel>;
#collectionContext?: UmbDefaultCollectionContext<UmbExtensionDetailModel, UmbExtensionCollectionFilterModel>;
constructor() {
super();
@@ -60,10 +59,10 @@ export class UmbExtensionTableCollectionViewElement extends UmbLitElement {
this.observe(this.#collectionContext.items, (items) => this.#createTableItems(items), 'umbCollectionItemsObserver');
}
#createTableItems(extensions: Array<ManifestBase>) {
#createTableItems(extensions: Array<UmbExtensionDetailModel>) {
this._tableItems = extensions.map((extension) => {
return {
id: extension.alias,
id: extension.unique,
data: [
{
columnAlias: 'extensionType',

35
src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/collection/views/table/extension-table-entity-actions-column-layout.element.ts Normal file
View File

@@ -0,0 +1,35 @@
import type { UmbExtensionDetailModel } from '../../types.js';
import { html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
const elementName = 'umb-extension-table-entity-actions-column-layout';
@customElement(elementName)
export class UmbExtensionTableEntityActionsColumnLayoutElement extends UmbLitElement {
@property({ attribute: false })
value!: UmbExtensionDetailModel;
@state()
_isOpen = false;
#onActionExecuted() {
this._isOpen = false;
}
render() {
return html`
<umb-dropdown .open=${this._isOpen} compact hide-expand>
<uui-symbol-more slot="label"></uui-symbol-more>
<umb-entity-action-list
@action-executed=${this.#onActionExecuted}
entity-type=${this.value.entityType}
unique=${ifDefined(this.value.unique)}></umb-entity-action-list>
</umb-dropdown>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
[elementName]: UmbExtensionTableEntityActionsColumnLayoutElement;
}
}