This commit is contained in:
@@ -44,6 +44,32 @@ export const WorkspaceSeatingChart: React.FC<WorkspaceSeatingChartProps> = ({
|
||||
const [dragOverCell, setDragOverCell] = useState<string | null>(null);
|
||||
const [saveNotice, setSaveNotice] = useState<string | null>(null);
|
||||
|
||||
// Toggle layout view modes
|
||||
const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
|
||||
const [listSearchQuery, setListSearchQuery] = useState('');
|
||||
|
||||
// Reverse map seat positions for list view
|
||||
const studentSeats = useMemo(() => {
|
||||
if (!layout) return {} as Record<number, string>;
|
||||
const mapping: Record<number, string> = {};
|
||||
Object.entries(layout.seats).forEach(([cellKey, rkId]) => {
|
||||
const [rStr, cStr] = cellKey.split(',');
|
||||
const r = Number(rStr) + 1;
|
||||
const c = Number(cStr) + 1;
|
||||
mapping[rkId] = `Hàng ${r}, Cột ${c}`;
|
||||
});
|
||||
return mapping;
|
||||
}, [layout]);
|
||||
|
||||
// Filter student list
|
||||
const filteredListStudents = useMemo(() => {
|
||||
return students.filter(
|
||||
(s) =>
|
||||
s.fullName.toLowerCase().includes(listSearchQuery.toLowerCase()) ||
|
||||
s.studentCode.toLowerCase().includes(listSearchQuery.toLowerCase())
|
||||
);
|
||||
}, [students, listSearchQuery]);
|
||||
|
||||
// Load templates and layout
|
||||
useEffect(() => {
|
||||
// Load templates
|
||||
@@ -531,21 +557,55 @@ export const WorkspaceSeatingChart: React.FC<WorkspaceSeatingChartProps> = ({
|
||||
</div>
|
||||
) : (
|
||||
// Seating Workspace View
|
||||
<div className="seating-workspace-grid">
|
||||
|
||||
<div
|
||||
className={viewMode === 'grid' ? "seating-workspace-grid" : "seating-workspace-main"}
|
||||
style={viewMode === 'list' ? { display: 'flex', flexDirection: 'column', height: '100%' } : undefined}
|
||||
>
|
||||
{/* Main Seating Panel */}
|
||||
<div className="seating-workspace-main">
|
||||
<div className="seating-workspace-main" style={{ height: '100%' }}>
|
||||
{/* Toolbar */}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '10px' }}>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
|
||||
<div style={{ display: 'flex', gap: '2px', marginRight: '10px', borderRight: '1px solid var(--border-color)', paddingRight: '10px' }}>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm ${viewMode === 'grid' ? 'btn-primary' : 'btn-secondary'}`}
|
||||
onClick={() => setViewMode('grid')}
|
||||
style={{
|
||||
backgroundColor: viewMode === 'grid' ? 'var(--accent)' : '',
|
||||
borderColor: viewMode === 'grid' ? 'var(--accent)' : '',
|
||||
color: viewMode === 'grid' ? '#fff' : '',
|
||||
}}
|
||||
>
|
||||
🪑 Sơ đồ
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-sm ${viewMode === 'list' ? 'btn-primary' : 'btn-secondary'}`}
|
||||
onClick={() => setViewMode('list')}
|
||||
style={{
|
||||
backgroundColor: viewMode === 'list' ? 'var(--accent)' : '',
|
||||
borderColor: viewMode === 'list' ? 'var(--accent)' : '',
|
||||
color: viewMode === 'list' ? '#fff' : '',
|
||||
}}
|
||||
>
|
||||
📋 Danh sách
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{viewMode === 'grid' && (
|
||||
<>
|
||||
<button className="btn btn-primary btn-sm" onClick={handleAutoAssign}>
|
||||
⚡ Xếp ngẫu nhiên
|
||||
</button>
|
||||
<button className="btn btn-secondary btn-sm" onClick={handleClearAllSeats}>
|
||||
🗑️ Giải tán chỗ
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{viewMode === 'grid' && (
|
||||
<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
|
||||
<button
|
||||
className={`btn btn-sm ${isEditingStructure ? 'btn-primary' : 'btn-secondary'}`}
|
||||
@@ -562,19 +622,90 @@ export const WorkspaceSeatingChart: React.FC<WorkspaceSeatingChartProps> = ({
|
||||
Reset sơ đồ
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{viewMode === 'grid' ? (
|
||||
<>
|
||||
{isEditingStructure && (
|
||||
<div style={{ backgroundColor: '#fffbeb', border: '1px solid #fef3c7', padding: '0.65rem 1rem', borderRadius: '8px', color: '#b45309', fontSize: '0.8rem', fontWeight: 600 }}>
|
||||
💡 Đang ở chế độ chỉnh sửa: Click chuột vào các ô trong sơ đồ để thay đổi khóa/mở các vị trí.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Render Grid */}
|
||||
{renderSeatingGrid()}
|
||||
</>
|
||||
) : (
|
||||
// List View of Students
|
||||
<div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0, gap: '10px' }}>
|
||||
<div className="attendance-toolbar" style={{ display: 'flex', gap: '10px', margin: 0 }}>
|
||||
<input
|
||||
type="search"
|
||||
placeholder="Tìm sinh viên..."
|
||||
className="search-input"
|
||||
style={{ maxWidth: '320px', padding: '0.4rem 0.6rem', fontSize: '0.85rem' }}
|
||||
value={listSearchQuery}
|
||||
onChange={(e) => setListSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="attendance-table-scroll table-wrapper" style={{ border: 'none', flex: 1, overflowY: 'auto' }}>
|
||||
{filteredListStudents.length === 0 ? (
|
||||
<div style={{ textAlign: 'center', padding: '3rem 0', color: 'var(--text-muted)', fontSize: '0.9rem' }}>
|
||||
Không tìm thấy sinh viên nào.
|
||||
</div>
|
||||
) : (
|
||||
<table className="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Sinh viên</th>
|
||||
<th>Mã SV</th>
|
||||
<th>Vị trí chỗ ngồi</th>
|
||||
<th>Trạng thái</th>
|
||||
<th style={{ textAlign: 'right' }}>Thao tác</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredListStudents.map((s) => {
|
||||
const isOnline = onlineIds.includes(s.rkId);
|
||||
const seatLabel = studentSeats[s.rkId] || 'Chưa xếp chỗ';
|
||||
return (
|
||||
<tr key={s.rkId}>
|
||||
<td>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
|
||||
<StudentAvatar fullName={s.fullName} avatar={s.avatar} isOnline={isOnline} size={28} />
|
||||
<div style={{ fontWeight: 600, color: 'var(--text-primary)' }}>{s.fullName}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td><code>{s.studentCode}</code></td>
|
||||
<td>
|
||||
<span className={`badge ${studentSeats[s.rkId] ? 'badge-info' : 'badge-muted'}`}>
|
||||
{seatLabel}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ color: isOnline ? 'var(--success)' : 'var(--text-muted)', fontWeight: 700 }}>
|
||||
{isOnline ? 'Online' : 'Offline'}
|
||||
</td>
|
||||
<td style={{ textAlign: 'right' }}>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm"
|
||||
onClick={() => onStudentClick && onStudentClick(s.rkId)}
|
||||
>
|
||||
Giám sát
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right Panel: Unseated Students list */}
|
||||
{viewMode === 'grid' && (
|
||||
<div className="seating-workspace-sidebar">
|
||||
<div>
|
||||
<h4 style={{ margin: 0, fontSize: '0.95rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
@@ -652,6 +783,7 @@ export const WorkspaceSeatingChart: React.FC<WorkspaceSeatingChartProps> = ({
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user