feat: add ⋯ menu to request_list and section rows — rename, delete, add section/request

This commit is contained in:
James 2026-03-14 23:52:27 -04:00
parent e146deb517
commit 110d44e238
1 changed files with 53 additions and 5 deletions

View File

@ -454,14 +454,24 @@
: `<span style="display:inline-block;padding:1px 8px;border-radius:9999px;font-size:10px;background:rgba(74,222,128,.12);color:#4ade80;margin-left:8px">All</span>`; : `<span style="display:inline-block;padding:1px 8px;border-radius:9999px;font-size:10px;background:rgba(74,222,128,.12);color:#4ade80;margin-left:8px">All</span>`;
html += `<tr class="row-list" data-id="${item.entry_id}" data-type="${item.type}" data-parent="${item.parent_id}" data-depth="${item.depth}"> html += `<tr class="row-list" data-id="${item.entry_id}" data-type="${item.type}" data-parent="${item.parent_id}" data-depth="${item.depth}">
<td></td> <td></td>
<td colspan="12" style="padding-left:${indent+10}px"> <td colspan="11" style="padding-left:${indent+10}px">
${chevron} ${chevron}
<strong style="color:var(--ds-tx);margin-left:4px;font-size:13px;font-weight:600">${escHtml(name)}</strong> <strong style="color:var(--ds-tx);margin-left:4px;font-size:13px;font-weight:600">${escHtml(name)}</strong>
${visBadge} ${visBadge}
<span style="color:var(--ds-tx3);margin-left:8px;font-size:11px">${childCount} items</span> <span style="color:var(--ds-tx3);margin-left:8px;font-size:11px">${childCount} items</span>
<button onclick="editVisibility('${item.entry_id}')" style="margin-left:6px;background:none;border:none;cursor:pointer;color:var(--ds-tx3);font-size:11px;padding:1px 4px" title="Change visibility">&#9881;</button> <button onclick="editVisibility('${item.entry_id}')" style="margin-left:6px;background:none;border:none;cursor:pointer;color:var(--ds-tx3);font-size:11px;padding:1px 4px" title="Change visibility">&#9881;</button>
<button onclick="startInlineAdd('section','${item.entry_id}')" style="margin-left:10px;background:none;border:1px solid var(--ds-bd);border-radius:4px;cursor:pointer;color:var(--ds-tx3);font-size:11px;padding:1px 8px" title="Add section">+ Section</button> <button onclick="startInlineAdd('section','${item.entry_id}')" style="margin-left:10px;background:none;border:1px solid var(--ds-bd);border-radius:4px;cursor:pointer;color:var(--ds-tx3);font-size:11px;padding:1px 8px">+ Section</button>
<button onclick="startInlineAdd('request','${item.entry_id}')" style="margin-left:4px;background:none;border:1px solid var(--ds-bd);border-radius:4px;cursor:pointer;color:var(--ds-tx3);font-size:11px;padding:1px 8px" title="Add request">+ Request</button> <button onclick="startInlineAdd('request','${item.entry_id}')" style="margin-left:4px;background:none;border:1px solid var(--ds-bd);border-radius:4px;cursor:pointer;color:var(--ds-tx3);font-size:11px;padding:1px 8px">+ Request</button>
</td>
<td style="position:relative;text-align:right">
<button onclick="toggleMenu(event,'${item.entry_id}')" style="background:none;border:none;cursor:pointer;color:var(--ds-tx3);font-size:16px;padding:2px 6px">&hellip;</button>
<div id="menu-${item.entry_id}" class="actions-menu" style="display:none">
<button onclick="startInlineAdd('section','${item.entry_id}')">+ Add Section</button>
<button onclick="startInlineAdd('request','${item.entry_id}')">+ Add Request</button>
<button onclick="editVisibility('${item.entry_id}')">Change Visibility</button>
<button onclick="renameListOrSection('${item.entry_id}','list')" style="border-top:1px solid var(--ds-bd);margin-top:2px;padding-top:6px">Rename</button>
<button onclick="deleteEntry('${item.entry_id}')" style="color:#f87171">Delete List</button>
</div>
</td> </td>
</tr>`; </tr>`;
} else if (item.type === 'section') { } else if (item.type === 'section') {
@ -470,11 +480,19 @@
draggable="true" ondragstart="onDragStart(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)" ondrop="onDrop(event)"> draggable="true" ondragstart="onDragStart(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)" ondrop="onDrop(event)">
<td class="drag-handle" style="color:var(--ds-tx3);font-size:11px;cursor:grab">\u2630</td> <td class="drag-handle" style="color:var(--ds-tx3);font-size:11px;cursor:grab">\u2630</td>
<td class="row-num" style="padding-left:${indent}px">${escHtml(num)}</td> <td class="row-num" style="padding-left:${indent}px">${escHtml(num)}</td>
<td colspan="11" style="padding-left:${indent}px"> <td colspan="10" style="padding-left:${indent}px">
${chevron} ${chevron}
<span style="color:var(--ds-tx);font-weight:600;font-size:13px;margin-left:4px">${escHtml(name)}</span> <span style="color:var(--ds-tx);font-weight:600;font-size:13px;margin-left:4px">${escHtml(name)}</span>
<span style="color:var(--ds-tx3);margin-left:8px;font-size:11px">${item.children_count||0} requests</span> <span style="color:var(--ds-tx3);margin-left:8px;font-size:11px">${item.children_count||0} requests</span>
<button onclick="startInlineAdd('request','${item.entry_id}')" style="margin-left:10px;background:none;border:1px solid var(--ds-bd);border-radius:4px;cursor:pointer;color:var(--ds-tx3);font-size:11px;padding:1px 8px" title="Add request">+ Request</button> <button onclick="startInlineAdd('request','${item.entry_id}')" style="margin-left:10px;background:none;border:1px solid var(--ds-bd);border-radius:4px;cursor:pointer;color:var(--ds-tx3);font-size:11px;padding:1px 8px">+ Request</button>
</td>
<td style="position:relative;text-align:right">
<button onclick="toggleMenu(event,'${item.entry_id}')" style="background:none;border:none;cursor:pointer;color:var(--ds-tx3);font-size:16px;padding:2px 6px">&hellip;</button>
<div id="menu-${item.entry_id}" class="actions-menu" style="display:none">
<button onclick="startInlineAdd('request','${item.entry_id}')">+ Add Request</button>
<button onclick="renameListOrSection('${item.entry_id}','section')" style="border-top:1px solid var(--ds-bd);margin-top:2px;padding-top:6px">Rename</button>
<button onclick="deleteEntry('${item.entry_id}')" style="color:#f87171">Delete Section</button>
</div>
</td> </td>
</tr>`; </tr>`;
} else { } else {
@ -616,6 +634,36 @@
} }
} }
async function renameListOrSection(id, type) {
// Close the menu
const menu = document.getElementById('menu-' + id);
if (menu) menu.style.display = 'none';
openMenuId = null;
const item = treeData.find(t => t.entry_id === id);
if (!item) return;
const d = item.data || {};
const currentName = d.name || d.title || '';
const newName = prompt('Rename ' + (type === 'list' ? 'list' : 'section') + ':', currentName);
if (!newName || !newName.trim() || newName.trim() === currentName) return;
const updated = { ...d, name: newName.trim(), title: newName.trim() };
item.data = updated;
try {
const res = await fetchAPI('/api/projects/' + projectID + '/entries/' + id, {
method: 'PUT',
body: JSON.stringify({ data: JSON.stringify(updated), version: item.version || 0 })
});
if (res.ok) {
const result = await res.json();
if (result.version) item.version = result.version;
renderTree();
}
} catch(e) {
loadRequestTree();
}
}
function toggleCollapse(id) { function toggleCollapse(id) {
if (collapsed.has(id)) collapsed.delete(id); else collapsed.add(id); if (collapsed.has(id)) collapsed.delete(id); else collapsed.add(id);
renderTree(); renderTree();