Create composable use-edits-guard (#11018)

This commit is contained in:
José Varela
2022-01-13 16:49:01 +00:00
committed by GitHub
parent 161c9c80ca
commit dc393ed9ba
12 changed files with 74 additions and 155 deletions

View File

@@ -106,10 +106,10 @@ import { useCollection } from '@directus/shared/composables';
import FieldsManagement from './components/fields-management.vue';
import useItem from '@/composables/use-item';
import { useRouter, onBeforeRouteUpdate, onBeforeRouteLeave, NavigationGuard } from 'vue-router';
import { useRouter } from 'vue-router';
import { useCollectionsStore, useFieldsStore } from '@/stores';
import useShortcut from '@/composables/use-shortcut';
import unsavedChanges from '@/composables/unsaved-changes';
import useEditsGuard from '@/composables/use-edits-guard';
export default defineComponent({
components: { SettingsNavigation, FieldsManagement },
@@ -160,20 +160,7 @@ export default defineComponent({
return hasEdits.value;
});
unsavedChanges(isSavable);
const confirmLeave = ref(false);
const leaveTo = ref<string | null>(null);
const editsGuard: NavigationGuard = (to) => {
if (hasEdits.value) {
confirmLeave.value = true;
leaveTo.value = to.fullPath;
return false;
}
};
onBeforeRouteUpdate(editsGuard);
onBeforeRouteLeave(editsGuard);
const { confirmLeave, leaveTo } = useEditsGuard(isSavable);
return {
t,

View File

@@ -141,11 +141,11 @@ import { Preset, Filter } from '@directus/shared/types';
import api from '@/api';
import { useCollectionsStore, usePresetsStore } from '@/stores';
import { getLayouts } from '@/layouts';
import { useRouter, onBeforeRouteUpdate, onBeforeRouteLeave, NavigationGuard } from 'vue-router';
import { useRouter } from 'vue-router';
import { unexpectedError } from '@/utils/unexpected-error';
import { useLayout } from '@directus/shared/composables';
import useShortcut from '@/composables/use-shortcut';
import unsavedChanges from '@/composables/unsaved-changes';
import useEditsGuard from '@/composables/use-edits-guard';
import { isEqual } from 'lodash';
type FormattedPreset = {
@@ -210,20 +210,7 @@ export default defineComponent({
return hasEdits.value;
});
unsavedChanges(isSavable);
const confirmLeave = ref(false);
const leaveTo = ref<string | null>(null);
const editsGuard: NavigationGuard = (to) => {
if (hasEdits.value) {
confirmLeave.value = true;
leaveTo.value = to.fullPath;
return false;
}
};
onBeforeRouteUpdate(editsGuard);
onBeforeRouteLeave(editsGuard);
const { confirmLeave, leaveTo } = useEditsGuard(isSavable);
return {
t,

View File

@@ -49,8 +49,8 @@ import { useSettingsStore, useServerStore } from '@/stores';
import ProjectInfoSidebarDetail from './components/project-info-sidebar-detail.vue';
import { clone } from 'lodash';
import useShortcut from '@/composables/use-shortcut';
import unsavedChanges from '@/composables/unsaved-changes';
import { useRouter, onBeforeRouteUpdate, onBeforeRouteLeave, NavigationGuard } from 'vue-router';
import useEditsGuard from '@/composables/use-edits-guard';
import { useRouter } from 'vue-router';
export default defineComponent({
components: { SettingsNavigation, ProjectInfoSidebarDetail },
@@ -81,20 +81,7 @@ export default defineComponent({
return noEdits.value;
});
unsavedChanges(isSavable);
const confirmLeave = ref(false);
const leaveTo = ref<string | null>(null);
const editsGuard: NavigationGuard = (to) => {
if (!noEdits.value) {
confirmLeave.value = true;
leaveTo.value = to.fullPath;
return false;
}
};
onBeforeRouteUpdate(editsGuard);
onBeforeRouteLeave(editsGuard);
const { confirmLeave, leaveTo } = useEditsGuard(isSavable);
return {
t,

View File

@@ -107,7 +107,7 @@ import { useI18n } from 'vue-i18n';
import { defineComponent, computed, toRefs, ref } from 'vue';
import SettingsNavigation from '../../../components/navigation.vue';
import { useRouter, onBeforeRouteUpdate, onBeforeRouteLeave, NavigationGuard } from 'vue-router';
import { useRouter } from 'vue-router';
import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
import useItem from '@/composables/use-item';
import { useUserStore } from '@/stores/';
@@ -115,7 +115,7 @@ import RoleInfoSidebarDetail from './components/role-info-sidebar-detail.vue';
import PermissionsOverview from './components/permissions-overview.vue';
import UsersInvite from '@/views/private/components/users-invite';
import useShortcut from '@/composables/use-shortcut';
import unsavedChanges from '@/composables/unsaved-changes';
import useEditsGuard from '@/composables/use-edits-guard';
export default defineComponent({
name: 'RolesItem',
@@ -173,20 +173,7 @@ export default defineComponent({
return hasEdits.value;
});
unsavedChanges(isSavable);
const confirmLeave = ref(false);
const leaveTo = ref<string | null>(null);
const editsGuard: NavigationGuard = (to) => {
if (hasEdits.value) {
confirmLeave.value = true;
leaveTo.value = to.fullPath;
return false;
}
};
onBeforeRouteUpdate(editsGuard);
onBeforeRouteLeave(editsGuard);
const { confirmLeave, leaveTo } = useEditsGuard(isSavable);
return {
t,

View File

@@ -88,12 +88,12 @@ import { useI18n } from 'vue-i18n';
import { defineComponent, computed, toRefs, ref } from 'vue';
import SettingsNavigation from '../../components/navigation.vue';
import { useRouter, onBeforeRouteUpdate, onBeforeRouteLeave, NavigationGuard } from 'vue-router';
import { useRouter } from 'vue-router';
import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail';
import useItem from '@/composables/use-item';
import SaveOptions from '@/views/private/components/save-options';
import useShortcut from '@/composables/use-shortcut';
import unsavedChanges from '@/composables/unsaved-changes';
import useEditsGuard from '@/composables/use-edits-guard';
export default defineComponent({
name: 'WebhooksItem',
@@ -148,20 +148,7 @@ export default defineComponent({
return hasEdits.value;
});
unsavedChanges(isSavable);
const confirmLeave = ref(false);
const leaveTo = ref<string | null>(null);
const editsGuard: NavigationGuard = (to) => {
if (hasEdits.value) {
confirmLeave.value = true;
leaveTo.value = to.fullPath;
return false;
}
};
onBeforeRouteUpdate(editsGuard);
onBeforeRouteLeave(editsGuard);
const { confirmLeave, leaveTo } = useEditsGuard(isSavable);
return {
t,