Merge pull request #1426 from umbraco/feature/document-tree-item-variant-label

Feature: Document tree item variant label

src/Umbraco.Web.UI.Client/src/packages/documents/documents/tree/tree-item/document-tree-item.element.ts

@@ -1,10 +1,55 @@
-import type { UmbDocumentTreeItemModel } from '../types.js';
-import { css, html, nothing, customElement } from '@umbraco-cms/backoffice/external/lit';
+import type { UmbDocumentTreeItemModel, UmbDocumentTreeItemVariantModel } from '../types.js';
+import { css, html, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import type { UmbAppLanguageContext } from '@umbraco-cms/backoffice/language';
+import { UMB_APP_LANGUAGE_CONTEXT } from '@umbraco-cms/backoffice/language';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbTreeItemElementBase } from '@umbraco-cms/backoffice/tree';
 
 @customElement('umb-document-tree-item')
 export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocumentTreeItemModel> {
+	#appLanguageContext?: UmbAppLanguageContext;
+
+	@state()
+	_currentCulture?: string;
+
+	@state()
+	_defaultCulture?: string;
+
+	@state()
+	_variant?: UmbDocumentTreeItemVariantModel;
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_APP_LANGUAGE_CONTEXT, (instance) => {
+			this.#appLanguageContext = instance;
+			this.#observeAppCulture();
+			this.#observeDefaultCulture();
+		});
+	}
+
+	#observeAppCulture() {
+		this.observe(this.#appLanguageContext!.appLanguageCulture, (value) => {
+			this._currentCulture = value;
+			this._variant = this.#getVariant(value);
+		});
+	}
+
+	#observeDefaultCulture() {
+		this.observe(this.#appLanguageContext!.appDefaultLanguage, (value) => {
+			this._defaultCulture = value?.unique;
+		});
+	}
+
+	#getVariant(culture: string | undefined) {
+		return this.item?.variants.find((x) => x.culture === culture);
+	}
+
+	#getLabel() {
+		const fallbackName = this.#getVariant(this._defaultCulture)?.name ?? this._item?.variants[0].name ?? 'Unknown';
+		return this._variant?.name ?? `(${fallbackName})`;
+	}
+
 	// TODO: implement correct status symbol
 	renderIconContainer() {
 		return html`
@@ -13,16 +58,15 @@ export class UmbDocumentTreeItemElement extends UmbTreeItemElementBase<UmbDocume
 					? html`
 							<umb-icon id="icon" slot="icon" name="${this.item.documentType.icon}"></umb-icon>
 							<span id="status-symbol"></span>
-					  `
+						`
 					: nothing}
 			</span>
 		`;
 	}
 
 	// TODO: lower opacity if item is not published
-	// TODO: get correct variant name
 	renderLabel() {
-		return html`<span id="label" slot="label">${this.item?.variants[0].name}</span> `;
+		return html`<span id="label" slot="label">${this.#getLabel()}</span> `;
 	}
 
 	static styles = [

src/Umbraco.Web.UI.Client/src/packages/language/global-contexts/app-language.context.ts

@@ -1,6 +1,6 @@
 import { UmbLanguageCollectionRepository } from '../collection/index.js';
 import type { UmbLanguageDetailModel } from '../types.js';
-import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbArrayState, UmbObjectState, createObservablePart } from '@umbraco-cms/backoffice/observable-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
@@ -8,11 +8,17 @@ import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
 
 export class UmbAppLanguageContext extends UmbControllerBase implements UmbApi {
 	#languageCollectionRepository: UmbLanguageCollectionRepository;
-	#languages: Array<UmbLanguageDetailModel> = [];
+	#languages = new UmbArrayState<UmbLanguageDetailModel>([], (x) => x.unique);
+
 	#appLanguage = new UmbObjectState<UmbLanguageDetailModel | undefined>(undefined);
 	appLanguage = this.#appLanguage.asObservable();
+
 	appLanguageCulture = this.#appLanguage.asObservablePart((x) => x?.unique);
 
+	appDefaultLanguage = createObservablePart(this.#languages.asObservable(), (languages) =>
+		languages.find((language) => language.isDefault),
+	);
+
 	getAppCulture() {
 		return this.#appLanguage.getValue()?.unique;
 	}
@@ -25,7 +31,8 @@ export class UmbAppLanguageContext extends UmbControllerBase implements UmbApi {
 	}
 
 	setLanguage(unique: string) {
-		const language = this.#languages.find((x) => x.unique === unique);
+		const languages = this.#languages.getValue();
+		const language = languages.find((x) => x.unique === unique);
 		this.#appLanguage.update(language);
 	}
 
@@ -34,7 +41,7 @@ export class UmbAppLanguageContext extends UmbControllerBase implements UmbApi {
 
 		// TODO: make this observable / update when languages are added/removed/updated
 		if (data) {
-			this.#languages = data.items;
+			this.#languages.setValue(data.items);
 
 			// If the app language is not set, set it to the default language
 			if (!this.#appLanguage.getValue()) {
@@ -44,7 +51,7 @@ export class UmbAppLanguageContext extends UmbControllerBase implements UmbApi {
 	}
 
 	#initAppLanguage() {
-		const defaultLanguage = this.#languages.find((x) => x.isDefault);
+		const defaultLanguage = this.#languages.getValue().find((x) => x.isDefault);
 		// TODO: do we always have a default language?
 		// do we always get the default language on the first request, or could it be on page 2?
 		// in that case do we then need an endpoint to get the default language?