components/map_predefined_views/MapPredefinedViewsProvider.vue

<script>
export const MapProdefinedViewsProviderStateSymbol = Symbol(
  'MapProdefinedViewsProviderStateSymbolIdentifier'
)
export const MapProdefinedViewsProviderActionsSymbol = Symbol(
  'MapProdefinedViewsProviderActionsSymbolIdentifier'
)
export default {
  name: 'MapProdefinedViewsProvider',
}

const moduleContext = {
  viewsListUpdateTimestamp: ref(null),
}
export function useMapPredefinedViewModule() {
  return {
    /**
     * Used MapPredefinedViewSettingsSelect.vue to update itself if an item is added/removed.
     */
    reactToMapPredefinedViewsListUpdate(callback = null) {
      watch(
        () => moduleContext.viewsListUpdateTimestamp.value,
        () => {
          if (
            moduleContext.viewsListUpdateTimestamp.value !== null &&
            !!callback
          ) {
            callback()
            console.log('reactToMapPredefinedViewsListUpdate')
          }
        }
      )
    },
  }
}
</script>

<script setup>
import { provide, reactive, watch, onBeforeUnmount, ref } from 'vue'
import store from '@/store'
import i18n from '@/i18n'
import { removePredefinedView } from '@/services/predefined-views.js'

const state = reactive({
  needsUpdateTimestamp: null, //The list will react and update it self
  selectedItem: null, //The list items can be selected (Edition mode)
  viewsList: [], //The existing list of predefined views for the current user
})
provide(MapProdefinedViewsProviderStateSymbol, state)
provide(MapProdefinedViewsProviderActionsSymbol, {
  removeSelectedItem,
})

async function removeSelectedItem() {
  if (
    window.confirm(
      i18n.t('predefined_views.delete_confirmation', {
        name: state.selectedItem.name,
      })
    )
  ) {
    try {
      await removePredefinedView(state.selectedItem?.id).then(() => {
        state.needsUpdateTimestamp = Date.now()
        state.selectedItem = null
      })
      store.dispatch('alert/addAlert', {
        type: 'info',
        dismissible: true,
        dismissSecs: 2,
        title: 'geocoding.tool_title.predefined_views',
        text: 'crud_operation_messages.remove_success',
      })
    } catch (err) {
      console.error(err)
      store.dispatch('alert/addAlert', {
        type: 'warning',
        title: 'geocoding.tool_title.predefined_views',
        text: 'crud_operation_messages.remove_fail',
      })
    }
  }
  return true
}

watch(
  () => state.viewsList,
  () => {
    moduleContext.viewsListUpdateTimestamp.value = Date.now()
  }
)
onBeforeUnmount(() => {
  moduleContext.viewsListUpdateTimestamp.value = null
})
</script>
<template>
  <div>
    <slot></slot>
  </div>
</template>