diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/language.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/language.store.ts index 9ca2ef3efb..e0b73e9525 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/language.store.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/language.store.ts @@ -5,6 +5,7 @@ import { UmbContextToken } from '@umbraco-cms/context-api'; import { UmbStoreBase } from '@umbraco-cms/store'; import { ArrayState } from '@umbraco-cms/observable-api'; import { UmbControllerHostInterface } from '@umbraco-cms/controller'; +import { umbracoPath } from '@umbraco-cms/utils'; export type UmbLanguageStoreItemType = Language; export const UMB_LANGUAGE_STORE_CONTEXT_TOKEN = new UmbContextToken('umbLanguageStore'); @@ -17,6 +18,9 @@ export const UMB_LANGUAGE_STORE_CONTEXT_TOKEN = new UmbContextToken([], (x) => x.isoCode); + #availableLanguages = new ArrayState([], (x) => x.isoCode); + + public readonly availableLanguages = this.#availableLanguages.asObservable(); constructor(host: UmbControllerHostInterface) { super(host, UMB_LANGUAGE_STORE_CONTEXT_TOKEN.toString()); @@ -40,6 +44,18 @@ export class UmbLanguageStore extends UmbStoreBase { return this.#data; } + getAvailable() { + fetch(umbracoPath('/languages').toString()) + .then((res) => res.json()) + .then((data) => { + console.log('data', data); + + this.#availableLanguages.append(data); + }); + + return this.availableLanguages; + } + async save(language: UmbLanguageStoreItemType): Promise { if (language.isoCode) { const { data: updatedLanguage } = await tryExecuteAndNotify( diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts index ca6945bcbe..ace13410ee 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts @@ -49,6 +49,12 @@ export class UmbWorkspaceLanguageContext { public getData() { return this._data.getValue(); } + + public getAvailableLanguages() { + //TODO: Don't use !, however this will be changed with the introduction of repositories. + return this._store!.getAvailable(); + } + public update(data: Partial) { this._data.next({ ...this.getData(), ...data }); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/edit/workspace-view-language-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/edit/workspace-view-language-edit.element.ts index 7d7186fa87..a59a338b0d 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/edit/workspace-view-language-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/edit/workspace-view-language-edit.element.ts @@ -45,9 +45,15 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement { @state() private _languages: UmbLanguageStoreItemType[] = []; + @state() + private _availableLanguages: UmbLanguageStoreItemType[] = []; + @state() private _search = ''; + @state() + private _startedAsDefault: boolean | null = null; + private _languageWorkspaceContext?: UmbWorkspaceLanguageContext; constructor() { @@ -58,8 +64,16 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement { if (!this._languageWorkspaceContext) return; - this._languageWorkspaceContext.data.subscribe((language) => { + this.observe(this._languageWorkspaceContext.data, (language) => { this.language = language; + + if (this._startedAsDefault === null) { + this._startedAsDefault = language.isDefault ?? false; + console.log('first', language); + } + }); + this.observe(this._languageWorkspaceContext.getAvailableLanguages(), (languages) => { + this._availableLanguages = languages; }); }); @@ -116,7 +130,7 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement { } private get _filteredLanguages() { - return this._languages.filter((language) => { + return this._availableLanguages.filter((language) => { return language.name?.toLowerCase().includes(this._search.toLowerCase()); }); } @@ -131,19 +145,12 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement { return this._fallbackLanguages.find((language) => language.isoCode === this.language?.fallbackIsoCode); } - private get _nonEditedLanguage() { - return this._languages.find((language) => language.isoCode === this.language?.isoCode); + private get _fromAvailableLanguages() { + return this._availableLanguages.find((language) => language.isoCode === this.language?.isoCode); } private _renderDefaultLanguageWarning() { - let originalIsDefault = false; - - if (this.language?.isoCode) { - originalIsDefault = - this._languages.find((language) => language.isoCode === this.language?.isoCode)?.isDefault ?? false; - } - - if (originalIsDefault === this.language?.isDefault) return nothing; + if (this._startedAsDefault || this.language?.isDefault !== true) return nothing; return html`
Switching default language may result in default content missing. @@ -158,7 +165,7 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement { @@ -181,7 +188,7 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement {
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/languages.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/languages.data.ts index 09a4e71887..e3f5310d0b 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/languages.data.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/languages.data.ts @@ -16,6 +16,10 @@ class UmbLanguagesData extends UmbData { return this.data.find((item) => item.isoCode === key); } + getAvailable() { + return MockAvailable; + } + save(saveItems: Array) { saveItems.forEach((saveItem) => { const foundIndex = this.data.findIndex((item) => item.isoCode === saveItem.isoCode); @@ -86,6 +90,22 @@ export const MockData: Array = [ isMandatory: false, fallbackIsoCode: 'en', }, +]; + +export const MockAvailable: Array = [ + { + name: 'English', + isoCode: 'en', + isDefault: true, + isMandatory: true, + }, + { + name: 'Danish', + isoCode: 'da', + isDefault: false, + isMandatory: false, + fallbackIsoCode: 'en', + }, { name: 'German', isoCode: 'de', diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/language.handlers.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/language.handlers.ts index 04558b6547..0640d11735 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/language.handlers.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/language.handlers.ts @@ -22,6 +22,11 @@ export const handlers = [ return res(ctx.status(200), ctx.json(response)); }), + rest.get(umbracoPath('/languages'), (req, res, ctx) => { + const items = umbLanguagesData.getAvailable(); + return res(ctx.status(200), ctx.json(items)); + }), + rest.get(umbracoPath('/language/:key'), (req, res, ctx) => { const key = req.params.key as string;