Merge pull request 'update' (#1) from frontend into main
Reviewed-on: #1
This commit is contained in:
commit
d5deb46ad2
Binary file not shown.
BIN
db.sqlite3
BIN
db.sqlite3
Binary file not shown.
@ -652,6 +652,10 @@
|
|||||||
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>
|
||||||
@ -923,6 +927,7 @@
|
|||||||
<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,
|
||||||
@ -1028,6 +1033,49 @@
|
|||||||
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'),
|
||||||
@ -1193,43 +1241,56 @@
|
|||||||
|
|
||||||
// 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 = `
|
|
||||||
${stage.name}
|
// Make stage tabs draggable
|
||||||
${hasRequiredFields(stage) ? '<span class="required-indicator"> *</span>' : ''}
|
stageTab.draggable = true;
|
||||||
${stage.predefined ? '<span class="predefined-badge">Default</span>' : ''}
|
stageTab.addEventListener('dragstart', (e) => startStageDrag(e, index));
|
||||||
<span class="rename-btn"><i class="fas fa-edit"></i></span>
|
stageTab.addEventListener('dragover', allowStageDrop);
|
||||||
${(!stage.predefined || state.stages.length > 1) ? '<span class="remove-btn"><i class="fas fa-times"></i></span>' : ''}
|
stageTab.addEventListener('dragenter', dragStageEnter);
|
||||||
`;
|
stageTab.addEventListener('dragleave', dragStageLeave);
|
||||||
stageTab.addEventListener('click', (e) => {
|
stageTab.addEventListener('drop', (e) => dropStage(e, index));
|
||||||
if (!e.target.closest('.rename-btn') && !e.target.closest('.remove-btn')) {
|
|
||||||
state.currentStage = index;
|
stageTab.innerHTML = `
|
||||||
renderCurrentStage();
|
${stage.name}
|
||||||
renderStageNavigation();
|
${hasRequiredFields(stage) ? '<span class="required-indicator"> *</span>' : ''}
|
||||||
}
|
${stage.predefined ? '<span class="predefined-badge">Default</span>' : ''}
|
||||||
});
|
<span class="rename-btn"><i class="fas fa-edit"></i></span>
|
||||||
const renameBtn = stageTab.querySelector('.rename-btn');
|
${(!stage.predefined || state.stages.length > 1) ? '<span class="remove-btn"><i class="fas fa-times"></i></span>' : ''}
|
||||||
if (renameBtn) {
|
`;
|
||||||
renameBtn.addEventListener('click', (e) => {
|
|
||||||
e.stopPropagation();
|
stageTab.addEventListener('click', (e) => {
|
||||||
openRenameModal(stage);
|
if (!e.target.closest('.rename-btn') && !e.target.closest('.remove-btn')) {
|
||||||
});
|
state.currentStage = index;
|
||||||
}
|
renderCurrentStage();
|
||||||
const removeBtn = stageTab.querySelector('.remove-btn');
|
renderStageNavigation();
|
||||||
if (removeBtn) {
|
}
|
||||||
removeBtn.addEventListener('click', (e) => {
|
});
|
||||||
e.stopPropagation();
|
|
||||||
removeStage(index);
|
const renameBtn = stageTab.querySelector('.rename-btn');
|
||||||
});
|
if (renameBtn) {
|
||||||
}
|
renameBtn.addEventListener('click', (e) => {
|
||||||
elements.stageNav.appendChild(stageTab);
|
e.stopPropagation();
|
||||||
|
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;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user