Skip to content

feat: add step drag and drop reordering #430

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
saurabhhhcodes wants to merge 1 commit into
base: main
Choose a base branch
from
+87 −3
Open

feat: add step drag and drop reordering #430

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 87 additions & 3 deletions frontend/campaign-builder.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -337,6 +337,16 @@
display: none;
}

.flow-node.dragging {
opacity: 0.55;
border-style: dashed;
}

.flow-node.drop-target {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.template-library-modal.hidden {
display: none;
}
Expand Down Expand Up @@ -1243,6 +1253,7 @@ <h5 class="modal-title">Campaign Settings</h5>
let activeTab = 'sequence';
let availableLeads = [];
let selectedLeadIds = new Set();
let draggedStepIndex = null;
let aiComposerStep = null;
let aiConversation = [];
let aiLatestDraft = null;
Expand Down Expand Up @@ -1305,6 +1316,33 @@ <h5 class="modal-title">Campaign Settings</h5>
return `${value.slice(0, limit)}...`;
}

function reorderSteps(fromIndex, toIndex) {
if (fromIndex === toIndex) return;
if (fromIndex < 0 || toIndex < 0) return;
if (fromIndex >= steps.length || toIndex >= steps.length) return;

const [moved] = steps.splice(fromIndex, 1);
steps.splice(toIndex, 0, moved);

if (selectedNodeIndex === fromIndex) {
selectedNodeIndex = toIndex;
} else if (selectedNodeIndex > fromIndex && selectedNodeIndex <= toIndex) {
selectedNodeIndex -= 1;
} else if (selectedNodeIndex < fromIndex && selectedNodeIndex >= toIndex) {
selectedNodeIndex += 1;
}

if (addInsertIndex !== null) {
if (addInsertIndex === fromIndex) {
addInsertIndex = toIndex;
} else if (addInsertIndex > fromIndex && addInsertIndex <= toIndex) {
addInsertIndex -= 1;
} else if (addInsertIndex < fromIndex && addInsertIndex >= toIndex) {
addInsertIndex += 1;
}
}
}

async function loadEmailTemplates() {
try {
const res = await fetchWithAuth('/email-templates/');
Expand Down Expand Up @@ -1816,7 +1854,7 @@ <h4 class="mb-3">Launch campaign</h4>
step.type === 'CONDITION_REPLY' ? 'Replied to email' : 'Clicked link';
const timeLabel = step.condition_time || '1 day';

html += `<div class="flow-node ${selectedNodeIndex === i ? 'selected' : ''}" data-index="${i}">
html += `<div class="flow-node ${selectedNodeIndex === i ? 'selected' : ''}" data-index="${i}" draggable="true">
<div class="d-flex align-items-center gap-3">
<div class="node-icon ${info.cls}"><i class="bi ${info.icon}"></i></div>
<div>
Expand Down Expand Up @@ -1872,7 +1910,7 @@ <h4 class="mb-3">Launch campaign</h4>
? '<span class="badge rounded-pill text-bg-danger me-1">No path</span>'
: '');

html += `<div class="flow-node ${selectedNodeIndex === i ? 'selected' : ''}" data-index="${i}">
html += `<div class="flow-node ${selectedNodeIndex === i ? 'selected' : ''}" data-index="${i}" draggable="true">
<div class="d-flex align-items-center gap-3">
<div class="node-icon ${info.cls}"><i class="bi ${info.icon}"></i></div>
<div class="flex-grow-1">
Expand Down Expand Up @@ -1910,8 +1948,55 @@ <h4 class="mb-3">Launch campaign</h4>

// Attach click listeners
canvas.querySelectorAll('.flow-node[data-index]').forEach(node => {
node.addEventListener('dragstart', (event) => {
draggedStepIndex = parseInt(node.dataset.index);
node.classList.add('dragging');
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setData('text/plain', node.dataset.index);
});

node.addEventListener('dragend', () => {
draggedStepIndex = null;
canvas.querySelectorAll('.flow-node').forEach(item => item.classList.remove('dragging', 'drop-target'));
});

node.addEventListener('dragover', (event) => {
if (draggedStepIndex === null) return;
event.preventDefault();
node.classList.add('drop-target');
event.dataTransfer.dropEffect = 'move';
});

node.addEventListener('dragleave', () => {
node.classList.remove('drop-target');
});

node.addEventListener('drop', async (event) => {
event.preventDefault();
node.classList.remove('drop-target');

const fromIndex = draggedStepIndex;
const toIndex = parseInt(node.dataset.index);
if (fromIndex === null || Number.isNaN(fromIndex) || Number.isNaN(toIndex)) return;
if (fromIndex === toIndex) return;

reorderSteps(fromIndex, toIndex);
draggedStepIndex = null;
renderCanvas();
renderEditor();

if (campaignId) {
try {
await saveCampaign();
} catch (error) {
console.warn('Unable to persist reordered steps automatically.', error);
}
}
});

node.addEventListener('click', (e) => {
if (e.target.closest('[data-delete]')) return;
if (draggedStepIndex !== null) return;
selectedNodeIndex = parseInt(node.dataset.index);
renderCanvas();
renderEditor();
Expand Down Expand Up @@ -2760,4 +2845,3 @@ <h4 class="mb-3">Launch campaign</h4>

</html>