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

template binding

Browse Source
This commit is contained in:
Niels Lyngsø
2023-04-19 16:06:49 +02:00
parent c9d46587c9
commit 9a45c80583
5 changed files with 86 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -114,6 +114,7 @@ export class UmbDocumentTypeWorkspaceContext
// Document type specific:
setAllowedTemplateIds(allowedTemplateIds: Array<string>) {
console.log('setAllowedTemplateIds', allowedTemplateIds);
this.structure.updateRootDocumentType({ allowedTemplateIds });
}
setDefaultTemplateId(defaultTemplateId: string) {

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

@@ -1,12 +1,63 @@
import { css, html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement } from 'lit/decorators.js';
import { customElement, state } from 'lit/decorators.js';
import { UmbDocumentTypeWorkspaceContext } from '../../document-type-workspace.context';
import type { UmbInputTemplateElement } from '../../../../../../backoffice/shared/components/input-template/input-template.element';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UMB_ENTITY_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/context-api';
@customElement('umb-document-type-workspace-view-templates')
export class UmbDocumentTypeWorkspaceViewTemplatesElement extends UmbLitElement {
#workspaceContext?: UmbDocumentTypeWorkspaceContext;
@state()
private _defaultTemplateId?: string | null;
@state()
private _allowedTemplateIds?: Array<string>;
constructor() {
super();
this.consumeContext(UMB_ENTITY_WORKSPACE_CONTEXT, (documentTypeContext) => {
this.#workspaceContext = documentTypeContext as UmbDocumentTypeWorkspaceContext;
this._observeDocumentType();
});
}
private _observeDocumentType() {
if (!this.#workspaceContext) return;
this.observe(
this.#workspaceContext.defaultTemplateId,
(defaultTemplateId) => (this._defaultTemplateId = defaultTemplateId)
);
this.observe(this.#workspaceContext.allowedTemplateIds, (allowedTemplateIds) => {
console.log('allowedTemplateIds', allowedTemplateIds);
this._allowedTemplateIds = allowedTemplateIds;
});
}
#templateInputChange(e: CustomEvent) {
console.log('change', e);
// save new allowed ids
const input = e.target as UmbInputTemplateElement;
this.#workspaceContext?.setAllowedTemplateIds(input.selectedIds);
this.#workspaceContext?.setDefaultTemplateId(input.defaultId);
}
render() {
return html`<uui-box headline="Templates">
<umb-workspace-property-layout alias="Templates" label="Allowed Templates">
<div slot="description">Choose which templates editors are allowed to use on content of this type</div>
<div id="templates" slot="editor">
<umb-input-template
.defaultId=${this._defaultTemplateId}
.selectedIds=${this._allowedTemplateIds}
@change=${this.#templateInputChange}></umb-input-template>
</div>
</umb-workspace-property-layout>
</uui-box>`;
}
static styles = [
UUITextStyles,
css`
@@ -34,45 +85,6 @@ export class UmbDocumentTypeWorkspaceViewTemplatesElement extends UmbLitElement
}
`,
];
private _workspaceContext?: UmbDocumentTypeWorkspaceContext;
constructor() {
super();
this.consumeContext(UMB_ENTITY_WORKSPACE_CONTEXT, (documentTypeContext) => {
this._workspaceContext = documentTypeContext as UmbDocumentTypeWorkspaceContext;
this._observeDocumentType();
});
}
private _observeDocumentType() {
if (!this._workspaceContext) return;
}
async #changeDefaultId(e: CustomEvent) {
// save new default id
console.log('workspace: default template id', e);
}
#changeAllowedKeys(e: CustomEvent) {
// save new allowed ids
console.log('workspace: allowed templates changed', e);
}
render() {
return html`<uui-box headline="Templates">
<umb-workspace-property-layout alias="Templates" label="Allowed Templates">
<div slot="description">Choose which templates editors are allowed to use on content of this type</div>
<div id="templates" slot="editor">
<umb-input-template-picker
.defaultKey="${/*this._documentType?.defaultTemplateId ??*/ ''}"
.allowedKeys="${/*this._documentType?.allowedTemplateIds ??*/ []}"
@change-default="${this.#changeDefaultId}"
@change-allowed="${this.#changeAllowedKeys}"></umb-input-template-picker>
</div>
</umb-workspace-property-layout>
</uui-box>`;
}
}
export default UmbDocumentTypeWorkspaceViewTemplatesElement;

