Replace region tree with vue
Related to #1181 (closed)
What does this MR do?
Replaces the region tree with a new vue component using vue-jstree. The region tree is used on three pages: the foodsaver edit form (http://localhost:18080/?page=foodsaver&a=edit&id=xyz), the personal settings page when logged in as orga (http://localhost:18080/?page=settings&sub=general), and the region admin module (http://localhost:18080/?page=region). I replaced it in the first two. In the third, it will allow us to finally remove some old code from XhrMethods which assembles the old region tree.
The RegionTree.vue component is the tree itself which fetches data from the already existing API. I also added the RegionTreeVForm.vue component, a button that opens the tree in a modal, which we can use as long as we still have old v-forms.
How confident are you it won't break things if deployed?
quite sure, since vue-jstree does most of the work
How to test
- Checkout branch locally
- Login as userbot
- Edit your own profile (profile page -> "edit" in the left menu)
- There is a button for changing your home district
- Choose a region, close the modal, and submit the form
Screenshots (if applicable)
Checklist
-
added a test, or explain why one is not needed/possible...: API already exists; the frontend is pretty much the same as before -
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.