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

implement document-type workspace

Browse Source
This commit is contained in:
Niels Lyngsø
2024-05-02 10:04:16 +02:00
parent e6576dc173
commit ff986b1103
1 changed files with 12 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,8 @@
import { UMB_DOCUMENT_TYPE_WORKSPACE_CONTEXT } from './document-type-workspace.context-token.js';
import type { UmbInputWithAliasElement } from '@umbraco-cms/backoffice/components';
import { umbFocus, UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui';
import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
import { css, html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
import { UMB_MODAL_MANAGER_CONTEXT, UMB_ICON_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
import { generateAlias } from '@umbraco-cms/backoffice/utils';
@customElement('umb-document-type-workspace-editor')
export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
@state()
@@ -13,9 +11,6 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
@state()
private _alias?: string;
@state()
private _aliasLocked = true;
@state()
private _icon?: string;
@@ -37,42 +32,6 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
this.observe(this.#workspaceContext.icon, (icon) => (this._icon = icon), '_observeIcon');
}
// TODO. find a way where we don't have to do this for all workspaces.
#onNameChange(event: UUIInputEvent) {
if (event instanceof UUIInputEvent) {
const target = event.composedPath()[0] as UUIInputElement;
if (typeof target?.value === 'string') {
const oldName = this._name;
const oldAlias = this._alias;
const newName = event.target.value.toString();
if (this._aliasLocked) {
const expectedOldAlias = generateAlias(oldName ?? '');
// Only update the alias if the alias matches a generated alias of the old name (otherwise the alias is considered one written by the user.)
if (expectedOldAlias === oldAlias) {
this.#workspaceContext?.setAlias(generateAlias(newName));
}
}
this.#workspaceContext?.setName(target.value);
}
}
}
// TODO. find a way where we don't have to do this for all workspaces.
#onAliasChange(event: UUIInputEvent) {
if (event instanceof UUIInputEvent) {
const target = event.composedPath()[0] as UUIInputElement;
if (typeof target?.value === 'string') {
this.#workspaceContext?.setAlias(target.value);
}
}
event.stopPropagation();
}
#onToggleAliasLock() {
this._aliasLocked = !this._aliasLocked;
}
private async _handleIconClick() {
const [alias, color] = this._icon?.replace('color-', '')?.split(' ') ?? [];
const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
@@ -92,6 +51,11 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
});
}
#onNameAndAliasChange(event: InputEvent & { target: UmbInputWithAliasElement }) {
this.#workspaceContext?.setName(event.target.value ?? '');
this.#workspaceContext?.setAlias(event.target.alias ?? '');
}
render() {
return html`
<umb-workspace-editor alias="Umb.Workspace.DocumentType">
@@ -100,22 +64,12 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
<umb-icon name=${ifDefined(this._icon)}></umb-icon>
</uui-button>
<uui-input id="name" label="name" .value=${this._name} @input="${this.#onNameChange}" ${umbFocus()}>
<!-- TODO: should use UUI-LOCK-INPUT, but that does not fire an event when its locked/unlocked -->
<uui-input
name="alias"
slot="append"
label="alias"
@input=${this.#onAliasChange}
.value=${this._alias}
placeholder="Enter alias..."
?disabled=${this._aliasLocked}>
<!-- TODO: validation for bad characters -->
<div @click=${this.#onToggleAliasLock} @keydown=${() => ''} id="alias-lock" slot="prepend">
<uui-icon name=${this._aliasLocked ? 'icon-lock' : 'icon-unlocked'}></uui-icon>
</div>
</uui-input>
</uui-input>
<umb-input-with-alias
id="name"
label="name"
value=${this._name}
alias=${this._alias}
@change="${this.#onNameAndAliasChange}"></umb-input-with-alias>
</div>
</umb-workspace-editor>
`;
@@ -136,18 +90,6 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
#name {
width: 100%;
flex: 1 1 auto;
align-items: center;
}
#alias-lock {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
#alias-lock uui-icon {
margin-bottom: 2px;
}
#icon {