fix: Enhance safe DOM rendering for teacher conversations list and auto-selection of active chat

This commit is contained in:
Hamza-Ayed
2026-08-27 03:55:34 +03:00
parent dd06cafa87
commit e1a75e71ab
+38 -11
View File
@@ -677,22 +677,38 @@ class TeacherPortal
}
}
function escapeHtml(str) {
if (!str) return '';
const div = document.createElement('div');
div.textContent = str;
return div.innerHTML;
}
function renderConversations(convs) {
const container = document.getElementById('conv_list_container');
if (!container) return;
if (!convs || convs.length === 0) {
container.innerHTML = '<div style="padding: 20px; text-align: center; color: var(--text-muted); font-size: 12px;">لا يوجد طلاب مسجلون حالياً. سيظهر الطلاب هنا فور تسجيلهم.</div>';
return;
}
container.innerHTML = convs.map(c => `
<div class="conv-item ${c.user_id === activeRecipientId ? 'active' : ''}" onclick="selectConversation(${c.user_id}, '${c.full_name}')">
container.innerHTML = '';
convs.forEach(c => {
const item = document.createElement('div');
item.className = 'conv-item' + (c.user_id === activeRecipientId ? ' active' : '');
item.dataset.userId = c.user_id;
item.onclick = function() {
selectConversation(c.user_id, c.full_name);
};
item.innerHTML = `
<div class="conv-name">
<span>${c.full_name}</span>
<span>${escapeHtml(c.full_name)}</span>
${c.unread_count > 0 ? `<span class="unread-badge">${c.unread_count}</span>` : ''}
</div>
<div class="conv-preview">${c.last_message || 'محادثة جديدة'}</div>
</div>
`).join('');
<div class="conv-preview">${escapeHtml(c.last_message || 'محادثة جديدة')}</div>
`;
container.appendChild(item);
});
// Auto-select first conversation if none is selected
if (!activeRecipientId && convs.length > 0) {
@@ -702,22 +718,33 @@ class TeacherPortal
async function selectConversation(userId, name) {
activeRecipientId = userId;
document.getElementById('active_chat_user_name').textContent = name;
const nameEl = document.getElementById('active_chat_user_name');
if (nameEl) nameEl.textContent = name;
const items = document.querySelectorAll('.conv-item');
items.forEach(el => {
if (parseInt(el.dataset.userId) === userId) {
el.classList.add('active');
} else {
el.classList.remove('active');
}
});
const token = localStorage.getItem('saqel_teacher_jwt');
if (!token) return;
try {
const res = await fetch(`/api/chat/messages?other_user_id=${userId}`, {
headers: { 'Authorization': 'Bearer ' + token }
});
const data = await res.json();
if (res.ok && data.status === 'success') {
if (res.ok && data.status === 'success' && data.data) {
const messagesArea = document.getElementById('chat_messages_area');
messagesArea.innerHTML = '';
if (data.data.messages.length === 0) {
messagesArea.innerHTML = '<div style="text-align: center; color: var(--text-muted); font-size: 13px; margin-top: 60px;">بدء المحادثة مع الطالب ' + name + ' — اكتب رسالتك بالأسفل.</div>';
const msgs = data.data.messages || [];
if (msgs.length === 0) {
messagesArea.innerHTML = '<div style="text-align: center; color: var(--text-muted); font-size: 13px; margin-top: 60px;">بدء المحادثة مع الطالب ' + escapeHtml(name) + ' — اكتب ردك بالأسفل.</div>';
} else {
data.data.messages.forEach(msg => appendChatMessage(msg));
msgs.forEach(msg => appendChatMessage(msg));
}
}
} catch (e) {