From 632f6a42eb315735b0796c7e37be981f3c53fc7c Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Fri, 27 Jan 2023 16:12:14 +0100 Subject: [PATCH] update language workspace + store with new models --- .../libs/models/index.ts | 4 - .../settings/languages/language.store.ts | 78 +++++++++---------- ...root-table-delete-column-layout.element.ts | 7 +- .../language/language-workspace.context.ts | 11 +-- .../language/language-workspace.element.ts | 4 +- 5 files changed, 46 insertions(+), 58 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/libs/models/index.ts b/src/Umbraco.Web.UI.Client/libs/models/index.ts index 409379bcac..67fc1e4349 100644 --- a/src/Umbraco.Web.UI.Client/libs/models/index.ts +++ b/src/Umbraco.Web.UI.Client/libs/models/index.ts @@ -150,7 +150,3 @@ export interface DocumentBlueprintDetails { icon: string; documentTypeKey: string; } - -export interface LanguageDetails extends Language { - key: string; -} diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/language.store.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/language.store.ts index 2e27651e99..9ca2ef3efb 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/language.store.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/language.store.ts @@ -1,13 +1,12 @@ import { Observable } from 'rxjs'; -import { LanguageResource } from '@umbraco-cms/backend-api'; +import { Language, LanguageResource } from '@umbraco-cms/backend-api'; import { tryExecuteAndNotify } from '@umbraco-cms/resources'; import { UmbContextToken } from '@umbraco-cms/context-api'; -import type { LanguageDetails } from '@umbraco-cms/models'; import { UmbStoreBase } from '@umbraco-cms/store'; -import { ArrayState, createObservablePart } from '@umbraco-cms/observable-api'; +import { ArrayState } from '@umbraco-cms/observable-api'; import { UmbControllerHostInterface } from '@umbraco-cms/controller'; -export type UmbLanguageStoreItemType = LanguageDetails; +export type UmbLanguageStoreItemType = Language; export const UMB_LANGUAGE_STORE_CONTEXT_TOKEN = new UmbContextToken('umbLanguageStore'); /** @@ -17,62 +16,59 @@ export const UMB_LANGUAGE_STORE_CONTEXT_TOKEN = new UmbContextToken([], (x) => x.key); + #data = new ArrayState([], (x) => x.isoCode); constructor(host: UmbControllerHostInterface) { super(host, UMB_LANGUAGE_STORE_CONTEXT_TOKEN.toString()); } - getByKey(key: string) { - // TODO: use backend cli when available. - fetch(`/umbraco/management/api/v1/language/${key}`) - .then((res) => res.json()) - .then((data) => { + getByIsoCode(isoCode: string) { + tryExecuteAndNotify(this._host, LanguageResource.getLanguageByIsoCode({ isoCode })).then(({ data }) => { + if (data) { this.#data.appendOne(data); - }); + } + }); - return createObservablePart(this.#data, (items) => items.find((item) => item.key === key)); + return this.#data.getObservablePart((items) => items.find((item) => item.isoCode === isoCode)); } - getAll(): Observable> { + getAll(): Observable> { tryExecuteAndNotify(this._host, LanguageResource.getLanguage({ skip: 0, take: 1000 })).then(({ data }) => { - if (data) { - //TODO: Fix when we have the updated languageResource - this.#data.append(data.items as Array); - } + this.#data.append(data?.items ?? []); }); return this.#data; } - async save(language: LanguageDetails): Promise { - if (language.id && language.key) { - tryExecuteAndNotify( + async save(language: UmbLanguageStoreItemType): Promise { + if (language.isoCode) { + const { data: updatedLanguage } = await tryExecuteAndNotify( this._host, - LanguageResource.putLanguageById({ id: language.id, requestBody: language }) - ).then((response) => { - if (response.data) { - this.#data.appendOne(response.data); - } - }); + LanguageResource.putLanguageByIsoCode({ isoCode: language.isoCode, requestBody: language }) + ); + if (updatedLanguage) { + this.#data.appendOne(updatedLanguage); + } } else { - tryExecuteAndNotify(this._host, LanguageResource.postLanguage({ requestBody: language })).then((response) => { - if (response.data) { - this.#data.appendOne(response.data); - } - }); + const { data: newLanguage } = await tryExecuteAndNotify( + this._host, + LanguageResource.postLanguage({ requestBody: language }) + ); + if (newLanguage) { + this.#data.appendOne(newLanguage); + } } } - async delete(keys: Array) { - const res = await fetch('/umbraco/management/api/v1/language', { - method: 'DELETE', - body: JSON.stringify(keys), - headers: { - 'Content-Type': 'application/json', - }, - }); - const data = await res.json(); - this.#data.remove(data); + async delete(isoCodes: Array) { + const queue = isoCodes.map((isoCode) => + tryExecuteAndNotify( + this._host, + LanguageResource.deleteLanguageByIsoCode({ isoCode }).then(() => isoCode) + ) + ); + const results = await Promise.all(queue); + const filtered = results.filter((x) => !!x).map((result) => result.data); + this.#data.remove(filtered); } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/language-root-table-delete-column-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/language-root-table-delete-column-layout.element.ts index 3417337a42..927146b774 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/language-root-table-delete-column-layout.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/language-root-table-delete-column-layout.element.ts @@ -1,9 +1,8 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html, nothing } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import { UmbLanguageStore, UMB_LANGUAGE_STORE_CONTEXT_TOKEN } from '../../language.store'; +import { UmbLanguageStore, UmbLanguageStoreItemType, UMB_LANGUAGE_STORE_CONTEXT_TOKEN } from '../../language.store'; import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '../../../../../core/modal'; -import type { LanguageDetails } from '@umbraco-cms/models'; import { UmbLitElement } from '@umbraco-cms/element'; @customElement('umb-language-root-table-delete-column-layout') @@ -11,7 +10,7 @@ export class UmbLanguageRootTableDeleteColumnLayoutElement extends UmbLitElement static styles = [UUITextStyles, css``]; @property({ attribute: false }) - value!: LanguageDetails; + value!: UmbLanguageStoreItemType; private _languageStore?: UmbLanguageStore; private _modalService?: UmbModalService; @@ -46,7 +45,7 @@ export class UmbLanguageRootTableDeleteColumnLayoutElement extends UmbLitElement modalHandler?.onClose().then(({ confirmed }) => { if (confirmed) { - this._languageStore?.delete([this.value.key]); + this._languageStore?.delete([this.value.isoCode!]); } }); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts index b38f603ade..5f77f375d5 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts @@ -1,12 +1,9 @@ import { UmbLanguageStore, UmbLanguageStoreItemType, UMB_LANGUAGE_STORE_CONTEXT_TOKEN } from '../../language.store'; -import type { LanguageDetails } from '@umbraco-cms/models'; import { UmbControllerHostInterface } from '@umbraco-cms/controller'; import { ObjectState, UmbObserverController } from '@umbraco-cms/observable-api'; import { UmbContextConsumerController } from '@umbraco-cms/context-api'; const DefaultLanguageData: UmbLanguageStoreItemType = { - id: 0, - key: '', name: '', isoCode: '', isDefault: false, @@ -22,13 +19,13 @@ export class UmbWorkspaceLanguageContext { public readonly data; private _store: UmbLanguageStore | null = null; - protected _storeObserver?: UmbObserverController; + protected _storeObserver?: UmbObserverController; constructor(host: UmbControllerHostInterface, entityKey: string) { this.host = host; this._entityKey = entityKey; - this._data = new ObjectState(DefaultLanguageData); + this._data = new ObjectState(DefaultLanguageData); this.data = this._data.asObservable(); new UmbContextConsumerController(host, UMB_LANGUAGE_STORE_CONTEXT_TOKEN, (_instance: UmbLanguageStore) => { @@ -43,7 +40,7 @@ export class UmbWorkspaceLanguageContext { } this._storeObserver?.destroy(); - this._storeObserver = new UmbObserverController(this.host, this._store.getByKey(this._entityKey), (content) => { + this._storeObserver = new UmbObserverController(this.host, this._store.getByIsoCode(this._entityKey), (content) => { if (!content) return; // TODO: Handle nicely if there is no content data. this.update(content); }); @@ -52,7 +49,7 @@ export class UmbWorkspaceLanguageContext { public getData() { return this._data.getValue(); } - public update(data: Partial) { + public update(data: Partial) { this._data.next({ ...this.getData(), ...data }); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.element.ts index acc0a6d242..2753adaaec 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.element.ts @@ -2,9 +2,9 @@ import { UUITextStyles } from '@umbraco-ui/uui-css'; import { css, html, nothing } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui'; +import { UmbLanguageStoreItemType } from '../../language.store'; import { UmbWorkspaceLanguageContext } from './language-workspace.context'; import { UmbLitElement } from '@umbraco-cms/element'; -import type { LanguageDetails } from '@umbraco-cms/models'; import '../../../../shared/components/workspace/actions/save/workspace-action-node-save.element.ts'; @customElement('umb-language-workspace') @@ -25,7 +25,7 @@ export class UmbLanguageWorkspaceElement extends UmbLitElement { ]; @property() - language?: LanguageDetails; + language?: UmbLanguageStoreItemType; private _entityKey!: string; @property()