Add up/down reorder buttons and order numbers to public models
- Add order number badge (#1, #2, #3) to each public model - Add up/down arrow buttons to reorder models in the list - Add persistPublicModelsOrder function to save reordered list - Add server-side /api/admin/models/reorder endpoint - Remove automatic alphabetical sorting to preserve custom order - First model (#1) gets green background highlighting
This commit is contained in:
@@ -605,7 +605,7 @@
|
||||
return;
|
||||
}
|
||||
|
||||
modelsToRender.forEach((m) => {
|
||||
modelsToRender.forEach((m, idx) => {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'provider-row slim';
|
||||
|
||||
@@ -615,6 +615,14 @@
|
||||
const info = document.createElement('div');
|
||||
info.className = 'model-chip';
|
||||
|
||||
// Order number badge
|
||||
const orderBadge = document.createElement('span');
|
||||
orderBadge.className = 'pill';
|
||||
orderBadge.textContent = `#${idx + 1}`;
|
||||
orderBadge.style.background = idx === 0 ? 'var(--shopify-green)' : 'var(--primary)';
|
||||
orderBadge.style.fontWeight = '700';
|
||||
info.appendChild(orderBadge);
|
||||
|
||||
if (m.icon) {
|
||||
const img = document.createElement('img');
|
||||
img.src = m.icon;
|
||||
@@ -658,6 +666,36 @@
|
||||
const headerActions = document.createElement('div');
|
||||
headerActions.className = 'provider-row-actions';
|
||||
|
||||
// Up button
|
||||
const upBtn = document.createElement('button');
|
||||
upBtn.className = 'ghost';
|
||||
upBtn.textContent = '↑';
|
||||
upBtn.title = 'Move up';
|
||||
upBtn.disabled = idx === 0;
|
||||
upBtn.addEventListener('click', async () => {
|
||||
if (idx === 0) return;
|
||||
const next = [...modelsToRender];
|
||||
const [item] = next.splice(idx, 1);
|
||||
next.splice(idx - 1, 0, item);
|
||||
await persistPublicModelsOrder(next);
|
||||
});
|
||||
headerActions.appendChild(upBtn);
|
||||
|
||||
// Down button
|
||||
const downBtn = document.createElement('button');
|
||||
downBtn.className = 'ghost';
|
||||
downBtn.textContent = '↓';
|
||||
downBtn.title = 'Move down';
|
||||
downBtn.disabled = idx === modelsToRender.length - 1;
|
||||
downBtn.addEventListener('click', async () => {
|
||||
if (idx === modelsToRender.length - 1) return;
|
||||
const next = [...modelsToRender];
|
||||
const [item] = next.splice(idx, 1);
|
||||
next.splice(idx + 1, 0, item);
|
||||
await persistPublicModelsOrder(next);
|
||||
});
|
||||
headerActions.appendChild(downBtn);
|
||||
|
||||
const delBtn = document.createElement('button');
|
||||
delBtn.className = 'ghost';
|
||||
delBtn.textContent = 'Delete';
|
||||
@@ -826,6 +864,24 @@
|
||||
}
|
||||
}
|
||||
|
||||
async function persistPublicModelsOrder(orderedModels) {
|
||||
setStatus('Saving order...');
|
||||
try {
|
||||
// Use the reorder endpoint to save the new order
|
||||
const res = await api('/api/admin/models/reorder', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ models: orderedModels }),
|
||||
});
|
||||
// Update local state with new order from server
|
||||
state.publicModels = res.publicModels || orderedModels;
|
||||
renderConfigured();
|
||||
setStatus('Order saved');
|
||||
setTimeout(() => setStatus(''), 1500);
|
||||
} catch (err) {
|
||||
setStatus(err.message, true);
|
||||
}
|
||||
}
|
||||
|
||||
// Render the unified provider chain with up/down controls
|
||||
function renderProviderChain() {
|
||||
if (!el.providerChainList) return;
|
||||
|
||||
Reference in New Issue
Block a user