Early Adopter's guide to Umbraco v14 [Trees] - Stores

Inbetween our datasource- that is maintaing the tree state, so if for example if someone changes the name of item in the editor, the tree name will be updated.

Code for these posts is avalible in our TimeDashboard Repository FrontEnd (typescript) & Backend (c#)

Datastore.

our data store, again will inherit from an Umbraco based store UmbUniqueTreeStore which allows us to build a tree as long as we have a unique property on our classes.

export class TimeTreeStore extends UmbUniqueTreeStore {

    constructor(host: UmbControllerHostElement) {
        super(host, TIME_TREE_STORE_CONTEXT.toString());

        new UmbStoreConnector<TimeTreeItemModel, TimeTreeDetailModel>(
            host,
            this,
            TIME_TREE_STORE_CONTEXT,
            (item) => this.#createTreeMapper(item),
            (item) => this.#updateTreeItemMapper(item)
        )
    }

    #createTreeMapper = (item: TimeTreeDetailModel) => {
        const treeItem: TimeTreeItemModel = {
            unique: item.unique,
            parentUnique: null,
            name: item.name,
            entityType: item.entityType,
            isFolder: false,
            hasChildren: false
        };

        return treeItem;
    };

    #updateTreeItemMapper = (model: TimeTreeDetailModel) => {
        return {
            name: model.name
        };
    };
}