yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

render icons

Browse Source
This commit is contained in:
Mads Rasmussen
2024-02-03 14:59:24 +01:00
parent 23a699cb17
commit 0cdc1e60bf
2 changed files with 57 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/Umbraco.Web.UI.Client/src/mocks/data/dictionary/dictionary.data.ts
View File

@@ -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',
},
],
},

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

@@ -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>