diff --git a/src/Umbraco.Web.UI.Client/examples/workspace-context-counter/counter-workspace-view.ts b/src/Umbraco.Web.UI.Client/examples/workspace-context-counter/counter-workspace-view.ts index 225a34bea8..2b86fdcead 100644 --- a/src/Umbraco.Web.UI.Client/examples/workspace-context-counter/counter-workspace-view.ts +++ b/src/Umbraco.Web.UI.Client/examples/workspace-context-counter/counter-workspace-view.ts @@ -9,7 +9,7 @@ export class ExampleCounterWorkspaceView extends UmbElementMixin(LitElement) { #counterContext?: typeof EXAMPLE_COUNTER_CONTEXT.TYPE; @state() - private count = ''; + private count = 0; constructor() { super(); @@ -30,12 +30,8 @@ export class ExampleCounterWorkspaceView extends UmbElementMixin(LitElement) { return html`

Counter Example

-

- Current count value: ${this.count} -

-

- This is a Workspace View, that consumes the Counter Context, and displays the current count. -

+

Current count value: ${this.count}

+

This is a Workspace View, that consumes the Counter Context, and displays the current count.

 `; } diff --git a/src/Umbraco.Web.UI.Client/src/libs/observable-api/array-state.ts b/src/Umbraco.Web.UI.Client/src/libs/observable-api/array-state.ts index 954b4d3778..afdb6635b5 100644 --- a/src/Umbraco.Web.UI.Client/src/libs/observable-api/array-state.ts +++ b/src/Umbraco.Web.UI.Client/src/libs/observable-api/array-state.ts @@ -12,7 +12,7 @@ import { pushToUniqueArray } from './push-to-unique-array.function.js'; * The ArrayState provides methods to append data when the data is an Object. */ export class UmbArrayState extends UmbDeepState { - getUnique: (entry: T) => unknown; + readonly getUnique: (entry: T) => unknown; #sortMethod?: (a: T, b: T) => number; constructor(initialData: T[], getUniqueMethod: (entry: T) => unknown) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/repository/folder/data-type-folder.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/repository/folder/data-type-folder.repository.ts index 55385ac144..9760b14bce 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/repository/folder/data-type-folder.repository.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/repository/folder/data-type-folder.repository.ts @@ -37,7 +37,7 @@ export class UmbDataTypeFolderRepository extends UmbRepositoryBase implements Um } // TODO: temp create type until backend is ready. Remove the id addition when new types are generated. - async createFolder(folderRequest: CreateFolderRequestModel & { id?: string | undefined }) { + async createFolder(folderRequest: CreateFolderRequestModel) { if (!folderRequest) throw new Error('folder request is missing'); await this.#init; @@ -46,7 +46,7 @@ export class UmbDataTypeFolderRepository extends UmbRepositoryBase implements Um if (!error) { // TODO: We need to push a new item to the tree store to update the tree. How do we want to create the tree items? const folderTreeItem = createFolderTreeItem(folderRequest); - this.#treeStore!.appendItems([folderTreeItem]); + this.#treeStore!.append(folderTreeItem); } return { error }; @@ -73,6 +73,8 @@ export class UmbDataTypeFolderRepository extends UmbRepositoryBase implements Um const { error } = await this.#folderSource.update(id, folder); if (!error) { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore this.#treeStore!.updateItem(id, { name: folder.name }); } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/repository/utils.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/repository/utils.ts index 45a7297191..1b28a07b8e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/repository/utils.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/repository/utils.ts @@ -1,30 +1,16 @@ -import { - CreateDataTypeRequestModel, - CreateFolderRequestModel, - FolderTreeItemResponseModel, -} from '@umbraco-cms/backoffice/backend-api'; +import { CreateFolderRequestModel } from '@umbraco-cms/backoffice/backend-api'; -export const createTreeItem = (item: CreateDataTypeRequestModel): FolderTreeItemResponseModel => { +export const createFolderTreeItem = (item: CreateFolderRequestModel) => { if (!item) throw new Error('item is null or undefined'); if (!item.id) throw new Error('item.id is null or undefined'); return { - type: 'data-type', - parentId: item.parentId, - name: item.name, - id: item.id, - isFolder: false, + unique: item.id!, + parentUnique: item.parentId!, + name: item.name!, + type: 'data-type-folder', + isFolder: true, isContainer: false, hasChildren: false, }; }; - -export const createFolderTreeItem = (item: CreateFolderRequestModel): FolderTreeItemResponseModel => { - if (!item) throw new Error('item is null or undefined'); - if (!item.id) throw new Error('item.id is null or undefined'); - - return { - ...createTreeItem(item), - isFolder: true, - }; -}; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/tree/data-type.tree.store.ts b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/tree/data-type.tree.store.ts index 8760f9b0f4..de40e9c545 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/data-type/tree/data-type.tree.store.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/data-type/tree/data-type.tree.store.ts @@ -30,6 +30,7 @@ export class UmbDataTypeTreeStore extends UmbUniqueTreeStore { ); } + // TODO: revisit this when we have decided on detail model sizes #createTreeItemMapper = (item: UmbDataTypeDetailModel) => { return { unique: item.unique!, @@ -42,6 +43,7 @@ export class UmbDataTypeTreeStore extends UmbUniqueTreeStore { }; }; + // TODO: revisit this when we have decided on detail model sizes #updateTreeItemMapper = (item: UmbDataTypeDetailModel) => { return { name: item.name, diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/store/events/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/store/events/index.ts index cc72a42b77..773abffd97 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/store/events/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/store/events/index.ts @@ -1,4 +1,4 @@ -export * from './store-create.event.js'; +export * from './store-append.event.js'; export * from './store.event.js'; -export * from './store-delete.event.js'; +export * from './store-remove.event.js'; export * from './store-update.event.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/store/events/store-append.event.ts b/src/Umbraco.Web.UI.Client/src/packages/core/store/events/store-append.event.ts new file mode 100644 index 0000000000..e9fa3e50f1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/store/events/store-append.event.ts @@ -0,0 +1,9 @@ +import { UmbStoreEvent } from './store.event.js'; + +export class UmbStoreAppendEvent extends UmbStoreEvent { + static readonly TYPE = 'append'; + + public constructor(uniques: Array) { + super(UmbStoreAppendEvent.TYPE, uniques); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/store/events/store-create.event.ts b/src/Umbraco.Web.UI.Client/src/packages/core/store/events/store-create.event.ts deleted file mode 100644 index 1c8f616565..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/store/events/store-create.event.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { UmbStoreEvent } from './store.event.js'; - -export class UmbStoreCreateEvent extends UmbStoreEvent { - static readonly TYPE = 'create'; - - public constructor(uniques: Array) { - super(UmbStoreCreateEvent.TYPE, uniques); - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/store/events/store-delete.event.ts b/src/Umbraco.Web.UI.Client/src/packages/core/store/events/store-delete.event.ts deleted file mode 100644 index 855e237cac..0000000000 --- a/src/Umbraco.Web.UI.Client/src/packages/core/store/events/store-delete.event.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { UmbStoreEvent } from './store.event.js'; - -export class UmbStoreDeleteEvent extends UmbStoreEvent { - static readonly TYPE = 'delete'; - - public constructor(uniques: Array) { - super(UmbStoreDeleteEvent.TYPE, uniques); - } -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/store/events/store-remove.event.ts b/src/Umbraco.Web.UI.Client/src/packages/core/store/events/store-remove.event.ts new file mode 100644 index 0000000000..0d83488692 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/store/events/store-remove.event.ts @@ -0,0 +1,9 @@ +import { UmbStoreEvent } from './store.event.js'; + +export class UmbStoreRemoveEvent extends UmbStoreEvent { + static readonly TYPE = 'remove'; + + public constructor(uniques: Array) { + super(UmbStoreRemoveEvent.TYPE, uniques); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/store/store-base.ts b/src/Umbraco.Web.UI.Client/src/packages/core/store/store-base.ts index 825f41c086..856b498f79 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/store/store-base.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/store/store-base.ts @@ -1,7 +1,7 @@ import { UmbStore } from './store.interface.js'; -import { UmbStoreDeleteEvent } from './events/store-delete.event.js'; +import { UmbStoreRemoveEvent } from './events/store-remove.event.js'; import { UmbStoreUpdateEvent } from './events/store-update.event.js'; -import { UmbStoreCreateEvent } from './events/store-create.event.js'; +import { UmbStoreAppendEvent } from './events/store-append.event.js'; import { UmbContextProviderController } from '@umbraco-cms/backoffice/context-api'; import { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { type UmbApi } from '@umbraco-cms/backoffice/extension-api'; @@ -32,7 +32,7 @@ export class UmbStoreBase extends EventTarget implements Um append(item: StoreItemType) { this._data.append([item]); const unique = this._data.getUnique(item) as string; - this.dispatchEvent(new UmbStoreCreateEvent([unique])); + this.dispatchEvent(new UmbStoreAppendEvent([unique])); } /** @@ -43,7 +43,7 @@ export class UmbStoreBase extends EventTarget implements Um appendItems(items: Array) { this._data.append(items); const uniques = items.map((item) => this._data.getUnique(item)) as Array; - this.dispatchEvent(new UmbStoreCreateEvent(uniques)); + this.dispatchEvent(new UmbStoreAppendEvent(uniques)); } /** @@ -64,7 +64,7 @@ export class UmbStoreBase extends EventTarget implements Um */ removeItem(unique: string) { this._data.removeOne(unique); - this.dispatchEvent(new UmbStoreDeleteEvent([unique])); + this.dispatchEvent(new UmbStoreRemoveEvent([unique])); } /** @@ -74,7 +74,7 @@ export class UmbStoreBase extends EventTarget implements Um */ removeItems(uniques: Array) { this._data.remove(uniques); - this.dispatchEvent(new UmbStoreDeleteEvent(uniques)); + this.dispatchEvent(new UmbStoreRemoveEvent(uniques)); } /** @@ -84,11 +84,7 @@ export class UmbStoreBase extends EventTarget implements Um * @memberof UmbStoreBase */ getItems(uniques: Array) { - return this._data.getValue().filter((item) => uniques.includes(this._data.getUnique(item))); - } - - getAll() { - return this._data.getValue(); + return this._data.getValue().filter((item) => uniques.includes(this._data.getUnique(item) as string)); } /** diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/store/store-connector.ts b/src/Umbraco.Web.UI.Client/src/packages/core/store/store-connector.ts index 9da75fd9cd..0a2c0382e6 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/store/store-connector.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/store/store-connector.ts @@ -1,5 +1,5 @@ import { UmbStoreBase } from './store-base.js'; -import { UmbStoreCreateEvent, UmbStoreDeleteEvent, UmbStoreUpdateEvent } from './events/index.js'; +import { UmbStoreAppendEvent, UmbStoreRemoveEvent, UmbStoreUpdateEvent } from './events/index.js'; import { UmbStore } from './store.interface.js'; import { UmbContextConsumerController, UmbContextToken } from '@umbraco-cms/backoffice/context-api'; import { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; @@ -9,7 +9,7 @@ export class UmbStoreConnector { #store: UmbStore; #connectedStore?: UmbStore; #onNewStoreItem: (item: ConnectedStoreType) => StoreType; - #onUpdateStoreItem: (item: ConnectedStoreType) => StoreType; + #onUpdateStoreItem: (item: ConnectedStoreType) => Partial; constructor( host: UmbControllerHost, @@ -22,6 +22,8 @@ export class UmbStoreConnector { this.#onNewStoreItem = onNewStoreItem; this.#onUpdateStoreItem = onUpdateStoreItem; + console.warn('UmbStoreConnector is a work in progress and should not be used yet'); + new UmbContextConsumerController(host, connectToStoreAlias, (instance) => { this.#connectedStore = instance; @@ -33,12 +35,12 @@ export class UmbStoreConnector { #listenToConnectedStore = () => { if (!this.#connectedStore) return; - this.#connectedStore.addEventListener(UmbStoreCreateEvent.TYPE, this.#updateStoreItems as EventListener); + this.#connectedStore.addEventListener(UmbStoreAppendEvent.TYPE, this.#updateStoreItems as EventListener); this.#connectedStore.addEventListener(UmbStoreUpdateEvent.TYPE, this.#updateStoreItems as EventListener); - this.#connectedStore.addEventListener(UmbStoreDeleteEvent.TYPE, this.#removeStoreItems as EventListener); + this.#connectedStore.addEventListener(UmbStoreRemoveEvent.TYPE, this.#removeStoreItems as EventListener); }; - #updateStoreItems = (event: UmbStoreCreateEvent | UmbStoreUpdateEvent) => { + #updateStoreItems = (event: UmbStoreAppendEvent | UmbStoreUpdateEvent) => { event.uniques.forEach((unique) => { const storeHasItem = this.#store.getItems([unique]).length > 0; const connectedStoreItem = this.#connectedStore!.getItems([unique])[0]; @@ -52,7 +54,7 @@ export class UmbStoreConnector { }); }; - #removeStoreItems = (event: UmbStoreDeleteEvent) => { + #removeStoreItems = (event: UmbStoreRemoveEvent) => { this.#store.removeItems(event.uniques); }; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/store/store.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/store/store.interface.ts index a77ba76aad..0e65b33aeb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/store/store.interface.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/store/store.interface.ts @@ -8,5 +8,4 @@ export interface UmbStore extends EventTarget { removeItems: (uniques: Array) => void; getItems: (uniques: Array) => Array; all: () => Observable>; - getAll: () => Array; }