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

reuse store logic across property editor and property editor config store

Browse Source
This commit is contained in:
Mads Rasmussen
2022-09-27 13:29:58 +02:00
parent 75f263a332
commit fbd1b1e08f
3 changed files with 17 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/Umbraco.Web.UI.Client/src/core/stores/property-editor-config/property-editor-config.store.ts
View File

@@ -1,24 +1,20 @@
import { BehaviorSubject, map, Observable } from 'rxjs';
import { map, Observable } from 'rxjs';
import { getPropertyEditorConfig } from '../../api/fetcher';
import type { PropertyEditorConfig } from '../../models';
import { UmbDataStoreBase } from '../store';
export interface PropertyEditorConfigRef {
propertyEditorAlias: string;
config: PropertyEditorConfig;
}
export class UmbPropertyEditorConfigStore {
private _items: BehaviorSubject<Array<PropertyEditorConfigRef>> = new BehaviorSubject(
<Array<PropertyEditorConfigRef>>[]
);
public readonly items: Observable<Array<PropertyEditorConfigRef>> = this._items.asObservable();
export class UmbPropertyEditorConfigStore extends UmbDataStoreBase<PropertyEditorConfigRef> {
getByAlias(alias: string): Observable<PropertyEditorConfigRef | undefined> {
// TODO: only fetch if the data type is not in the store?
getPropertyEditorConfig({ propertyEditorAlias: alias })
.then((res) => {
const propertyEditorConfigRef: PropertyEditorConfigRef = { propertyEditorAlias: alias, config: res.data };
this.update([propertyEditorConfigRef]);
this.update([propertyEditorConfigRef], 'propertyEditorAlias');
})
.catch((err) => {
console.log(err);
@@ -26,38 +22,4 @@ export class UmbPropertyEditorConfigStore {
return this.items.pipe(map((items) => items.find((item) => item.propertyEditorAlias === alias)));
}
public update(updatedItems: Array<PropertyEditorConfigRef>) {
const storedItems = this._items.getValue();
const updated: PropertyEditorConfigRef[] = [...storedItems];
updatedItems.forEach((updatedItem) => {
const index = storedItems
.map((storedItem) => storedItem.propertyEditorAlias)
.indexOf(updatedItem.propertyEditorAlias);
if (index !== -1) {
const itemKeys = Object.keys(storedItems[index]);
const newItem = {};
for (const [key] of Object.entries(updatedItem)) {
if (itemKeys.indexOf(key) !== -1) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
newItem[key] = updatedItem[key];
}
}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
updated[index] = newItem;
} else {
// If the node is not in the store, add it
updated.push(updatedItem);
}
});
this._items.next([...updated]);
}
}

44
src/Umbraco.Web.UI.Client/src/core/stores/property-editor/property-editor.store.ts
View File

@@ -1,16 +1,14 @@
import { BehaviorSubject, map, Observable } from 'rxjs';
import { map, Observable } from 'rxjs';
import type { PropertyEditor } from '../../models';
import { getPropertyEditorsList, getPropertyEditor } from '../../api/fetcher';
import { UmbDataStoreBase } from '../store';
export class UmbPropertyEditorStore {
private _items: BehaviorSubject<Array<PropertyEditor>> = new BehaviorSubject(<Array<PropertyEditor>>[]);
public readonly items: Observable<Array<PropertyEditor>> = this._items.asObservable();
export class UmbPropertyEditorStore extends UmbDataStoreBase<PropertyEditor> {
getAll(): Observable<Array<PropertyEditor> | []> {
// TODO: only fetch if the data type is not in the store?
getPropertyEditorsList({})
.then((res) => {
this._items.next(res.data.propertyEditors);
this.update(res.data.propertyEditors, 'alias');
})
.catch((err) => {
console.log(err);
@@ -23,7 +21,7 @@ export class UmbPropertyEditorStore {
// TODO: only fetch if the data type is not in the store?
getPropertyEditor({ propertyEditorAlias: alias })
.then((res) => {
this.update([res.data]);
this.update([res.data], 'alias');
})
.catch((err) => {
console.log(err);
@@ -31,36 +29,4 @@ export class UmbPropertyEditorStore {
return this.items.pipe(map((items) => items.find((item) => item.alias === alias)));
}
public update(updatedItems: Array<PropertyEditor>) {
const storedItems = this._items.getValue();
const updated: PropertyEditor[] = [...storedItems];
updatedItems.forEach((updatedItem) => {
const index = storedItems.map((storedItem) => storedItem.alias).indexOf(updatedItem.alias);
if (index !== -1) {
const itemKeys = Object.keys(storedItems[index]);
const newItem = {};
for (const [key] of Object.entries(updatedItem)) {
if (itemKeys.indexOf(key) !== -1) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
newItem[key] = updatedItem[key];
}
}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
updated[index] = newItem;
} else {
// If the node is not in the store, add it
updated.push(updatedItem);
}
});
this._items.next([...updated]);
}
}

12
src/Umbraco.Web.UI.Client/src/core/stores/store.ts
View File

@@ -1,21 +1,25 @@
import { BehaviorSubject, Observable } from 'rxjs';
import { Entity } from '../../mocks/data/entities';
export interface UmbDataStoreIdentifiers {
key?: string;
[more: string]: any;
}
export interface UmbDataStore<T> {
readonly items: Observable<Array<T>>;
update(items: Array<T>): void;
}
export class UmbDataStoreBase<T extends Entity> implements UmbDataStore<T> {
export class UmbDataStoreBase<T extends UmbDataStoreIdentifiers> implements UmbDataStore<T> {
private _items: BehaviorSubject<Array<T>> = new BehaviorSubject(<Array<T>>[]);
public readonly items: Observable<Array<T>> = this._items.asObservable();
public update(updatedItems: Array<T>) {
public update(updatedItems: Array<T>, compareKey: keyof T = 'key'): void {
const storedItems = this._items.getValue();
const updated: T[] = [...storedItems];
updatedItems.forEach((updatedItem) => {
const index = storedItems.map((storedItem) => storedItem.key).indexOf(updatedItem.key);
const index = storedItems.map((storedItem) => storedItem[compareKey]).indexOf(updatedItem[compareKey]);
if (index !== -1) {
const itemKeys = Object.keys(storedItems[index]);