updates README. adds i18n string

README.md

@@ -1,57 +1,59 @@
 # Data display
 
-Data display for LiberaForms developed with https://vue-loader.vuejs.org/
+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 (modes). It is used to display:
+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:
 
-* 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)
+* 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.
 
-* Export and links to other visualizations
-* Filters. Search, Order by, Ascending.
+* 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.
-* Modes. Grid, Expanded, Cards, Edit mode
-* Pagination
 
-## Modes
+### Grid
 
-Modes provide different ways to visualize the same data
+* 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.
 
-### 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.
+### Cards
 
-### 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.
+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
 
-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.
+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
 
-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.
+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
 
@@ -73,6 +75,6 @@ Defining filters, data order and column order makes consulting the data easier.
 npm run build
 ```
 
-We then copy the generated `data-display.js` file to the `/static/data-display/` directory of LiberaForms server project.
+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.py`
+You may also wish to read the backend code at `/liberaforms/views/data_display/`

src/components/panel/DisplayPanel.vue

@@ -210,14 +210,8 @@ export default {
         return t("Filtered {number} of {total}").replace("{number}", filtered)
                                                 .replace("{total}", total)
       }
-      if (store.data_type=='user' && filtered==total) {
-        return t("Total users: {total}").replace("{total}", total)
-      }
-      if (store.data_type=='form' && filtered==total) {
-        return t("Total forms: {total}").replace("{total}", total)
-      }
-      if (store.data_type=='answer' && filtered==total) {
-        return t("Total answers: {total}").replace("{total}", total)
+      if (filtered==total) {
+        return t("Total") + ": " + total
       }
       return t("Displaying {number} of {total}").replace("{number}", filtered)
                                                 .replace("{total}", total)

src/translations/en.json

@@ -1,5 +1,6 @@
 {
-  "Displaying {filtered} of {total}": "Displaying {filtered} of {total}",
+  "Displaying {number} of {total}": "Displaying {number} of {total}",
+  "Filtered {number} of {total}": "Filtered {number} of {total}",
   "Mark for reference": "Mark for reference",
   "Marked": "Marked",
   "Delete answer": "Delete answer",