350 lines
13 KiB
TypeScript
350 lines
13 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { api } from '../api';
|
|
import type { ClassItem, SyncStatus } from '../api';
|
|
import { openClass } from './NavHistoryBar';
|
|
|
|
export const ClassesTab: React.FC = () => {
|
|
const [classes, setClasses] = useState<ClassItem[]>([]);
|
|
const [total, setTotal] = useState(0);
|
|
const [page, setPage] = useState(1);
|
|
const [pageSize] = useState(15);
|
|
const [search, setSearch] = useState('');
|
|
const [systemFilter, setSystemFilter] = useState<number | undefined>(undefined);
|
|
const [studyingOnly, setStudyingOnly] = useState(true);
|
|
const [loading, setLoading] = useState(true);
|
|
// Sync state
|
|
const [syncStatus, setSyncStatus] = useState<SyncStatus | null>(null);
|
|
|
|
const fetchClasses = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const res = await api.getClasses({
|
|
page,
|
|
pageSize,
|
|
q: search || undefined,
|
|
systemRkId: systemFilter,
|
|
studyingOnly,
|
|
});
|
|
setClasses(res.data);
|
|
setTotal(res.total);
|
|
} catch (err) {
|
|
console.error(err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const fetchSyncStatus = async () => {
|
|
try {
|
|
const status = await api.getClassesSyncStatus();
|
|
setSyncStatus(status);
|
|
return status.running;
|
|
} catch (err) {
|
|
console.error('Lỗi khi lấy status sync:', err);
|
|
return false;
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchClasses();
|
|
}, [page, search, systemFilter, studyingOnly]);
|
|
|
|
// Check sync status on load and start polling if running
|
|
useEffect(() => {
|
|
fetchSyncStatus();
|
|
}, []);
|
|
|
|
// Sync polling logic
|
|
useEffect(() => {
|
|
let timer: any;
|
|
if (syncStatus?.running) {
|
|
timer = setInterval(async () => {
|
|
const isRunning = await fetchSyncStatus();
|
|
if (!isRunning) {
|
|
clearInterval(timer);
|
|
fetchClasses(); // Reload data when sync completes
|
|
}
|
|
}, 2000);
|
|
}
|
|
return () => {
|
|
if (timer) clearInterval(timer);
|
|
};
|
|
}, [syncStatus?.running]);
|
|
|
|
const handleStartSync = async () => {
|
|
try {
|
|
await api.startClassesSync();
|
|
// Set local state to running to trigger useEffect poller
|
|
setSyncStatus({
|
|
running: true,
|
|
done: false,
|
|
total: 0,
|
|
synced: 0,
|
|
updatedAt: Date.now() / 1000
|
|
});
|
|
} catch (err: any) {
|
|
alert(err.message || 'Không thể bắt đầu đồng bộ lớp học');
|
|
}
|
|
};
|
|
|
|
const handleToggleStudying = async (cItem: ClassItem) => {
|
|
const nextVal = !cItem.isStudying;
|
|
try {
|
|
// Optimistic update
|
|
setClasses(prev => prev.map(c => c.rkId === cItem.rkId ? { ...c, isStudying: nextVal } : c));
|
|
await api.updateClassStudying(cItem.rkId, nextVal);
|
|
} catch (err: any) {
|
|
// Revert if error
|
|
setClasses(prev => prev.map(c => c.rkId === cItem.rkId ? { ...c, isStudying: !nextVal } : c));
|
|
alert(err.message || 'Không thể cập nhật trạng thái lớp học');
|
|
}
|
|
};
|
|
|
|
// Tính toán % tiến trình sync
|
|
const syncPercent = syncStatus && syncStatus.total > 0
|
|
? Math.round((syncStatus.synced / syncStatus.total) * 100)
|
|
: 0;
|
|
|
|
|
|
|
|
return (
|
|
<div className="tab-page">
|
|
<div className="tab-page-toolbar">
|
|
<div className="page-header">
|
|
<div className="page-title">
|
|
<h1>Quản Lý Lớp Học</h1>
|
|
<p>Đồng bộ dữ liệu lớp học và sinh viên từ hệ thống chính</p>
|
|
</div>
|
|
<button
|
|
className="btn btn-primary"
|
|
onClick={handleStartSync}
|
|
disabled={syncStatus?.running}
|
|
>
|
|
{syncStatus?.running ? (
|
|
<>
|
|
<div className="sync-spinner"></div> Đồng bộ...
|
|
</>
|
|
) : (
|
|
'🔄 Đồng bộ Lớp học'
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Sync Status Banner */}
|
|
{syncStatus && (syncStatus.running || syncStatus.done || syncStatus.error) && (
|
|
<div className="sync-progress-banner">
|
|
<div className="sync-header">
|
|
<div className="sync-title">
|
|
{syncStatus.running && <div className="sync-spinner"></div>}
|
|
<span>
|
|
{syncStatus.running && `Đang đồng bộ lớp học... (${syncPercent}%)`}
|
|
{syncStatus.done && '🎉 Đồng bộ lớp học hoàn tất!'}
|
|
{syncStatus.error && `❌ Đồng bộ thất bại: ${syncStatus.error}`}
|
|
</span>
|
|
</div>
|
|
<div style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
|
|
Đã đồng bộ: {syncStatus.synced} / {syncStatus.total} lớp
|
|
</div>
|
|
</div>
|
|
{syncStatus.running && (
|
|
<div className="sync-bar-container">
|
|
<div className="sync-bar" style={{ width: `${syncPercent}%` }}></div>
|
|
</div>
|
|
)}
|
|
<div className="sync-meta">
|
|
<span>Cập nhật lần cuối: {new Date(syncStatus.updatedAt * 1000).toLocaleString()}</span>
|
|
{syncStatus.running && <span style={{ color: 'var(--accent-hover)' }}>Vui lòng không đóng trình duyệt</span>}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Control bar filters */}
|
|
<div className="control-bar">
|
|
<div className="search-input-wrapper">
|
|
<input
|
|
type="text"
|
|
className="search-input"
|
|
placeholder="Tìm theo tên, mã lớp, chuyên ngành..."
|
|
value={search}
|
|
onChange={e => {
|
|
setSearch(e.target.value);
|
|
setPage(1);
|
|
}}
|
|
/>
|
|
<span className="search-icon">🔍</span>
|
|
</div>
|
|
|
|
<div className="filters-wrapper">
|
|
<select
|
|
className="select-filter"
|
|
value={systemFilter === undefined ? '' : systemFilter}
|
|
onChange={e => {
|
|
const val = e.target.value;
|
|
setSystemFilter(val === '' ? undefined : Number(val));
|
|
setPage(1);
|
|
}}
|
|
>
|
|
<option value="">Tất cả phân hệ</option>
|
|
<option value="1">Hà Nội (System 1)</option>
|
|
<option value="2">Hồ Chí Minh (System 2)</option>
|
|
<option value="3">Đà Nẵng (System 3)</option>
|
|
<option value="4">Cần Thơ (System 4)</option>
|
|
</select>
|
|
|
|
<label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', fontSize: '0.9rem' }}>
|
|
<input
|
|
type="checkbox"
|
|
checked={studyingOnly}
|
|
onChange={e => {
|
|
setStudyingOnly(e.target.checked);
|
|
setPage(1);
|
|
}}
|
|
style={{ width: '16px', height: '16px', accentColor: 'var(--accent)' }}
|
|
/>
|
|
Chỉ xem lớp đang học
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Classes list table */}
|
|
<div className="tab-page-body">
|
|
<div className="table-wrapper table-fill">
|
|
{loading ? (
|
|
<div className="empty-state">
|
|
<div className="sync-spinner" style={{ width: '32px', height: '32px' }}></div>
|
|
<p style={{ marginTop: '0.5rem' }}>Đang tải danh sách lớp học...</p>
|
|
</div>
|
|
) : classes.length === 0 ? (
|
|
<div className="empty-state">
|
|
<div className="empty-state-icon">🏫</div>
|
|
<h2>Không tìm thấy lớp học nào</h2>
|
|
<p>Hãy thử thay đổi bộ lọc hoặc bấm nút "Đồng bộ Lớp học" để kéo dữ liệu mới.</p>
|
|
</div>
|
|
) : (
|
|
<table className="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Mã lớp / ID</th>
|
|
<th>Tên Lớp học</th>
|
|
<th>Phân hệ</th>
|
|
<th>Môn học của lớp</th>
|
|
<th>Sinh viên</th>
|
|
<th>Đang dạy</th>
|
|
<th style={{ textAlign: 'right' }}>Hành động</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{classes.map(cl => (
|
|
<tr key={cl.rkId} style={cl.isStudying ? { background: 'rgba(16, 185, 129, 0.02)' } : {}}>
|
|
<td>
|
|
<div style={{ fontWeight: 700, color: 'var(--text-primary)' }}>{cl.classCode}</div>
|
|
<div style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>ID: {cl.rkId}</div>
|
|
</td>
|
|
<td>
|
|
<div
|
|
style={{ fontWeight: 600, color: 'var(--accent)', fontSize: '0.95rem', cursor: 'pointer', textDecoration: 'underline' }}
|
|
onClick={() => openClass('classes', cl.rkId, cl.name)}
|
|
title="Mở Không gian làm việc của lớp"
|
|
>
|
|
{cl.name}
|
|
</div>
|
|
<div style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', marginTop: '0.15rem' }}>
|
|
💼 {cl.specializeName || 'Chưa có chuyên ngành'}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span className="badge badge-muted" style={{ fontWeight: 600 }}>
|
|
📍 {cl.systemName || `Hệ thống ${cl.systemRkId || 'Khác'}`}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div className="courses-tag-list">
|
|
{cl.courses && cl.courses.length > 0 ? (
|
|
cl.courses.map((co, i) => (
|
|
<span key={i} className="course-tag">
|
|
{co.courseName}
|
|
</span>
|
|
))
|
|
) : (
|
|
<span style={{ color: 'var(--text-muted)', fontSize: '0.8rem' }}>Chưa có môn học</span>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span className="badge badge-info" style={{ padding: '0.3rem 0.65rem', borderRadius: '6px', fontWeight: 600 }}>
|
|
👤 {cl.studentCount} SV
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
|
|
<div className="switch-container">
|
|
<label className="switch">
|
|
<input
|
|
type="checkbox"
|
|
checked={cl.isStudying}
|
|
onChange={() => handleToggleStudying(cl)}
|
|
/>
|
|
<span className="slider"></span>
|
|
</label>
|
|
</div>
|
|
{cl.isStudying ? (
|
|
<span style={{ color: 'var(--success)', fontSize: '0.72rem', display: 'inline-flex', alignItems: 'center', gap: '0.25rem', fontWeight: 700, textTransform: 'uppercase' }}>
|
|
<span className="pulse-dot-active" style={{ display: 'inline-block', width: '6px', height: '6px', background: '#10b981', borderRadius: '50%', boxShadow: '0 0 6px #10b981' }}></span>
|
|
Đang học
|
|
</span>
|
|
) : (
|
|
<span style={{ color: 'var(--text-muted)', fontSize: '0.72rem', textTransform: 'uppercase', fontWeight: 600 }}>Tạm dừng</span>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td style={{ textAlign: 'right' }}>
|
|
<button
|
|
className="btn btn-secondary"
|
|
style={{ padding: '0.5rem 0.95rem', fontSize: '0.8rem', fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: '0.35rem' }}
|
|
onClick={() => openClass('classes', cl.rkId, cl.name)}
|
|
>
|
|
👥 Xem lớp
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pagination control bar */}
|
|
{!loading && classes.length > 0 && (
|
|
<div className="tab-page-footer">
|
|
<div className="pagination-row">
|
|
<div>
|
|
Hiển thị lớp thứ <b>{((page - 1) * pageSize) + 1}</b> đến <b>{Math.min(page * pageSize, total)}</b> trong tổng số <b>{total}</b> lớp học
|
|
</div>
|
|
<div className="pagination-btn-group">
|
|
<button
|
|
className="pagination-btn"
|
|
onClick={() => setPage(p => Math.max(1, p - 1))}
|
|
disabled={page === 1}
|
|
>
|
|
◀
|
|
</button>
|
|
<span style={{ display: 'flex', alignItems: 'center', padding: '0 1rem', fontWeight: 600, color: 'var(--text-primary)' }}>
|
|
Trang {page} / {Math.ceil(total / pageSize) || 1}
|
|
</span>
|
|
<button
|
|
className="pagination-btn"
|
|
onClick={() => setPage(p => p + 1)}
|
|
disabled={page >= Math.ceil(total / pageSize)}
|
|
>
|
|
▶
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|