Skip to content

"Management of waiting list: whole list"

Alexandre Soler Sanandres requested to merge 29-waiting-list into develop

Related to #29 (closed)

Related to socrates-server!27 (merged)

Closes #74 (closed)

The applicant list

This is the management list for lottery applicants. It should provide an overview of applicants and allow us to carry out some actions, such as deleting one application, changing it and maybe also registering an applicant manually as a participant.

To achieve this and because we will need several other lists to manage the conference (list of applicants by room type, list of participants, list of addresses, list of double room assignments (double, junior_shared), ...) I have a table component so we do not have to rewrite everything every time. The implementation of this table component is also here. The component implements what in my experience we will need for our lists, but there is certainly much that can and needs to be improved. I would like to implement these improvements bit by bit in separate issues.

At the moment it contains the functionality I think we will need the most:

  • showing a list of data
  • that can be sorted
  • and filtered
  • and that allows to execute actions for each row in the table.

A little introduction

All you need to create a list is the Table component.

      <div id="applicantList" className="container">
        <div className="row">
          <div className="col-sm-12">
            <div className="page-header"><h1>Applicant list</h1></div>
          </div>
        </div>
        <Table
          columns={this._defineColumns()}
          data={this.state.rows}
          actions={this._defineActions()}
          refresh={this._refresh}
        />
      </div>

It has four properties:

columns is an array with the column definitions for the table.

Every list has different columns that need to be show containing also different information.

The column definitions consist of several properties:

export type ColumnDefinition = {
  header: string,
  displayClass?: string,
  field: string,
  format?: (any) => string,
  cellTemplate?: (any) => Node,
  isSortable?: boolean,
  isFilterable?: boolean,
  sort?: (Array<Object>, string, string) => void,
  filter?: (Array<Object>, string, string) => Array<Object>
}

The most important properties are header (the text to be shown as column header) and field (the name of the field in the data array to be shown in this column)

data is an array containing the data objects to be displayed.

actions is also an array containing the actions that are available for each row of the list.

Actions have also some interesting properties:

export type TableAction = {
  canExecute: (Object) => boolean,
  execute: (Object) => void,
  iconClass: string,
  buttonClass: string,
  srText: string
}

refresh is a parameterless function to reload the list content (may be removed, but was convenient for development)

It looks like that:

image

You can learn more about how it works and how to use it by looking at the code :-)

Important

The Applicant list is a management list. You need to be logged in as an administrator to see the Links in the navigation bar.

You will need the right "version" of the server (MRs socrates-server!24 (merged) and socrates-server!27 (merged))

Of course you will also need a database that is updatee (with db-migrate), at least to the stand of socrates-server!24 (merged) and some data in it that can be displayed in the list ;-)

Edited by Alexandre Soler Sanandres

Merge request reports