render languages in collection overview

src/Umbraco.Web.UI.Client/src/mocks/data/dictionary/dictionary.db.ts

@@ -9,6 +9,8 @@ import type {
 	CreateDictionaryItemRequestModel,
 	DictionaryItemResponseModel,
 	DictionaryItemItemResponseModel,
+	PagedDictionaryOverviewResponseModel,
+	DictionaryOverviewResponseModel,
 } from '@umbraco-cms/backoffice/backend-api';
 import { UmbId } from '@umbraco-cms/backoffice/id';
 
@@ -20,6 +22,20 @@ export class UmbDictionaryMockDB extends UmbEntityMockDbBase<UmbMockDictionaryMo
 	constructor(data: Array<UmbMockDictionaryModel>) {
 		super(data);
 	}
+
+	getOverview(): PagedDictionaryOverviewResponseModel {
+		const all = this.getAll();
+		const items: Array<DictionaryOverviewResponseModel> = all.map((item) => {
+			return {
+				name: item.name,
+				id: item.id,
+				translatedIsoCodes: item.translatedIsoCodes,
+				parent: item.parent,
+			};
+		});
+
+		return { items, total: all.length };
+	}
 }
 
 const treeItemMapper = (model: UmbMockDictionaryModel): Omit<NamedEntityTreeItemResponseModel, 'type'> => {

src/Umbraco.Web.UI.Client/src/mocks/handlers/dictionary/detail.handlers.ts

@@ -23,6 +23,11 @@ export const detailHandlers = [
 		);
 	}),
 
+	rest.get(umbracoPath(`${UMB_SLUG}`), (req, res, ctx) => {
+		const response: PagedDictionaryOverviewResponseModel = umbDictionaryMockDb.getOverview();
+		return res(ctx.status(200), ctx.json(response));
+	}),
+
 	rest.get(umbracoPath(`${UMB_SLUG}/:id`), (req, res, ctx) => {
 		const id = req.params.id as string;
 		if (!id) return res(ctx.status(400));

src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.context.ts

@@ -5,14 +5,10 @@ import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
 import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
 import { UmbArrayState, UmbNumberState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
-import type { UmbApi} from '@umbraco-cms/backoffice/extension-api';
+import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
 import { UmbExtensionApiInitializer } from '@umbraco-cms/backoffice/extension-api';
-import type {
-	ManifestCollection,
-	ManifestRepository} from '@umbraco-cms/backoffice/extension-registry';
-import {
-	umbExtensionsRegistry,
-} from '@umbraco-cms/backoffice/extension-registry';
+import type { ManifestCollection, ManifestRepository } from '@umbraco-cms/backoffice/extension-registry';
+import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import type { UmbCollectionFilterModel } from '@umbraco-cms/backoffice/collection';
 import { UmbSelectionManager, UmbPaginationManager } from '@umbraco-cms/backoffice/utils';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';

src/Umbraco.Web.UI.Client/src/packages/dictionary/dashboards/dashboard-localization-dictionary.element.ts

@@ -27,22 +27,6 @@ export class UmbDashboardTranslationDictionaryElement extends UmbLitElement {
 
 	#languages: Array<UmbLanguageDetailModel> = [];
 
-	constructor() {
-		super();
-	}
-
-	firstUpdated() {
-		this.#getDictionaryItems();
-	}
-
-	async #getDictionaryItems() {
-		const { data } = await this.#dictionaryRepository.list(0, 1000);
-		this.#dictionaryItems = data?.items ?? [];
-
-		this.#setTableColumns();
-		this.#setTableItems();
-	}
-
 	/**
 	 * We don't know how many translation items exist for each dictionary until the data arrives
 	 * so can not generate the columns in advance.

src/Umbraco.Web.UI.Client/src/packages/dictionary/dictionary/collection/views/table/dictionary-table-collection-view.element.ts

@@ -5,6 +5,7 @@ import type { UmbTableColumn, UmbTableConfig, UmbTableItem } from '@umbraco-cms/
 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 { UmbLanguageCollectionRepository } from '@umbraco-cms/backoffice/language';
 
 @customElement('umb-dictionary-table-collection-view')
 export class UmbDictionaryTableCollectionViewElement extends UmbLitElement {
@@ -25,6 +26,7 @@ export class UmbDictionaryTableCollectionViewElement extends UmbLitElement {
 	private _tableItems: Array<UmbTableItem> = [];
 
 	#collectionContext?: UmbDefaultCollectionContext<UmbDictionaryDetailModel>;
+	#languageCollectionRepository = new UmbLanguageCollectionRepository(this);
 
 	constructor() {
 		super();
@@ -35,11 +37,35 @@ 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() {
 		if (!this.#collectionContext) return;
 		this.observe(this.#collectionContext.items, (items) => this.#createTableItems(items), 'umbCollectionItemsObserver');
 	}
 
+	#createTableColumns(languages) {
+		const columns: Array<UmbTableColumn> = [
+			{
+				name: this.localize.term('general_name'),
+				alias: 'name',
+			},
+		];
+
+		const languageColumns: Array<UmbTableColumn> = languages.map((language) => {
+			return {
+				name: language.name,
+				alias: language.unique,
+			};
+		});
+
+		this._tableColumns = [...columns, ...languageColumns];
+	}
+
 	#createTableItems(dictionaries: Array<UmbDictionaryDetailModel>) {
 		this._tableItems = dictionaries.map((dictionary) => {
 			return {
@@ -48,7 +74,11 @@ export class UmbDictionaryTableCollectionViewElement extends UmbLitElement {
 				data: [
 					{
 						columnAlias: 'name',
-						value: 'Hej Hej',
+						value: html`<a
+							style="font-weight:bold"
+							href="section/dictionary/workspace/dictionary/edit/${dictionary.unique}">
+							${dictionary.name}</a
+						> `,
 					},
 				],
 			};