added language store

src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts

@@ -32,6 +32,7 @@ import './users';
 import './packages';
 import './search';
 import './shared';
+import { UmbLanguageStore } from './settings/languages/language.store';
 
 @defineElement('umb-backoffice')
 export class UmbBackofficeElement extends UmbLitElement {
@@ -71,6 +72,7 @@ export class UmbBackofficeElement extends UmbLitElement {
 		this.provideContext('umbCurrentUserHistoryStore', new UmbCurrentUserHistoryStore());
 		this.provideContext('umbDictionaryStore', new UmbDictionaryStore(this));
 		this.provideContext('umbDocumentBlueprintStore', new UmbDocumentBlueprintStore(this));
+		this.provideContext('umbLanguageStore', new UmbLanguageStore(this));
 	}
 
 	render() {

src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/language.store.ts

@@ -0,0 +1,41 @@
+import { map, Observable } from 'rxjs';
+import { UmbDataStoreBase } from '../../../core/stores/store';
+import type { DataTypeDetails, LanguageDetails } from '@umbraco-cms/models';
+import { DataTypeResource, FolderTreeItem } from '@umbraco-cms/backend-api';
+import { tryExecuteAndNotify } from '@umbraco-cms/resources';
+
+export type UmbLanguageStoreItemType = LanguageDetails;
+
+// TODO: research how we write names of global consts.
+export const STORE_ALIAS = 'umbLanguageStore';
+
+/**
+ * @export
+ * @class UmbLanguageStore
+ * @extends {UmbDataStoreBase<UmbLanguageStoreItemType>}
+ * @description - Data Store for languages
+ */
+export class UmbLanguageStore extends UmbDataStoreBase<UmbLanguageStoreItemType> {
+	public readonly storeAlias = STORE_ALIAS;
+
+	/**
+	 * @description - Request a Data Type by key. The Data Type is added to the store and is returned as an Observable.
+	 * @param {string} key
+	 * @return {*}  {(Observable<DataTypeDetails | null>)}
+	 * @memberof UmbDataTypesStore
+	 */
+	getByKey(key: string): Observable<LanguageDetails | null> {
+		// TODO: use backend cli when available.
+		fetch(`/umbraco/management/api/v1/language/${key}`)
+			.then((res) => res.json())
+			.then((data) => {
+				this.updateItems([data]);
+			});
+
+		return this.items.pipe(map((dataTypes) => dataTypes.find((dataType) => dataType.key === key) || null));
+	}
+
+	save(): Promise<void> {
+		return new Promise((resolve, reject) => '');
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/language-root-workspace.element.ts

@@ -1,5 +1,6 @@
 import { Language, LanguageResource } from '@umbraco-cms/backend-api';
 import { UmbLitElement } from '@umbraco-cms/element';
+import { LanguageDetails } from '@umbraco-cms/models';
 import { tryExecuteAndNotify } from '@umbraco-cms/resources';
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html, LitElement } from 'lit';
@@ -37,7 +38,7 @@ export class UmbLanguageRootWorkspaceElement extends UmbLitElement {
 	];
 
 	@state()
-	private _languages: Array<Language> = [
+	private _languages: Array<LanguageDetails> = [
 		{
 			id: 1,
 			name: 'English',
@@ -114,10 +115,11 @@ export class UmbLanguageRootWorkspaceElement extends UmbLitElement {
 		this._getLanguageData();
 	}
 
+	//TODO: Move this code to the language store
 	private async _getLanguageData() {
 		const { data } = await tryExecuteAndNotify(this, LanguageResource.getLanguage({ skip: 0, take: 10 }));
 		if (data) {
-			this._languages = data.items;
+			this._languages = data.items as Array<LanguageDetails>;
 			this._createTableItems(this._languages);
 			console.log('LANGS', this._languages);
 		}

src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts

@@ -0,0 +1,65 @@
+import type { UmbDataTypeStore, UmbDataTypeStoreItemType } from 'src/backoffice/settings/data-types/data-type.store';
+import type { DataTypeDetails, LanguageDetails } from '@umbraco-cms/models';
+import { UmbControllerHostInterface } from 'src/core/controller/controller-host.mixin';
+import { UmbWorkspaceContentContext } from 'src/backoffice/shared/components/workspace/workspace-content/workspace-content.context';
+import { UmbLanguageStore, UmbLanguageStoreItemType } from '../../language.store';
+import { UniqueBehaviorSubject } from 'src/core/observable-api/unique-behavior-subject';
+import { UmbContextConsumerController } from 'src/core/context-api/consume/context-consumer.controller';
+import { UmbObserverController } from '@umbraco-cms/observable-api';
+
+const DefaultLanguageData: UmbLanguageStoreItemType = {
+	id: 0,
+	key: '',
+	name: '',
+	isoCode: '',
+	isDefault: false,
+	isMandatory: false,
+};
+
+export class UmbWorkspaceLanguageContext {
+	public host: UmbControllerHostInterface;
+
+	private _entityKey!: string;
+
+	private _data;
+	public readonly data;
+
+	private _store: UmbLanguageStore | null = null;
+	protected _storeObserver?: UmbObserverController<LanguageDetails>;
+
+	constructor(host: UmbControllerHostInterface, entityKey: string) {
+		this.host = host;
+		this._entityKey = entityKey;
+
+		this._data = new UniqueBehaviorSubject<LanguageDetails>(DefaultLanguageData);
+		this.data = this._data.asObservable();
+
+		new UmbContextConsumerController(host, 'umbLanguageStore', (_instance: UmbLanguageStore) => {
+			this._store = _instance;
+			if (!this._store) {
+				// TODO: make sure to break the application in a good way.
+				return;
+			}
+
+			this._observeStore();
+		});
+	}
+
+	private _observeStore(): void {
+		if (!this._store) {
+			return;
+		}
+		this._storeObserver?.destroy();
+		this._storeObserver = new UmbObserverController(this.host, this._store.getByKey(this._entityKey), (content) => {
+			if (!content) return; // TODO: Handle nicely if there is no content data.
+			this.update(content as any);
+		});
+	}
+
+	public getData() {
+		return this._data.getValue();
+	}
+	public update(data: Partial<LanguageDetails>) {
+		this._data.next({ ...this.getData(), ...data });
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.element.ts

@@ -1,10 +1,13 @@
 import { Language } from '@umbraco-cms/backend-api';
+import { UmbLitElement } from '@umbraco-cms/element';
+import { LanguageDetails } from '@umbraco-cms/models';
 import { UUITextStyles } from '@umbraco-ui/uui-css';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { UmbWorkspaceLanguageContext } from './language-workspace.context';
 
 @customElement('umb-language-workspace')
-export class UmbLanguageWorkspaceElement extends LitElement {
+export class UmbLanguageWorkspaceElement extends UmbLitElement {
 	static styles = [
 		UUITextStyles,
 		css`
@@ -36,15 +39,37 @@ export class UmbLanguageWorkspaceElement extends LitElement {
 	];
 
 	@property()
-	language: Language = {
-		id: 1,
-		name: 'English',
-		isoCode: 'en-us',
-		isDefault: true,
-		isMandatory: true,
-	};
+	language?: LanguageDetails;
+
+	private _entityKey!: string;
+	@property()
+	public get entityKey(): string {
+		return this._entityKey;
+	}
+	public set entityKey(value: string) {
+		this._entityKey = value;
+		if (this._entityKey && !this._languageWorkspaceContext) {
+			this.provideLanguageWorkspaceContext();
+		}
+	}
+
+	private _languageWorkspaceContext?: UmbWorkspaceLanguageContext;
+
+	constructor() {
+		super();
+	}
+
+	public provideLanguageWorkspaceContext() {
+		this._languageWorkspaceContext = new UmbWorkspaceLanguageContext(this, this._entityKey);
+		this.provideContext('umbWorkspaceContext', this._languageWorkspaceContext);
+		this._languageWorkspaceContext.data.subscribe((language) => {
+			this.language = language;
+		});
+	}
 
 	render() {
+		if (!this.language) return nothing;
+
 		return html`<umb-body-layout>
 			<div id="header" slot="header">
 				<uui-input .value=${this.language.name}></uui-input>

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

@@ -1,21 +1,28 @@
 import { Language } from '@umbraco-cms/backend-api';
 import { UmbData } from './data';
+import { v4 as uuidv4 } from 'uuid';
+import { LanguageDetails } from '@umbraco-cms/models';
 
 // Temp mocked database
-class UmbLanguagesData extends UmbData<Language> {
-	constructor(data: Language[]) {
+class UmbLanguagesData extends UmbData<LanguageDetails> {
+	constructor(data: LanguageDetails[]) {
 		super(data);
 	}
 
 	// skip can be number or null
-	getAll(skip = 0, take = this.data.length): Array<Language> {
+	getAll(skip = 0, take = this.data.length): Array<LanguageDetails> {
 		return this.data.splice(skip, take);
 	}
+
+	getByKey(key: string) {
+		return this.data.find((item) => item.key === key);
+	}
 }
 
-export const data: Array<Language> = [
+export const data: Array<LanguageDetails> = [
 	{
 		id: 1,
+		key: '1234',
 		name: 'English',
 		isoCode: 'en',
 		isDefault: true,
@@ -23,6 +30,7 @@ export const data: Array<Language> = [
 	},
 	{
 		id: 2,
+		key: uuidv4(),
 		name: 'Danish',
 		isoCode: 'da',
 		isDefault: false,
@@ -31,6 +39,7 @@ export const data: Array<Language> = [
 	},
 	{
 		id: 3,
+		key: uuidv4(),
 		name: 'German',
 		isoCode: 'de',
 		isDefault: false,
@@ -39,6 +48,7 @@ export const data: Array<Language> = [
 	},
 	{
 		id: 4,
+		key: uuidv4(),
 		name: 'French',
 		isoCode: 'fr',
 		isDefault: false,

src/Umbraco.Web.UI.Client/src/core/mocks/domains/language.handlers.ts

@@ -18,4 +18,13 @@ export const handlers = [
 
 		return res(ctx.status(200), ctx.json(response));
 	}),
+
+	rest.get('/umbraco/management/api/v1/language/:key', (req, res, ctx) => {
+		const key = req.params.key as string;
+		if (!key) return;
+
+		const item = umbLanguagesData.getByKey(key);
+
+		return res(ctx.status(200), ctx.json(item));
+	}),
 ];

src/Umbraco.Web.UI.Client/src/core/models/index.ts

@@ -5,6 +5,7 @@ import {
 	DocumentTypeTreeItem,
 	EntityTreeItem,
 	FolderTreeItem,
+	Language,
 } from '@umbraco-cms/backend-api';
 
 // Extension Manifests
@@ -149,3 +150,8 @@ export interface DocumentBlueprintDetails {
 	icon: string;
 	documentTypeKey: string;
 }
+
+//TODO temp model until backend changes Language to use key.
+export interface LanguageDetails extends Language {
+	key: string;
+}