2.8 KiB
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 anedit
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