2
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts
View File

@@ -29,7 +29,7 @@ import './input-multi-url-picker/input-multi-url-picker.element';
import './input-slider/input-slider.element';
import './input-toggle/input-toggle.element';
import './input-upload-field/input-upload-field.element';
import './input-template-picker/input-template-picker.element';
import './input-template/input-template.element';
import './property-type-based-property/property-type-based-property.element';
import './ref-property-editor-ui/ref-property-editor-ui.element';
import './section/section-main/section-main.element';

54
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-template-picker/input-template-picker.element.ts → src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-template/input-template.element.ts
View File

@@ -13,8 +13,8 @@ import {
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { TemplateResponseModel } from '@umbraco-cms/backoffice/backend-api';
@customElement('umb-input-template-picker')
export class UmbInputTemplatePickerElement extends FormControlMixin(UmbLitElement) {
@customElement('umb-input-template')
export class UmbInputTemplateElement extends FormControlMixin(UmbLitElement) {
/**
* This is a minimum amount of selected items in this input.
* @type {number}
@@ -51,24 +51,24 @@ export class UmbInputTemplatePickerElement extends FormControlMixin(UmbLitElemen
@property({ type: String, attribute: 'min-message' })
maxMessage = 'This field exceeds the allowed amount of items';
_allowedKeys: Array<string> = [];
_selectedIds: Array<string> = [];
@property({ type: Array<string> })
public get allowedKeys() {
return this._allowedKeys;
public get selectedIds() {
return this._selectedIds;
}
public set allowedKeys(newKeys: Array<string>) {
this._allowedKeys = newKeys;
public set selectedIds(newKeys: Array<string>) {
this._selectedIds = newKeys;
this.#observePickedTemplates();
}
_defaultKey = '';
_defaultId = '';
@property({ type: String })
public get defaultKey(): string {
return this._defaultKey;
public get defaultId(): string {
return this._defaultId;
}
public set defaultKey(newKey: string) {
this._defaultKey = newKey;
super.value = newKey;
public set defaultId(newId: string) {
this._defaultId = newId;
super.value = newId;
}
private _modalContext?: UmbModalContext;
@@ -87,7 +87,7 @@ export class UmbInputTemplatePickerElement extends FormControlMixin(UmbLitElemen
async #observePickedTemplates() {
this.observe(
await this._templateRepository.treeItems(this._allowedKeys),
await this._templateRepository.treeItems(this._selectedIds),
(data) => {
this._pickedTemplates = data;
},
@@ -99,23 +99,24 @@ export class UmbInputTemplatePickerElement extends FormControlMixin(UmbLitElemen
return this;
}
#changeDefault(e: CustomEvent) {
#onCardChange(e: CustomEvent) {
e.stopPropagation();
const newKey = (e.target as UmbTemplateCardElement).value as string;
this.defaultKey = newKey;
this.dispatchEvent(new CustomEvent('change-default'));
this.defaultId = newKey;
this.dispatchEvent(new CustomEvent('change'));
}
#openPicker() {
// TODO: Change experience, so its not multi selectable. But instead already picked templates should be unpickable. (awaiting general picker features for such)
const modalHandler = this._modalContext?.open(UMB_TEMPLATE_PICKER_MODAL, {
multiple: true,
selection: [...this.allowedKeys],
selection: [...this.selectedIds],
});
modalHandler?.onSubmit().then((data) => {
if (!data.selection) return;
this.allowedKeys = data.selection;
this.dispatchEvent(new CustomEvent('change-allowed'));
this.selectedIds = data.selection;
this.dispatchEvent(new CustomEvent('change'));
});
}
@@ -129,7 +130,7 @@ export class UmbInputTemplatePickerElement extends FormControlMixin(UmbLitElemen
In current backoffice we just prevent deleting a default when there are other templates. But if its the only one its okay. This is a weird experience, so we should make something that makes more sense.
BTW. its weird cause the damage of removing the default template is equally bad when there is one or more templates.
*/
this.allowedKeys = this.allowedKeys.filter((x) => x !== id);
this.selectedIds = this.selectedIds.filter((x) => x !== id);
}
#openTemplate(e: CustomEvent) {
@@ -146,18 +147,17 @@ export class UmbInputTemplatePickerElement extends FormControlMixin(UmbLitElemen
${this._pickedTemplates.map(
(template) => html`
<umb-template-card
class="template-card"
.name="${template.name ?? ''}"
.id="${template.id ?? ''}"
@change-default="${this.#changeDefault}"
@change=${this.#onCardChange}
@open="${this.#openTemplate}"
?default="${template.id === this.defaultKey}">
?default="${template.id === this.defaultId}">
<uui-button
slot="actions"
label="Remove document ${template.name}"
@click="${() => this.#removeTemplate(template.id ?? '')}"
compact>
<uui-icon name="umb:trash"> </uui-icon>
<uui-icon name="umb:trash"></uui-icon>
</uui-button>
</umb-template-card>
`
@@ -188,10 +188,10 @@ export class UmbInputTemplatePickerElement extends FormControlMixin(UmbLitElemen
];
}
export default UmbInputTemplatePickerElement;
export default UmbInputTemplateElement;
declare global {
interface HTMLElementTagNameMap {
'umb-input-template-picker': UmbInputTemplatePickerElement;
'umb-input-template': UmbInputTemplateElement;
}
}

19
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/template-card/template-card.element.ts
View File

@@ -9,10 +9,9 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
* @slot actions
* @fires open
* @fires selected
*
*
*/
// TODO: This should extends the UUICardElement, and the visual look of this should be like the UserCard or similarly.
// TOOD: Consider if this should be select in the 'persisted'-select style when it is selected as a default. (But its should not use the runtime-selection style)
@customElement('umb-template-card')
export class UmbTemplateCardElement extends FormControlMixin(UmbLitElement) {
@property({ type: String })
@@ -39,12 +38,12 @@ export class UmbTemplateCardElement extends FormControlMixin(UmbLitElement) {
e.preventDefault();
e.stopPropagation();
//this.selected = true;
this.dispatchEvent(new CustomEvent('change-default', { bubbles: true, composed: true }));
this.dispatchEvent(new CustomEvent('change', { bubbles: false, composed: true }));
}
#openTemplate(e: KeyboardEvent) {
e.preventDefault();
e.stopPropagation();
this.dispatchEvent(new CustomEvent('open', { bubbles: true, composed: true }));
this.dispatchEvent(new CustomEvent('open', { bubbles: false, composed: true }));
}
render() {
@@ -54,7 +53,7 @@ export class UmbTemplateCardElement extends FormControlMixin(UmbLitElement) {
<strong>${this.name.length ? this.name : 'Untitled template'}</strong>
</button>
<uui-button id="bottom" label="Default template" ?disabled="${this.default}" @click="${this.#setSelection}">
${this.default ? '(Default template)' : 'Set default'}
${this.default ? '(Default template)' : 'Make default'}
</uui-button>
<slot name="actions"></slot>
</div>`;
@@ -88,14 +87,6 @@ export class UmbTemplateCardElement extends FormControlMixin(UmbLitElement) {
padding: var(--uui-size-4);
}
:host([default]) #card {
border: 1px solid var(--uui-color-selected);
outline: 1px solid var(--uui-color-selected);
}
#card:has(uui-button:hover) {
border: 1px solid var(--uui-color-selected);
}
#bottom {
margin-top: auto;
}