diff --git a/app/src/modules/insights/routes/dashboard.vue b/app/src/modules/insights/routes/dashboard.vue index 118ba1c0f8..c151936887 100644 --- a/app/src/modules/insights/routes/dashboard.vue +++ b/app/src/modules/insights/routes/dashboard.vue @@ -113,6 +113,19 @@ + + + + {{ t('unsaved_changes') }} + {{ t('unsaved_changes_copy') }} + + + {{ t('discard_changes') }} + + {{ t('keep_editing') }} + + + @@ -131,6 +144,7 @@ import { useI18n } from 'vue-i18n'; import { pointOnLine } from '@/utils/point-on-line'; import InsightsWorkspace from '../components/workspace.vue'; import { md } from '@/utils/md'; +import { useRouter, onBeforeRouteUpdate, onBeforeRouteLeave, NavigationGuard } from 'vue-router'; export default defineComponent({ name: 'InsightsDashboard', @@ -237,6 +251,20 @@ export default defineComponent({ return withBorderRadii; }); + const confirmLeave = ref(false); + const leaveTo = ref(null); + + const editsGuard: NavigationGuard = (to) => { + if (editMode.value) { + confirmLeave.value = true; + leaveTo.value = to.fullPath; + return false; + } + }; + + onBeforeRouteUpdate(editsGuard); + onBeforeRouteLeave(editsGuard); + return { currentDashboard, editMode, @@ -260,6 +288,8 @@ export default defineComponent({ md, movePanelChoices, movePanelTo, + confirmLeave, + discardAndLeave, }; function stagePanelEdits(event: { edits: Partial; id?: string }) { @@ -348,6 +378,13 @@ export default defineComponent({ editMode.value = false; } + function discardAndLeave() { + if (!leaveTo.value) return; + cancelChanges(); + confirmLeave.value = false; + router.push(leaveTo.value); + } + function duplicatePanel(panel: Panel) { const newPanel = omit(merge({}, panel), 'id'); newPanel.position_x = newPanel.position_x + 2;