use api in relation view

This commit is contained in:
Jesper Møller Jensen
2024-01-08 12:35:15 +13:00
parent 3959890d6c
commit e64b2242a7

View File

@@ -1,6 +1,7 @@
import { UMB_RELATION_TYPE_WORKSPACE_CONTEXT } from '../../relation-type-workspace.context.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbTableColumn, UmbTableConfig } from '@umbraco-cms/backoffice/components';
import { UmbTableColumn, UmbTableConfig, UmbTableItem } from '@umbraco-cms/backoffice/components';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { RelationResponseModel } from '@umbraco-cms/backoffice/backend-api';
import { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
@@ -9,7 +10,27 @@ import { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-regis
export class UmbWorkspaceViewRelationTypeRelationElement extends UmbLitElement implements UmbWorkspaceViewElement {
//TODO Use real data
@state()
_relations: Array<RelationResponseModel> = MockData;
_relations: Array<RelationResponseModel> = [];
#workspaceContext?: typeof UMB_RELATION_TYPE_WORKSPACE_CONTEXT.TYPE;
constructor() {
super();
this.consumeContext(UMB_RELATION_TYPE_WORKSPACE_CONTEXT, (instance) => {
this.#workspaceContext = instance;
this.#getRelations();
});
}
async #getRelations() {
if (!this.#workspaceContext) {
return;
}
const response = await this.#workspaceContext.getRelations();
this._relations = response.data?.items ?? [];
}
private _tableConfig: UmbTableConfig = {
allowSelection: false,
@@ -35,10 +56,10 @@ export class UmbWorkspaceViewRelationTypeRelationElement extends UmbLitElement i
},
];
private get _tableItems() {
private get _tableItems(): UmbTableItem[] {
return this._relations.map((relation) => {
return {
key: relation.parentId + '-' + relation.childId,
id: relation.parentId + '-' + relation.childId, // Add the missing id property
data: [
{
columnAlias: 'parent',
@@ -78,73 +99,6 @@ export class UmbWorkspaceViewRelationTypeRelationElement extends UmbLitElement i
];
}
const MockData: Array<RelationResponseModel> = [
{
parentId: '1',
parentName: 'Parent 1',
childId: '2',
childName: 'Child 1',
createDate: '2021-01-01',
comment: 'Comment 1',
},
{
parentId: '1',
parentName: 'Parent 1',
childId: '3',
childName: 'Child 2',
createDate: '2021-01-01',
comment: 'Comment 2',
},
{
parentId: '1',
parentName: 'Parent 1',
childId: '4',
childName: 'Child 3',
createDate: '2021-01-01',
comment: 'Comment 3',
},
{
parentId: '1',
parentName: 'Parent 1',
childId: '5',
childName: 'Child 4',
createDate: '2021-01-01',
comment: 'Comment 4',
},
{
parentId: '1',
parentName: 'Parent 1',
childId: '6',
childName: 'Child 5',
createDate: '2021-01-01',
comment: 'Comment 5',
},
{
parentId: '1',
parentName: 'Parent 1',
childId: '7',
childName: 'Child 6',
createDate: '2021-01-01',
comment: 'Comment 6',
},
{
parentId: '1',
parentName: 'Parent 1',
childId: '8',
childName: 'Child 7',
createDate: '2021-01-01',
comment: 'Comment 7',
},
{
parentId: '1',
parentName: 'Parent 1',
childId: '9',
childName: 'Child 8',
createDate: '2021-01-01',
comment: 'Comment 8',
},
];
export default UmbWorkspaceViewRelationTypeRelationElement;
declare global {