Dynamic, nested and synced mat expansion panel

[hadrien-toma]

Enhancement

Metadata

key	value
name	dynamic-nested-synced-mat-expansion-panel

Description

• In a SideNav, there is only one component: expansion-panel
• expansion-panel needs a tree as input, which signature is:

export interface ExpansionPanelTreeHeader {
    description: string;
    title: string;
}
export interface ExpansionPanelTreeRouterLink {
    queryParams: { [k: string]: any; }
    fragment: string;
    queryParamsHandling: QueryParamsHandling;
    preserveFragment: boolean;
    skipLocationChange: boolean;
    replaceUrl: boolean;
    state?: { [k: string]: any; };
    routerLink: string | any[];
}
export interface ExpansionPanelTree {
    data: {
        header?: ExpansionPanelTreeHeader;
        routerLink?: ExpansionPanelTreeRouterLink;
    },
    childList: ExpansionPanelTree[];
}

• If an ExpansionPanelTree has an empty childList, it will not be a "mat-expansion-pannel" but a mat-toolbar. This toolbar will contain a <a> with all the routerLink inputs (cf. references bellow).
• The ExpansionPanelTree data come from an NgRx selector which use an IndexTree selector and a CurrentLang selector.

export interface IndexTree {
    data: { id: string; };
    childList: TreeIndex[];
}
export interface ExpansionPanelIndexToHeaderTranslations {
    [lang: string]: {
        indexTreeDataId: string;
        header: {
            title: string;
            description: string;
        }
    }
}

• There will be one findRequest for each part of the tree that is synced (when an ExpansionPanelTree is expanded, it will reveal its childList, triggering new findRequests, one for each of the "future" childList. This will allow to have no latency in the user experience, as a childList will be loaded/synced ahead of time : before the user want to see it.

Reference(s)

• Angular Material - Mat expansion panel documentation
• Angular - RouterLink documentation