diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/editor-document-type.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/editor-document-type.element.ts index c4bd628fe1..6068610efb 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/editor-document-type.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/document-type/editor-document-type.element.ts @@ -38,7 +38,7 @@ export class UmbEditorDocumentTypeElement extends UmbContextProviderMixin(UmbCon ]; @property() - id!: string; + entityKey!: string; @state() private _documentType?: DocumentTypeEntity; @@ -74,7 +74,7 @@ export class UmbEditorDocumentTypeElement extends UmbContextProviderMixin(UmbCon // TODO: This should be done in a better way, but for now it works. this._documentTypeStoreSubscription = this._documentTypeStore - ?.getById(parseInt(this.id)) + ?.getByKey(this.entityKey) .subscribe((documentType) => { if (!documentType) return; // TODO: Handle nicely if there is no document type diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/tree/document-types/document-type-tree.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/document-types/document-type-tree.element.ts deleted file mode 100644 index 67593a0e30..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/tree/document-types/document-type-tree.element.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { css, html, LitElement } from 'lit'; -import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; -import { customElement, property } from 'lit/decorators.js'; -import '../shared/tree-navigator.element'; - -@customElement('umb-document-type-tree') -export class UmbDocumentTypeTree extends LitElement { - static styles = [UUITextStyles, css``]; - - @property({ type: String }) - public alias = ''; - - render() { - return html``; - } -} - -declare global { - interface HTMLElementTagNameMap { - 'umb-document-type-tree': UmbDocumentTypeTree; - } -} 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 new file mode 100644 index 0000000000..ddb0b708cd --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/document-types/tree-document-types.context.ts @@ -0,0 +1,39 @@ +import { map } from 'rxjs'; +import { UmbEntityStore } from '../../../core/stores/entity.store'; +import { UmbTreeContext } from '../tree.context'; +import type { ManifestTree } from '../../../core/models'; + +export class UmbTreeDocumentTypesContext implements UmbTreeContext { + public tree: ManifestTree; + public entityStore: UmbEntityStore; + + constructor(tree: ManifestTree, entityStore: UmbEntityStore) { + this.tree = tree; + this.entityStore = entityStore; + } + + public fetchRoot() { + const data = { + id: -1, + key: '055a17d0-525a-4d06-9f75-92dc174ab0bd', + name: 'Document Types', + hasChildren: true, + type: 'documentType', + icon: 'favorite', + parentKey: '', + }; + this.entityStore.update([data]); + return this.entityStore.entities.pipe(map((items) => items.filter((item) => item.key === data.key))); + } + + public fetchChildren(key: string) { + // TODO: figure out url structure + fetch(`/umbraco/backoffice/trees/document-types/${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/document-types/tree-document-types.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/tree/document-types/tree-document-types.element.ts new file mode 100644 index 0000000000..eaf7d2ebc1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/backoffice/tree/document-types/tree-document-types.element.ts @@ -0,0 +1,45 @@ +import { css, html, LitElement } from 'lit'; +import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; +import { customElement, property } from 'lit/decorators.js'; +import { UmbContextConsumerMixin, UmbContextProviderMixin } from '../../../core/context'; +import { UmbEntityStore } from '../../../core/stores/entity.store'; +import { UmbTreeDocumentTypesContext } from './tree-document-types.context'; +import type { ManifestTree } from '../../../core/models'; + +import '../shared/tree-navigator.element'; + +@customElement('umb-document-type-tree') +export class UmbDocumentTypeTree extends UmbContextConsumerMixin(UmbContextProviderMixin(LitElement)) { + static styles = [UUITextStyles, css``]; + + @property({ type: String }) + public alias = ''; + + @property({ attribute: false }) + public tree?: ManifestTree; + + private _entityStore?: UmbEntityStore; + private _treeContext?: UmbTreeDocumentTypesContext; + + constructor() { + super(); + + this.consumeContext('umbEntityStore', (entityStore: UmbEntityStore) => { + this._entityStore = entityStore; + if (!this.tree || !this._entityStore) return; + + this._treeContext = new UmbTreeDocumentTypesContext(this.tree, this._entityStore); + this.provideContext('umbTreeContext', this._treeContext); + }); + } + + render() { + return html``; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'umb-document-type-tree': UmbDocumentTypeTree; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/core/stores/document-type.store.ts b/src/Umbraco.Web.UI.Client/src/core/stores/document-type.store.ts index b4d417ea6c..dc70c31582 100644 --- a/src/Umbraco.Web.UI.Client/src/core/stores/document-type.store.ts +++ b/src/Umbraco.Web.UI.Client/src/core/stores/document-type.store.ts @@ -7,10 +7,10 @@ export class UmbDocumentTypeStore { ); public readonly documentTypes: Observable> = this._documentTypes.asObservable(); - getById(id: number): Observable { + getByKey(key: string): Observable { // TODO: use Fetcher API. // TODO: only fetch if the data type is not in the store? - fetch(`/umbraco/backoffice/document-type/${id}`) + fetch(`/umbraco/backoffice/document-type/${key}`) .then((res) => res.json()) .then((data) => { this._updateStore(data); @@ -19,7 +19,7 @@ export class UmbDocumentTypeStore { return this.documentTypes.pipe( map( (documentTypes: Array) => - documentTypes.find((node: DocumentTypeEntity) => node.id === id) || null + documentTypes.find((documentType: DocumentTypeEntity) => documentType.key === key) || null ) ); } @@ -53,7 +53,7 @@ export class UmbDocumentTypeStore { const updated: DocumentTypeEntity[] = [...storedDocumentTypes]; fetchedDocumentTypes.forEach((fetchedDocumentType) => { - const index = storedDocumentTypes.map((storedNode) => storedNode.id).indexOf(fetchedDocumentType.id); + const index = storedDocumentTypes.map((storedNode) => storedNode.key).indexOf(fetchedDocumentType.key); if (index !== -1) { // If the data type is already in the store, update it 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 a1384a6cfe..d85333e189 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 @@ -91,6 +91,22 @@ export const data: Array = [ hasChildren: false, type: 'dataType', }, + { + id: 99, + key: 'd81c7957-153c-4b5a-aa6f-b434a4964624', + name: 'Document Type 1', + type: 'documentType', + hasChildren: false, + parentKey: '055a17d0-525a-4d06-9f75-92dc174ab0bd', + }, + { + id: 100, + key: 'a99e4018-3ffc-486b-aa76-eecea9593d17', + name: 'Document Type 2', + type: 'documentType', + hasChildren: false, + parentKey: '055a17d0-525a-4d06-9f75-92dc174ab0bd', + }, ]; // Temp mocked database diff --git a/src/Umbraco.Web.UI.Client/src/mocks/domains/document-type.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/domains/document-type.handlers.ts index 1a18cdf2a6..f3831e744e 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/domains/document-type.handlers.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/domains/document-type.handlers.ts @@ -4,12 +4,11 @@ import { DocumentTypeEntity, umbDocumentTypeData } from '../data/document-type.d // TODO: add schema export const handlers = [ - rest.get('/umbraco/backoffice/document-type/:id', (req, res, ctx) => { - const id = req.params.id as string; - if (!id) return; + rest.get('/umbraco/backoffice/document-type/:key', (req, res, ctx) => { + const key = req.params.key as string; + if (!key) return; - const int = parseInt(id); - const document = umbDocumentTypeData.getById(int); + const document = umbDocumentTypeData.getByKey(key); return res(ctx.status(200), ctx.json([document])); }), diff --git a/src/Umbraco.Web.UI.Client/src/mocks/domains/tree.handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/domains/tree.handlers.ts index 532ea5df65..b4125c01eb 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/domains/tree.handlers.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/domains/tree.handlers.ts @@ -1,5 +1,5 @@ import { rest } from 'msw'; -import { Entity, umbEntityData } from '../data/entity.data'; +import { umbEntityData } from '../data/entity.data'; // TODO: add schema export const handlers = [ @@ -29,4 +29,13 @@ export const handlers = [ const entities = umbEntityData.getChildren(key); return res(ctx.status(200), ctx.json(entities)); }), + + rest.get('/umbraco/backoffice/trees/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)); + }), ]; 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 5d5ada593c..d03be1e381 100644 --- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts @@ -259,13 +259,13 @@ export const internalManifests: Array Promise import('./backoffice/tree/document-types/document-type-tree.element'), + loader: () => import('./backoffice/tree/document-types/tree-document-types.element'), meta: { pathname: 'document-types', editor: 'Umb.Editor.DocumentType', label: 'Document Types', weight: -10, - sections: ['Umb.Section.Content', 'Umb.Section.Settings'], + sections: ['Umb.Section.Settings'], }, }, { @@ -315,13 +315,19 @@ export const internalManifests: Array Promise import('./backoffice/editors/member-group/editor-member-group.element'), }, { type: 'editor', alias: 'Umb.Editor.DataType', - name: 'Member Group', + name: 'Data Type Editor', loader: () => import('./backoffice/editors/data-type/editor-data-type.element'), }, + { + type: 'editor', + alias: 'Umb.Editor.DocumentType', + name: 'Document Type Editor', + loader: () => import('./backoffice/editors/document-type/editor-document-type.element'), + }, ];