Refactor bulk user management: update HTMX target attributes to replace wrappers for improved rendering of user lists

This commit is contained in:
Ross
2025-12-15 12:01:42 +00:00
parent 508f8a22a2
commit 12bd66d4d8
2 changed files with 14 additions and 7 deletions
+12 -5
View File
@@ -43,7 +43,7 @@
const bulkForm = document.createElement('form');
bulkForm.id = 'bulk-cid-form';
bulkForm.className = 'd-none';
bulkForm.setAttribute('hx-target', '#cid-users-list');
bulkForm.setAttribute('hx-target', '#cid-users-wrap');
bulkForm.setAttribute('hx-swap', 'outerHTML');
const bulkInput = document.createElement('input'); bulkInput.type='hidden'; bulkInput.name='bulk_pks'; bulkInput.id='bulk_pks_input'; bulkForm.appendChild(bulkInput);
const bulkAddInput = document.createElement('input'); bulkAddInput.type='hidden'; bulkAddInput.name='add'; bulkAddInput.id='bulk_add_input'; bulkForm.appendChild(bulkAddInput);
@@ -104,10 +104,17 @@
try{
const parser = new DOMParser();
const doc = parser.parseFromString(text, 'text/html');
const newList = doc.querySelector('#cid-users-list');
if (newList){
const old = document.querySelector('#cid-users-list');
old.replaceWith(newList);
// Prefer replacing the whole wrapper (contains counts + list)
const newWrap = doc.querySelector('#cid-users-wrap');
if (newWrap){
const oldWrap = document.querySelector('#cid-users-wrap');
if (oldWrap) oldWrap.replaceWith(newWrap);
} else {
const newList = doc.querySelector('#cid-users-list');
if (newList){
const old = document.querySelector('#cid-users-list');
if (old) old.replaceWith(newList);
}
}
}catch(e){ console.error('bulk swap failed', e); }
// dispatch HX-Trigger equivalent if present
@@ -34,7 +34,7 @@
const bulkForm = document.createElement('form');
bulkForm.id = 'bulk-user-form';
bulkForm.className = 'd-none';
bulkForm.setAttribute('hx-target', '#user-users-list');
bulkForm.setAttribute('hx-target', '#user-users-wrap');
bulkForm.setAttribute('hx-swap', 'outerHTML');
const bulkInput = document.createElement('input'); bulkInput.type='hidden'; bulkInput.name='bulk_pks'; bulkInput.id='bulk_pks_input_user'; bulkForm.appendChild(bulkInput);
const bulkAddInput = document.createElement('input'); bulkAddInput.type='hidden'; bulkAddInput.name='add'; bulkAddInput.id='bulk_add_input_user'; bulkForm.appendChild(bulkAddInput);
@@ -55,7 +55,7 @@
const fd = new FormData(); fd.append('bulk_pks', JSON.stringify(pks)); if (add !== null) fd.append('add', add ? 'true' : 'false'); const csrf = document.querySelector('input[name="csrfmiddlewaretoken"]').value; const headers = { 'X-CSRFToken': csrf };
fetch(url, { method: 'POST', body: fd, headers: headers, credentials: 'same-origin' })
.then(resp => resp.text().then(text => ({ resp, text })))
.then(({ resp, text }) => { try{ const parser = new DOMParser(); const doc = parser.parseFromString(text, 'text/html'); const newList = doc.querySelector('#user-users-list'); if (newList){ const old = document.querySelector('#user-users-list'); old.replaceWith(newList); } }catch(e){ console.error('bulk swap failed', e);} const trigger = resp.headers.get('HX-Trigger'); if (trigger){ try{ const detail = JSON.parse(trigger); for(const k in detail){ document.body.dispatchEvent(new CustomEvent(k, { detail: detail[k] })); } }catch(e){} } })
.then(({ resp, text }) => { try{ const parser = new DOMParser(); const doc = parser.parseFromString(text, 'text/html'); const newWrap = doc.querySelector('#user-users-wrap'); if (newWrap){ const oldWrap = document.querySelector('#user-users-wrap'); if (oldWrap) oldWrap.replaceWith(newWrap); } else { const newList = doc.querySelector('#user-users-list'); if (newList){ const old = document.querySelector('#user-users-list'); if (old) old.replaceWith(newList); } } }catch(e){ console.error('bulk swap failed', e);} const trigger = resp.headers.get('HX-Trigger'); if (trigger){ try{ const detail = JSON.parse(trigger); for(const k in detail){ document.body.dispatchEvent(new CustomEvent(k, { detail: detail[k] })); } }catch(e){} } })
.catch(err => console.error('bulk request failed', err))
.finally(()=>{ if(triggeringButton) setLoading(triggeringButton, false); });
}