Left FIELDS panel: per-field move up/down controls that reorder table columns (self-wiring renderFields + moveField, order persists per tab); shows fields in current column order

d4ebb5d4697cd9fb46fc9f443eb75140a23d07fe · 2026-08-13 14:42:55 -0700 · Steve Abrams
Files touched

M public_live/index.html
Diff

commit d4ebb5d4697cd9fb46fc9f443eb75140a23d07fe
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu Aug 13 14:42:55 2026 -0700

    Left FIELDS panel: per-field move up/down controls that reorder table columns (self-wiring renderFields + moveField, order persists per tab); shows fields in current column order
---
 public_live/index.html | 33 ++++++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/public_live/index.html b/public_live/index.html
index b8babbb..5400835 100644
--- a/public_live/index.html
+++ b/public_live/index.html
@@ -51,8 +51,10 @@
   .val .n{color:var(--dim);font-size:10px;margin-left:auto}
   .val .bx{width:12px;height:12px;border:1px solid var(--line);border-radius:3px;flex:0 0 12px}
   .val.on .bx{background:var(--accent);border-color:var(--accent)}
-  .ftog{display:flex;align-items:center;gap:6px;padding:2px 4px;font-size:12px;cursor:pointer}
-  .ftog input{margin:0}
+  .ftog{display:flex;align-items:center;gap:6px;padding:2px 4px;font-size:12px}
+  .ftog input{margin:0} .ftog .fl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
+  .ftog .mv{display:flex;gap:1px;opacity:.45} .ftog:hover .mv{opacity:1}
+  .ftog .mv button{padding:0 4px;font-size:9px;line-height:16px;border-radius:4px}
   .mini{font-size:10px;color:var(--dim);cursor:pointer} .mini:hover{color:var(--accent)}
   /* table */
   table{border-collapse:separate;border-spacing:0;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:10px}
@@ -224,8 +226,7 @@ function buildRail(){
     <details class="sec" open><summary>Filters — click a value</summary><div id="facets"></div></details>`;
   rail.innerHTML=html;
   $('#sortsel').value=SORT?SORT.col:''; $('#groupsel').value=GROUP;
-  // field toggles
-  $('#ftogs').innerHTML=H.map((h,i)=>h?`<label class="ftog"><input type="checkbox" data-c="${i}" ${HIDDEN.has(String(i))?'':'checked'}> ${esc(h)}</label>`:'').join('');
+  renderFields();   // field list = show/hide + move up/down (reflects & drives column order)
   buildFacets();
   wireRail();
 }
@@ -260,7 +261,6 @@ function wireRail(){
   $('#sortdir').onclick=()=>{if(SORT){SORT.dir*=-1;LS.set('sort',SORT);$('#sortdir').textContent=SORT.dir<0?'▼':'▲';render()}};
   $('#groupsel').onchange=e=>{GROUP=e.target.value;LS.set('group',GROUP);render()};
   $('#dens').oninput=e=>{document.documentElement.style.setProperty('--fs',e.target.value+'px')};
-  $('#ftogs').querySelectorAll('input').forEach(cb=>cb.onchange=()=>{const i=cb.dataset.c;cb.checked?HIDDEN.delete(i):HIDDEN.add(i);LS.set('hidden.'+GID,[...HIDDEN]);render()});
   $('#allf').onclick=()=>{HIDDEN.clear();LS.set('hidden.'+GID,[]);buildRail();render()};
   $('#nonef').onclick=()=>{HIDDEN=new Set(DATA.headers.map((h,i)=>h?String(i):null).filter(x=>x));LS.set('hidden.'+GID,[...HIDDEN]);buildRail();render()};
 }
@@ -272,6 +272,29 @@ function visCols(){
     cols.sort((a,b)=>(pos.has(a.i)?pos.get(a.i):1e4+a.i)-(pos.has(b.i)?pos.get(b.i):1e4+b.i)); }
   return cols;
 }
+function orderedFields(){   // all fields, in the current column order (hidden included)
+  const all=DATA.headers.map((h,i)=>({h,i})).filter(o=>o.h);
+  if(ORDER&&ORDER.length){const pos=new Map(ORDER.map((ci,idx)=>[ci,idx]));
+    all.sort((a,b)=>(pos.has(a.i)?pos.get(a.i):1e4+a.i)-(pos.has(b.i)?pos.get(b.i):1e4+b.i));}
+  return all;
+}
+function renderFields(){
+  const host=$('#ftogs'); if(!host)return;
+  host.innerHTML=orderedFields().map(o=>`<div class="ftog" data-c="${o.i}"><input type="checkbox" ${HIDDEN.has(String(o.i))?'':'checked'}><span class="fl" title="${esc(o.h)}">${esc(o.h)}</span><span class="mv"><button class="up" title="move up">▲</button><button class="dn" title="move down">▼</button></span></div>`).join('');
+  host.querySelectorAll('.ftog').forEach(row=>{const ci=+row.dataset.c;
+    row.querySelector('input').onchange=e=>{e.target.checked?HIDDEN.delete(String(ci)):HIDDEN.add(String(ci));LS.set('hidden.'+GID,[...HIDDEN]);render()};
+    row.querySelector('.up').onclick=()=>moveField(ci,-1);
+    row.querySelector('.dn').onclick=()=>moveField(ci,1);
+  });
+}
+function moveField(ci,dir){
+  let order=(ORDER&&ORDER.length)?ORDER.slice():orderedFields().map(o=>o.i);
+  DATA.headers.forEach((h,i)=>{if(h&&!order.includes(i))order.push(i)});
+  const idx=order.indexOf(ci), ni=idx+dir;
+  if(idx<0||ni<0||ni>=order.length)return;
+  order.splice(idx,1); order.splice(ni,0,ci);
+  ORDER=order; LS.set('order.'+GID,ORDER); renderFields(); render();
+}
 function moveCol(from,to){
   let order=(ORDER&&ORDER.length)?ORDER.slice():visCols().map(c=>c.i); // seed from current order
   DATA.headers.forEach((h,i)=>{ if(h && !order.includes(i)) order.push(i); }); // include any missing
← 0f87d75 Console: default column order pulls First Name + Last Name u · back to Rentv Sheet Enrich Refine · Field reorder = drag (removed up/down buttons): left FIELDS f54646e →