diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/content/tree-content.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/content/tree-content.context.ts index c3c2eae34e..4683281a18 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/content/tree-content.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/content/tree-content.context.ts @@ -7,28 +7,28 @@ export class UmbTreeContentContext implements UmbTreeContext { public tree: ManifestTree; public entityStore: UmbEntityStore; + private _entityType = 'document'; + constructor(tree: ManifestTree, entityStore: UmbEntityStore) { this.tree = tree; this.entityStore = entityStore; } public fetchRoot() { - const data = { - id: -1, - key: '485d49ef-a4aa-46ac-843f-4256fe167347', - name: 'Content', - hasChildren: true, - type: 'document', - icon: 'favorite', - parentKey: '', - }; - this.entityStore.update([data]); - return this.entityStore.entities.pipe(map((items) => items.filter((item) => item.key === data.key))); + fetch(`/umbraco/backoffice/entities?type=${this._entityType}&parentKey=`) + .then((res) => res.json()) + .then((data) => { + this.entityStore.update(data); + }); + + return this.entityStore.entities.pipe( + map((items) => items.filter((item) => item.type === this._entityType && item.parentKey === '')) + ); } public fetchChildren(key: string) { // TODO: figure out url structure - fetch(`/umbraco/backoffice/entities/node/${key}`) + fetch(`/umbraco/backoffice/entities?type=${this._entityType}&parentKey=${key}`) .then((res) => res.json()) .then((data) => { this.entityStore.update(data); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/data-types/tree-data-types.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/data-types/tree-data-types.context.ts index ec6515e0f5..0ab1a6230d 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/data-types/tree-data-types.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/data-types/tree-data-types.context.ts @@ -7,9 +7,10 @@ export class UmbTreeDataTypesContext implements UmbTreeContext { public tree: ManifestTree; public entityStore: UmbEntityStore; + private _entityType = 'dataType'; + constructor(tree: ManifestTree, entityStore: UmbEntityStore) { this.tree = tree; - // TODO: temp solution until we know where to get tree data from this.entityStore = entityStore; } @@ -24,12 +25,14 @@ export class UmbTreeDataTypesContext implements UmbTreeContext { parentKey: '', }; this.entityStore.update([data]); - return this.entityStore.entities.pipe(map((items) => items.filter((item) => item.key === data.key))); + return this.entityStore.entities.pipe( + map((items) => items.filter((item) => item.type === this._entityType && item.parentKey === '')) + ); } public fetchChildren(key: string) { // TODO: figure out url structure - fetch(`/umbraco/backoffice/entities/data-types/${key}`) + fetch(`/umbraco/backoffice/entities?type=${this._entityType}&parentKey=${key}`) .then((res) => res.json()) .then((data) => { this.entityStore.update(data); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/document-types/tree-document-types.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/document-types/tree-document-types.context.ts index 4560001923..ae2da0ea8a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/document-types/tree-document-types.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/document-types/tree-document-types.context.ts @@ -7,6 +7,8 @@ export class UmbTreeDocumentTypesContext implements UmbTreeContext { public tree: ManifestTree; public entityStore: UmbEntityStore; + private _entityType = 'documentType'; + constructor(tree: ManifestTree, entityStore: UmbEntityStore) { this.tree = tree; this.entityStore = entityStore; @@ -23,12 +25,14 @@ export class UmbTreeDocumentTypesContext implements UmbTreeContext { parentKey: '', }; this.entityStore.update([data]); - return this.entityStore.entities.pipe(map((items) => items.filter((item) => item.key === data.key))); + return this.entityStore.entities.pipe( + map((items) => items.filter((item) => item.type === this._entityType && item.parentKey === '')) + ); } public fetchChildren(key: string) { // TODO: figure out url structure - fetch(`/umbraco/backoffice/entities/document-types/${key}`) + fetch(`/umbraco/backoffice/entities?type=${this._entityType}&parentKey=${key}`) .then((res) => res.json()) .then((data) => { this.entityStore.update(data); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/extensions/tree-extensions.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/extensions/tree-extensions.context.ts index f0ea27eedf..9bbcb1b70a 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/extensions/tree-extensions.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/extensions/tree-extensions.context.ts @@ -7,6 +7,8 @@ export class UmbTreeExtensionsContext implements UmbTreeContext { public tree: ManifestTree; public entityStore: UmbEntityStore; + private _entityType = 'extension'; + constructor(tree: ManifestTree, entityStore: UmbEntityStore) { this.tree = tree; this.entityStore = entityStore; @@ -18,15 +20,24 @@ export class UmbTreeExtensionsContext implements UmbTreeContext { key: 'fd32ea8b-893b-4ee9-b1d0-72f41c4a6d38', name: 'Extensions', hasChildren: false, - type: 'extensions', + type: 'extensionsList', icon: 'favorite', parentKey: '', }; this.entityStore.update([data]); - return this.entityStore.entities.pipe(map((items) => items.filter((item) => item.key === data.key))); + + return this.entityStore.entities.pipe( + map((items) => items.filter((item) => item.type === 'extensionsList' && item.parentKey === '')) + ); } public fetchChildren(key: string) { + fetch(`/umbraco/backoffice/entities?type=${this._entityType}&parentKey=${key}`) + .then((res) => res.json()) + .then((data) => { + this.entityStore.update(data); + }); + return this.entityStore.entities.pipe(map((items) => items.filter((item) => item.parentKey === key))); } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/media/tree-media.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/media/tree-media.context.ts index 60db83ad67..211d3afbb3 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/media/tree-media.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/media/tree-media.context.ts @@ -7,28 +7,28 @@ export class UmbTreeMediaContext implements UmbTreeContext { public tree: ManifestTree; public entityStore: UmbEntityStore; + private _entityType = 'media'; + constructor(tree: ManifestTree, entityStore: UmbEntityStore) { this.tree = tree; this.entityStore = entityStore; } public fetchRoot() { - const data = { - id: -1, - key: '05a8b8bc-bd90-47cc-a897-e67c8fa682ee', - name: 'Media', - hasChildren: true, - type: 'media', - icon: 'favorite', - parentKey: '', - }; - this.entityStore.update([data]); - return this.entityStore.entities.pipe(map((items) => items.filter((item) => item.key === data.key))); + fetch(`/umbraco/backoffice/entities?type=${this._entityType}&parentKey=`) + .then((res) => res.json()) + .then((data) => { + this.entityStore.update(data); + }); + + return this.entityStore.entities.pipe( + map((items) => items.filter((item) => item.type === this._entityType && item.parentKey === '')) + ); } public fetchChildren(key: string) { // TODO: figure out url structure - fetch(`/umbraco/backoffice/entities/node/${key}`) + fetch(`/umbraco/backoffice/entities?type=${this._entityType}&parentKey=${key}`) .then((res) => res.json()) .then((data) => { this.entityStore.update(data); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/member-groups/tree-member-groups.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/member-groups/tree-member-groups.context.ts index 3f7e93a404..a2b67ac7f1 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/member-groups/tree-member-groups.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/member-groups/tree-member-groups.context.ts @@ -7,6 +7,8 @@ export class UmbTreeMemberGroupsContext implements UmbTreeContext { public tree: ManifestTree; public entityStore: UmbEntityStore; + private _entityType = 'memberGroup'; + constructor(tree: ManifestTree, entityStore: UmbEntityStore) { this.tree = tree; this.entityStore = entityStore; @@ -24,12 +26,14 @@ export class UmbTreeMemberGroupsContext implements UmbTreeContext { }; this.entityStore.update([data]); - return this.entityStore.entities.pipe(map((items) => items.filter((item) => item.key === data.key))); + return this.entityStore.entities.pipe( + map((items) => items.filter((item) => item.type === this._entityType && item.parentKey === '')) + ); } public fetchChildren(key: string) { // TODO: figure out url structure - fetch(`/umbraco/backoffice/entities/member-groups/${key}`) + fetch(`/umbraco/backoffice/entities?type=${this._entityType}&parentKey=${key}`) .then((res) => res.json()) .then((data) => { this.entityStore.update(data); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/members/tree-members.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/members/tree-members.context.ts index 96cbebd71d..a3b33e1638 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/members/tree-members.context.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/members/tree-members.context.ts @@ -7,6 +7,8 @@ export class UmbTreeMembersContext implements UmbTreeContext { public tree: ManifestTree; public entityStore: UmbEntityStore; + private _entityType = 'member'; + constructor(tree: ManifestTree, entityStore: UmbEntityStore) { this.tree = tree; this.entityStore = entityStore; @@ -23,12 +25,14 @@ export class UmbTreeMembersContext implements UmbTreeContext { icon: 'favorite', }; this.entityStore.update([data]); - return this.entityStore.entities.pipe(map((items) => items.filter((item) => item.key === data.key))); + return this.entityStore.entities.pipe( + map((items) => items.filter((item) => item.type === this._entityType && item.parentKey === '')) + ); } public fetchChildren(key: string) { // TODO: figure out url structure - fetch(`/umbraco/backoffice/entities/members/${key}`) + fetch(`/umbraco/backoffice/entities?type=${this._entityType}&parentKey=${key}`) .then((res) => res.json()) .then((data) => { this.entityStore.update(data); diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-navigator.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-navigator.element.ts index 914f7d0f0c..5e462f765d 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-navigator.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/shared/tree-navigator.element.ts @@ -11,57 +11,52 @@ import { Subscription } from 'rxjs'; export class UmbTreeNavigator extends UmbContextConsumerMixin(LitElement) { static styles = [UUITextStyles, css``]; - @state() - private _entityKey = ''; - - @state() - private _entityType = ''; - - @state() - private _label = ''; - - @state() - private _hasChildren = false; - @state() private _loading = true; - private _rootSubscription?: Subscription; - private _treeContext?: UmbTreeContext; + private _treeRootSubscription?: Subscription; + + @state() + private _items: any[] = []; constructor() { super(); this.consumeContext('umbTreeContext', (treeContext) => { this._treeContext = treeContext; + this._observeTreeRoot(); + }); + } - this._loading = true; + private _observeTreeRoot() { + this._loading = true; - this._rootSubscription = this._treeContext?.fetchRoot().subscribe((items) => { - if (items?.length === 0) return; - - this._loading = false; - this._entityKey = items[0].key; - this._entityType = items[0].type; - this._label = items[0].name; - this._hasChildren = items[0].hasChildren; - }); + this._treeRootSubscription = this._treeContext?.fetchRoot().subscribe((items) => { + if (items?.length === 0) return; + this._items = items; + this._loading = false; }); } disconnectedCallback(): void { super.disconnectedCallback(); - this._rootSubscription?.unsubscribe(); + this._treeRootSubscription?.unsubscribe(); } render() { - return html` `; + return html` + ${this._items?.map( + (item) => html` + + ` + )} + `; } } diff --git a/src/Umbraco.Web.UI.Client/src/core/stores/node.store.ts b/src/Umbraco.Web.UI.Client/src/core/stores/node.store.ts index 8a18badeaf..67a09e50c3 100644 --- a/src/Umbraco.Web.UI.Client/src/core/stores/node.store.ts +++ b/src/Umbraco.Web.UI.Client/src/core/stores/node.store.ts @@ -18,13 +18,6 @@ export class UmbNodeStore { ); } - // TODO: temp solution until we know where to get tree data from - getAll(): Observable> { - const nodes = umbNodeData.getAll(); - this._nodes.next(nodes); - return this.nodes; - } - // TODO: Use Node type, to not be specific about Document. // TODO: make sure UI somehow can follow the status of this action. save(data: NodeEntity[]): Promise { diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/data.ts index baaf919f55..7d7bb1f3dc 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/data/data.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/data/data.ts @@ -14,11 +14,6 @@ export class UmbData { return this._data.find((item) => item.key === key); } - // TODO: temp solution until we know where to get tree data from - getAll() { - return this._data; - } - save(data: Array) { data.forEach((storedItem) => { const foundIndex = this._data.findIndex((item) => item.id === storedItem.id); diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/entity.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/entity.data.ts index 7f59fd7d74..c1709199df 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/data/entity.data.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/data/entity.data.ts @@ -114,7 +114,7 @@ export const data: Array = [ type: 'media', icon: 'picture', hasChildren: false, - parentKey: '05a8b8bc-bd90-47cc-a897-e67c8fa682ee', + parentKey: '', }, { id: 2002, @@ -123,7 +123,7 @@ export const data: Array = [ name: 'Media 2', icon: 'picture', hasChildren: false, - parentKey: '05a8b8bc-bd90-47cc-a897-e67c8fa682ee', + parentKey: '', }, { id: 1, @@ -132,7 +132,7 @@ export const data: Array = [ type: 'document', icon: 'document', hasChildren: false, - parentKey: '485d49ef-a4aa-46ac-843f-4256fe167347', + parentKey: '', }, { id: 2, @@ -141,7 +141,7 @@ export const data: Array = [ type: 'document', icon: 'favorite', hasChildren: false, - parentKey: '485d49ef-a4aa-46ac-843f-4256fe167347', + parentKey: '', }, { id: 3, @@ -150,7 +150,7 @@ export const data: Array = [ type: 'document', icon: 'document', hasChildren: false, - parentKey: '485d49ef-a4aa-46ac-843f-4256fe167347', + parentKey: '', }, ]; @@ -160,8 +160,9 @@ class UmbEntityData extends UmbData { super(data); } - getChildren(key: string) { - return data.filter((item) => item.parentKey === key); + getItems(type = '', parentKey = '') { + if (!type) return []; + return data.filter((item) => item.type === type && item.parentKey === parentKey); } } diff --git a/src/Umbraco.Web.UI.Client/src/mocks/domains/entity.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/domains/entity.handlers.ts index 86f209c083..2a626b113d 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/domains/entity.handlers.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/domains/entity.handlers.ts @@ -3,48 +3,12 @@ import { umbEntityData } from '../data/entity.data'; // TODO: add schema export const handlers = [ - rest.get('/umbraco/backoffice/entities/members/:key', (req, res, ctx) => { + rest.get('/umbraco/backoffice/entities', (req, res, ctx) => { console.warn('Please move to schema'); - const key = req.params.key as string; - if (!key) return; - - const entities = umbEntityData.getChildren(key); - return res(ctx.status(200), ctx.json(entities)); - }), - - rest.get('/umbraco/backoffice/entities/member-groups/:key', (req, res, ctx) => { - console.warn('Please move to schema'); - const key = req.params.key as string; - if (!key) return; - - const entities = umbEntityData.getChildren(key); - return res(ctx.status(200), ctx.json(entities)); - }), - - rest.get('/umbraco/backoffice/entities/data-types/:key', (req, res, ctx) => { - console.warn('Please move to schema'); - const key = req.params.key as string; - if (!key) return; - - const entities = umbEntityData.getChildren(key); - return res(ctx.status(200), ctx.json(entities)); - }), - - rest.get('/umbraco/backoffice/entities/document-types/:key', (req, res, ctx) => { - console.warn('Please move to schema'); - const key = req.params.key as string; - if (!key) return; - - const entities = umbEntityData.getChildren(key); - return res(ctx.status(200), ctx.json(entities)); - }), - - rest.get('/umbraco/backoffice/entities/node/:key', (req, res, ctx) => { - console.warn('Please move to schema'); - const key = req.params.key as string; - if (!key) return; - - const entities = umbEntityData.getChildren(key); + const entityType = req.url.searchParams.get('type') ?? ''; + const parentKey = req.url.searchParams.get('parentKey') ?? ''; + const entities = umbEntityData.getItems(entityType, parentKey); + console.log(entities); return res(ctx.status(200), ctx.json(entities)); }), ]; diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts index f20f4b0b47..fe4f500d3a 100644 --- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts @@ -366,7 +366,7 @@ export const internalManifests: Array Promise import('./backoffice/editors/extensions/editor-extensions.element'), meta: { - entityType: 'extensions', + entityType: 'extensionsList', }, }, {