add available languages

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>('umbLanguageStore');
@@ -17,6 +18,9 @@ export const UMB_LANGUAGE_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbLanguageS
  */
 export class UmbLanguageStore extends UmbStoreBase {
 	#data = new ArrayState<UmbLanguageStoreItemType>([], (x) => x.isoCode);
+	#availableLanguages = new ArrayState<UmbLanguageStoreItemType>([], (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<void> {
 		if (language.isoCode) {
 			const { data: updatedLanguage } = await tryExecuteAndNotify(

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<UmbLanguageStoreItemType>) {
 		this._data.next({ ...this.getData(), ...data });
 	}

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`<div id="default-language-warning">
 			Switching default language may result in default content missing.
@@ -158,7 +165,7 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement {
 				<umb-workspace-property-layout label="Language">
 					<uui-combobox
 						slot="editor"
-						value=${ifDefined(this.language.isoCode)}
+						value=${ifDefined(this._fromAvailableLanguages?.isoCode)}
 						@change=${this._handleLanguageChange}
 						@search=${this._handleSearchChange}>
 						<uui-combobox-list>
@@ -181,7 +188,7 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement {
 				<umb-workspace-property-layout label="Settings">
 					<div slot="editor">
 						<uui-toggle
-							?disabled=${this._nonEditedLanguage?.isDefault || false}
+							?disabled=${this._startedAsDefault}
 							?checked=${this.language.isDefault || false}
 							@change=${this._handleDefaultChange}>
 							<div>

src/Umbraco.Web.UI.Client/src/core/mocks/data/languages.data.ts

@@ -16,6 +16,10 @@ class UmbLanguagesData extends UmbData<UmbLanguageStoreItemType> {
 		return this.data.find((item) => item.isoCode === key);
 	}
 
+	getAvailable() {
+		return MockAvailable;
+	}
+
 	save(saveItems: Array<UmbLanguageStoreItemType>) {
 		saveItems.forEach((saveItem) => {
 			const foundIndex = this.data.findIndex((item) => item.isoCode === saveItem.isoCode);
@@ -86,6 +90,22 @@ export const MockData: Array<UmbLanguageStoreItemType> = [
 		isMandatory: false,
 		fallbackIsoCode: 'en',
 	},
+];
+
+export const MockAvailable: Array<UmbLanguageStoreItemType> = [
+	{
+		name: 'English',
+		isoCode: 'en',
+		isDefault: true,
+		isMandatory: true,
+	},
+	{
+		name: 'Danish',
+		isoCode: 'da',
+		isDefault: false,
+		isMandatory: false,
+		fallbackIsoCode: 'en',
+	},
 	{
 		name: 'German',
 		isoCode: 'de',

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;