fix: Enhance safe DOM rendering for teacher conversations list and auto-selection of active chat
This commit is contained in:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user