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/lang/en-US/index.json

@@ -581,6 +581,11 @@
 	"layout_preview": "Layout Preview",
 	"layout_setup": "Layout Setup",
 
+	"unsaved_changes": "Unsaved Changes",
+	"unsaved_changes_copy": "Are you sure you want to leave this page?",
+	"discard_changes": "Discard Changes",
+	"keep_editing": "Keep Editing",
+
 	"page_help_collections_overview": "Provides a listing of all collections you have access to.",
 	"page_help_collections_browse": "**Item Browse Page** — Customize the layout, filters, and sorting to tailor your view of items within this {collection} collection.<br><br>You can also save bookmarks of these different configurations to quickly switch between them.<br><br><a href='https://docs.directus.io/guides/user-guide.html#items' target='_blank'>Learn More</a>",
 	"page_help_collections_detail": "For more information this page please refer to the <br><br><a href='https://docs.directus.io/guides/admin-guide.html#global-settings' target='_blank'>Learn More</a>",
@@ -746,7 +751,6 @@
   "desc": "desc",
   "description": "Description",
   "dialog_beginning": "Beginning of dialog window.",
-  "discard_changes": "Discard Changes",
   "display_name": "Display Name",
   "directus_version": "Directus Version",
   "done": "Done",
@@ -855,7 +859,6 @@
   "item_deleted": "Item Deleted",
   "item_saved": "Item Saved | {count} Items Saved",
   "junction_collection": "Junction Collection",
-  "keep_editing": "Keep Editing",
   "latency": "Latency",
   "learn_more": "Learn More",
   "length_disabled_placeholder": "Length is determined by the datatype",
@@ -980,8 +983,6 @@
   "to": "To",
   "turn_all_on": "Turn all on",
   "turn_all_off": "Turn all off",
-  "unsaved_changes": "Unsaved Changes",
-  "unsaved_changes_copy": "Are you sure you want to leave this page?",
   "update_confirm": "Are you sure you want to update {count} items?",
   "update_field": "Update Field",
   "upload_exceeds_max_size": "{filename} can't be uploaded. Your server is not configured to handle uploads of this size.",

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>

src/views/private/components/comments-drawer-detail/comments-drawer-detail.vue

@@ -2,7 +2,7 @@
 	<drawer-detail
 		:title="$t('comments')"
 		icon="chat_bubble_outline"
-		:badge="activity.length > 0 ? activity.length : null"
+		:badge="activity && activity.length > 0 ? activity.length : null"
 	>
 		<comment-input :refresh="refresh" :collection="collection" :primary-key="primaryKey" />