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

add actions to document tree

Browse Source
This commit is contained in:
Mads Rasmussen
2022-09-08 15:45:21 +02:00
parent 045c4b4f62
commit 998d45b62b
8 changed files with 111 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/Umbraco.Web.UI.Client/src/backoffice/trees/actions/index.ts
View File

@@ -3,7 +3,6 @@ export * from './action-page.service';
export * from './actions.service';
export * from './tree-action.element';
export * from './tree-action-create-page.element';
export * from './tree-action-create-page-2.element';
export * from './tree-action-create.element';
export * from './tree-action-delete.element';
export * from '../documents/actions/action-document-paged-page.element';
export * from '../documents/actions/action-document-paged-page-2.element';
export * from '../documents/actions/action-document-paged.element';

55
src/Umbraco.Web.UI.Client/src/backoffice/trees/actions/tree-action-delete.element.ts
View File

@@ -1,55 +0,0 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { UmbModalService } from '../../../core/services/modal';
import { UmbNodeStore } from '../../../core/stores/node.store';
import UmbActionElement from './action.element';
@customElement('umb-tree-action-delete')
export class UmbTreeActionDeleteElement extends UmbActionElement {
static styles = [UUITextStyles, css``];
private _modalService?: UmbModalService;
private _nodeStore?: UmbNodeStore;
constructor() {
super();
this.consumeContext('umbModalService', (modalService: UmbModalService) => {
this._modalService = modalService;
});
this.consumeContext('umbNodeStore', (nodeStore: UmbNodeStore) => {
this._nodeStore = nodeStore;
});
}
private _handleLabelClick() {
const modalHandler = this._modalService?.confirm({
headline: 'Delete page 1',
content: 'Are you sure you want to delete this page?',
color: 'danger',
});
modalHandler?.onClose.then(({ confirmed }: any) => {
if (confirmed && this._actionService) {
this._nodeStore?.trash(this._entity.key);
this._actionService.close();
}
});
}
render() {
return html` <uui-menu-item label=${this.treeAction?.meta.label ?? ''} @click-label="${this._handleLabelClick}">
<uui-icon slot="icon" name=${this.treeAction?.meta.icon ?? ''}></uui-icon>
</uui-menu-item>`;
}
}
export default UmbTreeActionDeleteElement;
declare global {
interface HTMLElementTagNameMap {
'umb-tree-action-delete': UmbTreeActionDeleteElement;
}
}

34
src/Umbraco.Web.UI.Client/src/backoffice/trees/documents/actions/action-document-create.element.ts Normal file
View File

@@ -0,0 +1,34 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import UmbActionElement from '../../actions/action.element';
@customElement('umb-tree-action-document-create')
export default class UmbTreeActionDocumentCreateElement extends UmbActionElement {
static styles = [UUITextStyles, css``];
// TODO: how do we handle the href?
private _constructUrl() {
return `/section/content/${this._activeTreeItem?.type}/${this._activeTreeItem?.key}/view/content?create=true`;
}
// TODO: change to href. This is a temporary solution to get the link to work. For some reason query params gets removed when using href.
private _handleLabelClick() {
if (!this._actionService) return;
const href = this._constructUrl();
history.pushState(null, '', href);
this._actionService.close();
}
render() {
return html`<uui-menu-item label=${this.treeAction?.meta.label ?? ''} @click-label="${this._handleLabelClick}">
<uui-icon slot="icon" name=${this.treeAction?.meta.icon ?? ''}></uui-icon>
</uui-menu-item>`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-tree-action-document-create': UmbTreeActionDocumentCreateElement;
}
}

55
src/Umbraco.Web.UI.Client/src/backoffice/trees/documents/actions/action-document-delete.element.ts Normal file
View File

