Data display

Data display is a LiberaForms VueJS component developed with Vue3 and 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. It is used to:

• List of a user's forms (My forms)
• Display answers and graphs to each individual form
• Display answer edition diffs
• Export data
• List of all forms (admin)
• List of all users (admin)
• List a user's forms (admin)

The Panel

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

• Exports PDF, CSV, and JSON
• Search, Order by, Ascending.
• Filters multi option fields.
• Delete options.
• Column order. Move any column to the first column position.

Grid

• Each row begins with 'control column' that includes a bookmark button for your convenience.
• And effort is made to set the grid's column widths to improve readability.

Cards

Each data item is displayed as a card. The title of the card is the first data column. Click on the title to expand the card.

Data inspection

Fields are clickable when it makes sense to:

• Use the Copy button to copy the field value to the clipboard
• Use the Edit button to edit the field value

User preferences

These preferences are saved to the database and recovered when the user returns to read that same data.

• The last visualized rendering mode (grid/cards/graphs)
• Multi option field filters.
• PDF export options.
• Column order and ascending/descending.

Exports

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

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 js files to the /static/js/data-display/ directory of LiberaForms server project.

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