Leave navigation guard (#633)

* Add leave navigation guard to collections module

* Add leave guard to users module

* Add leave navigation guard to file detail

src/modules/collections/routes/detail/detail.vue

@@ -142,6 +142,19 @@
 			v-model="edits"
 		/>
 
+		<v-dialog v-model="confirmLeave">
+			<v-card>
+				<v-card-title>{{ $t('unsaved_changes') }}</v-card-title>
+				<v-card-text>{{ $t('unsaved_changes_copy') }}</v-card-text>
+				<v-card-actions>
+					<v-button secondary @click="discardAndLeave">
+						{{ $t('discard_changes') }}
+					</v-button>
+					<v-button @click="confirmLeave = false">{{ $t('keep_editing') }}</v-button>
+				</v-card-actions>
+			</v-card>
+		</v-dialog>
+
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
 				<div class="format-markdown" v-html="marked($t('page_help_collections_detail'))" />
@@ -188,6 +201,18 @@ type Values = {
 
 export default defineComponent({
 	name: 'collections-detail',
+	beforeRouteLeave(to, from, next) {
+		const self = this as any;
+		const hasEdits = Object.keys(self.edits).length > 0;
+
+		if (hasEdits) {
+			self.confirmLeave = true;
+			self.leaveTo = to.fullPath;
+			return next(false);
+		}
+
+		return next();
+	},
 	components: {
 		CollectionsNavigation,
 		CollectionsNotFound,
@@ -238,6 +263,9 @@ export default defineComponent({
 		const confirmDelete = ref(false);
 		const confirmSoftDelete = ref(false);
 
+		const confirmLeave = ref(false);
+		const leaveTo = ref<string>(null);
+
 		const backLink = computed(
 			() => `/${currentProjectKey.value}/collections/${collection.value}/`
 		);
@@ -287,6 +315,9 @@ export default defineComponent({
 			revisionsDrawerDetail,
 			marked,
 			refresh,
+			confirmLeave,
+			leaveTo,
+			discardAndLeave,
 		};
 
 		function useBreadcrumb() {
@@ -335,6 +366,12 @@ export default defineComponent({
 			await remove(soft);
 			router.push(`/${currentProjectKey.value}/collections/${props.collection}`);
 		}
+
+		function discardAndLeave() {
+			if (!leaveTo.value) return;
+			edits.value = {};
+			router.push(leaveTo.value);
+		}
 	},
 });
 </script>

src/modules/files/routes/detail/detail.vue

@@ -102,6 +102,19 @@
 			/>
 		</div>
 
+		<v-dialog v-model="confirmLeave">
+			<v-card>
+				<v-card-title>{{ $t('unsaved_changes') }}</v-card-title>
+				<v-card-text>{{ $t('unsaved_changes_copy') }}</v-card-text>
+				<v-card-actions>
+					<v-button secondary @click="discardAndLeave">
+						{{ $t('discard_changes') }}
+					</v-button>
+					<v-button @click="confirmLeave = false">{{ $t('keep_editing') }}</v-button>
+				</v-card-actions>
+			</v-card>
+		</v-dialog>
+
 		<template #drawer>
 			<file-info-drawer-detail v-if="isNew === false" v-bind="item" />
 			<revisions-drawer-detail
@@ -150,6 +163,18 @@ type Values = {
 
 export default defineComponent({
 	name: 'files-detail',
+	beforeRouteLeave(to, from, next) {
+		const self = this as any;
+		const hasEdits = Object.keys(self.edits).length > 0;
+
+		if (hasEdits) {
+			self.confirmLeave = true;
+			self.leaveTo = to.fullPath;
+			return next(false);
+		}
+
+		return next();
+	},
 	components: {
 		FilesNavigation,
 		RevisionsDrawerDetail,
@@ -204,6 +229,9 @@ export default defineComponent({
 				.filter((field: Field) => fieldsBlacklist.includes(field.field) === false);
 		});
 
+		const confirmLeave = ref(false);
+		const leaveTo = ref<string>(null);
+
 		return {
 			item,
 			loading,
@@ -228,6 +256,9 @@ export default defineComponent({
 			revisionsDrawerDetail,
 			formFields,
 			marked,
+			confirmLeave,
+			leaveTo,
+			discardAndLeave,
 		};
 
 		function changeCacheBuster() {
@@ -276,6 +307,12 @@ export default defineComponent({
 			await remove();
 			router.push(`/${currentProjectKey.value}/files`);
 		}
+
+		function discardAndLeave() {
+			if (!leaveTo.value) return;
+			edits.value = {};
+			router.push(leaveTo.value);
+		}
 	},
 });
 </script>

src/modules/users/routes/detail/detail.vue

@@ -97,6 +97,19 @@
 			/>
 		</div>
 
+		<v-dialog v-model="confirmLeave">
+			<v-card>
+				<v-card-title>{{ $t('unsaved_changes') }}</v-card-title>
+				<v-card-text>{{ $t('unsaved_changes_copy') }}</v-card-text>
+				<v-card-actions>
+					<v-button secondary @click="discardAndLeave">
+						{{ $t('discard_changes') }}
+					</v-button>
+					<v-button @click="confirmLeave = false">{{ $t('keep_editing') }}</v-button>
+				</v-card-actions>
+			</v-card>
+		</v-dialog>
+
 		<template #drawer>
 			<drawer-detail icon="info_outline" :title="$t('information')" close>
 				[TK]
@@ -141,6 +154,18 @@ type Values = {
 
 export default defineComponent({
 	name: 'users-detail',
+	beforeRouteLeave(to, from, next) {
+		const self = this as any;
+		const hasEdits = Object.keys(self.edits).length > 0;
+
+		if (hasEdits) {
+			self.confirmLeave = true;
+			self.leaveTo = to.fullPath;
+			return next(false);
+		}
+
+		return next();
+	},
 	components: { UsersNavigation, RevisionsDrawerDetail, SaveOptions, CommentsDrawerDetail },
 	props: {
 		primaryKey: {
@@ -187,6 +212,9 @@ export default defineComponent({
 
 		const { loading: previewLoading, avatarSrc, roleName } = useUserPreview();
 
+		const confirmLeave = ref(false);
+		const leaveTo = ref<string>(null);
+
 		return {
 			title,
 			item,
@@ -210,6 +238,9 @@ export default defineComponent({
 			previewLoading,
 			avatarSrc,
 			roleName,
+			confirmLeave,
+			leaveTo,
+			discardAndLeave,
 		};
 
 		function useBreadcrumb() {
@@ -291,6 +322,12 @@ export default defineComponent({
 				}
 			}
 		}
+
+		function discardAndLeave() {
+			if (!leaveTo.value) return;
+			edits.value = {};
+			router.push(leaveTo.value);
+		}
 	},
 });
 </script>