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

update language workspace + store with new models

Browse Source
This commit is contained in:
Jacob Overgaard
2023-01-27 16:12:14 +01:00
parent 9e2c9c15e0
commit 632f6a42eb
5 changed files with 46 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Umbraco.Web.UI.Client/libs/models/index.ts
View File

@@ -150,7 +150,3 @@ export interface DocumentBlueprintDetails {
icon: string;
documentTypeKey: string;
}
export interface LanguageDetails extends Language {
key: string;
}

78
src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/language.store.ts
View File

@@ -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>('umbLanguageStore');
/**
@@ -17,62 +16,59 @@ export const UMB_LANGUAGE_STORE_CONTEXT_TOKEN = new UmbContextToken<UmbLanguageS
* @description - Data Store for languages
*/
export class UmbLanguageStore extends UmbStoreBase {
#data = new ArrayState<LanguageDetails>([], (x) => x.key);
#data = new ArrayState<UmbLanguageStoreItemType>([], (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<Array<LanguageDetails>> {
getAll(): Observable<Array<UmbLanguageStoreItemType>> {
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<LanguageDetails>);
}
this.#data.append(data?.items ?? []);
});
return this.#data;
}
async save(language: LanguageDetails): Promise<void> {
if (language.id && language.key) {
tryExecuteAndNotify(
async save(language: UmbLanguageStoreItemType): Promise<void> {
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<string>) {
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<string>) {
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);
}
}

7
src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/language-root-table-delete-column-layout.element.ts
View File

@@ -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!]);
}
});
}

11
src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts
View File

@@ -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<LanguageDetails>;
protected _storeObserver?: UmbObserverController<UmbLanguageStoreItemType>;
constructor(host: UmbControllerHostInterface, entityKey: string) {
this.host = host;
this._entityKey = entityKey;
this._data = new ObjectState<LanguageDetails>(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<LanguageDetails>) {
public update(data: Partial<UmbLanguageStoreItemType>) {
this._data.next({ ...this.getData(), ...data });
}

4
src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.element.ts
View File

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