Vue component for address search

What does this MR do?

A new vue component that replaces the address picker on the settings page https://foodsharing.de/?page=settings&sub=general. The component does pretty much the same as the old one. It takes care of geocoding and outputs the coordinate and address.

There is also a wrapper for our old vforms which we can remove once the settings form was replaced by vue. If everything works, this component can also be used in other places (event forms, stores, ...)

How confident are you it won't break things if deployed?

Quite sure. It is only a replacement in the frontend.

How to test

1. Checkout branch locally
2. Login as foodsaver
3. Open the settings page https://localhost:18080/?page=settings&sub=general
4. Search for an address in the text field. When you select a suggestion, the address fields should be updated.
5. Drag the pin on the map. When you drop it, the address should be updated again.
6. Save the form. After reloading the page, the new address should be visible.

Screenshots (if applicable)

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