Cooperators UI
The current list of Cooperators is just to test that the API works, it has no real UI. This ticket describes the update for Cooperators UI and is the starting point for all other data.
Cooperators page layout:
- The header
- Table of cooperators (takes up all available horizontal and vertical space)
- Filter information (to be discussed later)
- Table header with column labels
- Table data (this is the only scrolable element on this page)
- Table footer
- The + button to add a record
Tabular display of data
The lists of data in GG-CE-UI will primarily be displayed as tables with infinite loading (rows added to the end of the table). We use this to render Dataset contents in Genesys (e.g. https://www.genesys-pgr.org/amphibian/49dc30aa-3ccb-48c2-aff0-f8da3d4c2e75).
The API call returns an array of objects. The "page" with the table is aware of the type of data it is displaying (e.g. table for cooperators displays Cooperator
records).
The table opens with a default list of columns displayed (even if there are no items loaded).
Columns for each table have customizable content rendering, but default rendering is to display the value.
Column labels are defined in common:
i18n namespace under model.${type}
key (e.g. common:model.Cooperator.firstName
), but we will use a fall back to common:model._.createdBy
so we don't need to declare common properties multiple times.
Second stage
Users are able to hide, unhide, resize and reorder table columns.
Settings of every table (column order, visibility and sort) are saved in localStorage
. A Service that manages these settings (load, update, clear) needs to be implemented.
Users are able to sort by column.
Table rows need to be selectable/unselectable.