A tree is nothing without its data. Previously we have defined the code in the backend (c#) that will get us our tree, now we need to plumb that in to a Data Souce so we can start to represent it on the front end.
Code for these posts is avalible in our TimeDashboard Repository FrontEnd (typescript) & Backend (c#)
DataSource
The Tree datasource is the thing that gets our tree information from teh automatically generated api 'resources' and presents it in a way we can then use in a repository and ultimately the front end.
To save a lot of code - we are extending an Umbraco base tree datasource.
export class TimeTreeServerDataSource extends UmbTreeServerDataSourceBase
<TimeTreeItemResponseModel, TimeTreeItemModel> {
constructor(host: UmbControllerHost) {
super(host, {
getRootItems,
getChildrenOf,
mapper
});
}
}
by doing this we have saved ourselves a lot of code, but we do need to define the tree methods we are passing to the constructore.
Get root items
The root items in our tree
const getRootItems = () => TimeResource.getRoot({});
Get Child items
For us we have called that method getChildren in our controllers
const getChildrenOf = (parentUnique: string | null) => {
if (parentUnique == null){
return getRootItems();
}
else {
return TimeResource.getChildren({parentId: parentUnique});
}
};
Map from response to item
Finally we have to map from our response item to the model item that is used in the front end.
const mapper = (item: TimeTreeItemResponseModel) : TimeTreeItemModel => {
return {
unique: item.id,
parentUnique: item.parent?.id || null,
name: item.name,
entityType: TIME_TREE_ITEM_TYPE,
hasChildren: item.hasChildren,
isFolder: false,
icon: 'icon-alarm-clock'
};
};
Top comments (0)