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

Feature: Document Collection: Create Document in modal option

Browse Source 
Wires up the "Open in Infinity Editor" option,
to create a new document in a modal.
This commit is contained in:
leekelleher
2024-02-19 13:36:38 +00:00
parent 760421a877
commit 5b1f4b6c30
1 changed files with 30 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/action/create-document-collection-action.element.ts
View File

@@ -1,15 +1,21 @@
import { html, customElement, property, state, map } from '@umbraco-cms/backoffice/external/lit';
import type { UmbCollectionConfiguration } from '../../../../core/collection/types.js';
import { html, customElement, property, state, map, ifDefined } from '@umbraco-cms/backoffice/external/lit';
import { UmbDocumentTypeStructureRepository } from '@umbraco-cms/backoffice/document-type';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_DEFAULT_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection';
import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/document';
import type { ManifestCollectionAction } from '@umbraco-cms/backoffice/extension-registry';
import type { UmbAllowedDocumentTypeModel } from '@umbraco-cms/backoffice/document-type';
import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
@customElement('umb-create-document-collection-action')
export class UmbCreateDocumentCollectionActionElement extends UmbLitElement {
@state()
private _allowedDocumentTypes: Array<UmbAllowedDocumentTypeModel> = [];
@state()
private _createDocumentPath = '';
@state()
private _documentUnique?: string;
@@ -19,6 +25,9 @@ export class UmbCreateDocumentCollectionActionElement extends UmbLitElement {
@state()
private _popoverOpen = false;
@state()
private _useInfiniteEditor = false;
@property({ attribute: false })
manifest?: ManifestCollectionAction;
@@ -27,6 +36,15 @@ export class UmbCreateDocumentCollectionActionElement extends UmbLitElement {
constructor() {
super();
new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
.addAdditionalPath('document')
.onSetup(() => {
return { data: { entityType: 'document', preset: {} } };
})
.observeRouteBuilder((routeBuilder) => {
this._createDocumentPath = routeBuilder({});
});
this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (workspaceContext) => {
this.observe(workspaceContext.unique, (unique) => {
this._documentUnique = unique;
@@ -35,6 +53,12 @@ export class UmbCreateDocumentCollectionActionElement extends UmbLitElement {
this._documentTypeUnique = documentTypeUnique;
});
});
this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (collectionContext) => {
this.observe(collectionContext.filter, (filter) => {
this._useInfiniteEditor = filter.useInfiniteEditor == true;
});
});
}
async firstUpdated() {
@@ -58,14 +82,11 @@ export class UmbCreateDocumentCollectionActionElement extends UmbLitElement {
this._popoverOpen = event.newState === 'open';
}
#onClick(item: UmbAllowedDocumentTypeModel, e: Event) {
e.preventDefault();
// TODO: Do anything else here? [LK]
}
#getCreateUrl(item: UmbAllowedDocumentTypeModel) {
// TODO: Review how the "Create" URL is generated. [LK]
return `section/content/workspace/document/create/${this._documentUnique ?? 'null'}/${item.unique}`;
// TODO: [LK] I need help with this. I don't know what the infinity editor URL should be.
return this._useInfiniteEditor
? `${this._createDocumentPath}create/${this._documentUnique ?? 'null'}/${item.unique}`
: `section/content/workspace/document/create/${this._documentUnique ?? 'null'}/${item.unique}`;
}
render() {
@@ -79,7 +100,6 @@ export class UmbCreateDocumentCollectionActionElement extends UmbLitElement {
const label = (this.manifest?.meta.label ?? this.localize.term('general_create')) + ' ' + item.name;
return html`<uui-button
@click=${(e: Event) => this.#onClick(item, e)}
color="default"
href=${this.#getCreateUrl(item)}
label=${label}
@@ -105,10 +125,7 @@ export class UmbCreateDocumentCollectionActionElement extends UmbLitElement {
${map(
this._allowedDocumentTypes,
(item) => html`
<uui-menu-item
@click=${(e: Event) => this.#onClick(item, e)}
label=${item.name}
href=${this.#getCreateUrl(item)}>
<uui-menu-item label=${item.name} href=${this.#getCreateUrl(item)}>
<uui-icon slot="icon" name=${item.icon ?? 'icon-document'}></uui-icon>
</uui-menu-item>
`,