From 33dc901107698a571140bd2c1df4169eecc7d4f7 Mon Sep 17 00:00:00 2001 From: Afiq Date: Fri, 30 May 2025 19:10:43 +0800 Subject: [PATCH] Add Form and Process History Modals with Versioning Support - Introduced FormHistoryModal and ProcessHistoryModal components for viewing and restoring previous versions of forms and processes. - Implemented version tracking in the backend with new API endpoints for fetching and restoring historical data. - Added database migrations for form and process history tables to support versioning functionality. - Enhanced form and process update logic to save previous versions before modifications. - Updated documentation to include details on the new history system and its benefits for data management. - Improved user experience with intuitive modals for accessing historical data and restoring previous versions. --- components/FormHistoryModal.vue | 377 +++++++++++++++++ components/ProcessHistoryModal.vue | 393 ++++++++++++++++++ {doc => docs}/README.md | 0 {doc => docs}/form-builder/CHANGELOG.md | 0 docs/form-builder/FORM_HISTORY_SYSTEM.md | 134 ++++++ {doc => docs}/form-builder/JAVASCRIPT_API.md | 0 {doc => docs}/form-builder/ROADMAP.md | 0 {doc => docs}/form-builder/TECHNICAL_GUIDE.md | 0 {doc => docs}/form-builder/USER_GUIDE.md | 0 {doc => docs}/form-builder/grid-system.md | 0 {doc => docs}/overview/ARCHITECTURE.md | 0 {doc => docs}/overview/DEVELOPMENT_GUIDE.md | 0 {doc => docs}/overview/PROJECT_OVERVIEW.md | 0 {doc => docs}/process-builder/ROADMAP.md | 0 .../process-builder/TECHNICAL_GUIDE.md | 0 {doc => docs}/process-builder/USER_GUIDE.md | 0 .../process-execution/TECHNICAL_GUIDE.md | 0 {doc => docs}/process-execution/USER_GUIDE.md | 0 pages/form-builder/index.vue | 93 +++-- pages/process-builder/index.vue | 30 +- prisma/json/json-schema.json | 233 +++++++++++ .../migrations/20241201_add_form_history.sql | 25 ++ .../20241201_add_process_history.sql | 33 ++ prisma/schema.prisma | 136 ++++-- server/api/forms/[id].put.js | 58 ++- server/api/forms/[id]/history.get.js | 83 ++++ server/api/forms/[id]/restore.post.js | 166 ++++++++ .../api/forms/[id]/version/[versionId].get.js | 130 ++++++ server/api/process/[id].put.js | 187 +++++---- server/api/process/[id]/history.get.js | 83 ++++ server/api/process/[id]/restore.post.js | 122 ++++-- .../process/[id]/version/[versionId].get.js | 94 +++++ stores/formBuilder.js | 121 +++++- stores/processBuilder.js | 145 ++++++- 34 files changed, 2434 insertions(+), 209 deletions(-) create mode 100644 components/FormHistoryModal.vue create mode 100644 components/ProcessHistoryModal.vue rename {doc => docs}/README.md (100%) rename {doc => docs}/form-builder/CHANGELOG.md (100%) create mode 100644 docs/form-builder/FORM_HISTORY_SYSTEM.md rename {doc => docs}/form-builder/JAVASCRIPT_API.md (100%) rename {doc => docs}/form-builder/ROADMAP.md (100%) rename {doc => docs}/form-builder/TECHNICAL_GUIDE.md (100%) rename {doc => docs}/form-builder/USER_GUIDE.md (100%) rename {doc => docs}/form-builder/grid-system.md (100%) rename {doc => docs}/overview/ARCHITECTURE.md (100%) rename {doc => docs}/overview/DEVELOPMENT_GUIDE.md (100%) rename {doc => docs}/overview/PROJECT_OVERVIEW.md (100%) rename {doc => docs}/process-builder/ROADMAP.md (100%) rename {doc => docs}/process-builder/TECHNICAL_GUIDE.md (100%) rename {doc => docs}/process-builder/USER_GUIDE.md (100%) rename {doc => docs}/process-execution/TECHNICAL_GUIDE.md (100%) rename {doc => docs}/process-execution/USER_GUIDE.md (100%) create mode 100644 prisma/migrations/20241201_add_form_history.sql create mode 100644 prisma/migrations/20241201_add_process_history.sql create mode 100644 server/api/forms/[id]/history.get.js create mode 100644 server/api/forms/[id]/restore.post.js create mode 100644 server/api/forms/[id]/version/[versionId].get.js create mode 100644 server/api/process/[id]/history.get.js create mode 100644 server/api/process/[id]/version/[versionId].get.js diff --git a/components/FormHistoryModal.vue b/components/FormHistoryModal.vue new file mode 100644 index 0000000..a4cca63 --- /dev/null +++ b/components/FormHistoryModal.vue @@ -0,0 +1,377 @@ + + + \ No newline at end of file diff --git a/components/ProcessHistoryModal.vue b/components/ProcessHistoryModal.vue new file mode 100644 index 0000000..71b7122 --- /dev/null +++ b/components/ProcessHistoryModal.vue @@ -0,0 +1,393 @@ + + + \ No newline at end of file diff --git a/doc/README.md b/docs/README.md similarity index 100% rename from doc/README.md rename to docs/README.md diff --git a/doc/form-builder/CHANGELOG.md b/docs/form-builder/CHANGELOG.md similarity index 100% rename from doc/form-builder/CHANGELOG.md rename to docs/form-builder/CHANGELOG.md diff --git a/docs/form-builder/FORM_HISTORY_SYSTEM.md b/docs/form-builder/FORM_HISTORY_SYSTEM.md new file mode 100644 index 0000000..676571a --- /dev/null +++ b/docs/form-builder/FORM_HISTORY_SYSTEM.md @@ -0,0 +1,134 @@ +# Form History & Versioning System + +## Overview + +The form history system provides automatic versioning for all forms, allowing users to view previous versions and restore to any point in time. Every time a user saves a form, the previous version is automatically archived in the `formHistory` table. + +## Database Schema + +### formHistory Table +- `historyID` - Primary key for the history entry +- `formID` - Foreign key linking to the main form +- `formUUID` - UUID of the form for easy reference +- `formName` - Name of the form at the time of save +- `formDescription` - Description at the time of save +- `formComponents` - JSON of all form components at the time of save +- `formStatus` - Status (active/inactive) at the time of save +- `customCSS` - Custom CSS code at the time of save +- `customScript` - Custom JavaScript code at the time of save +- `formEvents` - Form events configuration at the time of save +- `scriptMode` - Script execution mode (safe/advanced) at the time of save +- `versionNumber` - Sequential version number (1, 2, 3...) +- `changeDescription` - Optional description of changes made +- `savedBy` - User ID who saved this version +- `savedDate` - Timestamp when this version was saved + +## How It Works + +### Automatic Versioning +1. When a user clicks "Save" on a form +2. The system first retrieves the current form data +3. The current form data is saved to `formHistory` with the next sequential version number +4. The form is then updated with the new data +5. Each save creates a complete snapshot of the form state + +### Version Management +- **Version Numbers**: Sequential integers starting from 1 +- **Change Descriptions**: Optional descriptions that can be added when saving +- **User Tracking**: Each version records who made the changes +- **Complete Snapshots**: Each version contains all form data, not just changes + +## API Endpoints + +### Get Form History +``` +GET /api/forms/{formId}/history +``` +Returns all versions of a form with metadata. + +### Get Specific Version +``` +GET /api/forms/{formId}/version/{versionId} +``` +Returns details of a specific version. `versionId` can be either the `historyID` or `versionNumber`. + +### Restore Version +``` +POST /api/forms/{formId}/restore +``` +Body: +```json +{ + "versionNumber": 5, + "restoredBy": 1, + "changeDescription": "Restored to working version" +} +``` + +## Frontend Features + +### History Modal +- **Version List**: Shows all versions with timestamps and change descriptions +- **Preview**: Users can preview any version before restoring +- **Restore**: One-click restore to any previous version +- **User Information**: Shows who made each change + +### History Button +- Appears in the form builder header next to "Templates" +- Only visible for saved forms (not new forms) +- Opens the history modal for the current form + +## Store Functions + +### Form Builder Store Methods +- `getFormHistory(formId)` - Get all versions of a form +- `getFormVersion(formId, versionId)` - Get specific version details +- `restoreFormVersion(formId, versionData)` - Restore to a specific version +- `loadFormVersionPreview(formId, versionId)` - Load version for preview only +- `setChangeDescription(description)` - Set description for next save + +## Usage Examples + +### Basic Save with Description +```javascript +// Set optional change description +formStore.setChangeDescription("Added validation to email field"); + +// Save form (automatically creates history entry) +await formStore.saveForm(); +``` + +### View Form History +```javascript +const history = await formStore.getFormHistory(formId); +console.log(`Form has ${history.totalVersions} versions`); +``` + +### Restore to Previous Version +```javascript +const versionToRestore = history.history[2]; // Version 3 +await formStore.restoreFormVersion(formId, versionToRestore, "Reverted problematic changes"); +``` + +## Benefits + +1. **Never Lose Data**: Every form state is preserved +2. **Easy Rollback**: One-click restore to any previous version +3. **Change Tracking**: See who made changes and when +4. **Preview Before Restore**: View any version before making it current +5. **Audit Trail**: Complete history of all form modifications + +## Implementation Notes + +- **Storage Efficiency**: Each version stores complete form data for simplicity and reliability +- **Cascade Deletion**: When a form is deleted, all its history is automatically removed +- **Foreign Key Constraints**: Ensures data integrity between forms and history +- **Indexing**: Optimized for fast lookups by form, date, and UUID + +## Future Enhancements + +- **Diff View**: Show differences between versions +- **Branch/Merge**: Allow creating branches of forms +- **Bulk Operations**: Restore multiple forms to specific dates +- **Export History**: Download form history as JSON/CSV +- **Retention Policy**: Automatic cleanup of old versions \ No newline at end of file diff --git a/doc/form-builder/JAVASCRIPT_API.md b/docs/form-builder/JAVASCRIPT_API.md similarity index 100% rename from doc/form-builder/JAVASCRIPT_API.md rename to docs/form-builder/JAVASCRIPT_API.md diff --git a/doc/form-builder/ROADMAP.md b/docs/form-builder/ROADMAP.md similarity index 100% rename from doc/form-builder/ROADMAP.md rename to docs/form-builder/ROADMAP.md diff --git a/doc/form-builder/TECHNICAL_GUIDE.md b/docs/form-builder/TECHNICAL_GUIDE.md similarity index 100% rename from doc/form-builder/TECHNICAL_GUIDE.md rename to docs/form-builder/TECHNICAL_GUIDE.md diff --git a/doc/form-builder/USER_GUIDE.md b/docs/form-builder/USER_GUIDE.md similarity index 100% rename from doc/form-builder/USER_GUIDE.md rename to docs/form-builder/USER_GUIDE.md diff --git a/doc/form-builder/grid-system.md b/docs/form-builder/grid-system.md similarity index 100% rename from doc/form-builder/grid-system.md rename to docs/form-builder/grid-system.md diff --git a/doc/overview/ARCHITECTURE.md b/docs/overview/ARCHITECTURE.md similarity index 100% rename from doc/overview/ARCHITECTURE.md rename to docs/overview/ARCHITECTURE.md diff --git a/doc/overview/DEVELOPMENT_GUIDE.md b/docs/overview/DEVELOPMENT_GUIDE.md similarity index 100% rename from doc/overview/DEVELOPMENT_GUIDE.md rename to docs/overview/DEVELOPMENT_GUIDE.md diff --git a/doc/overview/PROJECT_OVERVIEW.md b/docs/overview/PROJECT_OVERVIEW.md similarity index 100% rename from doc/overview/PROJECT_OVERVIEW.md rename to docs/overview/PROJECT_OVERVIEW.md diff --git a/doc/process-builder/ROADMAP.md b/docs/process-builder/ROADMAP.md similarity index 100% rename from doc/process-builder/ROADMAP.md rename to docs/process-builder/ROADMAP.md diff --git a/doc/process-builder/TECHNICAL_GUIDE.md b/docs/process-builder/TECHNICAL_GUIDE.md similarity index 100% rename from doc/process-builder/TECHNICAL_GUIDE.md rename to docs/process-builder/TECHNICAL_GUIDE.md diff --git a/doc/process-builder/USER_GUIDE.md b/docs/process-builder/USER_GUIDE.md similarity index 100% rename from doc/process-builder/USER_GUIDE.md rename to docs/process-builder/USER_GUIDE.md diff --git a/doc/process-execution/TECHNICAL_GUIDE.md b/docs/process-execution/TECHNICAL_GUIDE.md similarity index 100% rename from doc/process-execution/TECHNICAL_GUIDE.md rename to docs/process-execution/TECHNICAL_GUIDE.md diff --git a/doc/process-execution/USER_GUIDE.md b/docs/process-execution/USER_GUIDE.md similarity index 100% rename from doc/process-execution/USER_GUIDE.md rename to docs/process-execution/USER_GUIDE.md diff --git a/pages/form-builder/index.vue b/pages/form-builder/index.vue index 002ae8c..49bd5e2 100644 --- a/pages/form-builder/index.vue +++ b/pages/form-builder/index.vue @@ -2,27 +2,27 @@
-
+
Corrad Logo -
+
Preview Mode
-
+
-
- -
- - +
+ +
+ + Save - + - + {{ isPreview ? 'Edit' : 'Preview' }} - +
- -
+ +
- + Templates - + + + + + + History +
- -
-
- - - - -
- - -
+ +
+ + + + +
+ +
@@ -861,6 +870,14 @@ @close="showFieldSettings = false" /> + + +
@@ -872,6 +889,7 @@ import FormTemplatesModal from '~/components/FormTemplatesModal.vue'; import FormBuilderFieldSettingsModal from '~/components/FormBuilderFieldSettingsModal.vue'; import FormScriptEngine from '~/components/FormScriptEngine.vue'; import ConditionalLogicEngine from '~/components/ConditionalLogicEngine.vue'; +import FormHistoryModal from '~/components/FormHistoryModal.vue'; definePageMeta({ title: "Form Builder", @@ -911,6 +929,7 @@ const showDropdown = ref(false); const showTemplatesModal = ref(false); const showFieldSettings = ref(false); const showFieldSettingsPanel = ref(false); +const showFormHistoryModal = ref(false); const previewForm = ref(null); const formScriptEngine = ref(null); const conditionalLogicEngine = ref(null); @@ -2443,6 +2462,12 @@ const handleConditionalLogicGenerated = (script) => { formStore.formCustomScript += `\n// Conditional Logic Script\n${script}`; toast.success('Conditional logic script added successfully'); }; + +const handleFormRestored = (restoredForm) => { + // Handle form restoration logic + console.log('Form restored:', restoredForm); + // You might want to update the form state or show a success message +};