1406 lines
44 KiB
HTML
1406 lines
44 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Edit Form - {{ form.title }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<!-- Edit Mode Header -->
|
|
<div class="alert alert-info d-flex align-items-center mb-4">
|
|
<i class="fas fa-edit me-2"></i>
|
|
<div>
|
|
<strong>Edit Mode:</strong> You are currently editing "{{ form.title }}"
|
|
<br>
|
|
<small class="text-muted">Last updated: {{ form.updated_at|date:"M d, Y g:i A" }}</small>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<a href="{% url 'form_preview' form.id %}" class="btn btn-outline-primary btn-sm me-2" target="_blank">
|
|
<i class="fas fa-eye"></i> Preview
|
|
</a>
|
|
<a href="{% url 'form_list' %}" class="btn btn-outline-secondary btn-sm">
|
|
<i class="fas fa-arrow-left"></i> Back to Forms
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Builder Container -->
|
|
<div id="form-builder-app"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
<!-- Form Data Script -->
|
|
<script type="application/json" id="form-data">
|
|
{
|
|
"id": {{ form.id|safe }},
|
|
"title": {{ form.title|safe }},
|
|
"description": {{ form.description|safe }},
|
|
"structure": {{ form.structure|safe }},
|
|
"created_at": "{{ form.created_at|date:'c' }}",
|
|
"updated_at": "{{ form.updated_at|date:'c' }}"
|
|
}
|
|
</script>
|
|
|
|
<!-- Enhanced Form Builder for Edit Mode -->
|
|
<!-- Import required libraries -->
|
|
<script type="module" src="https://unpkg.com/preact@10.19.6/dist/preact.module.js"></script>
|
|
<script type="module" src="https://unpkg.com/htm@3.1.1/dist/htm.module.js"></script>
|
|
|
|
<script type="module">
|
|
const { h, Component, render, useState, useEffect, useRef } = preact;
|
|
const html = htm.bind(h);
|
|
|
|
// Field Types Configuration (same as original)
|
|
const FIELD_TYPES = [
|
|
{ type: 'text', name: 'Text Input', icon: 'T' },
|
|
{ type: 'email', name: 'Email Input', icon: '@' },
|
|
{ type: 'phone', name: 'Phone Input', icon: '📞' },
|
|
{ type: 'date', name: 'Date Picker', icon: '📅' },
|
|
{ type: 'file', name: 'File Upload', icon: '📎' },
|
|
{ type: 'dropdown', name: 'Dropdown', icon: '▼' },
|
|
{ type: 'radio', name: 'Radio Buttons', icon: '○' },
|
|
{ type: 'checkbox', name: 'Checkboxes', icon: '☐' },
|
|
{ type: 'rating', name: 'Rating', icon: '⭐' }
|
|
];
|
|
|
|
// Field Components (same as original)
|
|
class BaseField extends Component {
|
|
render() {
|
|
const { field, onSelect, onRemove, onMoveUp, onMoveDown, isSelected, index, totalFields } = this.props;
|
|
|
|
return html`
|
|
<div class="form-field ${isSelected ? 'selected' : ''}" onClick=${() => onSelect(field.id)}>
|
|
<div class="field-header">
|
|
<div class="field-label">
|
|
<span>${field.label || 'Untitled Field'}</span>
|
|
${field.required ? html`<span class="required-star">*</span>` : ''}
|
|
</div>
|
|
<div class="field-actions">
|
|
<button class="field-action" onClick=${(e) => { e.stopPropagation(); onMoveUp(index); }} disabled=${index === 0}>
|
|
⬆️
|
|
</button>
|
|
<button class="field-action" onClick=${(e) => { e.stopPropagation(); onMoveDown(index); }} disabled=${index === totalFields - 1}>
|
|
⬇️
|
|
</button>
|
|
<button class="field-action" onClick=${(e) => { e.stopPropagation(); onRemove(index); }}>
|
|
🗑️
|
|
</button>
|
|
</div>
|
|
</div>
|
|
${this.renderFieldContent()}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
class TextField extends BaseField {
|
|
renderFieldContent() {
|
|
return html`<input type="text" class="field-input" placeholder=${this.props.field.placeholder || ''} />`;
|
|
}
|
|
}
|
|
|
|
class EmailField extends BaseField {
|
|
renderFieldContent() {
|
|
return html`<input type="email" class="field-input" placeholder=${this.props.field.placeholder || ''} />`;
|
|
}
|
|
}
|
|
|
|
class PhoneField extends BaseField {
|
|
renderFieldContent() {
|
|
return html`<input type="tel" class="field-input" placeholder=${this.props.field.placeholder || ''} />`;
|
|
}
|
|
}
|
|
|
|
class DateField extends BaseField {
|
|
renderFieldContent() {
|
|
return html`<input type="date" class="field-input" />`;
|
|
}
|
|
}
|
|
|
|
class FileField extends BaseField {
|
|
constructor(props) {
|
|
super(props);
|
|
this.filePondRef = null;
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.initFilePond();
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
if (this.filePondRef) {
|
|
this.filePondRef.destroy();
|
|
}
|
|
}
|
|
|
|
initFilePond() {
|
|
const { field } = this.props;
|
|
const inputElement = document.getElementById(`file-upload-${field.id}`);
|
|
|
|
if (!inputElement || typeof FilePond === 'undefined') return;
|
|
|
|
const acceptedFileTypes = field.fileTypesString
|
|
? field.fileTypesString.split(',').map(type => type.trim())
|
|
: ['*'];
|
|
|
|
this.filePondRef = FilePond.create(inputElement, {
|
|
allowMultiple: field.multiple || false,
|
|
maxFiles: field.maxFiles || 1,
|
|
maxFileSize: field.maxFileSize ? `${field.maxFileSize}MB` : '5MB',
|
|
acceptedFileTypes: acceptedFileTypes,
|
|
labelIdle: 'Drag & Drop your files or <span class="filepond--label-action">Browse</span>',
|
|
credits: false
|
|
});
|
|
}
|
|
|
|
renderFieldContent() {
|
|
const { field } = this.props;
|
|
return html`
|
|
<div class="file-upload-container">
|
|
<input id="file-upload-${field.id}" type="file" />
|
|
</div>
|
|
<div class="file-upload-info">
|
|
${field.fileTypes ? html`<div>Accepted file types: ${field.fileTypes.join(', ')}</div>` : ''}
|
|
${field.maxFileSize ? html`<div>Maximum file size: ${field.maxFileSize} MB</div>` : ''}
|
|
${field.maxFiles ? html`<div>Maximum files: ${field.maxFiles}</div>` : ''}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
class DropdownField extends BaseField {
|
|
renderFieldContent() {
|
|
const { field } = this.props;
|
|
return html`
|
|
<select class="field-input">
|
|
${field.options.map(option => html`<option>${option.value}</option>`)}
|
|
</select>
|
|
`;
|
|
}
|
|
}
|
|
|
|
class RadioField extends BaseField {
|
|
renderFieldContent() {
|
|
const { field } = this.props;
|
|
return html`
|
|
<div class="field-options">
|
|
${field.options.map(option => html`
|
|
<div class="option-item">
|
|
<input type="radio" name=${field.id} id=${option.id} />
|
|
<label for=${option.id}>${option.value}</label>
|
|
</div>
|
|
`)}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
class CheckboxField extends BaseField {
|
|
renderFieldContent() {
|
|
const { field } = this.props;
|
|
return html`
|
|
<div class="field-options">
|
|
${field.options.map(option => html`
|
|
<div class="option-item">
|
|
<input type="checkbox" id=${option.id} />
|
|
<label for=${option.id}>${option.value}</label>
|
|
</div>
|
|
`)}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
class RatingField extends BaseField {
|
|
renderFieldContent() {
|
|
return html`
|
|
<div style="display: flex; gap: 5px;">
|
|
${[1, 2, 3, 4, 5].map(n => html`
|
|
<span style="font-size: 24px; color: #ffc107; cursor: pointer;">★</span>
|
|
`)}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// Field Factory
|
|
function createFieldComponent(field, props) {
|
|
const fieldProps = { ...props, field };
|
|
|
|
switch (field.type) {
|
|
case 'text': return html`<${TextField} ...${fieldProps} />`;
|
|
case 'email': return html`<${EmailField} ...${fieldProps} />`;
|
|
case 'phone': return html`<${PhoneField} ...${fieldProps} />`;
|
|
case 'date': return html`<${DateField} ...${fieldProps} />`;
|
|
case 'file': return html`<${FileField} ...${fieldProps} />`;
|
|
case 'dropdown': return html`<${DropdownField} ...${fieldProps} />`;
|
|
case 'radio': return html`<${RadioField} ...${fieldProps} />`;
|
|
case 'checkbox': return html`<${CheckboxField} ...${fieldProps} />`;
|
|
case 'rating': return html`<${RatingField} ...${fieldProps} />`;
|
|
default: return html`<${TextField} ...${fieldProps} />`;
|
|
}
|
|
}
|
|
|
|
// Enhanced Form Builder Component for Edit Mode
|
|
class EditFormBuilder extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
// Load form data from the page with error handling
|
|
const formDataElement = document.getElementById('form-data');
|
|
let formData;
|
|
|
|
try {
|
|
formData = JSON.parse(formDataElement.textContent);
|
|
|
|
// Validate form data structure
|
|
if (!formData.structure || !formData.structure.wizards) {
|
|
throw new Error('Invalid form data structure');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading form data:', error);
|
|
alert('Error loading form data. Please refresh the page or contact support.');
|
|
return;
|
|
}
|
|
|
|
this.state = {
|
|
form: formData.structure,
|
|
originalForm: JSON.parse(JSON.stringify(formData.structure)), // Deep copy for comparison
|
|
formId: formData.id,
|
|
isDirty: false,
|
|
isSaving: false,
|
|
isDragOver: false,
|
|
selectedFieldId: null,
|
|
currentWizardId: formData.structure.wizards?.[0]?.id || 'wizard-1',
|
|
previewWizardIndex: 0,
|
|
previewProgress: 30,
|
|
showPreview: false,
|
|
showAnalytics: false
|
|
};
|
|
|
|
this.canvasRef = null;
|
|
this.sortableInstance = null;
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.initializeDragAndDrop();
|
|
|
|
// Register FilePond plugins if available
|
|
if (typeof FilePond !== 'undefined') {
|
|
FilePond.registerPlugin(
|
|
FilePondPluginImagePreview,
|
|
FilePondPluginFileValidateType,
|
|
FilePondPluginFileValidateSize
|
|
);
|
|
}
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
// Reinitialize sortable when fields change
|
|
if (this.canvasRef && !this.sortableInstance) {
|
|
this.initializeDragAndDrop();
|
|
}
|
|
}
|
|
|
|
initializeDragAndDrop() {
|
|
if (!this.canvasRef || typeof Sortable === 'undefined') return;
|
|
|
|
this.sortableInstance = Sortable.create(this.canvasRef, {
|
|
animation: 150,
|
|
handle: '.form-field',
|
|
onEnd: (evt) => {
|
|
const { oldIndex, newIndex } = evt;
|
|
const currentWizard = this.getCurrentWizard();
|
|
const field = currentWizard.fields[oldIndex];
|
|
currentWizard.fields.splice(oldIndex, 1);
|
|
currentWizard.fields.splice(newIndex, 0, field);
|
|
this.setState({ isDirty: true });
|
|
}
|
|
});
|
|
}
|
|
|
|
getCurrentWizard() {
|
|
return this.state.form.wizards.find(wizard => wizard.id === this.state.currentWizardId) || null;
|
|
}
|
|
|
|
getCurrentWizardFields() {
|
|
const wizard = this.getCurrentWizard();
|
|
return wizard ? wizard.fields : [];
|
|
}
|
|
|
|
getSelectedField() {
|
|
for (const wizard of this.state.form.wizards) {
|
|
const field = wizard.fields.find(field => field.id === this.state.selectedFieldId);
|
|
if (field) return field;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
getTotalFieldsCount() {
|
|
return this.state.form.wizards.reduce((total, wizard) => total + wizard.fields.length, 0);
|
|
}
|
|
|
|
getRequiredFieldsCount() {
|
|
let count = 0;
|
|
for (const wizard of this.state.form.wizards) {
|
|
count += wizard.fields.filter(field => field.required).length;
|
|
}
|
|
return count;
|
|
}
|
|
|
|
getCurrentPreviewWizard() {
|
|
return this.state.form.wizards[this.state.previewWizardIndex] || this.state.form.wizards[0];
|
|
}
|
|
|
|
onDragStart = (e, fieldType) => {
|
|
e.dataTransfer.setData('text/plain', fieldType);
|
|
}
|
|
|
|
onDragOver = (e) => {
|
|
e.preventDefault();
|
|
this.setState({ isDragOver: true });
|
|
}
|
|
|
|
onDragLeave = () => {
|
|
this.setState({ isDragOver: false });
|
|
}
|
|
|
|
onDrop = (e) => {
|
|
e.preventDefault();
|
|
this.setState({ isDragOver: false });
|
|
|
|
const fieldType = e.dataTransfer.getData('text/plain');
|
|
this.addField(fieldType);
|
|
}
|
|
|
|
addField = (type) => {
|
|
const field = {
|
|
id: 'field-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9),
|
|
type: type,
|
|
label: this.getDefaultLabel(type),
|
|
placeholder: this.getDefaultPlaceholder(type),
|
|
required: false,
|
|
wizardId: this.state.currentWizardId,
|
|
options: type === 'dropdown' || type === 'radio' || type === 'checkbox'
|
|
? [{ id: 'opt-1', value: 'Option 1' }, { id: 'opt-2', value: 'Option 2' }]
|
|
: [],
|
|
validation: {
|
|
minLength: null,
|
|
maxLength: null
|
|
},
|
|
styling: {}
|
|
};
|
|
|
|
// File upload specific properties
|
|
if (type === 'file') {
|
|
field.fileTypes = ['image/*', '.pdf', '.doc', '.docx'];
|
|
field.fileTypesString = 'image/*, .pdf, .doc, .docx';
|
|
field.maxFileSize = 5;
|
|
field.maxFiles = 1;
|
|
field.multiple = false;
|
|
}
|
|
|
|
const currentWizard = this.getCurrentWizard();
|
|
currentWizard.fields.push(field);
|
|
this.setState({ selectedFieldId: field.id, isDirty: true });
|
|
}
|
|
|
|
getDefaultLabel(type) {
|
|
const labels = {
|
|
text: 'Text Input',
|
|
email: 'Email Address',
|
|
phone: 'Phone Number',
|
|
date: 'Select Date',
|
|
file: 'Upload Files',
|
|
dropdown: 'Select Option',
|
|
radio: 'Choose One',
|
|
checkbox: 'Select Options',
|
|
rating: 'Rate Your Experience'
|
|
};
|
|
|
|
return labels[type] || 'Field Label';
|
|
}
|
|
|
|
getDefaultPlaceholder(type) {
|
|
const placeholders = {
|
|
text: 'Enter text here...',
|
|
email: 'your.email@example.com',
|
|
phone: '(123) 456-7890',
|
|
date: '',
|
|
file: '',
|
|
dropdown: '',
|
|
radio: '',
|
|
checkbox: '',
|
|
rating: ''
|
|
};
|
|
|
|
return placeholders[type] || '';
|
|
}
|
|
|
|
selectField = (fieldId) => {
|
|
this.setState({ selectedFieldId: fieldId });
|
|
}
|
|
|
|
removeField = (index) => {
|
|
const currentWizard = this.getCurrentWizard();
|
|
currentWizard.fields.splice(index, 1);
|
|
|
|
if (currentWizard.fields[index - 1]) {
|
|
this.setState({ selectedFieldId: currentWizard.fields[index - 1].id, isDirty: true });
|
|
} else {
|
|
this.setState({ selectedFieldId: null, isDirty: true });
|
|
}
|
|
}
|
|
|
|
moveFieldUp = (index) => {
|
|
if (index > 0) {
|
|
const currentWizard = this.getCurrentWizard();
|
|
const field = currentWizard.fields[index];
|
|
currentWizard.fields.splice(index, 1);
|
|
currentWizard.fields.splice(index - 1, 0, field);
|
|
this.setState({ isDirty: true });
|
|
}
|
|
}
|
|
|
|
moveFieldDown = (index) => {
|
|
const currentWizard = this.getCurrentWizard();
|
|
if (index < currentWizard.fields.length - 1) {
|
|
const field = currentWizard.fields[index];
|
|
currentWizard.fields.splice(index, 1);
|
|
currentWizard.fields.splice(index + 1, 0, field);
|
|
this.setState({ isDirty: true });
|
|
}
|
|
}
|
|
|
|
addWizard = () => {
|
|
const newWizard = {
|
|
id: 'wizard-' + Date.now(),
|
|
title: `Step ${this.state.form.wizards.length + 1}`,
|
|
fields: []
|
|
};
|
|
this.state.form.wizards.push(newWizard);
|
|
this.setState({ currentWizardId: newWizard.id, isDirty: true });
|
|
}
|
|
|
|
removeWizard = (index) => {
|
|
if (this.state.form.wizards.length > 1) {
|
|
this.state.form.wizards.splice(index, 1);
|
|
this.setState({ currentWizardId: this.state.form.wizards[0].id, isDirty: true });
|
|
}
|
|
}
|
|
|
|
selectWizard = (wizardId) => {
|
|
this.setState({ currentWizardId: wizardId, selectedFieldId: null });
|
|
}
|
|
|
|
updateFormTitle = (e) => {
|
|
this.setState({
|
|
form: { ...this.state.form, title: e.target.value },
|
|
isDirty: true
|
|
});
|
|
}
|
|
|
|
updateFormDescription = (e) => {
|
|
this.setState({
|
|
form: { ...this.state.form, description: e.target.value },
|
|
isDirty: true
|
|
});
|
|
}
|
|
|
|
updateWizardTitle = (e) => {
|
|
const currentWizard = this.getCurrentWizard();
|
|
if (currentWizard) {
|
|
currentWizard.title = e.target.value;
|
|
this.setState({ isDirty: true });
|
|
}
|
|
}
|
|
|
|
updateForm = async () => {
|
|
try {
|
|
this.setState({ isSaving: true });
|
|
|
|
const response = await fetch(`/api/forms/${this.state.formId}/update/`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': (() => {
|
|
const cookieName = 'csrftoken';
|
|
const name = cookieName + '=';
|
|
const ca = document.cookie.split(';');
|
|
for (const c of ca) {
|
|
if (c.trim().startsWith(name)) {
|
|
return c.substring(name.length, c.length);
|
|
}
|
|
}
|
|
return '';
|
|
})()
|
|
},
|
|
body: JSON.stringify({
|
|
form: this.state.form
|
|
})
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
this.setState({
|
|
isSaving: false,
|
|
isDirty: false,
|
|
originalForm: JSON.parse(JSON.stringify(this.state.form)) // Update original form
|
|
});
|
|
|
|
this.showNotification('Form updated successfully!', 'success');
|
|
} else {
|
|
throw new Error(result.error || 'Failed to update form');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error updating form:', error);
|
|
this.setState({ isSaving: false });
|
|
this.showNotification('Error updating form: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
showNotification = (message, type = 'info') => {
|
|
const notification = document.createElement('div');
|
|
notification.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
|
|
notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
|
|
notification.innerHTML = `
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
`;
|
|
|
|
document.body.appendChild(notification);
|
|
|
|
setTimeout(() => {
|
|
if (notification.parentNode) {
|
|
notification.parentNode.removeChild(notification);
|
|
}
|
|
}, 5000);
|
|
}
|
|
|
|
openPreview = () => {
|
|
window.open(`/forms/${this.state.formId}/`, '_blank');
|
|
}
|
|
|
|
togglePreview = () => {
|
|
this.setState({
|
|
showPreview: !this.state.showPreview,
|
|
previewWizardIndex: 0
|
|
});
|
|
this.updatePreviewProgress();
|
|
}
|
|
|
|
updatePreviewProgress = () => {
|
|
const progress = ((this.state.previewWizardIndex + 1) / this.state.form.wizards.length) * 100;
|
|
this.setState({ previewProgress: progress });
|
|
}
|
|
|
|
render() {
|
|
const currentWizard = this.getCurrentWizard();
|
|
const currentWizardFields = this.getCurrentWizardFields();
|
|
const selectedField = this.getSelectedField();
|
|
|
|
return html`
|
|
<div class="container">
|
|
<!-- Header -->
|
|
<header>
|
|
<div class="logo">
|
|
<div class="logo-icon">FB</div>
|
|
<span>Form Builder - Edit Mode</span>
|
|
</div>
|
|
<div class="form-meta">
|
|
<input type="text" class="meta-input" placeholder="Form Title" value=${this.state.form.title} onInput=${this.updateFormTitle} />
|
|
<input type="text" class="meta-input" placeholder="Form Description" value=${this.state.form.description} onInput=${this.updateFormDescription} />
|
|
</div>
|
|
<div class="header-actions">
|
|
<button class="btn btn-outline" onClick=${this.updateForm} disabled=${this.state.isSaving || !this.state.isDirty}>
|
|
${this.state.isSaving ? html`<span class="spinner-border spinner-border-sm me-2"></span>Updating...` : html`💾 Update`}
|
|
</button>
|
|
<button class="btn btn-outline" onClick=${this.openPreview}>
|
|
👁️ Preview
|
|
</button>
|
|
<a href="{% url 'form_list' %}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-arrow-left"></i> Back
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<div class="main-content">
|
|
<!-- Left Sidebar - Field Palette -->
|
|
<div class="sidebar">
|
|
<h3 class="sidebar-title">Field Types</h3>
|
|
<div class="field-types">
|
|
${FIELD_TYPES.map(fieldType => html`
|
|
<div class="field-type"
|
|
draggable="true"
|
|
onDragStart=${(e) => this.onDragStart(e, fieldType.type)}>
|
|
<div class="field-icon">${fieldType.icon}</div>
|
|
<span class="field-name">${fieldType.name}</span>
|
|
</div>
|
|
`)}
|
|
</div>
|
|
|
|
<!-- Wizard Management -->
|
|
<div class="wizard-manager">
|
|
<h3 class="sidebar-title">Form Steps</h3>
|
|
<div class="wizard-list">
|
|
${this.state.form.wizards.map((wizard, index) => html`
|
|
<div class="wizard-item ${wizard.id === this.state.currentWizardId ? 'active' : ''}"
|
|
onClick=${() => this.selectWizard(wizard.id)}>
|
|
<span>${wizard.title || 'Untitled Step'}</span>
|
|
<div class="wizard-actions">
|
|
<button class="wizard-action"
|
|
onClick=${(e) => { e.stopPropagation(); this.removeWizard(index); }}
|
|
disabled=${this.state.form.wizards.length <= 1}>
|
|
🗑️
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`)}
|
|
</div>
|
|
<button class="btn btn-outline" onClick=${this.addWizard} style="width: 100%;">
|
|
Add Step
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Center Canvas -->
|
|
<div class="canvas-container">
|
|
<div class="canvas" ref=${el => this.canvasRef = el}>
|
|
${currentWizard ? html`
|
|
<div class="wizard-header">
|
|
<div class="wizard-title">${currentWizard.title || 'Untitled Step'}</div>
|
|
<input type="text" class="meta-input" placeholder="Step Title" value=${currentWizard.title || ''} onInput=${this.updateWizardTitle} />
|
|
</div>
|
|
` : ''}
|
|
|
|
<div class="drop-zone ${this.state.isDragOver ? 'active' : ''}"
|
|
onDragOver=${this.onDragOver}
|
|
onDragLeave=${this.onDragLeave}
|
|
onDrop=${this.onDrop}>
|
|
Drag and drop fields here to build your form
|
|
</div>
|
|
|
|
${currentWizardFields.map((field, index) =>
|
|
createFieldComponent(field, {
|
|
key: field.id,
|
|
onSelect: this.selectField,
|
|
onRemove: this.removeField,
|
|
onMoveUp: this.moveFieldUp,
|
|
onMoveDown: this.moveFieldDown,
|
|
isSelected: this.state.selectedFieldId === field.id,
|
|
index: index,
|
|
totalFields: currentWizardFields.length
|
|
})
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Sidebar - Property Editor -->
|
|
<div class="property-editor" style=${selectedField ? '' : 'display: none;'}>
|
|
<h3 class="sidebar-title">Field Properties</h3>
|
|
|
|
<div class="property-section">
|
|
<h4 class="property-title">Basic</h4>
|
|
|
|
<div class="property-item">
|
|
<label class="property-label">Label</label>
|
|
<input type="text" class="property-input" value=${selectedField?.label || ''}
|
|
onInput=${(e) => { if (selectedField) selectedField.label = e.target.value; this.setState({ isDirty: true }); }} />
|
|
</div>
|
|
|
|
<div class="property-item">
|
|
<label class="property-label">Placeholder</label>
|
|
<input type="text" class="property-input" value=${selectedField?.placeholder || ''}
|
|
onInput=${(e) => { if (selectedField) selectedField.placeholder = e.target.value; this.setState({ isDirty: true }); }} />
|
|
</div>
|
|
|
|
<div class="property-item">
|
|
<div class="checkbox-group">
|
|
<input type="checkbox" id="required" checked=${selectedField?.required || false}
|
|
onChange=${(e) => { if (selectedField) selectedField.required = e.target.checked; this.setState({ isDirty: true }); }} />
|
|
<label for="required" class="property-label">Required Field</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property-section">
|
|
<button class="btn btn-outline" onClick=${() => {
|
|
const currentWizard = this.getCurrentWizard();
|
|
const index = currentWizard.fields.findIndex(f => f.id === this.state.selectedFieldId);
|
|
if (index !== -1) {
|
|
this.removeField(index);
|
|
}
|
|
}} style="width: 100%;">
|
|
Delete Field
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="form-stats">
|
|
<div class="stat-item">
|
|
<span>Steps:</span>
|
|
<strong>${this.state.form.wizards.length}</strong>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span>Fields:</span>
|
|
<strong>${this.getTotalFieldsCount()}</strong>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span>Required:</span>
|
|
<strong>${this.getRequiredFieldsCount()}</strong>
|
|
</div>
|
|
${this.state.isDirty ? html`
|
|
<div class="stat-item">
|
|
<span class="badge bg-warning">Unsaved Changes</span>
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-outline" onClick=${() => alert('Background customization panel would open here')}>
|
|
Customize Background
|
|
</button>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
${this.state.showPreview ? this.renderPreviewMode() : ''}
|
|
`;
|
|
}
|
|
|
|
renderPreviewMode() {
|
|
const currentPreviewWizard = this.getCurrentPreviewWizard();
|
|
|
|
return html`
|
|
<div class="preview-mode">
|
|
<div class="preview-header">
|
|
<h2>${this.state.form.title || 'Form Preview'}</h2>
|
|
<button class="btn btn-outline" onClick=${this.togglePreview}>
|
|
✖️ Close Preview
|
|
</button>
|
|
</div>
|
|
<div class="preview-content">
|
|
<p>${this.state.form.description || 'Form description'}</p>
|
|
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: ${this.state.previewProgress}%"></div>
|
|
</div>
|
|
|
|
<div class="wizard-title">${currentPreviewWizard.title || 'Step'}</div>
|
|
|
|
${currentPreviewWizard.fields.map(field =>
|
|
createFieldComponent(field, {
|
|
key: field.id,
|
|
onSelect: () => {},
|
|
onRemove: () => {},
|
|
onMoveUp: () => {},
|
|
onMoveDown: () => {},
|
|
isSelected: false,
|
|
index: 0,
|
|
totalFields: 0
|
|
})
|
|
)}
|
|
|
|
<div class="wizard-navigation">
|
|
<button class="btn btn-outline" disabled=${this.state.previewWizardIndex === 0}>
|
|
Previous
|
|
</button>
|
|
<div>
|
|
Step ${this.state.previewWizardIndex + 1} of ${this.state.form.wizards.length}
|
|
</div>
|
|
<button class="btn btn-primary">
|
|
${this.state.previewWizardIndex === this.state.form.wizards.length - 1 ? 'Submit' : 'Next'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// Render the edit form builder
|
|
render(html`<${EditFormBuilder} />`, document.getElementById('form-builder-app'));
|
|
</script>
|
|
|
|
<style>
|
|
/* Include all the same styles as the original form builder */
|
|
:root {
|
|
--primary: #4361ee;
|
|
--primary-light: #4895ef;
|
|
--secondary: #3f37c9;
|
|
--success: #4cc9f0;
|
|
--danger: #f72585;
|
|
--warning: #f8961e;
|
|
--info: #4895ef;
|
|
--light: #f8f9fa;
|
|
--dark: #212529;
|
|
--gray: #6c757d;
|
|
--gray-light: #e9ecef;
|
|
--border-radius: 8px;
|
|
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
--transition: all 0.3s ease;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: #f5f7fb;
|
|
color: var(--dark);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.container {
|
|
display: grid;
|
|
grid-template-rows: 60px 1fr 40px;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Header Styles */
|
|
header {
|
|
background: white;
|
|
border-bottom: 1px solid var(--gray-light);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 20px;
|
|
box-shadow: var(--shadow);
|
|
z-index: 10;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-weight: 700;
|
|
font-size: 1.2rem;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: var(--primary);
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
}
|
|
|
|
.form-meta {
|
|
display: flex;
|
|
gap: 15px;
|
|
}
|
|
|
|
.meta-input {
|
|
border: 1px solid var(--gray-light);
|
|
border-radius: var(--border-radius);
|
|
padding: 6px 12px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 8px 16px;
|
|
border-radius: var(--border-radius);
|
|
border: none;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
transition: var(--transition);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--primary);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--secondary);
|
|
}
|
|
|
|
.btn-outline {
|
|
background: transparent;
|
|
border: 1px solid var(--primary);
|
|
color: var(--primary);
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
background: var(--primary);
|
|
color: white;
|
|
}
|
|
|
|
.btn-outline-secondary {
|
|
background: transparent;
|
|
border: 1px solid var(--gray);
|
|
color: var(--gray);
|
|
}
|
|
|
|
.btn-outline-secondary:hover {
|
|
background: var(--gray);
|
|
color: white;
|
|
}
|
|
|
|
/* Main Content */
|
|
.main-content {
|
|
display: grid;
|
|
grid-template-columns: 250px 1fr 300px;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Sidebar Styles */
|
|
.sidebar {
|
|
background: white;
|
|
border-right: 1px solid var(--gray-light);
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.sidebar-title {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
margin-bottom: 15px;
|
|
color: var(--dark);
|
|
}
|
|
|
|
.field-types {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.field-type {
|
|
background: var(--light);
|
|
border: 1px solid var(--gray-light);
|
|
border-radius: var(--border-radius);
|
|
padding: 12px;
|
|
cursor: grab;
|
|
transition: var(--transition);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.field-type:hover {
|
|
background: white;
|
|
border-color: var(--primary);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.field-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
background: var(--primary-light);
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.field-name {
|
|
font-weight: 500;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Wizard Management */
|
|
.wizard-manager {
|
|
margin-top: 20px;
|
|
border-top: 1px solid var(--gray-light);
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.wizard-list {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.wizard-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 12px;
|
|
background: var(--light);
|
|
border-radius: var(--border-radius);
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.wizard-item.active {
|
|
background: var(--primary);
|
|
color: white;
|
|
}
|
|
|
|
.wizard-item:hover:not(.active) {
|
|
background: #e9ecef;
|
|
}
|
|
|
|
.wizard-actions {
|
|
display: flex;
|
|
gap: 5px;
|
|
}
|
|
|
|
.wizard-action {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 0.8rem;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.wizard-action:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Canvas Styles */
|
|
.canvas-container {
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
background: #f9fafc;
|
|
}
|
|
|
|
.canvas {
|
|
background: white;
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--shadow);
|
|
min-height: 600px;
|
|
padding: 30px;
|
|
position: relative;
|
|
}
|
|
|
|
.wizard-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid var(--gray-light);
|
|
}
|
|
|
|
.wizard-title {
|
|
font-size: 1.2rem;
|
|
font-weight: 600;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.drop-zone {
|
|
border: 2px dashed var(--gray-light);
|
|
border-radius: var(--border-radius);
|
|
padding: 40px;
|
|
text-align: center;
|
|
color: var(--gray);
|
|
margin-bottom: 20px;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.drop-zone.active {
|
|
border-color: var(--primary);
|
|
background: rgba(67, 97, 238, 0.05);
|
|
}
|
|
|
|
.form-field {
|
|
background: white;
|
|
border: 1px solid var(--gray-light);
|
|
border-radius: var(--border-radius);
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
transition: var(--transition);
|
|
position: relative;
|
|
}
|
|
|
|
.form-field:hover {
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.form-field.selected {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);
|
|
}
|
|
|
|
.field-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.field-label {
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.required-star {
|
|
color: var(--danger);
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.field-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.field-action {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--gray);
|
|
font-size: 0.9rem;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.field-action:hover {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.field-input {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--gray-light);
|
|
border-radius: var(--border-radius);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.field-input:focus {
|
|
outline: none;
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
.field-options {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.option-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.option-input {
|
|
flex: 1;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--gray-light);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
/* File Upload Field Styling */
|
|
.file-upload-container {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.file-upload-info {
|
|
margin-top: 10px;
|
|
font-size: 0.85rem;
|
|
color: var(--gray);
|
|
}
|
|
|
|
/* Property Editor Styles */
|
|
.property-editor {
|
|
background: white;
|
|
border-left: 1px solid var(--gray-light);
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.property-section {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.property-title {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
margin-bottom: 15px;
|
|
color: var(--dark);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.property-item {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.property-label {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.property-input {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--gray-light);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.checkbox-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Footer Styles */
|
|
footer {
|
|
background: white;
|
|
border-top: 1px solid var(--gray-light);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 20px;
|
|
font-size: 0.9rem;
|
|
color: var(--gray);
|
|
}
|
|
|
|
.form-stats {
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
|
|
.stat-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
/* Preview Mode */
|
|
.preview-mode {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: white;
|
|
z-index: 100;
|
|
overflow-y: auto;
|
|
display: none;
|
|
}
|
|
|
|
.preview-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px;
|
|
border-bottom: 1px solid var(--gray-light);
|
|
}
|
|
|
|
.preview-content {
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.preview-field {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 6px;
|
|
background: var(--gray-light);
|
|
border-radius: 3px;
|
|
margin: 20px 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: var(--primary);
|
|
transition: width 0.5s ease;
|
|
}
|
|
|
|
.wizard-navigation {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 20px;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* Responsive Adjustments */
|
|
@media (max-width: 1200px) {
|
|
.main-content {
|
|
grid-template-columns: 220px 1fr 280px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.main-content {
|
|
grid-template-columns: 200px 1fr;
|
|
}
|
|
.property-editor {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.main-content {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.sidebar {
|
|
display: none;
|
|
}
|
|
.canvas-container {
|
|
padding: 10px;
|
|
}
|
|
.canvas {
|
|
min-height: 400px;
|
|
padding: 15px;
|
|
}
|
|
.header-actions {
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
}
|
|
.btn {
|
|
padding: 6px 12px;
|
|
font-size: 0.9rem;
|
|
}
|
|
.logo {
|
|
font-size: 1rem;
|
|
}
|
|
.logo-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
.form-meta {
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
width: 100%;
|
|
}
|
|
.meta-input {
|
|
width: 100%;
|
|
}
|
|
.field-types {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.wizard-manager {
|
|
display: none;
|
|
}
|
|
.field-types {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style> |