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

bindings for structure

Browse Source
This commit is contained in:
Niels Lyngsø
2023-04-19 15:14:02 +02:00
parent 8eeb13c70d
commit c2ef5207cd
4 changed files with 118 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace-editor.element.ts
View File

@@ -14,7 +14,7 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
@state()
private _iconColorAlias?: string;
// TODO:Should be using an alias, and look up in some dictionary/key/value) of project-colors.
// TODO: Color should be using an alias, and look up in some dictionary/key/value) of project-colors.
#workspaceContext?: UmbDocumentTypeWorkspaceContext;

38
src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/document-type-workspace.context.ts
View File

@@ -2,7 +2,11 @@ import { UmbWorkspaceContext } from '../../../shared/components/workspace/worksp
import { UmbDocumentTypeRepository } from '../repository/document-type.repository';
import { UmbWorkspacePropertyStructureManager } from '../../../shared/components/workspace/workspace-context/workspace-structure-manager.class';
import { UmbEntityWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace';
import type { DocumentTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
import type {
ContentTypeCompositionModel,
ContentTypeSortModel,
DocumentTypeResponseModel,
} from '@umbraco-cms/backoffice/backend-api';
import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
type EntityType = DocumentTypeResponseModel;
@@ -80,12 +84,42 @@ export class UmbDocumentTypeWorkspaceContext
setAlias(alias: string) {
this.structure.updateRootDocumentType({ alias });
}
setDescription(description: string) {
this.structure.updateRootDocumentType({ description });
}
// TODO => manage setting icon color
// TODO: manage setting icon color alias?
setIcon(icon: string) {
this.structure.updateRootDocumentType({ icon });
}
setAllowedAsRoot(allowedAsRoot: boolean) {
this.structure.updateRootDocumentType({ allowedAsRoot });
}
setVariesByCulture(variesByCulture: boolean) {
this.structure.updateRootDocumentType({ variesByCulture });
}
setVariesBySegment(variesBySegment: boolean) {
this.structure.updateRootDocumentType({ variesBySegment });
}
setIsElement(isElement: boolean) {
this.structure.updateRootDocumentType({ isElement });
}
setAllowedContentTypes(allowedContentTypes: Array<ContentTypeSortModel>) {
this.structure.updateRootDocumentType({ allowedContentTypes });
}
setCompositions(compositions: Array<ContentTypeCompositionModel>) {
this.structure.updateRootDocumentType({ compositions });
}
// Document type specific:
setAllowedTemplateIds(allowedTemplateIds: Array<string>) {
this.structure.updateRootDocumentType({ allowedTemplateIds });
}
setDefaultTemplateId(defaultTemplateId: string) {
this.structure.updateRootDocumentType({ defaultTemplateId });
}
async createScaffold(parentId: string) {
const { data } = await this.structure.createScaffold(parentId);
if (!data) return undefined;

125
src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/structure/document-type-workspace-view-structure.element.ts
View File

@@ -3,11 +3,89 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, state } from 'lit/decorators.js';
import { UmbDocumentTypeWorkspaceContext } from '../../document-type-workspace.context';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import type { DocumentTypeResponseModel } from '@umbraco-cms/backoffice/backend-api';
import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-api';
import { ContentTypeSortModel } from 'libs/backend-api/src';
import type { UmbInputDocumentTypePickerElement } from 'src/backoffice/shared/components/input-document-type-picker/input-document-type-picker.element';
import { UUIToggleElement } from '@umbraco-ui/uui';
@customElement('umb-document-type-workspace-view-structure')
export class UmbDocumentTypeWorkspaceViewStructureElement extends UmbLitElement {
#workspaceContext?: UmbDocumentTypeWorkspaceContext;
@state()
private _allowedAsRoot?: boolean;
@state()
private _allowedContentTypeIDs?: Array<string>;
constructor() {
super();
// TODO: Figure out if this is the best way to consume the context or if it can be strongly typed with an UmbContextToken
this.consumeContext(UMB_ENTITY_WORKSPACE_CONTEXT, (documentTypeContext) => {
this.#workspaceContext = documentTypeContext as UmbDocumentTypeWorkspaceContext;
this._observeDocumentType();
});
}
private _observeDocumentType() {
if (!this.#workspaceContext) return;
this.observe(this.#workspaceContext.allowedAsRoot, (allowedAsRoot) => (this._allowedAsRoot = allowedAsRoot));
this.observe(this.#workspaceContext.allowedContentTypes, (allowedContentTypes) => {
this._allowedContentTypeIDs = allowedContentTypes
?.map((x) => x.id)
.filter((x) => x !== undefined) as Array<string>;
console.log('this._allowedContentTypeIDs', this._allowedContentTypeIDs);
});
}
render() {
return html`
<uui-box headline="Structure">
<umb-workspace-property-layout alias="Root" label="Allow as Root">
<div slot="description">Allow editors to create content of this type in the root of the content tree.</div>
<div slot="editor">
<uui-toggle
label="Allow as root"
.checked=${this._allowedAsRoot}
@change="${(e: CustomEvent) => {
this.#workspaceContext?.setAllowedAsRoot((e.target as UUIToggleElement).checked);
}}"></uui-toggle>
</div>
</umb-workspace-property-layout>
<umb-workspace-property-layout alias="ChildNodeType" label="Allowed child node types">
<div slot="description">
Allow content of the specified types to be created underneath content of this type.
</div>
<div slot="editor">
<!-- TODO: maybe we want to somehow display the hierarchy, but not necessary in the same way as old backoffice? -->
<umb-input-document-type-picker
.selectedIds=${this._allowedContentTypeIDs}
@change="${(e: CustomEvent) => {
const sortedContentTypesList = (e.target as UmbInputDocumentTypePickerElement).selectedIds.map(
(id, index) => ({
id: id,
sortOrder: index,
})
);
this.#workspaceContext?.setAllowedContentTypes(sortedContentTypesList);
}}">
</umb-input-document-type-picker>
</div>
</umb-workspace-property-layout>
</uui-box>
<uui-box headline="Presentation">
<umb-workspace-property-layout alias="Root" label="Collection">
<div slot="description">
Use this document as a collection, displaying its children in a Collection View. This could be a list or a
table.
</div>
<div slot="editor"><uui-toggle label="Present as a Collection"></uui-toggle></div>
</umb-workspace-property-layout>
</uui-box>
`;
}
static styles = [
UUITextStyles,
css`
@@ -26,51 +104,6 @@ export class UmbDocumentTypeWorkspaceViewStructureElement extends UmbLitElement
}
`,
];
private _workspaceContext?: UmbDocumentTypeWorkspaceContext;
constructor() {
super();
// TODO: Figure out if this is the best way to consume the context or if it can be strongly typed with an UmbContextToken
this.consumeContext(UMB_ENTITY_WORKSPACE_CONTEXT, (documentTypeContext) => {
this._workspaceContext = documentTypeContext as UmbDocumentTypeWorkspaceContext;
this._observeDocumentType();
});
}
private _observeDocumentType() {
if (!this._workspaceContext) return;
}
render() {
return html`
<uui-box headline="Structure">
<umb-workspace-property-layout alias="Root" label="Allow as Root">
<div slot="description">Allow editors to create content of this type in the root of the content tree.</div>
<div slot="editor"><uui-toggle label="Allow as root"></uui-toggle></div>
</umb-workspace-property-layout>
<umb-workspace-property-layout alias="ChildNodeType" label="Allowed child node types">
<div slot="description">
Allow content of the specified types to be created underneath content of this type.
</div>
<div slot="editor">
<!-- TODO: maybe we want to somehow display the hierarchy, but not necessary in the same way as old backoffice? -->
<umb-input-document-type-picker></umb-input-document-type-picker>
</div>
</umb-workspace-property-layout>
</uui-box>
<uui-box headline="Presentation">
<umb-workspace-property-layout alias="Root" label="Collection">
<div slot="description">
Use this document as a collection, displaying its children in a Collection View. This could be a list or a
table.
</div>
<div slot="editor"><uui-toggle label="Present as a Collection"></uui-toggle></div>
</umb-workspace-property-layout>
</uui-box>
`;
}
}
export default UmbDocumentTypeWorkspaceViewStructureElement;

3
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-type-picker/input-document-type-picker.element.ts
View File

@@ -30,11 +30,12 @@ export class UmbInputDocumentTypePickerElement extends FormControlMixin(UmbLitEl
// TODO: do we need both selectedIds and value? If we just use value we follow the same pattern as native form controls.
private _selectedIds: Array<string> = [];
@property({ type: Array })
public get selectedIds(): Array<string> {
return this._selectedIds;
}
public set selectedIds(ids: Array<string>) {
this._selectedIds = ids;
this._selectedIds = ids ?? [];
super.value = ids.join(',');
this._observePickedDocuments();
}