d0da77c2a5
Currently translated at 100.0% (84 of 84 strings) Translation: LiberaForms/DataDisplay - LiberaForms Translate-URL: https://hosted.weblate.org/projects/liberaforms/data-display-liberaforms/eu/ |
||
---|---|---|
LICENSES | ||
public | ||
src | ||
.gitignore | ||
babel.config.js | ||
jsconfig.json | ||
package.json | ||
README.md | ||
vue.config.js | ||
webpack.config.js |
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/