data-display/README.md

# Data display

Data display for LiberaForms developed with https://vue-loader.vuejs.org/

## Why

LiberaForms collects data solicited via forms. It is not easy or practical to display such data with **tables** because the number of columns and the text length of the column headers and fields are unknown. This Vue component displays data in various ways (modes). It is used to display:

* The list of a user's forms (My forms)
* The answers to each individual form
* The list of all forms (admin)
* The list of all users (admin)
* A user's forms (admin)

## The Panel

Data display begins with a `control panel` that includes functions according to the data being displayed.

* Export and links to other visualizations
* Filters. Search, Order by, Ascending.
* Column order. Move any column to the first column position.
* Modes. Grid, Expanded, Cards, Edit mode
* Pagination

## Modes

Modes provide different ways to visualize the same data

### Grid (table)
* Each row begins with 'control column' that includes a `mark` button, and an `edit` button (if fields are editable).
* Column widths are evenly spaced if they all fit within the table width, and if not...
* Column widths are evenly spaced and the first column becomes `sticky`. Cell content is ellipsed, and table overflow is hidden.

### Expanded (cards)

The Expanded mode displays each row as a card. The title of the card is the Grid's control column and first data column, but also include an expand/collapse button.

### Small Cards

Rendered when small screens are detected. This mode is the same as the Expanded mode except that cards are initially collapsed, and the panel can be toggled.

## Data inspection

Every field is clickable. A modal is displayed containing the entire field value. If the field is editable it can be edited via a form element. The form is built using the same element (select, textarea, etc) as initially defined with the LiberaForms' Form builder.


## User preferences

Defining filters, data order and column order makes consulting the data easier. These preferences are saved to the database and recovered when the user returns to read that same data.

## Exports

* **PDF**: Exports filtered items with various options. Font size, page size, etc.
* **JSON**: Exports filtered items in JSON

## Usage

```
<link rel="stylesheet" href="/static/data-display/data-display.css">

<div data-vue-component="data-display"
     data-endpoint="/data-display/my-forms/{{g.current_user.id}}"
     data-language="{{ g.current_user.language }}"
     data-csrf_token="{{ csrf_token() }}">
</div>

<script src="/static/data-display/data-display.js"></script>
```

# Development

```
npm run build
```

We then copy the generated `data-display.js` file to the `/static/data-display/` directory of LiberaForms server project.

You may also wish to read the backend code at `/liberaforms/views/data_display.py`