From 0cdc1e60bfba134748f15cd9f4575d7e59a03046 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Sat, 3 Feb 2024 14:59:24 +0100
Subject: [PATCH] render icons

---
 .../mocks/data/dictionary/dictionary.data.ts  | 23 +++++---
 ...ictionary-table-collection-view.element.ts | 56 ++++++++++++++-----
 2 files changed, 57 insertions(+), 22 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/dictionary/dictionary.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/dictionary/dictionary.data.ts
index 3219e8fa20..9b487439c0 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/data/dictionary/dictionary.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/data/dictionary/dictionary.data.ts
@@ -1,12 +1,14 @@
 import type {
 	DictionaryItemItemResponseModel,
 	DictionaryItemResponseModel,
+	DictionaryOverviewResponseModel,
 	NamedEntityTreeItemResponseModel,
 } from '@umbraco-cms/backoffice/backend-api';
 
 type UmbMockDictionaryModelHack = DictionaryItemResponseModel &
 	NamedEntityTreeItemResponseModel &
-	DictionaryItemItemResponseModel;
+	DictionaryItemItemResponseModel &
+	DictionaryOverviewResponseModel;
 
 export interface UmbMockDictionaryModel extends Omit<UmbMockDictionaryModelHack, 'type'> {}
 
@@ -16,13 +18,14 @@ export const data: Array<UmbMockDictionaryModel> = [
 		id: 'aae7d0ab-53ba-485d-b8bd-12537f9925cb',
 		parent: null,
 		hasChildren: false,
+		translatedIsoCodes: ['en'],
 		translations: [
 			{
 				isoCode: 'en',
-				translation: 'hello in en-US',
+				translation: 'hello in en',
 			},
 			{
-				isoCode: 'fr',
+				isoCode: 'da',
 				translation: '',
 			},
 		],
@@ -32,14 +35,15 @@ export const data: Array<UmbMockDictionaryModel> = [
 		id: 'bbe7d0ab-53bb-485d-b8bd-12537f9925cb',
 		parent: null,
 		hasChildren: true,
+		translatedIsoCodes: ['en', 'da'],
 		translations: [
 			{
 				isoCode: 'en',
-				translation: 'Hello again in en-US',
+				translation: 'Hello again in en',
 			},
 			{
-				isoCode: 'fr',
-				translation: 'Hello in fr',
+				isoCode: 'da',
+				translation: 'Hello in da',
 			},
 		],
 	},
@@ -48,14 +52,15 @@ export const data: Array<UmbMockDictionaryModel> = [
 		id: '438b8693-2156-482b-84af-ccdae0c2df6e',
 		parent: { id: 'bbe7d0ab-53bb-485d-b8bd-12537f9925cb' },
 		hasChildren: false,
+		translatedIsoCodes: ['en', 'da'],
 		translations: [
 			{
 				isoCode: 'en',
-				translation: 'Nested Hello again in en-US',
+				translation: 'Nested Hello again in en',
 			},
 			{
-				isoCode: 'fr',
-				translation: 'Nested Hello in fr',
+				isoCode: 'da',
+				translation: 'Nested Hello in da',
 			},
 		],
 	},
diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/collection/views/table/dictionary-table-collection-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/collection/views/table/dictionary-table-collection-view.element.ts
index 61cbee434b..01ea2129b4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/collection/views/table/dictionary-table-collection-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/collection/views/table/dictionary-table-collection-view.element.ts
@@ -1,10 +1,11 @@
-import type { UmbDictionaryDetailModel } from '../../../types.js';
+import type { UmbDictionaryCollectionModel } from '../../types.js';
 import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection';
 import { UMB_DEFAULT_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection';
 import type { UmbTableColumn, UmbTableConfig, UmbTableItem } from '@umbraco-cms/backoffice/components';
 import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import type { UmbLanguageDetailModel } from '@umbraco-cms/backoffice/language';
 import { UmbLanguageCollectionRepository } from '@umbraco-cms/backoffice/language';
 
 @customElement('umb-dictionary-table-collection-view')
@@ -25,7 +26,7 @@ export class UmbDictionaryTableCollectionViewElement extends UmbLitElement {
 	@state()
 	private _tableItems: Array<UmbTableItem> = [];
 
-	#collectionContext?: UmbDefaultCollectionContext<UmbDictionaryDetailModel>;
+	#collectionContext?: UmbDefaultCollectionContext<UmbDictionaryCollectionModel>;
 	#languageCollectionRepository = new UmbLanguageCollectionRepository(this);
 
 	constructor() {
@@ -37,18 +38,23 @@ export class UmbDictionaryTableCollectionViewElement extends UmbLitElement {
 		});
 	}
 
-	async firstUpdated() {
-		const { data } = await this.#languageCollectionRepository.requestCollection({ skip: 0, take: 1000 });
-		if (!data) return;
-		this.#createTableColumns(data.items);
-	}
-
-	#observeCollectionItems() {
+	async #observeCollectionItems() {
 		if (!this.#collectionContext) return;
-		this.observe(this.#collectionContext.items, (items) => this.#createTableItems(items), 'umbCollectionItemsObserver');
+
+		const { data: languageData } = await this.#languageCollectionRepository.requestCollection({ skip: 0, take: 1000 });
+		if (!languageData) return;
+
+		this.observe(
+			this.#collectionContext.items,
+			(collectionItems) => {
+				this.#createTableColumns(languageData.items);
+				this.#createTableItems(collectionItems, languageData.items);
+			},
+			'umbCollectionItemsObserver',
+		);
 	}
 
-	#createTableColumns(languages) {
+	#createTableColumns(languages: Array<UmbLanguageDetailModel>) {
 		const columns: Array<UmbTableColumn> = [
 			{
 				name: this.localize.term('general_name'),
@@ -66,11 +72,11 @@ export class UmbDictionaryTableCollectionViewElement extends UmbLitElement {
 		this._tableColumns = [...columns, ...languageColumns];
 	}
 
-	#createTableItems(dictionaries: Array<UmbDictionaryDetailModel>) {
+	#createTableItems(dictionaries: Array<UmbDictionaryCollectionModel>, languages: Array<UmbLanguageDetailModel>) {
 		this._tableItems = dictionaries.map((dictionary) => {
 			return {
 				id: dictionary.unique,
-				icon: 'icon-globe',
+				icon: 'icon-book-alt-2',
 				data: [
 					{
 						columnAlias: 'name',
@@ -80,11 +86,35 @@ export class UmbDictionaryTableCollectionViewElement extends UmbLitElement {
 							${dictionary.name}</a
 						> `,
 					},
+					...languages.map((language) => {
+						console.log(language);
+						console.log(dictionary);
+						return {
+							columnAlias: language.unique,
+							value: dictionary.translatedIsoCodes?.includes(language.unique)
+								? this.#renderCheckIcon(language.name)
+								: this.#renderAlertIcon(language.name),
+						};
+					}),
 				],
 			};
 		});
 	}
 
+	#renderCheckIcon(name: string) {
+		return html`<uui-icon
+			name="check"
+			title="${this.localize.term('visuallyHiddenTexts_hasTranslation')} (${name})"
+			style="color:var(--uui-color-positive-standalone);display:inline-block"></uui-icon>`;
+	}
+
+	#renderAlertIcon(name: string) {
+		return html`<uui-icon
+			name="alert"
+			title="${this.localize.term('visuallyHiddenTexts_noTranslation')} (${name})"
+			style="color:var(--uui-color-danger-standalone);display:inline-block"></uui-icon>`;
+	}
+
 	render() {
 		return html`
 			<umb-table .config=${this._tableConfig} .columns=${this._tableColumns} .items=${this._tableItems}></umb-table>