Resolve "Revert to old previous zoom level when going back from details page of office to overview"

see #14

The changes have been take from https://gitlab.alt.coop/wahlkampf-app/wk-frontend/-/merge_requests/447/diffs, since it really much requires the same changes here.

• User starts at OfficeOverviewMap an sees all office
• User clicks on an Office
• This triggers the onBeforeUnmount since the click on an Office leads to and unmount and forwarding to the zoomed in OfficeDetailMap
• inside of the onBeforeUnmount the current zoom level of the overview map OfficeOverviewMap is stored inside the uiStore
• After onBeforeUnmount is executed, the user will be forwarded to OfficeDetailMap where they can see the single office
• If user navigates back to OfficeOverviewMap the block inside of onBeforeMount is executed, which tries then to load the stored zoomlevel from the uiStore and clears the stored zoom level

---

Chat.GPT

i also tried to let chat.gpt to explain the diff:

The diff provided shows changes made to the OfficeOverviewMap.vue file, which is a Vue.js component. Here's an explanation of the changes:

Changes Overview:

1. Import Statements:
   • Modified: Added imports for onBeforeMount and onBeforeUnmount from 'vue'.
2. New Functionality:
   • Added: Code within onBeforeMount and onBeforeUnmount lifecycle hooks to manage the map zoom level using uiStore.

Detailed Changes:

1. Import Statements

• Old Code:

  import { onMounted, onUnmounted, ref } from 'vue'

• New Code:

  import {
    onBeforeMount,
    onBeforeUnmount,
    onMounted,
    onUnmounted,
    ref
  } from 'vue'

Explanation: The new code includes additional imports for onBeforeMount and onBeforeUnmount lifecycle hooks. These hooks are used for executing code before the component mounts and before it unmounts, respectively.

2. Use of uiStore

• New Imports:

  import { uiStore } from 'src/store/UiStore'

Explanation: The uiStore is now being imported to manage the user interface state, specifically to store and retrieve the map's zoom level.

3. onBeforeMount Lifecycle Hook

• New Code:

  onBeforeMount(() => {
    const previousZoom = uiStore.getState().mapZoom
    if (previousZoom != null) {
      map.value.setZoom(previousZoom, {})
    }
    uiStore.setMapZoom(null)
  })

Explanation: Before the component mounts, the code retrieves the previous zoom level from uiStore. If a previous zoom level exists, it sets the map's zoom to that level. Then it resets the stored zoom level in uiStore to null.

4. onBeforeUnmount Lifecycle Hook

• New Code:

  onBeforeUnmount(() => {
    uiStore.setMapZoom(map.value.getZoom())
  })

Explanation: Before the component unmounts, the current zoom level of the map is stored in uiStore.

5. Existing onMounted and onUnmounted Hooks

• Unchanged Code:

  onMounted(() => {
    void apiClient.officeGeometry.list().then((offices) => {
      officeFeatureCollection.value = offices.payload.data
    })
    map.value.on('zoomend', updateBounds)
    map.value.on('moveend', updateBounds)
  })
  
  onUnmounted(() => {
    map.value.off('zoomend', updateBounds)
    map.value.off('moveend', updateBounds)
  })

Explanation: The existing onMounted and onUnmounted hooks remain unchanged, continuing to handle API calls and event listeners for the map.

Summary:

The changes introduce a mechanism to persist and restore the map's zoom level using Vue.js lifecycle hooks and a store (uiStore). This ensures a consistent user experience by retaining the map's zoom level between component mounts and unmounts.