57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
// Composable for tracking unsaved changes and preventing accidental data loss
|
|
export const useUnsavedChanges = () => {
|
|
const isDirty = ref(false)
|
|
const lastSavedData = ref<string | null>(null)
|
|
const currentData = ref<string | null>(null)
|
|
|
|
// Track changes by comparing current data with last saved data
|
|
const trackChanges = (newData: any) => {
|
|
currentData.value = JSON.stringify(newData)
|
|
|
|
if (lastSavedData.value && currentData.value !== lastSavedData.value) {
|
|
isDirty.value = true
|
|
} else if (!lastSavedData.value) {
|
|
isDirty.value = true
|
|
}
|
|
}
|
|
|
|
// Mark data as saved
|
|
const markAsSaved = (data: any) => {
|
|
lastSavedData.value = JSON.stringify(data)
|
|
currentData.value = lastSavedData.value
|
|
isDirty.value = false
|
|
}
|
|
|
|
// Reset dirty state
|
|
const resetDirty = () => {
|
|
isDirty.value = false
|
|
lastSavedData.value = currentData.value
|
|
}
|
|
|
|
// Warning before leaving page
|
|
const beforeUnloadHandler = (event: BeforeUnloadEvent) => {
|
|
if (isDirty.value) {
|
|
event.preventDefault()
|
|
event.returnValue = 'У вас есть несохраненные изменения. Вы уверены, что хотите уйти?'
|
|
return event.returnValue
|
|
}
|
|
}
|
|
|
|
// Setup warning on mount
|
|
onMounted(() => {
|
|
window.addEventListener('beforeunload', beforeUnloadHandler)
|
|
})
|
|
|
|
// Cleanup on unmount
|
|
onUnmounted(() => {
|
|
window.removeEventListener('beforeunload', beforeUnloadHandler)
|
|
})
|
|
|
|
return {
|
|
isDirty: readonly(isDirty),
|
|
trackChanges,
|
|
markAsSaved,
|
|
resetDirty
|
|
}
|
|
}
|