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

abstract culture selection into its own component

Browse Source
This commit is contained in:
Mads Rasmussen
2023-02-16 15:22:08 +01:00
parent c7e025e115
commit 0f66e490f8
3 changed files with 113 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/edit/edit-language-workspace-view.element.ts
View File

@@ -5,9 +5,10 @@ import { repeat } from 'lit/directives/repeat.js';
import { customElement, property, state } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { UmbLanguageWorkspaceContext } from '../../language-workspace.context';
import { UmbCultureRepository } from '../../../../../cultures/repository/culture.repository';
import { UmbLitElement } from '@umbraco-cms/element';
import { CultureModel, LanguageModel } from '@umbraco-cms/backend-api';
import { LanguageModel } from '@umbraco-cms/backend-api';
import { UmbChangeEvent } from 'src/core/events';
import UmbInputCultureSelectElement from 'src/backoffice/shared/components/input-culture-select/input-culture-select.element';
@customElement('umb-edit-language-workspace-view')
export class UmbEditLanguageWorkspaceViewElement extends UmbLitElement {
@@ -51,17 +52,10 @@ export class UmbEditLanguageWorkspaceViewElement extends UmbLitElement {
@state()
private _languages: LanguageModel[] = [];
@state()
private _cultures: CultureModel[] = [];
@state()
private _search = '';
@state()
private _startData: LanguageModel | null = null;
#languageWorkspaceContext?: UmbLanguageWorkspaceContext;
#cultureRepository = new UmbCultureRepository(this);
constructor() {
super();
@@ -75,29 +69,13 @@ export class UmbEditLanguageWorkspaceViewElement extends UmbLitElement {
});
}
protected async firstUpdated() {
const { data } = await this.#cultureRepository.requestCultures();
if (data) {
this._cultures = data.items;
}
}
#handleLanguageChange(event: Event) {
if (event instanceof UUIComboboxEvent) {
const target = event.composedPath()[0] as UUIComboboxElement;
#handleCultureChange(event: Event) {
if (event instanceof UmbChangeEvent) {
const target = event.target as UmbInputCultureSelectElement;
const isoCode = target.value.toString();
const cultureName = target.selectedCultureName;
if (isoCode) {
this.#languageWorkspaceContext?.setCulture(isoCode);
// If the language name is not set, we set it to the name of the selected language.
if (!this.language?.name) {
const culture = this._cultures.find((culture) => culture.name === isoCode);
if (culture && culture.englishName) {
this.#languageWorkspaceContext?.setName(culture.englishName);
}
}
} else {
if (!isoCode) {
// If the isoCode is empty, we reset the value to the original value.
// Provides a way better UX
//TODO: Maybe the combobox should implement something similar?
@@ -107,15 +85,18 @@ export class UmbEditLanguageWorkspaceViewElement extends UmbLitElement {
target.addEventListener('close', resetFunction, { once: true });
target.addEventListener('blur', resetFunction, { once: true });
return;
}
this.#languageWorkspaceContext?.setCulture(isoCode);
// If the language name is not set, we set it to the name of the selected language.
if (!this.language?.name && cultureName) {
this.#languageWorkspaceContext?.setName(cultureName);
}
}
}
#handleSearchChange(event: Event) {
const target = event.composedPath()[0] as UUIComboboxElement;
this._search = target.search;
}
#handleDefaultChange(event: UUIBooleanInputEvent) {
if (event instanceof UUIBooleanInputEvent) {
const target = event.composedPath()[0] as UUIToggleElement;
@@ -137,12 +118,6 @@ export class UmbEditLanguageWorkspaceViewElement extends UmbLitElement {
}
}
get #filteredCultures(): Array<CultureModel> {
return this._cultures.filter((culture) => {
return culture.englishName?.toLowerCase().includes(this._search.toLowerCase());
});
}
get #fallbackLanguages() {
return this._languages.filter((language) => {
return language.isoCode !== this.language?.isoCode;
@@ -153,10 +128,6 @@ export class UmbEditLanguageWorkspaceViewElement extends UmbLitElement {
return this.#fallbackLanguages.find((language) => language.isoCode === this.language?.fallbackIsoCode);
}
get #fromAvailableCultures() {
return this._cultures.find((culture) => culture.name === this.language?.isoCode);
}
#renderCultureWarning() {
if (!this._startData?.isoCode || this._startData?.isoCode === this.language?.isoCode) return nothing;
@@ -181,29 +152,17 @@ export class UmbEditLanguageWorkspaceViewElement extends UmbLitElement {
<uui-box>
<umb-workspace-property-layout label="Language">
<div slot="editor">
<uui-combobox
value=${ifDefined(this.#fromAvailableCultures?.name)}
@change=${this.#handleLanguageChange}
@search=${this.#handleSearchChange}>
<uui-combobox-list>
${repeat(
this.#filteredCultures,
(language) => language.name,
(language) =>
html`
<uui-combobox-list-option value=${ifDefined(language.name)}
>${language.englishName}</uui-combobox-list-option
>
`
)}
</uui-combobox-list>
</uui-combobox>
<umb-input-culture-select
value=${ifDefined(this.language.isoCode)}
@change=${this.#handleCultureChange}></umb-input-culture-select>
${this.#renderCultureWarning()}
</div>
</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
@@ -225,6 +184,7 @@ export class UmbEditLanguageWorkspaceViewElement extends UmbLitElement {
</uui-toggle>
</div>
</umb-workspace-property-layout>
<umb-workspace-property-layout
label="Fallback language"
description="To allow multi-lingual content to fall back to another language if not present in the requested language, select it here.">

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

@@ -28,6 +28,7 @@ import '../entity-actions/entity-action-list.element';
import './input-media-picker/input-media-picker.element';
import './input-document-picker/input-document-picker.element';
import './input-culture-select/input-culture-select.element';
import './empty-state/empty-state.element';
import './color-picker/color-picker.element';

90
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-culture-select/input-culture-select.element.ts Normal file
View File

@@ -0,0 +1,90 @@
import { css, html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, state } from 'lit/decorators.js';
import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { repeat } from 'lit/directives/repeat.js';
import { UUIComboboxElement } from '@umbraco-ui/uui';
import { UmbCultureRepository } from '../../../settings/cultures/repository/culture.repository';
import { UmbLitElement } from '@umbraco-cms/element';
import { CultureModel } from '@umbraco-cms/backend-api';
import { UmbChangeEvent } from 'src/core/events';
@customElement('umb-input-culture-select')
export class UmbInputCultureSelectElement extends FormControlMixin(UmbLitElement) {
static styles = [UUITextStyles, css``];
@state()
private _cultures: CultureModel[] = [];
@state()
private _search = '';
public selectedCultureName?: string;
#cultureRepository = new UmbCultureRepository(this);
protected getFormElement() {
return undefined;
}
protected async firstUpdated() {
const { data } = await this.#cultureRepository.requestCultures();
if (data) {
this._cultures = data.items;
}
}
#onSearchChange(event: Event) {
event.stopPropagation();
const target = event.composedPath()[0] as UUIComboboxElement;
this._search = target.search;
}
#onCultureChange(event: Event) {
event.stopPropagation();
const target = event.composedPath()[0] as UUIComboboxElement;
this._value = target.value;
const culture = this._cultures.find((culture) => culture.name === this._value);
this.selectedCultureName = culture?.englishName;
this.dispatchEvent(new UmbChangeEvent());
}
get #filteredCultures(): Array<CultureModel> {
return this._cultures.filter((culture) => {
return culture.englishName?.toLowerCase().includes(this._search.toLowerCase());
});
}
get #fromAvailableCultures() {
return this._cultures.find((culture) => culture.name === this.value);
}
render() {
return html`<uui-combobox
value=${ifDefined(this.#fromAvailableCultures?.name)}
@change=${this.#onCultureChange}
@search=${this.#onSearchChange}>
<uui-combobox-list>
${repeat(
this.#filteredCultures,
(culture) => culture.name,
(culture) =>
html`
<uui-combobox-list-option value=${ifDefined(culture.name)}
>${culture.englishName}</uui-combobox-list-option
>
`
)}
</uui-combobox-list>
</uui-combobox> `;
}
}
export default UmbInputCultureSelectElement;
declare global {
interface HTMLElementTagNameMap {
'umb-input-culture-select': UmbInputCultureSelectElement;
}
}