Add unsaved changes warning modal in Form Builder
- Implemented a modal to warn users about unsaved changes when navigating away from the form builder. - Added computed properties and methods to manage unsaved changes state and navigation confirmation. - Updated the form management page to include unsaved changes handling when creating new forms. - Enhanced the form store to track unsaved changes status, ensuring better user experience and data integrity.
This commit is contained in:
parent
63a7d0f870
commit
103663b66b
@ -22,7 +22,7 @@
|
||||
type="text"
|
||||
name="formName"
|
||||
placeholder="Form Name"
|
||||
v-model="formStore.formName"
|
||||
v-model="formName"
|
||||
validation="required"
|
||||
validation-visibility="live"
|
||||
:validation-messages="{ required: 'Please enter a form name' }"
|
||||
@ -151,6 +151,29 @@
|
||||
</div>
|
||||
<template #footer> </template>
|
||||
</RsModal>
|
||||
|
||||
<!-- Unsaved Changes Modal -->
|
||||
<RsModal v-model="showUnsavedChangesModal" title="Unsaved Changes" size="md" position="center">
|
||||
<div class="p-4">
|
||||
<div class="flex items-center mb-4">
|
||||
<Icon name="material-symbols:warning-outline" class="text-yellow-500 w-8 h-8 mr-3" />
|
||||
<div>
|
||||
<h3 class="font-medium text-lg">You have unsaved changes</h3>
|
||||
<p class="text-gray-600">Are you sure you want to leave? Your changes will be lost.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
<RsButton @click="cancelNavigation" variant="tertiary">
|
||||
Stay
|
||||
</RsButton>
|
||||
<RsButton @click="confirmNavigation" variant="danger">
|
||||
Leave
|
||||
</RsButton>
|
||||
</div>
|
||||
</template>
|
||||
</RsModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -169,12 +192,80 @@ const router = useRouter();
|
||||
const formStore = useFormBuilderStore();
|
||||
const toast = useToast();
|
||||
|
||||
const showPreview = ref(false);
|
||||
const showUnsavedChangesModal = ref(false);
|
||||
const pendingNavigation = ref(null);
|
||||
const navigationTarget = ref(null);
|
||||
const navigationConfirmed = ref(false);
|
||||
|
||||
// Computed property for form name with getter and setter
|
||||
const formName = computed({
|
||||
get: () => formStore.formName,
|
||||
set: (value) => {
|
||||
if (value !== formStore.formName) {
|
||||
formStore.setFormName(value);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize the form builder
|
||||
onMounted(() => {
|
||||
formStore.loadSavedForms();
|
||||
|
||||
// Add the beforeunload event listener
|
||||
window.addEventListener('beforeunload', handleBeforeUnload);
|
||||
});
|
||||
|
||||
const showPreview = ref(false);
|
||||
onUnmounted(() => {
|
||||
// Remove the beforeunload event listener
|
||||
window.removeEventListener('beforeunload', handleBeforeUnload);
|
||||
});
|
||||
|
||||
// Show warning if there are unsaved changes
|
||||
const handleBeforeUnload = (event) => {
|
||||
if (formStore.hasUnsavedChanges) {
|
||||
event.preventDefault();
|
||||
event.returnValue = '';
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
// Navigation guards
|
||||
// Add navigation guard
|
||||
onBeforeRouteLeave((to, from, next) => {
|
||||
// If navigation was already confirmed or there are no unsaved changes, proceed
|
||||
if (navigationConfirmed.value || !formStore.hasUnsavedChanges) {
|
||||
next();
|
||||
return;
|
||||
}
|
||||
|
||||
// Otherwise show the confirmation modal
|
||||
showUnsavedChangesModal.value = true;
|
||||
pendingNavigation.value = () => {
|
||||
navigationConfirmed.value = true;
|
||||
next();
|
||||
};
|
||||
next(false);
|
||||
});
|
||||
|
||||
// Navigation handlers
|
||||
const cancelNavigation = () => {
|
||||
showUnsavedChangesModal.value = false;
|
||||
pendingNavigation.value = null;
|
||||
navigationTarget.value = null;
|
||||
navigationConfirmed.value = false;
|
||||
};
|
||||
|
||||
const confirmNavigation = () => {
|
||||
showUnsavedChangesModal.value = false;
|
||||
|
||||
if (pendingNavigation.value) {
|
||||
pendingNavigation.value();
|
||||
} else if (navigationTarget.value) {
|
||||
navigationConfirmed.value = true; // Mark as confirmed before navigating
|
||||
router.push(navigationTarget.value);
|
||||
}
|
||||
};
|
||||
|
||||
// Handler methods
|
||||
const handleAddComponent = (component) => {
|
||||
@ -242,11 +333,19 @@ const handlePreviewSubmit = (formData) => {
|
||||
};
|
||||
|
||||
const navigateToManage = () => {
|
||||
router.push("/form-builder/manage");
|
||||
// If already confirmed or no unsaved changes, navigate directly
|
||||
if (navigationConfirmed.value || !formStore.hasUnsavedChanges) {
|
||||
router.push("/form-builder/manage");
|
||||
return;
|
||||
}
|
||||
|
||||
// Otherwise show confirmation modal
|
||||
showUnsavedChangesModal.value = true;
|
||||
navigationTarget.value = "/form-builder/manage";
|
||||
};
|
||||
|
||||
const handleOptimizeLayout = () => {
|
||||
// Implementation of handleOptimizeLayout method
|
||||
formStore.optimizeGridLayout();
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,85 +1,154 @@
|
||||
<template>
|
||||
<div class="flex flex-col h-screen bg-gray-50">
|
||||
<!-- Header -->
|
||||
<header class="bg-gray-800 p-2 flex flex-wrap items-center justify-between text-white">
|
||||
<div class="flex items-center mb-2 sm:mb-0 gap-4">
|
||||
<Icon
|
||||
@click="navigateTo('/', { external: true })"
|
||||
name="ph:arrow-circle-left-duotone"
|
||||
class="cursor-pointer w-6 h-6"
|
||||
/>
|
||||
<img src="@/assets/img/logo/logo-word-white.svg" alt="Corrad Logo" class="h-8 block mr-2" />
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center space-x-2">
|
||||
<RsButton @click="navigateToBuilder" variant="primary" class="mr-2">
|
||||
<Icon name="material-symbols:add" class="mr-2" />
|
||||
Create New Form
|
||||
</RsButton>
|
||||
<h1 class="text-lg font-semibold">Manage Forms</h1>
|
||||
</div>
|
||||
</header>
|
||||
<div>
|
||||
<div class="flex flex-col h-screen bg-gray-50">
|
||||
<!-- Header -->
|
||||
<header
|
||||
class="bg-gray-800 p-2 flex flex-wrap items-center justify-between text-white"
|
||||
>
|
||||
<div class="flex items-center mb-2 sm:mb-0 gap-4">
|
||||
<Icon
|
||||
@click="navigateTo('/', { external: true })"
|
||||
name="ph:arrow-circle-left-duotone"
|
||||
class="cursor-pointer w-6 h-6"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/img/logo/logo-word-white.svg"
|
||||
alt="Corrad Logo"
|
||||
class="h-8 block mr-2"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center space-x-2">
|
||||
<RsButton @click="navigateToBuilder" variant="primary" class="mr-2">
|
||||
<Icon name="material-symbols:add" class="mr-2" />
|
||||
Create New Form
|
||||
</RsButton>
|
||||
<h1 class="text-lg font-semibold">Manage Forms</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main content -->
|
||||
<div class="flex-1 overflow-auto p-6">
|
||||
<div class="container mx-auto">
|
||||
<!-- Search bar -->
|
||||
<div class="bg-white p-4 rounded-lg shadow-sm mb-6">
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||
<h2 class="text-xl font-medium">Saved Forms</h2>
|
||||
<div class="relative w-full md:w-64">
|
||||
<input
|
||||
type="text"
|
||||
v-model="searchQuery"
|
||||
placeholder="Search forms..."
|
||||
class="w-full px-3 py-2 pl-9 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<Icon name="material-symbols:search" class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||
<!-- Main content -->
|
||||
<div class="flex-1 overflow-auto p-6">
|
||||
<div class="container mx-auto">
|
||||
<!-- Search bar -->
|
||||
<div class="bg-white p-4 rounded-lg shadow-sm mb-6">
|
||||
<div
|
||||
class="flex flex-col md:flex-row md:items-center md:justify-between gap-4"
|
||||
>
|
||||
<h2 class="text-xl font-medium">Saved Forms</h2>
|
||||
<div class="relative w-full md:w-64">
|
||||
<input
|
||||
type="text"
|
||||
v-model="searchQuery"
|
||||
placeholder="Search forms..."
|
||||
class="w-full px-3 py-2 pl-9 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
<Icon
|
||||
name="material-symbols:search"
|
||||
class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Forms list -->
|
||||
<div class="bg-white rounded-lg shadow-sm">
|
||||
<div v-if="formStore.savedForms.length === 0" class="text-center py-16 text-gray-500">
|
||||
<Icon name="material-symbols:file-copy-outline" class="w-16 h-16 mx-auto mb-4" />
|
||||
<p class="text-lg font-medium">No forms found</p>
|
||||
<p class="text-sm mb-4">Start by creating a new form</p>
|
||||
<RsButton @click="navigateToBuilder" variant="primary">Create Form</RsButton>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<RsTable
|
||||
:field="['Form Name', 'Created', 'Actions']"
|
||||
:data="filteredForms"
|
||||
:options="{ striped: true, hover: true }"
|
||||
:optionsAdvanced="{ sortable: true, responsive: true }"
|
||||
|
||||
<!-- Forms list -->
|
||||
<div class="bg-white rounded-lg shadow-sm">
|
||||
<div
|
||||
v-if="formStore.savedForms.length === 0"
|
||||
class="text-center py-16 text-gray-500"
|
||||
>
|
||||
<template #cell-2="{ row, index }">
|
||||
<div class="flex space-x-2 justify-end">
|
||||
<RsButton @click="editForm(row.id)" size="sm" variant="tertiary">
|
||||
<template #prepend>
|
||||
<Icon name="material-symbols:edit-outline" class="w-4 h-4" />
|
||||
</template>
|
||||
Edit
|
||||
</RsButton>
|
||||
<RsButton @click="deleteForm(row.id)" size="sm" variant="tertiary" class="text-red-500">
|
||||
<template #prepend>
|
||||
<Icon name="material-symbols:delete-outline" class="w-4 h-4" />
|
||||
</template>
|
||||
Delete
|
||||
</RsButton>
|
||||
</div>
|
||||
</template>
|
||||
</RsTable>
|
||||
<Icon
|
||||
name="material-symbols:file-copy-outline"
|
||||
class="w-16 h-16 mx-auto mb-4"
|
||||
/>
|
||||
<p class="text-lg font-medium">No forms found</p>
|
||||
<p class="text-sm mb-4">Start by creating a new form</p>
|
||||
<RsButton @click="navigateToBuilder" variant="primary"
|
||||
>Create Form</RsButton
|
||||
>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<RsTable
|
||||
:field="['Form Name', 'Created', 'Actions']"
|
||||
:data="filteredForms"
|
||||
:options="{ striped: true, hover: true }"
|
||||
:optionsAdvanced="{ sortable: true, responsive: true }"
|
||||
>
|
||||
<template #cell-2="{ row, index }">
|
||||
<div class="flex space-x-2 justify-end">
|
||||
<RsButton
|
||||
@click="editForm(row.id)"
|
||||
size="sm"
|
||||
variant="tertiary"
|
||||
>
|
||||
<template #prepend>
|
||||
<Icon
|
||||
name="material-symbols:edit-outline"
|
||||
class="w-4 h-4"
|
||||
/>
|
||||
</template>
|
||||
Edit
|
||||
</RsButton>
|
||||
<RsButton
|
||||
@click="deleteForm(row.id)"
|
||||
size="sm"
|
||||
variant="tertiary"
|
||||
class="text-red-500"
|
||||
>
|
||||
<template #prepend>
|
||||
<Icon
|
||||
name="material-symbols:delete-outline"
|
||||
class="w-4 h-4"
|
||||
/>
|
||||
</template>
|
||||
Delete
|
||||
</RsButton>
|
||||
</div>
|
||||
</template>
|
||||
</RsTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Unsaved Changes Modal -->
|
||||
<RsModal
|
||||
v-model="showUnsavedChangesModal"
|
||||
title="Unsaved Changes"
|
||||
size="md"
|
||||
>
|
||||
<div class="p-4">
|
||||
<div class="flex items-center mb-4">
|
||||
<Icon
|
||||
name="material-symbols:warning-outline"
|
||||
class="text-yellow-500 w-8 h-8 mr-3"
|
||||
/>
|
||||
<div>
|
||||
<h3 class="font-medium text-lg">You have unsaved changes</h3>
|
||||
<p class="text-gray-600">
|
||||
Are you sure you want to create a new form? Your unsaved changes
|
||||
will be lost.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
<RsButton @click="cancelNavigation" variant="tertiary">
|
||||
Cancel
|
||||
</RsButton>
|
||||
<RsButton @click="confirmNavigation" variant="danger">
|
||||
Create New Form
|
||||
</RsButton>
|
||||
</div>
|
||||
</template>
|
||||
</RsModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useFormBuilderStore } from '~/stores/formBuilder';
|
||||
import { useFormBuilderStore } from "~/stores/formBuilder";
|
||||
|
||||
definePageMeta({
|
||||
title: "Manage Forms",
|
||||
@ -92,7 +161,8 @@ definePageMeta({
|
||||
const router = useRouter();
|
||||
const formStore = useFormBuilderStore();
|
||||
const toast = useToast();
|
||||
const searchQuery = ref('');
|
||||
const searchQuery = ref("");
|
||||
const showUnsavedChangesModal = ref(false);
|
||||
|
||||
// Initialize and load forms
|
||||
onMounted(() => {
|
||||
@ -102,45 +172,60 @@ onMounted(() => {
|
||||
// Format date for display
|
||||
const formatDate = (dateString) => {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
return date.toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
// Filtered and formatted forms for table display
|
||||
const filteredForms = computed(() => {
|
||||
return formStore.savedForms
|
||||
.filter(form => {
|
||||
.filter((form) => {
|
||||
if (!searchQuery.value) return true;
|
||||
return form.name.toLowerCase().includes(searchQuery.value.toLowerCase());
|
||||
})
|
||||
.map(form => ({
|
||||
.map((form) => ({
|
||||
id: form.id,
|
||||
'Form Name': form.name,
|
||||
'Created': formatDate(form.createdAt)
|
||||
"Form Name": form.name,
|
||||
Created: formatDate(form.createdAt),
|
||||
}));
|
||||
});
|
||||
|
||||
// Navigation and action handlers
|
||||
const navigateToBuilder = () => {
|
||||
router.push('/form-builder');
|
||||
if (formStore.hasUnsavedChanges) {
|
||||
showUnsavedChangesModal.value = true;
|
||||
} else {
|
||||
formStore.clearForm();
|
||||
router.push("/form-builder");
|
||||
}
|
||||
};
|
||||
|
||||
const cancelNavigation = () => {
|
||||
showUnsavedChangesModal.value = false;
|
||||
};
|
||||
|
||||
const confirmNavigation = () => {
|
||||
showUnsavedChangesModal.value = false;
|
||||
formStore.clearForm();
|
||||
router.push("/form-builder");
|
||||
};
|
||||
|
||||
const editForm = (formId) => {
|
||||
formStore.loadForm(formId);
|
||||
router.push('/form-builder');
|
||||
router.push("/form-builder");
|
||||
};
|
||||
|
||||
const deleteForm = (formId) => {
|
||||
if (confirm('Are you sure you want to delete this form?')) {
|
||||
const index = formStore.savedForms.findIndex(f => f.id === formId);
|
||||
if (confirm("Are you sure you want to delete this form?")) {
|
||||
const index = formStore.savedForms.findIndex((f) => f.id === formId);
|
||||
if (index !== -1) {
|
||||
formStore.savedForms.splice(index, 1);
|
||||
localStorage.setItem('savedForms', JSON.stringify(formStore.savedForms));
|
||||
toast.success('Form deleted successfully');
|
||||
localStorage.setItem("savedForms", JSON.stringify(formStore.savedForms));
|
||||
toast.success("Form deleted successfully");
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -8,7 +8,8 @@ export const useFormBuilderStore = defineStore('formBuilder', {
|
||||
formName: 'New Form',
|
||||
formDescription: '',
|
||||
isDraggingOver: false,
|
||||
savedForms: []
|
||||
savedForms: [],
|
||||
hasUnsavedChanges: false
|
||||
}),
|
||||
|
||||
getters: {
|
||||
@ -51,6 +52,7 @@ export const useFormBuilderStore = defineStore('formBuilder', {
|
||||
|
||||
this.formComponents.push(newComponent);
|
||||
this.selectComponent(newComponent.id);
|
||||
this.hasUnsavedChanges = true;
|
||||
},
|
||||
|
||||
// Find optimal placement for a new component in the grid
|
||||
@ -142,6 +144,7 @@ export const useFormBuilderStore = defineStore('formBuilder', {
|
||||
const index = this.formComponents.findIndex(c => c.id === updatedComponent.id);
|
||||
if (index !== -1) {
|
||||
this.formComponents[index] = JSON.parse(JSON.stringify(updatedComponent));
|
||||
this.hasUnsavedChanges = true;
|
||||
}
|
||||
},
|
||||
|
||||
@ -152,6 +155,7 @@ export const useFormBuilderStore = defineStore('formBuilder', {
|
||||
|
||||
// Optimize layout after reordering
|
||||
this.optimizeGridLayout();
|
||||
this.hasUnsavedChanges = true;
|
||||
}
|
||||
},
|
||||
|
||||
@ -172,6 +176,7 @@ export const useFormBuilderStore = defineStore('formBuilder', {
|
||||
|
||||
// Optimize layout after deletion
|
||||
this.optimizeGridLayout();
|
||||
this.hasUnsavedChanges = true;
|
||||
}
|
||||
},
|
||||
|
||||
@ -193,6 +198,8 @@ export const useFormBuilderStore = defineStore('formBuilder', {
|
||||
// Save to localStorage for persistence
|
||||
localStorage.setItem('savedForms', JSON.stringify(this.savedForms));
|
||||
|
||||
this.hasUnsavedChanges = false;
|
||||
|
||||
return formData;
|
||||
},
|
||||
|
||||
@ -211,11 +218,30 @@ export const useFormBuilderStore = defineStore('formBuilder', {
|
||||
}
|
||||
},
|
||||
|
||||
setFormName(name) {
|
||||
if (this.formName !== name) {
|
||||
this.formName = name;
|
||||
this.hasUnsavedChanges = true;
|
||||
}
|
||||
},
|
||||
|
||||
setFormDescription(description) {
|
||||
if (this.formDescription !== description) {
|
||||
this.formDescription = description;
|
||||
this.hasUnsavedChanges = true;
|
||||
}
|
||||
},
|
||||
|
||||
resetUnsavedChanges() {
|
||||
this.hasUnsavedChanges = false;
|
||||
},
|
||||
|
||||
clearForm() {
|
||||
this.formComponents = [];
|
||||
this.selectedComponentId = null;
|
||||
this.formName = 'New Form';
|
||||
this.formDescription = '';
|
||||
this.hasUnsavedChanges = false;
|
||||
},
|
||||
|
||||
loadSavedForms() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user