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

Bugfix: Document workspace info, fixes document type modal

Browse Source 
Plus UI and code tidy-up.

Fixes https://github.com/umbraco/Umbraco-CMS/issues/16283
This commit is contained in:
leekelleher
2024-05-27 11:40:53 +01:00
parent 888d1eb40a
commit f9730fdb5e
1 changed files with 115 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,20 +1,16 @@
import { TimeOptions } from './utils.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement, state, repeat, ifDefined } from '@umbraco-cms/backoffice/external/lit';
import { css, customElement, html, ifDefined, repeat, state } from '@umbraco-cms/backoffice/external/lit';
import { DocumentVariantStateModel } from '@umbraco-cms/backoffice/external/backend-api';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_MODAL_MANAGER_CONTEXT, UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/modal';
import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
import {
UMB_DOCUMENT_WORKSPACE_CONTEXT,
type UmbDocumentVariantModel,
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, UMB_TEMPLATE_PICKER_MODAL } from '@umbraco-cms/backoffice/template';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UMB_DOCUMENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/document';
import { UMB_MODAL_MANAGER_CONTEXT, UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/modal';
import { UMB_TEMPLATE_PICKER_MODAL, UmbTemplateItemRepository } from '@umbraco-cms/backoffice/template';
import type { DocumentUrlInfoModel } from '@umbraco-cms/backoffice/external/backend-api';
import type { UmbDocumentTypeDetailModel } from '@umbraco-cms/backoffice/document-type';
import type { UmbDocumentVariantModel } from '@umbraco-cms/backoffice/document';
import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/router';
// import of local components
import './document-workspace-view-info-history.element.js';
@@ -44,9 +40,6 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
@state()
private _documentTypeIcon?: string;
@state()
private _editDocumentTypePath = '';
@state()
private _allowedTemplates?: UmbDocumentTypeDetailModel['allowedTemplates'];
@@ -57,50 +50,54 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
@state()
private _templateName?: string;
@state()
private _editTemplatePath = '';
@state()
private _variants: UmbDocumentVariantModel[] = [];
#workspaceContext?: UmbDocumentWorkspaceContext;
#workspaceContext?: typeof UMB_DOCUMENT_WORKSPACE_CONTEXT.TYPE;
#templateRepository = new UmbTemplateDetailRepository(this);
#documentTypeRepository = new UmbDocumentTypeDetailRepository(this);
#templateRepository = new UmbTemplateItemRepository(this);
#routeBuilder?: UmbModalRouteBuilder;
constructor() {
super();
new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
.addAdditionalPath('document-type')
.onSetup(() => {
return { data: { entityType: 'document-type', preset: {} } };
.addAdditionalPath(':entityType')
.onSetup((params) => {
return { data: { entityType: params.entityType, preset: {} } };
})
.observeRouteBuilder((routeBuilder) => {
this._editDocumentTypePath = routeBuilder({});
this.#routeBuilder = routeBuilder;
});
this.consumeContext(UMB_DOCUMENT_WORKSPACE_CONTEXT, (context) => {
this.#workspaceContext = context;
this._documentTypeUnique = this.#workspaceContext.getContentTypeId()!;
this.#getData();
this._observeContent();
this.#observeContent();
});
}
async #getData() {
const { data } = await this.#documentTypeRepository.requestByUnique(this._documentTypeUnique);
this._documentTypeName = data?.name;
this._documentTypeIcon = data?.icon;
this._allowedTemplates = data?.allowedTemplates;
}
private _observeContent() {
#observeContent() {
if (!this.#workspaceContext) return;
this.observe(this.#workspaceContext.urls, (urls) => {
this._urls = urls;
});
this.observe(
this.#workspaceContext.structure.ownerContentType,
(documentType) => {
this._documentTypeName = documentType?.name;
this._documentTypeIcon = documentType?.icon;
this._allowedTemplates = documentType?.allowedTemplates;
},
'_documentType',
);
this.observe(
this.#workspaceContext.urls,
(urls) => {
this._urls = urls;
},
'_documentUrls',
);
this.observe(
this.#workspaceContext.unique,
@@ -116,17 +113,9 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
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({});
});
const { data } = await this.#templateRepository.requestItems([templateUnique]);
if (!data?.length) return;
this._templateName = data[0].name;
},
'_templateUnique',
);
@@ -143,9 +132,12 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
#observeVariants() {
// Find the oldest variant
const oldestVariant = this._variants
.filter((v) => !!v.createDate)
.reduce((prev, current) => (prev.createDate! < current.createDate! ? prev : current));
const oldestVariant =
this._variants.length > 0
? this._variants
.filter((v) => !!v.createDate)
.reduce((prev, current) => (prev.createDate! < current.createDate! ? prev : current))
: null;
this._createDate = oldestVariant?.createDate ?? new Date().toISOString();
}
@@ -154,41 +146,47 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
return repeat(
this._variants,
(variant) => `${variant.culture}_${variant.segment}`,
(variant) =>
html`<div>
<span class="variant-name">${variant.culture ?? this._invariantCulture}</span> ${this.#renderStateTag(
variant,
)}
</div>`,
(variant) => html`
<div class="variant-state">
<span>${variant.culture ?? this._invariantCulture}</span>
${this.#renderStateTag(variant)}
</div>
`,
);
}
#renderStateTag(variant: UmbDocumentVariantModel) {
switch (variant.state) {
case DocumentVariantStateModel.DRAFT:
return html`<uui-tag look="secondary" label=${this.localize.term('content_unpublished')}>
${this.localize.term('content_unpublished')}
</uui-tag>`;
return html`
<uui-tag look="secondary" label=${this.localize.term('content_unpublished')}>
${this.localize.term('content_unpublished')}
</uui-tag>
`;
case DocumentVariantStateModel.PUBLISHED:
return html`<uui-tag color="positive" look="primary" label=${this.localize.term('content_published')}>
${this.localize.term('content_published')}
</uui-tag>`;
return html`
<uui-tag color="positive" look="primary" label=${this.localize.term('content_published')}>
${this.localize.term('content_published')}
</uui-tag>
`;
case DocumentVariantStateModel.PUBLISHED_PENDING_CHANGES:
return html`<uui-tag
color="positive"
look="primary"
label=${this.localize.term('content_publishedPendingChanges')}>
${this.localize.term('content_published')}
</uui-tag>`;
return html`
<uui-tag color="positive" look="primary" label=${this.localize.term('content_publishedPendingChanges')}>
${this.localize.term('content_published')}
</uui-tag>
`;
default:
return html`<uui-tag look="primary" label=${this.localize.term('content_published')}>
${this.localize.term('content_published')}
</uui-tag>`;
return html`
<uui-tag look="primary" label=${this.localize.term('content_published')}>
${this.localize.term('content_published')}
</uui-tag>
`;
}
}
render() {
return html`<div class="container">
return html`
<div class="container">
<uui-box headline=${this.localize.term('general_links')} style="--uui-box-default-padding: 0;">
<div id="link-section">${this.#renderLinksSection()}</div>
</uui-box>
@@ -200,8 +198,11 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
.documentUnique=${this._documentUnique}></umb-document-workspace-view-info-history>
</div>
<div class="container">
<uui-box headline="General" id="general-section">${this.#renderGeneralSection()}</uui-box>
</div>`;
<uui-box headline=${this.localize.term('general_general')} id="general-section"
>${this.#renderGeneralSection()}</uui-box
>
</div>
`;
}
#renderLinksSection() {
@@ -221,18 +222,23 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
)}
`;
} else {
return html`<div class="link-item">
<span class="link-language">${this._invariantCulture}</span>
<span class="link-content italic"><umb-localize key="content_parentNotPublishedAnomaly"></umb-localize></span>
</div>`;
return html`
<div class="link-item">
<span class="link-language">${this._invariantCulture}</span>
<span class="link-content italic"><umb-localize key="content_parentNotPublishedAnomaly"></umb-localize></span>
</div>
`;
}
}
#renderGeneralSection() {
const editDocumentTypePath = this.#routeBuilder?.({ entityType: 'document-type' }) ?? '';
const editTemplatePath = this.#routeBuilder?.({ entityType: 'template' }) ?? '';
return html`
<div class="general-item">
<strong><umb-localize key="content_publishStatus">Publication Status</umb-localize></strong>
<span> ${this.#renderVariantStates()} </span>
<umb-stack look="compact">${this.#renderVariantStates()}</umb-stack>
</div>
<div class="general-item">
<strong><umb-localize key="content_createDate">Created</umb-localize></strong>
@@ -244,7 +250,7 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
<strong><umb-localize key="content_documentType">Document Type</umb-localize></strong>
<uui-ref-node-document-type
standalone
href=${this._editDocumentTypePath + 'edit/' + this._documentTypeUnique}
href=${editDocumentTypePath + 'edit/' + this._documentTypeUnique}
name=${ifDefined(this._documentTypeName)}>
<umb-icon slot="icon" name=${ifDefined(this._documentTypeIcon)}></umb-icon>
</uui-ref-node-document-type>
@@ -252,18 +258,25 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
<div class="general-item">
<strong><umb-localize key="template_template">Template</umb-localize></strong>
${this._templateUnique
? html`<uui-ref-node
standalone
name=${ifDefined(this._templateName)}
href=${this._editTemplatePath + 'edit/' + this._templateUnique}>
<uui-icon slot="icon" name="icon-newspaper"></uui-icon>
<uui-action-bar slot="actions">
<uui-button label=${this.localize.term('general_edit')} @click=${this.#openTemplatePicker}></uui-button>
</uui-action-bar>
</uui-ref-node>`
: html`<uui-button
label=${this.localize.term('general_edit')}
@click=${this.#openTemplatePicker}></uui-button>`}
? html`
<uui-ref-node
standalone
name=${ifDefined(this._templateName)}
href=${editTemplatePath + 'edit/' + this._templateUnique}>
<uui-icon slot="icon" name="icon-newspaper"></uui-icon>
<uui-action-bar slot="actions">
<uui-button
label=${this.localize.term('general_choose')}
@click=${this.#openTemplatePicker}></uui-button>
</uui-action-bar>
</uui-ref-node>
`
: html`
<uui-button
label=${this.localize.term('general_choose')}
look="placeholder"
@click=${this.#openTemplatePicker}></uui-button>
`}
</div>
<div class="general-item">
<strong><umb-localize key="template_id">Id</umb-localize></strong>
@@ -329,9 +342,13 @@ export class UmbDocumentWorkspaceViewInfoElement extends UmbLitElement {
margin-bottom: var(--uui-size-space-6);
}
.variant-name {
.variant-state {
display: flex;
gap: var(--uui-size-space-4);
}
.variant-state > span {
color: var(--uui-color-divider-emphasis);
padding-right: var(--uui-size-space-2);
}
// Link section