Compare commits

..

No commits in common. "d5deb46ad29b3ff24673458488fa597c235a2e03" and "89fff965f44e4b0ba5f132edd4b8846eea2d9ddc" have entirely different histories.

3 changed files with 34 additions and 95 deletions

Binary file not shown.

View File

@ -652,10 +652,6 @@
margin-bottom: 5px; margin-bottom: 5px;
} }
} }
.stage-tab.drag-over {
background-color: rgba(67, 97, 238, 0.1);
border: 2px dashed var(--primary);
}
</style> </style>
</head> </head>
<body> <body>
@ -927,7 +923,6 @@
<script> <script>
// Application State // Application State
const state = { const state = {
draggedStageIndex: null,
formName: 'Resume Application Form', formName: 'Resume Application Form',
formDescription: '', formDescription: '',
formActive: true, formActive: true,
@ -1033,49 +1028,6 @@
templateId: djangoConfig.templateId // Initialize with Django template ID if editing templateId: djangoConfig.templateId // Initialize with Django template ID if editing
}; };
function allowStageDrop(event) {
event.preventDefault();
}
function dragStageEnter(event) {
event.target.classList.add('drag-over');
}
function dragStageLeave(event) {
event.target.classList.remove('drag-over');
}
function startStageDrag(event, index) {
state.draggedStageIndex = index;
event.dataTransfer.setData('text/plain', 'stage-reorder');
event.dataTransfer.effectAllowed = 'move';
}
function dropStage(event, targetIndex) {
event.preventDefault();
event.target.classList.remove('drag-over');
if (state.draggedStageIndex !== null && state.draggedStageIndex !== targetIndex) {
const draggedStage = state.stages[state.draggedStageIndex];
state.stages.splice(state.draggedStageIndex, 1);
// Adjust target index if we removed an element before it
const adjustedIndex = state.draggedStageIndex < targetIndex ? targetIndex - 1 : targetIndex;
state.stages.splice(adjustedIndex, 0, draggedStage);
// Update current stage if needed
if (state.currentStage === state.draggedStageIndex) {
state.currentStage = adjustedIndex;
} else if (state.currentStage > state.draggedStageIndex && state.currentStage <= adjustedIndex) {
state.currentStage--;
} else if (state.currentStage < state.draggedStageIndex && state.currentStage >= adjustedIndex) {
state.currentStage++;
}
renderStageNavigation();
renderCurrentStage();
}
state.draggedStageIndex = null;
}
// DOM Elements // DOM Elements
const elements = { const elements = {
stageNav: document.getElementById('stageNav'), stageNav: document.getElementById('stageNav'),
@ -1241,56 +1193,43 @@
// DOM Rendering Functions (same as before) // DOM Rendering Functions (same as before)
function renderStageNavigation() { function renderStageNavigation() {
elements.stageNav.innerHTML = ''; elements.stageNav.innerHTML = '';
state.stages.forEach((stage, index) => { state.stages.forEach((stage, index) => {
const stageTab = document.createElement('div'); const stageTab = document.createElement('div');
stageTab.className = `stage-tab ${index === state.currentStage ? 'active' : ''}`; stageTab.className = `stage-tab ${index === state.currentStage ? 'active' : ''}`;
stageTab.dataset.index = index; stageTab.dataset.index = index;
stageTab.innerHTML = `
// Make stage tabs draggable ${stage.name}
stageTab.draggable = true; ${hasRequiredFields(stage) ? '<span class="required-indicator"> *</span>' : ''}
stageTab.addEventListener('dragstart', (e) => startStageDrag(e, index)); ${stage.predefined ? '<span class="predefined-badge">Default</span>' : ''}
stageTab.addEventListener('dragover', allowStageDrop); <span class="rename-btn"><i class="fas fa-edit"></i></span>
stageTab.addEventListener('dragenter', dragStageEnter); ${(!stage.predefined || state.stages.length > 1) ? '<span class="remove-btn"><i class="fas fa-times"></i></span>' : ''}
stageTab.addEventListener('dragleave', dragStageLeave); `;
stageTab.addEventListener('drop', (e) => dropStage(e, index)); stageTab.addEventListener('click', (e) => {
if (!e.target.closest('.rename-btn') && !e.target.closest('.remove-btn')) {
stageTab.innerHTML = ` state.currentStage = index;
${stage.name} renderCurrentStage();
${hasRequiredFields(stage) ? '<span class="required-indicator"> *</span>' : ''} renderStageNavigation();
${stage.predefined ? '<span class="predefined-badge">Default</span>' : ''} }
<span class="rename-btn"><i class="fas fa-edit"></i></span> });
${(!stage.predefined || state.stages.length > 1) ? '<span class="remove-btn"><i class="fas fa-times"></i></span>' : ''} const renameBtn = stageTab.querySelector('.rename-btn');
`; if (renameBtn) {
renameBtn.addEventListener('click', (e) => {
stageTab.addEventListener('click', (e) => { e.stopPropagation();
if (!e.target.closest('.rename-btn') && !e.target.closest('.remove-btn')) { openRenameModal(stage);
state.currentStage = index; });
renderCurrentStage(); }
renderStageNavigation(); const removeBtn = stageTab.querySelector('.remove-btn');
} if (removeBtn) {
}); removeBtn.addEventListener('click', (e) => {
e.stopPropagation();
const renameBtn = stageTab.querySelector('.rename-btn'); removeStage(index);
if (renameBtn) { });
renameBtn.addEventListener('click', (e) => { }
e.stopPropagation(); elements.stageNav.appendChild(stageTab);
openRenameModal(stage);
}); });
} }
const removeBtn = stageTab.querySelector('.remove-btn');
if (removeBtn) {
removeBtn.addEventListener('click', (e) => {
e.stopPropagation();
removeStage(index);
});
}
elements.stageNav.appendChild(stageTab);
});
}
function renderCurrentStage() { function renderCurrentStage() {
const currentStage = state.stages[state.currentStage]; const currentStage = state.stages[state.currentStage];
elements.stageNameDisplay.textContent = currentStage.name; elements.stageNameDisplay.textContent = currentStage.name;