Card | @dhealthdapps/frontend

interface

Card

description

This interface defines the configuration of an individual card on the screen.

A display mode can be set using the property display, which defines whether the card is displayed or not, when a state error happens or when state is empty. Loading state does not count as state being empty.

Pagination can be configured to use a default, client-side pagination with "client", a server-side pagination with "server" or to be disabled overall with "none".

State is defined using the property state, which defines any type of state discoveries that have to be waited for, a data getter path, using the namespaced Vuex store, and optionally a list of columns that are displayed only for TableCard components.

Last but not least, the format of display can be defined using the format property, which optionally defines the displayed columns - thereby implying some are hidden - or transforming/manipulating datasets otherwise before display.

example

Using the Card interface

  const config = {
    identifier: "account-information-widget",
    component: "TableCard",
    display: {
      size: "full-width",
      onEmpty: false,
      onError: false,
      classes: ["text-green-800", "text-bold"]
    },
    pagination: "none", // | "default" | "client" | "server"
    state: {
      waitFor: [],
      getter: "account/info",
      formatters: {
        address: "format-mini-address",
        balance: "format-absolute-amount"
      }
    }
  };

  // using the interface directly
  const card = config as Card;

  // or using a card factory
  const card = createCard(config);

Properties

param identifier

The card identifier, must be unique across one page's cards.

param component

The type of component that will be used to display for this card, i.e. one of Card or TableCard.

param display

The display mode that will be used. This defines whether the card should display in error cases and when state is empty. (Optional)

param pagination

The pagination mode, one of: 'none', 'default', 'client' or 'server'. (Optional)

param state

The state configuration. This is required to read datasets from the backend. (Optional)

since

v0.1.0

Hierarchy

Card

Index

Properties

component

component: CardComponentType

The type of component that will be used to display for this card, i.e. one of Card or TableCard. More card component types will be added in next iterations.

var: {CardComponentType}

Optional display

display?: CardDisplayMode

The display mode that will be used. This defines whether the card should display in error cases and when state is empty.

var: {CardDisplayMode}

identifier

identifier: string

A unique identifier that can be used to refer to this card. This must be unique across one page's cards configuration.

var: {string}

Optional pagination

pagination?: PaginationMode

The pagination mode that will be used, if any. This sets the pagination to use either client-side or server-side pagination, or to be disabled using "none".

see: {PaginationMode}
var: {PaginationMode}

Optional props

props?: Record<string, unknown>

An object that contains the properties that should be forwarded to the card component's <component> element.

Note that these properties are set without any formatting being done on the value or the property name.

var: {Record<string, unknown>}

Optional state

state?: State

The state configuration for discovery and mutations. This is required to perform read/write operations with datasets from the backend.

A state configuration entry may directly map to the vuex store's getters, mutations or actions. Additionally, it is possible to define "tear-up" logic using the State.waitFor property.

see: {State}
var: {State}