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

Wires up the umb-input-collection-configuration

Browse Source 
in the Media Type Editor UI.
This commit is contained in:
leekelleher
2024-02-29 13:23:30 +00:00
parent a48ddaee0f
commit 755046d085
1 changed files with 45 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/Umbraco.Web.UI.Client/src/packages/media/media-types/workspace/views/structure/media-type-workspace-view-structure.element.ts
View File

@@ -2,11 +2,12 @@ import type { UmbMediaTypeWorkspaceContext } from '../../media-type-workspace.co
import type { UmbInputMediaTypeElement } from '../../../components/input-media-type/input-media-type.element.js';
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import type { UUIToggleElement } from '@umbraco-cms/backoffice/external/uui';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
import type { UmbContentTypeSortModel } from '@umbraco-cms/backoffice/content-type';
import type { UmbInputCollectionConfigurationElement } from '@umbraco-cms/backoffice/components';
import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
import type { UUIToggleElement } from '@umbraco-cms/backoffice/external/uui';
@customElement('umb-media-type-workspace-view-structure')
export class UmbMediaTypeWorkspaceViewStructureElement extends UmbLitElement implements UmbWorkspaceViewElement {
@@ -18,6 +19,9 @@ export class UmbMediaTypeWorkspaceViewStructureElement extends UmbLitElement imp
@state()
private _allowedContentTypeIDs?: Array<string>;
@state()
private _collection?: string | null;
constructor() {
super();
@@ -31,14 +35,31 @@ export class UmbMediaTypeWorkspaceViewStructureElement extends UmbLitElement imp
private _observeMediaType() {
if (!this.#workspaceContext) return;
this.observe(this.#workspaceContext.allowedAtRoot, (allowedAsRoot) => (this._allowedAtRoot = allowedAsRoot));
this.observe(this.#workspaceContext.allowedContentTypes, (allowedContentTypes) => {
const oldValue = this._allowedContentTypeIDs;
this._allowedContentTypeIDs = allowedContentTypes
?.map((x) => x.contentType.unique)
.filter((x) => x !== undefined) as Array<string>;
this.requestUpdate('_allowedContentTypeIDs', oldValue);
});
this.observe(
this.#workspaceContext.allowedAtRoot,
(allowedAtRoot) => (this._allowedAtRoot = allowedAtRoot),
'_allowedAtRootObserver',
);
this.observe(
this.#workspaceContext.allowedContentTypes,
(allowedContentTypes) => {
const oldValue = this._allowedContentTypeIDs;
this._allowedContentTypeIDs = allowedContentTypes
?.map((x) => x.contentType.unique)
.filter((x) => x !== undefined) as Array<string>;
this.requestUpdate('_allowedContentTypeIDs', oldValue);
},
'_allowedContentTypesObserver',
);
this.observe(
this.#workspaceContext.collection,
(collection) => {
this._collection = collection?.unique;
},
'_collectionObserver',
);
}
render() {
@@ -51,7 +72,7 @@ export class UmbMediaTypeWorkspaceViewStructureElement extends UmbLitElement imp
label=${this.localize.term('contentTypeEditor_allowAtRootHeading')}
?checked=${this._allowedAtRoot}
@change=${(e: CustomEvent) => {
this.#workspaceContext?.updateProperty('allowedAtRoot', (e.target as UUIToggleElement).checked);
this.#workspaceContext?.setAllowedAtRoot((e.target as UUIToggleElement).checked);
}}></uui-toggle>
</div>
</umb-property-layout>
@@ -68,16 +89,25 @@ export class UmbMediaTypeWorkspaceViewStructureElement extends UmbLitElement imp
contentType: { unique: id },
sortOrder: index,
}));
this.#workspaceContext?.updateProperty('allowedContentTypes', sortedContentTypesList);
this.#workspaceContext?.setAllowedContentTypes(sortedContentTypesList);
}}">
</umb-input-media-type>
</div>
</umb-property-layout>
</uui-box>
<uui-box headline=${this.localize.term('contentTypeEditor_presentation')}>
<umb-property-layout alias="Root" label="Collection view">
<div slot="description">Provides an overview of child content and hides it in the tree.</div>
<div slot="editor"><uui-toggle label="Display children in a Collection view"></uui-toggle></div>
<umb-property-layout alias="collection" label="${this.localize.term('contentTypeEditor_collections')}">
<div slot="description">${this.localize.term('contentTypeEditor_collectionsDescription')}</div>
<div slot="editor">
<umb-input-collection-configuration
default-value="3a0156c4-3b8c-4803-bdc1-6871faa83fff"
.value=${this._collection ?? ''}
@change=${(e: CustomEvent) => {
const unique = (e.target as UmbInputCollectionConfigurationElement).value as string;
this.#workspaceContext?.setCollection({ unique });
}}>
</umb-input-collection-configuration>
</div>
</umb-property-layout>
</uui-box>
`;