moved workspace markup to an edit view

This commit is contained in:
Jesper Møller Jensen
2023-01-19 02:00:00 +01:00
parent c29a4f1fff
commit 59e762efb3
3 changed files with 120 additions and 53 deletions

View File

@@ -5,6 +5,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html, LitElement, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UmbWorkspaceLanguageContext } from './language-workspace.context';
import 'src/backoffice/shared/components/workspace/actions/save/workspace-action-node-save.element.ts';
@customElement('umb-language-workspace')
export class UmbLanguageWorkspaceElement extends UmbLitElement {
@@ -70,57 +71,18 @@ export class UmbLanguageWorkspaceElement extends UmbLitElement {
render() {
if (!this.language) return nothing;
return html`<umb-body-layout>
<div id="header" slot="header">
<a href="/section/settings/language-root">
<uui-button compact>
<uui-icon name="umb:arrow-left"></uui-icon>
</uui-button>
</a>
<uui-input .value=${this.language.name}></uui-input>
</div>
<div id="main">
<uui-box>
<umb-workspace-property-layout label="Language">
<uui-input .value=${this.language.name} slot="editor"></uui-input>
</umb-workspace-property-layout>
<umb-workspace-property-layout label="ISO Code">
<div slot="editor">
${this.language.isoCode}
</div>
</umb-workspace-property-layout>
<umb-workspace-property-layout label="Settings">
<div slot="editor">
<uui-toggle ?checked=${this.language.isDefault || false}>
<div>
<b>Default language</b>
<div>An Umbraco site can only have one default language set.</div>
</div>
</uui-toggle ?checked=${this.language.isMandatory || false}>
<hr />
<uui-toggle>
<div>
<b>Mandatory language</b>
<div>Properties on this language have to be filled out before the node can be published.</div>
</div>
</uui-toggle>
<div id="default-language-warning">
Switching default language may result in default content missing.
</div>
</div>
</umb-workspace-property-layout>
<umb-workspace-property-layout
label="Fall back language"
description="To allow multi-lingual content to fall back to another language if not present in the requested language, select it here.">
<uui-combobox slot="editor">
<uui-combobox-list>
<uui-combobox-list-option value="">No fall back language</uui-combobox-list-option>
</uui-combobox-list>
</uui-combobox>
</umb-workspace-property-layout>
</uui-box>
</div>
</umb-body-layout>`;
return html`
<umb-workspace-layout alias="Umb.Workspace.Language">
<div id="header" slot="header">
<a href="/section/settings/language-root">
<uui-button compact>
<uui-icon name="umb:arrow-left"></uui-icon>
</uui-button>
</a>
<uui-input .value=${this.language.name}></uui-input>
</div>
</umb-workspace-layout>
`;
}
}

View File

@@ -10,8 +10,34 @@ const workspace: ManifestWorkspace = {
},
};
const workspaceViews: Array<ManifestWorkspaceView> = [];
const workspaceActions: Array<ManifestWorkspaceAction> = [
{
type: 'workspaceAction',
alias: 'Umb.WorkspaceAction.Language.Save',
name: 'Save Language Workspace Action',
loader: () => import('src/backoffice/shared/components/workspace/actions/save/workspace-action-node-save.element'),
meta: {
workspaces: ['Umb.Workspace.Language'],
look: 'primary',
color: 'positive',
},
},
];
const workspaceActions: Array<ManifestWorkspaceAction> = [];
const workspaceViews: Array<ManifestWorkspaceView> = [
{
type: 'workspaceView',
alias: 'Umb.WorkspaceView.Language.Edit',
name: 'Language Workspace Edit View',
loader: () => import('./views/edit/workspace-view-language-edit.element'),
weight: 90,
meta: {
workspaces: ['Umb.Workspace.Language'],
label: 'Edit',
pathname: 'edit',
icon: 'edit',
},
},
];
export const manifests = [workspace, ...workspaceViews, ...workspaceActions];

View File

@@ -0,0 +1,79 @@
import { UmbLitElement } from '@umbraco-cms/element';
import { LanguageDetails } from '@umbraco-cms/models';
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html, LitElement, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UmbWorkspaceLanguageContext } from '../../language-workspace.context';
@customElement('umb-workspace-view-language-edit')
export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement {
static styles = [UUITextStyles, css``];
@property()
language?: LanguageDetails;
private _languageWorkspaceContext?: UmbWorkspaceLanguageContext;
constructor() {
super();
this.consumeContext('umbWorkspaceContext', (instance) => {
this._languageWorkspaceContext = instance;
console.log('languagae', instance);
this._languageWorkspaceContext.data.subscribe((language) => {
this.language = language;
});
});
}
render() {
if (!this.language) return nothing;
return html`
<uui-box>
<umb-workspace-property-layout label="Language">
<uui-input .value=${this.language.name} slot="editor"></uui-input>
</umb-workspace-property-layout>
<umb-workspace-property-layout label="ISO Code">
<div slot="editor">${this.language.isoCode}</div>
</umb-workspace-property-layout>
<umb-workspace-property-layout label="Settings">
<div slot="editor">
<uui-toggle ?checked=${this.language.isDefault || false}>
<div>
<b>Default language</b>
<div>An Umbraco site can only have one default language set.</div>
</div>
</uui-toggle>
<hr />
<uui-toggle ?checked=${this.language.isMandatory || false}>
<div>
<b>Mandatory language</b>
<div>Properties on this language have to be filled out before the node can be published.</div>
</div>
</uui-toggle>
<div id="default-language-warning">Switching default language may result in default content missing.</div>
</div>
</umb-workspace-property-layout>
<umb-workspace-property-layout
label="Fall back language"
description="To allow multi-lingual content to fall back to another language if not present in the requested language, select it here.">
<uui-combobox slot="editor">
<uui-combobox-list>
<uui-combobox-list-option value="">No fall back language</uui-combobox-list-option>
</uui-combobox-list>
</uui-combobox>
</umb-workspace-property-layout>
</uui-box>
`;
}
}
export default UmbWorkspaceViewLanguageEditElement;
declare global {
interface HTMLElementTagNameMap {
'umb-workspace-view-language-edit': UmbWorkspaceViewLanguageEditElement;
}
}