@@ -0,0 +1,55 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { UmbContextConsumerMixin } from '../../../../core/context';
import { UmbModalService } from '../../../../core/services/modal';
import { UmbNodeStore } from '../../../../core/stores/node.store';
import UmbActionElement from '../../actions/action.element';
@customElement('umb-tree-action-document-delete')
export default class UmbTreeActionDocumentDeleteElement extends UmbContextConsumerMixin(UmbActionElement) {
static styles = [UUITextStyles, css``];
private _modalService?: UmbModalService;
private _nodeStore?: UmbNodeStore;
connectedCallback(): void {
super.connectedCallback();
this.consumeContext('umbModalService', (modalService: UmbModalService) => {
this._modalService = modalService;
});
this.consumeContext('umbNodeStore', (nodeStore: UmbNodeStore) => {
this._nodeStore = nodeStore;
});
}
private _handleLabelClick() {
const modalHandler = this._modalService?.confirm({
headline: `Delete ${this._activeTreeItem?.name ?? 'item'}`,
content: 'Are you sure you want to delete this item?',
color: 'danger',
confirmLabel: 'Delete',
});
modalHandler?.onClose.then(({ confirmed }: any) => {
if (confirmed && this._actionService && this._nodeStore && this._activeTreeItem) {
this._nodeStore?.trash(this._activeTreeItem.key);
this._actionService.close();
}
});
}
render() {
return html`<uui-menu-item label=${this.treeAction?.meta.label ?? ''} @click-label="${this._handleLabelClick}">
<uui-icon slot="icon" name=${this.treeAction?.meta.icon ?? ''}></uui-icon>
</uui-menu-item>`;
}
}
declare global {
interface HTMLElementTagNameMap {
'umb-tree-action-document-delete': UmbTreeActionDocumentDeleteElement;
}
}

2
src/Umbraco.Web.UI.Client/src/backoffice/trees/actions/tree-action-create-page-2.element.ts → src/Umbraco.Web.UI.Client/src/backoffice/trees/documents/actions/action-document-paged-page-2.element.ts
View File

@@ -1,7 +1,7 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import UmbActionElement from './action.element';
import UmbActionElement from '../../actions/action.element';
@customElement('umb-tree-action-create-page-2')
export class UmbTreeActionCreatePage2Element extends UmbActionElement {

2
src/Umbraco.Web.UI.Client/src/backoffice/trees/actions/tree-action-create-page.element.ts → src/Umbraco.Web.UI.Client/src/backoffice/trees/documents/actions/action-document-paged-page.element.ts
View File

@@ -1,7 +1,7 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import UmbActionElement from './action.element';
import UmbActionElement from '../../actions/action.element';
@customElement('umb-tree-action-create-page')
export class UmbTreeActionCreatePageElement extends UmbActionElement {

2
src/Umbraco.Web.UI.Client/src/backoffice/trees/actions/tree-action-create.element.ts → src/Umbraco.Web.UI.Client/src/backoffice/trees/documents/actions/action-document-paged.element.ts
View File

@@ -1,7 +1,7 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import UmbActionElement from './action.element';
import UmbActionElement from '../../actions/action.element';
@customElement('umb-tree-action-create')
export class UmbTreeActionCreateElement extends UmbActionElement {

22
src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
View File

@@ -386,12 +386,11 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
entityType: 'document',
},
},
// TODO: can we have generic tree item actions across trees?
{
type: 'treeItemAction',
alias: 'Umb.TreeItemAction.Document.Create',
name: 'Tree Item Action Create',
loader: () => import('./backoffice/trees/actions/tree-action-create.element'),
name: 'Document Tree Item Action Create',
loader: () => import('./backoffice/trees/documents/actions/action-document-create.element'),
meta: {
trees: ['Umb.Tree.Content'],
label: 'Create',
@@ -402,8 +401,8 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
{
type: 'treeItemAction',
alias: 'Umb.TreeItemAction.Document.Delete',
name: 'Tree Item Action Create',
loader: () => import('./backoffice/trees/actions/tree-action-delete.element'),
name: 'Document Tree Item Action Delete',
loader: () => import('./backoffice/trees/documents/actions/action-document-delete.element'),
meta: {
trees: ['Umb.Tree.Content'],
label: 'Delete',
@@ -411,7 +410,18 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
weight: 100,
},
},
// TODO: or specific tree item actions per tree?
{
type: 'treeItemAction',
alias: 'Umb.TreeItemAction.Document.Paged',
name: 'Document Tree Item Action Paged',
loader: () => import('./backoffice/trees/documents/actions/action-document-paged.element'),
meta: {
trees: ['Umb.Tree.Content'],
label: 'Paged',
icon: 'favorite',
weight: 100,
},
},
{
type: 'treeItemAction',
alias: 'Umb.TreeItemAction.DataType.Create',