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 +};