diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/dictionary/dictionary.db.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/dictionary/dictionary.db.ts index 4041c2afda..f247038526 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/data/dictionary/dictionary.db.ts +++ b/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) { super(data); } + + getOverview(): PagedDictionaryOverviewResponseModel { + const all = this.getAll(); + const items: Array = 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 => { diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers/dictionary/detail.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers/dictionary/detail.handlers.ts index 7578baf474..3df53c3967 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/handlers/dictionary/detail.handlers.ts +++ b/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)); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.context.ts b/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.context.ts index 65b19ef39c..08a3944ab6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.context.ts +++ b/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'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dashboards/dashboard-localization-dictionary.element.ts b/src/Umbraco.Web.UI.Client/src/packages/dictionary/dashboards/dashboard-localization-dictionary.element.ts index 832a9c32e9..d34a94e920 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/dictionary/dashboards/dashboard-localization-dictionary.element.ts +++ b/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 = []; - 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. 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 73c725683a..61cbee434b 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 @@ -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 = []; #collectionContext?: UmbDefaultCollectionContext; + #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 = [ + { + name: this.localize.term('general_name'), + alias: 'name', + }, + ]; + + const languageColumns: Array = languages.map((language) => { + return { + name: language.name, + alias: language.unique, + }; + }); + + this._tableColumns = [...columns, ...languageColumns]; + } + #createTableItems(dictionaries: Array) { this._tableItems = dictionaries.map((dictionary) => { return { @@ -48,7 +74,11 @@ export class UmbDictionaryTableCollectionViewElement extends UmbLitElement { data: [ { columnAlias: 'name', - value: 'Hej Hej', + value: html` + ${dictionary.name} `, }, ], };