fix: member cards not rendering — broken nested template literal; rewrite as renderMemberCard helper with safe string concat

This commit is contained in:
James 2026-03-19 22:45:54 -04:00
parent ba5591ca2c
commit 063c12d324
1 changed files with 23 additions and 9 deletions

View File

@ -1274,6 +1274,28 @@
let allGlobalOrgs = []; let allGlobalOrgs = [];
let _dealOrgsMap = {}; let _dealOrgsMap = {};
function imgErr(img) {
const w = img.parentElement;
w.className = 'w-11 h-11 rounded-full shrink-0 overflow-hidden bg-[#c9a84c]/20 flex items-center justify-center';
w.innerHTML = '<span class="text-[#c9a84c] font-semibold">' + escHtml(img.dataset.initial || '?') + '</span>';
}
function renderMemberCard(dealOrgId, m, mi) {
const initial = (m.name || m.email || '?')[0].toUpperCase();
let avatarHtml;
if (m.photo) {
avatarHtml = '<div class="w-11 h-11 rounded-full shrink-0 overflow-hidden">'
+ '<img src="' + escHtml(m.photo) + '" class="w-full h-full object-cover" data-initial="' + escHtml(initial) + '" onerror="imgErr(this)">'
+ '</div>';
} else {
avatarHtml = '<div class="w-11 h-11 rounded-full shrink-0 overflow-hidden bg-[#c9a84c]/20 flex items-center justify-center">'
+ '<span class="text-[#c9a84c] font-semibold">' + escHtml(initial) + '</span></div>';
}
const nameHtml = '<div class="text-sm font-medium truncate" style="color:var(--ds-tx)">' + escHtml(m.name || m.email || '') + '</div>';
const titleHtml = m.title ? '<div class="text-xs truncate" style="color:var(--ds-tx3)">' + escHtml(m.title) + '</div>' : '';
return '<div class="flex items-center gap-3 cursor-pointer hover:opacity-80 transition" onclick="openPersonPanel(\'' + dealOrgId + '\', ' + mi + ')">'
+ avatarHtml + '<div class="min-w-0">' + nameHtml + titleHtml + '</div></div>';
}
async function loadOrgs() { async function loadOrgs() {
try { try {
const res = await fetchAPI('/api/projects/' + projectID + '/orgs'); const res = await fetchAPI('/api/projects/' + projectID + '/orgs');
@ -1349,15 +1371,7 @@
<!-- Members --> <!-- Members -->
<div class="border-t px-6 py-4" style="border-color:var(--ds-bd)"> <div class="border-t px-6 py-4" style="border-color:var(--ds-bd)">
<div class="grid gap-3" style="grid-template-columns: repeat(auto-fill, minmax(180px, 1fr))"> <div class="grid gap-3" style="grid-template-columns: repeat(auto-fill, minmax(180px, 1fr))">
${members.map((m, mi) => `<div class="flex items-center gap-3 cursor-pointer hover:opacity-80 transition" onclick="openPersonPanel('${o.deal_org_id}', ${mi})"> ${members.map((m, mi) => renderMemberCard(o.deal_org_id, m, mi)).join('')}
<div class="w-11 h-11 rounded-full shrink-0 overflow-hidden ${m.photo ? '' : 'bg-[#c9a84c]/20 flex items-center justify-center'}">
${m.photo ? `<img src="${escHtml(m.photo)}" class="w-full h-full object-cover" onerror="this.parentElement.className='w-11 h-11 rounded-full shrink-0 overflow-hidden bg-[#c9a84c]/20 flex items-center justify-center';this.replaceWith(Object.assign(document.createElement('span'),{className:'text-[#c9a84c] font-semibold',textContent:'${(m.name||m.email||'?')[0].toUpperCase()}'}))">` : `<span class="text-[#c9a84c] font-semibold">${(m.name||m.email||'?')[0].toUpperCase()}</span>`}
</div>
<div class="min-w-0">
<div class="text-sm font-medium truncate" style="color:var(--ds-tx)">${escHtml(m.name||m.email)}</div>
${m.title ? `<div class="text-xs truncate" style="color:var(--ds-tx3)">${escHtml(m.title)}</div>` : ''}
</div>
</div>`).join('')}
<div class="flex items-center gap-3 cursor-pointer hover:opacity-80 transition" onclick="openPersonPanel('${o.deal_org_id}', -1)"> <div class="flex items-center gap-3 cursor-pointer hover:opacity-80 transition" onclick="openPersonPanel('${o.deal_org_id}', -1)">
<div class="w-11 h-11 rounded-full shrink-0 flex items-center justify-center text-xl" style="background:var(--ds-hv);color:var(--ds-tx2)">+</div> <div class="w-11 h-11 rounded-full shrink-0 flex items-center justify-center text-xl" style="background:var(--ds-hv);color:var(--ds-tx2)">+</div>
<span class="text-sm" style="color:var(--ds-tx3)">Add person</span> <span class="text-sm" style="color:var(--ds-tx3)">Add person</span>