Resolve "configure columns in storelist"
Closes #1641 (closed), #934 (closed), #1309 (closed)
What does this MR do?
Main
- adds the ability to configure columns for the user in store list and store chain list
- you can also change the order, if you want
- adds the ability to keep the list filters and sort order on refresh (default: enabled)
- b-table could now be displayed more mobile friendly. On small screens the table is displayed in a grid-layout
New Components
- ConfigureableList.vue
- highly configurable component to make a list configurable (this means, the user can choose which column in which order should be shown)
- DragAndDropSortList.vue
- component to make a list sortable with drag and drop the items
- BTableMobileFriendly.vue
- b-table wrapper component
- exchange your component with will make the table look nice on small screens
Refactoring
- StoreListComponent.vue
- simplified a lot.
- make it more readable
- make it use the new components
- remove unnecessary props
- add named slots instead
- use a different better understandable store
- stores/store.js
- more readable store
- uses pinia
- granular control
- I plan to remove stores.js and replace it with this later on
- also I want to implement pinia stores on other entities as well
- storage.js
- changed to class style
- now we have the ability run multiple instances with different settings
- utils.js
- added some useful methods
- lib/storage.js removed, was not used anywhere and found in other place as well
- webpack.config.js
- disable eslint in dev mode
How confident are you it won't break things if deployed?
Links to related issues
above issues should also be resolved with this
How to test
- Checkout branch locally
- Login as foodsaver with different roles
- open:
- http://localhost:18080/?page=betrieb&a=own
- http://localhost:18080/?page=betrieb&bid=1566
- http://localhost:18080/?page=chain
- click the gear icon to configure the columns.
- select them
- deselect them
- order them
- also try the filter text...
- and filter status
- then reload the page
- according to your settings (the gear) you should see the filtered list
- decrease the screen width (e.g. in the dev tools, also try the touch mode)
- table should switch to grid layout
- configure your list to display less information
- table should switch back to table layout (if this lesser info fits in)
- do what ever you think, should be tested
- Also have a look if every thing strange is happening with the stores
Screenshots (if applicable)
standard list view
configure columns
table medium screen collapsed
table small screen collapsed
table small screen expanded
table medium screen expanded
table small screen partial expanded
Checklist
-
added a test, or explain why one is not needed/possible... -
no unrelated changes -
asked someone for a code review -
set a "for:" label to indicate who will be affected by this change -
added to the next milestone (see https://gitlab.com/foodsharing-dev/foodsharing/-/milestones, unless it has a "for:Dev" label) -
added an entry to CHANGELOG.md -
added a short text that can be used in the release notes -
Once your MR has been merged, you are responsible to create a testing issue in the Beta Testing forum: https://foodsharing.de/?page=bezirk&bid=734&sub=forum. Please change the MRs label to "state:Beta testing". - Consider writing a detailed description in German.
- Describe in a few sentences, what should be tested from a user perspective.
- Also mention different settings (e.g. different browsers, roles, ...) how this change can be tested.
- Be aware, that also non technical people should understand.
Release notes text in German
Konfigurieren Sie die Spalten der folgenden Module, wie Sie es wollen! Wählen Sie aus, welche Daten angezeigt werden sollen und in welcher Reihenfolge.
Module: meine Betriebe, regionale Betrieb, Betriebsketten
Außerdem können Sie auswählen, ob Ihre Suchkriterien beim erneuten Aufruf der Seite beibehalten werden sollen.
Züsätzlich wurde die Ansicht für schmale Displays optimiert.
Edited by Buntel