fha-loans.html: add grid(cards)+compact-list views + view toggle + all-field sort select (was table-only, no view buttons) — detail modal/red-flags/facets/search preserved

ff880e59bfb976be8a3e693ba34aa11cad7e83f9 · 2026-08-13 08:20:15 -0700 · steve

Files touched

M public/fha-loans.html

Diff

commit ff880e59bfb976be8a3e693ba34aa11cad7e83f9
Author: steve <steve@designerwallcoverings.com>
Date:   Thu Aug 13 08:20:15 2026 -0700

    fha-loans.html: add grid(cards)+compact-list views + view toggle + all-field sort select (was table-only, no view buttons) — detail modal/red-flags/facets/search preserved
---
 public/fha-loans.html | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/public/fha-loans.html b/public/fha-loans.html
index 834505d..8cf553e 100644
--- a/public/fha-loans.html
+++ b/public/fha-loans.html
@@ -346,6 +346,7 @@ function render(){
   const rows=filtered(), cols=visCols();
   $('#count').innerHTML=`<b>${rows.length.toLocaleString()}</b> of ${ROWS.length.toLocaleString()} loans`;
   const show=id=>['#ftableView','#fgridView','#flistView'].forEach(s=>$(s).classList.toggle('hide',s!==id));
+  const ss=$('#fsort'); if(ss) ss.value = sortKey ? sortKey+':'+(sortDir<0?'desc':'asc') : '';
   if(!rows.length){ $('#femptymsg').style.display='block'; $('#femptymsg').textContent='no matches for these filters.'; }
   else $('#femptymsg').style.display='none';
   const propCell=r=>esc(r.property||'(name n/a)')+(r.city||r.state?`<span class="loc">${esc([r.city,r.state].filter(Boolean).join(', ')+' '+(r.zip||''))}${r.holder?' · '+esc(r.holder):''}</span>`:'');
@@ -477,9 +478,22 @@ function wireGrid(){
     }
     dragKey=null; });
   thead.addEventListener('dragend',()=>{ document.querySelectorAll('#fthead th.dragging,#fthead th.dropL,#fthead th.dropR').forEach(x=>x.classList.remove('dragging','dropL','dropR')); dragKey=null; });
-  // row click → detail modal
+  // row/card click → detail modal (table rows, grid cards, list rows all carry .frow + data-id)
   $('#ftbody').addEventListener('click',e=>{ const tr=e.target.closest('tr.frow'); if(tr) openDetail(tr.dataset.id); });
+  $('#fgridView').addEventListener('click',e=>{ if(e.target.closest('a'))return; const el=e.target.closest('.frow'); if(el) openDetail(el.dataset.id); });
+  $('#flistView').addEventListener('click',e=>{ if(e.target.closest('a'))return; const el=e.target.closest('.frow'); if(el) openDetail(el.dataset.id); });
   $('#fov').addEventListener('click',e=>{ if(e.target.id==='fov') $('#fov').classList.remove('on'); });
+  // ── 3-view segmented toggle (grid cards / compact list / dense table) ──
+  const seg=$('#fviewseg');
+  const LABELS={grid:'▦ Grid',list:'☰ List',table:'▤ Table'};
+  seg.innerHTML=['grid','list','table'].map(v=>`<button type="button" data-v="${v}" class="${VIEW===v?'active':''}">${LABELS[v]}</button>`).join('');
+  seg.addEventListener('click',e=>{ const b=e.target.closest('button[data-v]'); if(!b) return; VIEW=b.dataset.v; try{localStorage.setItem('fhaView',VIEW);}catch(_){}
+    seg.querySelectorAll('button').forEach(x=>x.classList.toggle('active',x.dataset.v===VIEW)); render(); });
+  // ── all-field Sort <select> (mirrors the header-click sort; every column) ──
+  const ss=$('#fsort');
+  ss.innerHTML='<option value="">Sort…</option>'+COLS.map(c=>`<option value="${c.k}:desc">${esc(c.l)} ↓</option><option value="${c.k}:asc">${esc(c.l)} ↑</option>`).join('');
+  ss.value = sortKey ? sortKey+':'+(sortDir<0?'desc':'asc') : '';
+  ss.addEventListener('change',e=>{ const v=e.target.value; if(!v){ return; } const [k,d]=v.split(':'); sortKey=k; sortDir=d==='desc'?-1:1; localStorage.setItem('fhaSortKey',sortKey); localStorage.setItem('fhaSortDir',sortDir); render(); });
   // search
   const qi=$('#q'); qi.addEventListener('input',()=>{ clearTimeout(qi._t); qi._t=setTimeout(()=>{q=qi.value.trim();render();},140); });
   // density → column count / card min (drives table font scale here via --tsz stays; use --cg? keep simple: font size + col width n/a for table → adjust --tsz)

← 242d569 nav-agent: v1.1 merge-mode asset refresh · back to Commercialrealestate · TK-10526: add missing three-view.js <script> to broker-grid/ f86719c →