Allow for discarding of changes without leaving (#9644)

* Allow for discarding of changes without leaving * Update to use v-if for consistency * Fix boolean logic * Allow disabling of options * Remove unused disabled prop
directus · Dec 1, 2021 · 1c64648 · 1c64648
1 parent 5b1eec5
commit 1c64648
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 10 deletions.
diff --git a/app/src/modules/content/routes/item.vue b/app/src/modules/content/routes/item.vue
@@ -136,6 +136,7 @@
 						@save-and-stay="saveAndStay"
 						@save-and-add-new="saveAndAddNew"
 						@save-as-copy="saveAsCopyAndNavigate"
+						@discard-and-stay="discardAndStay"
 					/>
 				</template>
 			</v-button>
@@ -386,6 +387,7 @@ export default defineComponent({
 			saveAndStay,
 			saveAndAddNew,
 			saveAsCopyAndNavigate,
+			discardAndStay,
 			templateData,
 			templateDataLoading,
 			archiveTooltip,
@@ -507,6 +509,11 @@ export default defineComponent({
 			router.push(leaveTo.value);
 		}
 
+		function discardAndStay() {
+			edits.value = {};
+			confirmLeave.value = false;
+		}
+
 		function revert(values: Record<string, any>) {
 			edits.value = {
 				...edits.value,

diff --git a/app/src/modules/files/routes/item.vue b/app/src/modules/files/routes/item.vue
@@ -99,9 +99,11 @@
 
 				<template #append-outer>
 					<save-options
-						v-if="hasEdits === true || saveAllowed === true"
+						v-if="hasEdits === true && saveAllowed === true"
+						:disabled-options="['save-and-add-new']"
 						@save-and-stay="saveAndStay"
 						@save-as-copy="saveAsCopyAndNavigate"
+						@discard-and-stay="discardAndStay"
 					/>
 				</template>
 			</v-button>
@@ -328,6 +330,7 @@ export default defineComponent({
 			deleting,
 			saveAndStay,
 			saveAsCopyAndNavigate,
+			discardAndStay,
 			isBatch,
 			editActive,
 			revisionsDrawerDetail,
@@ -411,9 +414,15 @@ export default defineComponent({
 		function discardAndLeave() {
 			if (!leaveTo.value) return;
 			edits.value = {};
+			confirmLeave.value = false;
 			router.push(leaveTo.value);
 		}
 
+		function discardAndStay() {
+			edits.value = {};
+			confirmLeave.value = false;
+		}
+
 		function downloadFile() {
 			const filePath = addTokenToURL(getRootPath() + `assets/${props.primaryKey}?download`);
 			window.open(filePath, '_blank');

diff --git a/app/src/modules/settings/routes/webhooks/item.vue b/app/src/modules/settings/routes/webhooks/item.vue
@@ -37,10 +37,11 @@
 
 				<template #append-outer>
 					<save-options
-						:disabled="hasEdits === false"
+						v-if="hasEdits === true"
 						@save-and-stay="saveAndStay"
 						@save-and-add-new="saveAndAddNew"
 						@save-as-copy="saveAsCopyAndNavigate"
+						@discard-and-stay="discardAndStay"
 					/>
 				</template>
 			</v-button>
@@ -178,6 +179,7 @@ export default defineComponent({
 			saveAndStay,
 			saveAndAddNew,
 			saveAsCopyAndNavigate,
+			discardAndStay,
 			isBatch,
 			title,
 			validationErrors,
@@ -217,6 +219,11 @@ export default defineComponent({
 			confirmLeave.value = false;
 			router.push(leaveTo.value);
 		}
+
+		function discardAndStay() {
+			edits.value = {};
+			confirmLeave.value = false;
+		}
 	},
 });
 </script>

diff --git a/app/src/modules/users/routes/item.vue b/app/src/modules/users/routes/item.vue
@@ -89,6 +89,7 @@
 						@save-and-stay="saveAndStay"
 						@save-and-add-new="saveAndAddNew"
 						@save-as-copy="saveAsCopyAndNavigate"
+						@discard-and-stay="discardAndStay"
 					/>
 				</template>
 			</v-button>
@@ -343,6 +344,7 @@ export default defineComponent({
 			saveAndStay,
 			saveAndAddNew,
 			saveAsCopyAndNavigate,
+			discardAndStay,
 			isBatch,
 			revisionsDrawerDetail,
 			previewLoading,
@@ -492,9 +494,15 @@ export default defineComponent({
 		function discardAndLeave() {
 			if (!leaveTo.value) return;
 			edits.value = {};
+			confirmLeave.value = false;
 			router.push(leaveTo.value);
 		}
 
+		function discardAndStay() {
+			edits.value = {};
+			confirmLeave.value = false;
+		}
+
 		async function toggleArchive() {
 			await archive();
 

diff --git a/app/src/views/private/components/save-options/save-options.vue b/app/src/views/private/components/save-options/save-options.vue
@@ -1,24 +1,28 @@
 <template>
-	<v-menu show-arrow :disabled="disabled">
+	<v-menu show-arrow>
 		<template #activator="{ toggle }">
 			<v-icon :class="{ disabled }" name="more_vert" clickable @click="toggle" />
 		</template>
 
 		<v-list>
-			<v-list-item :disabled="disabled" clickable @click="$emit('save-and-stay')">
+			<v-list-item v-if="!disabledOptions.includes('save-and-stay')" clickable @click="$emit('save-and-stay')">
 				<v-list-item-icon><v-icon name="check" /></v-list-item-icon>
 				<v-list-item-content>{{ t('save_and_stay') }}</v-list-item-content>
 				<v-list-item-hint>{{ translateShortcut(['meta', 's']) }}</v-list-item-hint>
 			</v-list-item>
-			<v-list-item :disabled="disabled" clickable @click="$emit('save-and-add-new')">
+			<v-list-item v-if="!disabledOptions.includes('save-and-add-new')" clickable @click="$emit('save-and-add-new')">
 				<v-list-item-icon><v-icon name="add" /></v-list-item-icon>
 				<v-list-item-content>{{ t('save_and_create_new') }}</v-list-item-content>
 				<v-list-item-hint>{{ translateShortcut(['meta', 'shift', 's']) }}</v-list-item-hint>
 			</v-list-item>
-			<v-list-item :disabled="disabled" clickable @click="$emit('save-as-copy')">
+			<v-list-item v-if="!disabledOptions.includes('save-as-copy')" clickable @click="$emit('save-as-copy')">
 				<v-list-item-icon><v-icon name="done_all" /></v-list-item-icon>
 				<v-list-item-content>{{ t('save_as_copy') }}</v-list-item-content>
 			</v-list-item>
+			<v-list-item v-if="!disabledOptions.includes('discard-and-stay')" clickable @click="$emit('discard-and-stay')">
+				<v-list-item-icon><v-icon name="undo" /></v-list-item-icon>
+				<v-list-item-content>{{ t('discard_changes') }}</v-list-item-content>
+			</v-list-item>
 		</v-list>
 	</v-menu>
 </template>
@@ -30,12 +34,12 @@ import translateShortcut from '@/utils/translate-shortcut';
 
 export default defineComponent({
 	props: {
-		disabled: {
-			type: Boolean,
-			default: false,
+		disabledOptions: {
+			type: Array,
+			default: () => [],
 		},
 	},
-	emits: ['save-and-stay', 'save-and-add-new', 'save-as-copy'],
+	emits: ['save-and-stay', 'save-and-add-new', 'save-as-copy', 'discard-and-stay'],
 	setup() {
 		const { t } = useI18n();