Page | @dhealthdapps/frontend

interface

Page

description

This interface represents groups of pages that are defined using so-called page schemas. A page schema consists of properties that define how pages are accessed (router), identified (state) and built (layout).

Furthermore, a page schema defines a recipe of components that are necessary to display the expected dataset(s).

example

Using the Page interface

  const config = {
    routerPath: "/home",
    identifier: "dashboard",
    layout: "grid",
  };

  // using the interface directly
  const module1 = config as Module;

  // or using a module factory
  const module2 = createModule(config);

Properties

param routerPath

The vue-router path definition, e.g. "/game-leaderboard".

param dependencies

The state dependencies configuration. This defines a tear-up process using state discovery. (Optional)

param layout

The layout type used for the homepage of this module, e.g. "flex" or "grid".

param cards

The cards that are displayed on the page according to this schema instance.

since

v0.1.0

Hierarchy

Page

Index

Properties

cards

cards: Card[]

The cards that are displayed on the page according to this schema instance. Cards are indexed and displayed next to each other.

Individual cards represent widgets that are displayed with the frontend and layout using the overarching layout system.

var: {Card[]}

Optional dependencies

dependencies?: State

The state dependencies configuration. This defines a tear-up process using state discovery for all the cards that are displayed. This property is optional and only relevant if any state discovery must be run before cards are rendered.

Note that for cards specific state discovery, it is best to use the Card interface's state property.

Also note that setting the State.waitFor property on Schema instances' state enables the tear-up logic for the page instead of for individual components. This is useful in cases where more than one card on the same page need one identical dataset.

var: {State}

identifier

identifier: string

The page identifier, this is a kebab-case formatted name, e.g. "leaderboard-statistics". This should be unique across one module instance.

The value of this property will also be used as the resulting route's name, i.e. it can be referred to by that name using vue-router instead of the full route path or "URI".

var: {string}

layout

layout: LayoutType

The layout that will be used to display this page schema on the screen. This property defines the template for the DOM-element that contains all items of this page schema.

i.e. in case the page should display its items on a grid, use the "grid" value.

see: {LayoutType}
var: {LayoutType}

Optional parent

parent?: string

A module identifier that refers to the parent module of this page instance. It is optional and automatically set with AppKernel.

var: {string}