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

link up template modals

Browse Source
This commit is contained in:
Lone Iversen
2024-02-28 13:01:35 +01:00
parent 169b7676f7
commit 42d43d39bf
2 changed files with 112 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info-history.element.ts
View File

@@ -89,7 +89,18 @@ export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement {
}
render() {
return html`<uui-box headline=${this.localize.term('general_history')}>
return html`<uui-box>
<div id="rollback" slot="header">
<h2><umb-localize key="general_history">History</umb-localize></h2>
<uui-button
label=${this.localize.term('actions_rollback')}
look="secondary"
slot="actions"
@click=${() => alert('TODO: Rollback Modal')}>
<uui-icon name="icon-undo"></uui-icon>
<umb-localize key="actions_rollback"></umb-localize>
</uui-button>
</div>
${this._items ? this.#renderHistory() : html`<uui-loader-circle></uui-loader-circle> `}
</uui-box>
${this.#renderHistoryPagination()}`;
@@ -114,10 +125,6 @@ export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement {
<uui-tag look=${style.look} color=${style.color}> ${this.localize.term(text.label)} </uui-tag>
${this.localize.term(text.desc, item.parameters)}
</span>
<uui-button label=${this.localize.term('actions_rollback')} look="secondary" slot="actions">
<uui-icon name="icon-undo"></uui-icon>
<umb-localize key="actions_rollback"></umb-localize>
</uui-button>
</umb-history-item>`;
},
)}
@@ -147,6 +154,18 @@ export class UmbDocumentWorkspaceViewInfoHistoryElement extends UmbLitElement {
font-size: 2rem;
}
#rollback {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
}
#rollback h2 {
font-size: var(--uui-type-h5-size);
margin: 0;
}
uui-tag uui-icon {
margin-right: var(--uui-size-space-1);
}

119
src/Umbraco.Web.UI.Client/src/packages/documents/documents/workspace/views/info/document-workspace-view-info.element.ts
View File

@@ -1,5 +1,6 @@
import { TimeOptions } from './utils.js';
import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement, state, repeat, ifDefined } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
import {
@@ -8,31 +9,24 @@ import {
UMB_WORKSPACE_MODAL,
UmbModalRouteRegistrationController,
} from '@umbraco-cms/backoffice/modal';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import './document-workspace-view-info-history.element.js';
import './document-workspace-view-info-reference.element.js';
import type { UmbDocumentWorkspaceContext } from '@umbraco-cms/backoffice/document';
import { DocumentVariantStateModel, type DocumentUrlInfoModel } from '@umbraco-cms/backoffice/external/backend-api';
import {
type UmbDocumentTypeDetailModel,
UmbDocumentTypeDetailRepository,
} from '@umbraco-cms/backoffice/document-type';
import { UmbTemplateDetailRepository } from '@umbraco-cms/backoffice/template';
@customElement('umb-document-workspace-view-info')
export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
@state()
private _nodeName = '';
@state()
private _documentTypeId = '';
@state()
private _documentUnique = '';
@state()
private _templateUnique = '';
private _workspaceContext?: UmbDocumentWorkspaceContext;
@state()
private _editDocumentTypePath = '';
@state()
private _urls?: Array<DocumentUrlInfoModel>;
@@ -42,7 +36,37 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
@state()
private _state = DocumentVariantStateModel.DRAFT;
/**Document Type */
@state()
private _documentTypeUnique = '';
@state()
private _documentTypeName?: string;
@state()
private _documentTypeIcon?: string;
@state()
private _editDocumentTypePath = '';
@state()
private _allowedTemplates?: UmbDocumentTypeDetailModel['allowedTemplates'];
/**Template */
@state()
private _templateUnique = '';
@state()
private _templateName?: string;
@state()
private _editTemplatePath = '';
#modalManagerContext?: typeof UMB_MODAL_MANAGER_CONTEXT.TYPE;
#workspaceContext?: UmbDocumentWorkspaceContext;
#templateRepository = new UmbTemplateDetailRepository(this);
#documentTypeRepository = new UmbDocumentTypeDetailRepository(this);
constructor() {
super();
@@ -57,7 +81,9 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
});
this.consumeContext(UMB_WORKSPACE_CONTEXT, (nodeContext) => {
this._workspaceContext = nodeContext as UmbDocumentWorkspaceContext;
this.#workspaceContext = nodeContext as UmbDocumentWorkspaceContext;
this._documentTypeUnique = this.#workspaceContext.getContentTypeId()!;
this.#getData();
this._observeContent();
});
@@ -66,19 +92,24 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
});
}
async #getData() {
const { data } = await this.#documentTypeRepository.requestByUnique(this._documentTypeUnique);
this._documentTypeName = data?.name;
this._documentTypeIcon = data?.icon;
this._allowedTemplates = data?.allowedTemplates;
}
private _observeContent() {
if (!this._workspaceContext) return;
if (!this.#workspaceContext) return;
this._nodeName = 'TBD, with variants this is not as simple.';
this._documentTypeId = this._workspaceContext.getContentTypeId()!;
this.observe(this._workspaceContext.urls, (urls) => {
this.observe(this.#workspaceContext.urls, (urls) => {
this._urls = urls;
});
this.observe(
this._workspaceContext.unique,
this.#workspaceContext.unique,
(unique) => {
this._documentUnique = unique!;
},
@@ -86,15 +117,28 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
);
this.observe(
this._workspaceContext.templateId,
(templateUnique) => {
this.#workspaceContext.templateId,
async (templateUnique) => {
this._templateUnique = templateUnique!;
if (!templateUnique) return;
const { data } = await this.#templateRepository.requestByUnique(templateUnique!);
this._templateName = data?.name;
new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
.addAdditionalPath('template')
.onSetup(() => {
return { data: { entityType: 'template', preset: {} } };
})
.observeRouteBuilder((routeBuilder) => {
this._editTemplatePath = routeBuilder({});
});
},
'_templateUnique',
);
/** TODO: Doubt this is the right way to get the create date... */
this.observe(this._workspaceContext.variants, (variants) => {
this.observe(this.#workspaceContext.variants, (variants) => {
this._createDate = Array.isArray(variants) ? variants[0].createDate || 'Unknown' : 'Unknown';
if (variants[0].state) this._state = variants[0].state;
});
@@ -179,17 +223,27 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
</div>
<div class="general-item">
<strong><umb-localize key="content_documentType">Document Type</umb-localize></strong>
<uui-button
look="secondary"
href=${this._editDocumentTypePath + 'edit/' + this._documentTypeId}
label=${this.localize.term('general_edit')}></uui-button>
<uui-ref-node-document-type
href=${this._editDocumentTypePath + 'edit/' + this._documentTypeUnique}
name=${ifDefined(this._documentTypeName)}>
<uui-icon slot="icon" name=${ifDefined(this._documentTypeIcon)}></uui-icon>
</uui-ref-node-document-type>
</div>
<div class="general-item">
<strong><umb-localize key="template_template">Template</umb-localize></strong>
<uui-button
look="secondary"
label="${this.localize.term('template_template')}"
@click=${this.#openTemplatePicker}></uui-button>
${this._templateUnique
? html`<uui-ref-node
name=${ifDefined(this._templateName)}
href=${this._editTemplatePath + 'edit/' + this._templateUnique}>
<uui-icon slot="icon" name="icon-newspaper"></uui-icon>
<uui-button
slot="actions"
label=${this.localize.term('general_edit')}
@click=${this.#openTemplatePicker}></uui-button>
</uui-ref-node>`
: html`<uui-button
label=${this.localize.term('general_edit')}
@click=${this.#openTemplatePicker}></uui-button>`}
</div>
<div class="general-item">
<strong><umb-localize key="template_id">Id</umb-localize></strong>
@@ -199,10 +253,13 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
}
async #openTemplatePicker() {
console.log(this._allowedTemplates);
const modal = this.#modalManagerContext?.open(UMB_TEMPLATE_PICKER_MODAL, {
data: {
hideTreeRoot: true,
multiple: false,
pickableFilter: (template) =>
this._allowedTemplates?.find((allowed) => template.unique === allowed.id) ? true : false,
},
value: {
selection: [this._templateUnique],
@@ -217,7 +274,7 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
if (!templateUnique) return;
this._workspaceContext?.setTemplate(templateUnique);
this.#workspaceContext?.setTemplate(templateUnique);
}
static styles = [