Public Access
feat: implement overflow menu for exam actions in MyExams component
This commit is contained in:
LaurensBartelds committed
1 parent
26041cba1e
commit
a40bfa7838
2 files changed
+273
-154
No files matched your search
+175
-154
@@ -33,7 +33,6 @@ export default function MyExams({ onLoadExam }: Readonly<Props>) {
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [deleteConfirm, setDeleteConfirm] = useState<number | null>(null)
|
||||
const [startingId, setStartingId] = useState<number | null>(null)
|
||||
const [shareOpenId, setShareOpenId] = useState<number | null>(null)
|
||||
const [sharingId, setSharingId] = useState<number | null>(null)
|
||||
const [duplicatingId, setDuplicatingId] = useState<number | null>(null)
|
||||
const [exportingId, setExportingId] = useState<number | null>(null)
|
||||
@@ -42,8 +41,12 @@ export default function MyExams({ onLoadExam }: Readonly<Props>) {
|
||||
const [showNewCollection, setShowNewCollection] = useState(false)
|
||||
const [newCollectionName, setNewCollectionName] = useState('')
|
||||
const [creatingCollection, setCreatingCollection] = useState(false)
|
||||
const [moveMenuExamId, setMoveMenuExamId] = useState<number | null>(null)
|
||||
const [movingExamId, setMovingExamId] = useState<number | null>(null)
|
||||
const [menuOpenId, setMenuOpenId] = useState<number | null>(null)
|
||||
const [menuSection, setMenuSection] = useState<'main' | 'move' | 'share'>('main')
|
||||
|
||||
const closeMenu = () => { setMenuOpenId(null); setMenuSection('main') }
|
||||
const openMenu = (id: number) => { setMenuOpenId(id); setMenuSection('main') }
|
||||
const [editingCollectionId, setEditingCollectionId] = useState<number | null>(null)
|
||||
const [editingCollectionName, setEditingCollectionName] = useState('')
|
||||
const [deleteCollectionId, setDeleteCollectionId] = useState<number | null>(null)
|
||||
@@ -105,7 +108,7 @@ export default function MyExams({ onLoadExam }: Readonly<Props>) {
|
||||
const res = await examApi.shareExam(id)
|
||||
const url = `${window.location.origin}/share/${res.shareToken}`
|
||||
await navigator.clipboard.writeText(url)
|
||||
setShareOpenId(null)
|
||||
closeMenu()
|
||||
setExams((prev) => prev.map((e) => (e.id === id ? { ...e, share_token: res.shareToken } : e)))
|
||||
} catch (e) {
|
||||
setError((e as Error).message)
|
||||
@@ -117,7 +120,7 @@ export default function MyExams({ onLoadExam }: Readonly<Props>) {
|
||||
const handleUnshare = async (id: number) => {
|
||||
try {
|
||||
await examApi.unshareExam(id)
|
||||
setShareOpenId(null)
|
||||
closeMenu()
|
||||
setExams((prev) => prev.map((e) => (e.id === id ? { ...e, share_token: null } : e)))
|
||||
} catch (e) {
|
||||
setError((e as Error).message)
|
||||
@@ -186,7 +189,7 @@ export default function MyExams({ onLoadExam }: Readonly<Props>) {
|
||||
setMovingExamId(examId)
|
||||
try {
|
||||
await collectionApi.moveExamToCollection(examId, collectionId)
|
||||
setMoveMenuExamId(null)
|
||||
closeMenu()
|
||||
setExams((prev) => prev.map((e) => e.id === examId ? { ...e, collection_id: collectionId } : e))
|
||||
setCollections((prev) => prev.map((c) => {
|
||||
if (collectionId !== null && c.id === collectionId) return { ...c, exam_count: c.exam_count + 1 }
|
||||
@@ -633,149 +636,11 @@ export default function MyExams({ onLoadExam }: Readonly<Props>) {
|
||||
)}
|
||||
</div>
|
||||
<div className="workspace-card-actions">
|
||||
<button
|
||||
className="btn btn-primary btn-sm"
|
||||
onClick={() => void startExam(exam.id)}
|
||||
disabled={startingId === exam.id}
|
||||
>
|
||||
{startingId === exam.id ? t('common.loading') : t('workspace.takeExam')}
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={() => navigate(`/exam-editor/${exam.id}`)}
|
||||
disabled={startingId === exam.id}
|
||||
>
|
||||
{t('common.edit')}
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={() => void handleDuplicate(exam.id)}
|
||||
disabled={duplicatingId === exam.id}
|
||||
title={t('workspace.duplicate')}
|
||||
>
|
||||
{duplicatingId === exam.id ? t('common.loading') : t('workspace.duplicate')}
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={() => void handleExport(exam.id, exam.title)}
|
||||
disabled={exportingId === exam.id}
|
||||
title={t('workspace.export')}
|
||||
>
|
||||
{exportingId === exam.id ? t('common.loading') : '↓'}
|
||||
</button>
|
||||
{/* Move to collection dropdown */}
|
||||
<div style={{ position: 'relative' }}>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={() => setMoveMenuExamId((id) => (id === exam.id ? null : exam.id))}
|
||||
disabled={movingExamId === exam.id}
|
||||
title={t('workspace.moveTo')}
|
||||
>
|
||||
{movingExamId === exam.id ? t('common.loading') : '▤'}
|
||||
</button>
|
||||
{moveMenuExamId === exam.id && (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 'calc(100% + 4px)',
|
||||
zIndex: 10,
|
||||
minWidth: 180,
|
||||
background: 'var(--paper)',
|
||||
border: '1px solid var(--line-2)',
|
||||
borderRadius: 8,
|
||||
boxShadow: 'var(--shadow-md)',
|
||||
padding: '6px 0',
|
||||
}}
|
||||
>
|
||||
{exam.collection_id !== null && (
|
||||
<button
|
||||
className="user-menu-item"
|
||||
style={{ fontSize: 13 }}
|
||||
onClick={() => void handleMoveExam(exam.id, null)}
|
||||
>
|
||||
{t('workspace.removeFromCollection')}
|
||||
</button>
|
||||
)}
|
||||
{collections.map((col) => (
|
||||
col.id !== exam.collection_id && (
|
||||
<button
|
||||
key={col.id}
|
||||
className="user-menu-item"
|
||||
style={{ fontSize: 13 }}
|
||||
onClick={() => void handleMoveExam(exam.id, col.id)}
|
||||
>
|
||||
{col.name}
|
||||
</button>
|
||||
)
|
||||
))}
|
||||
{collections.length === 0 && exam.collection_id === null && (
|
||||
<div className="user-menu-item" style={{ fontSize: 13, color: 'var(--ink-3)', cursor: 'default' }}>
|
||||
{t('workspace.noSavedExams')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={() => setShareOpenId((id) => (id === exam.id ? null : exam.id))}
|
||||
disabled={startingId === exam.id || sharingId === exam.id}
|
||||
title={exam.share_token ? t('share.shared') : t('share.share')}
|
||||
>
|
||||
{sharingId === exam.id ? t('common.loading') : (exam.share_token ? t('share.shared') : t('share.share'))}
|
||||
</button>
|
||||
{shareOpenId === exam.id && (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: 'calc(100% + 4px)',
|
||||
zIndex: 10,
|
||||
minWidth: 180,
|
||||
background: 'var(--paper)',
|
||||
border: '1px solid var(--line-2)',
|
||||
borderRadius: 8,
|
||||
boxShadow: 'var(--shadow-md)',
|
||||
padding: '6px 0',
|
||||
}}
|
||||
>
|
||||
{exam.share_token ? (
|
||||
<>
|
||||
<button
|
||||
className="user-menu-item"
|
||||
style={{ fontSize: 13 }}
|
||||
onClick={() => {
|
||||
const url = `${window.location.origin}/share/${exam.share_token}`
|
||||
void navigator.clipboard.writeText(url)
|
||||
setShareOpenId(null)
|
||||
}}
|
||||
>
|
||||
{t('share.copyLink')}
|
||||
</button>
|
||||
<button
|
||||
className="user-menu-item"
|
||||
style={{ fontSize: 13, color: 'var(--wrong)' }}
|
||||
onClick={() => void handleUnshare(exam.id)}
|
||||
>
|
||||
{t('share.revokeLink')}
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
className="user-menu-item"
|
||||
style={{ fontSize: 13 }}
|
||||
onClick={() => void handleShare(exam.id)}
|
||||
>
|
||||
{t('share.generateLink')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{deleteConfirm === exam.id ? (
|
||||
<div className="workspace-delete-confirm">
|
||||
<span style={{ fontSize: 13, color: 'var(--ink-3)', marginRight: 4 }}>
|
||||
{t('workspace.batchDeleteConfirm')}
|
||||
</span>
|
||||
<button className="btn btn-sm admin-btn-danger" onClick={() => void deleteExam(exam.id)}>
|
||||
{t('common.confirm')}
|
||||
</button>
|
||||
@@ -784,14 +649,170 @@ export default function MyExams({ onLoadExam }: Readonly<Props>) {
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
className="btn btn-ghost btn-sm admin-btn-danger-ghost"
|
||||
onClick={() => setDeleteConfirm(exam.id)}
|
||||
title={t('common.delete')}
|
||||
disabled={startingId === exam.id}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
<>
|
||||
<button
|
||||
className="btn btn-primary btn-sm"
|
||||
onClick={() => void startExam(exam.id)}
|
||||
disabled={startingId === exam.id}
|
||||
>
|
||||
{startingId === exam.id ? t('common.loading') : t('workspace.takeExam')}
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={() => navigate(`/exam-editor/${exam.id}`)}
|
||||
disabled={startingId === exam.id}
|
||||
>
|
||||
{t('common.edit')}
|
||||
</button>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<button
|
||||
className="btn btn-ghost btn-sm workspace-menu-trigger"
|
||||
onClick={() => menuOpenId === exam.id ? closeMenu() : openMenu(exam.id)}
|
||||
disabled={startingId === exam.id}
|
||||
title="More actions"
|
||||
aria-label="More actions"
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={menuOpenId === exam.id}
|
||||
>
|
||||
⋯
|
||||
</button>
|
||||
{menuOpenId === exam.id && (
|
||||
<>
|
||||
<button
|
||||
className="workspace-menu-backdrop"
|
||||
onClick={closeMenu}
|
||||
aria-label="Close menu"
|
||||
tabIndex={-1}
|
||||
/>
|
||||
<div className="workspace-menu" role="menu">
|
||||
{menuSection === 'main' && (
|
||||
<>
|
||||
<button
|
||||
className="user-menu-item workspace-menu-item"
|
||||
onClick={() => { closeMenu(); void handleDuplicate(exam.id) }}
|
||||
disabled={duplicatingId === exam.id}
|
||||
>
|
||||
<span className="workspace-menu-icon">⧉</span>
|
||||
<span>{duplicatingId === exam.id ? t('common.loading') : t('workspace.duplicate')}</span>
|
||||
</button>
|
||||
<button
|
||||
className="user-menu-item workspace-menu-item"
|
||||
onClick={() => { closeMenu(); void handleExport(exam.id, exam.title) }}
|
||||
disabled={exportingId === exam.id}
|
||||
>
|
||||
<span className="workspace-menu-icon">↓</span>
|
||||
<span>{exportingId === exam.id ? t('common.loading') : t('workspace.export')}</span>
|
||||
</button>
|
||||
<button
|
||||
className="user-menu-item workspace-menu-item"
|
||||
onClick={() => setMenuSection('move')}
|
||||
disabled={movingExamId === exam.id}
|
||||
>
|
||||
<span className="workspace-menu-icon">▤</span>
|
||||
<span>{t('workspace.moveTo')}</span>
|
||||
<span className="workspace-menu-chevron">›</span>
|
||||
</button>
|
||||
<button
|
||||
className="user-menu-item workspace-menu-item"
|
||||
onClick={() => setMenuSection('share')}
|
||||
disabled={sharingId === exam.id}
|
||||
>
|
||||
<span className="workspace-menu-icon">↗</span>
|
||||
<span>
|
||||
{sharingId === exam.id
|
||||
? t('common.loading')
|
||||
: (exam.share_token ? t('share.shared') : t('share.share'))}
|
||||
</span>
|
||||
<span className="workspace-menu-chevron">›</span>
|
||||
</button>
|
||||
<div className="workspace-menu-divider" />
|
||||
<button
|
||||
className="user-menu-item workspace-menu-item workspace-menu-item-danger"
|
||||
onClick={() => { closeMenu(); setDeleteConfirm(exam.id) }}
|
||||
>
|
||||
<span className="workspace-menu-icon">✕</span>
|
||||
<span>{t('common.delete')}</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{menuSection === 'move' && (
|
||||
<>
|
||||
<button
|
||||
className="user-menu-item workspace-menu-back"
|
||||
onClick={() => setMenuSection('main')}
|
||||
>
|
||||
‹ {t('common.back')}
|
||||
</button>
|
||||
<div className="workspace-menu-divider" />
|
||||
{exam.collection_id !== null && (
|
||||
<button
|
||||
className="user-menu-item workspace-menu-item"
|
||||
onClick={() => void handleMoveExam(exam.id, null)}
|
||||
>
|
||||
{t('workspace.removeFromCollection')}
|
||||
</button>
|
||||
)}
|
||||
{collections.map((col) => (
|
||||
col.id !== exam.collection_id && (
|
||||
<button
|
||||
key={col.id}
|
||||
className="user-menu-item workspace-menu-item"
|
||||
onClick={() => void handleMoveExam(exam.id, col.id)}
|
||||
>
|
||||
{col.name}
|
||||
</button>
|
||||
)
|
||||
))}
|
||||
{collections.length === 0 && exam.collection_id === null && (
|
||||
<div className="user-menu-item workspace-menu-item" style={{ color: 'var(--ink-3)', cursor: 'default' }}>
|
||||
{t('workspace.collections')}: 0
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{menuSection === 'share' && (
|
||||
<>
|
||||
<button
|
||||
className="user-menu-item workspace-menu-back"
|
||||
onClick={() => setMenuSection('main')}
|
||||
>
|
||||
‹ {t('common.back')}
|
||||
</button>
|
||||
<div className="workspace-menu-divider" />
|
||||
{exam.share_token ? (
|
||||
<>
|
||||
<button
|
||||
className="user-menu-item workspace-menu-item"
|
||||
onClick={() => {
|
||||
const url = `${window.location.origin}/share/${exam.share_token}`
|
||||
void navigator.clipboard.writeText(url)
|
||||
closeMenu()
|
||||
}}
|
||||
>
|
||||
{t('share.copyLink')}
|
||||
</button>
|
||||
<button
|
||||
className="user-menu-item workspace-menu-item workspace-menu-item-danger"
|
||||
onClick={() => void handleUnshare(exam.id)}
|
||||
>
|
||||
{t('share.revokeLink')}
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
className="user-menu-item workspace-menu-item"
|
||||
onClick={() => void handleShare(exam.id)}
|
||||
>
|
||||
{sharingId === exam.id ? t('common.loading') : t('share.generateLink')}
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2532,9 +2532,107 @@ select {
|
||||
|
||||
.workspace-delete-confirm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* Overflow (⋯) menu trigger */
|
||||
.workspace-menu-trigger {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
padding: 4px 10px;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--ink-2);
|
||||
}
|
||||
|
||||
/* Click-away backdrop for the overflow menu */
|
||||
.workspace-menu-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: default;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Overflow menu panel */
|
||||
.workspace-menu {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(100% + 6px);
|
||||
z-index: 10;
|
||||
min-width: 220px;
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--line-2);
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--shadow-md);
|
||||
padding: 6px;
|
||||
overflow: hidden;
|
||||
animation: workspace-menu-in 120ms ease-out;
|
||||
}
|
||||
|
||||
@keyframes workspace-menu-in {
|
||||
from { opacity: 0; transform: translateY(-2px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.workspace-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
border-radius: 6px;
|
||||
transition: background 80ms ease, color 80ms ease;
|
||||
}
|
||||
|
||||
.workspace-menu-item:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.workspace-menu-icon {
|
||||
width: 16px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--ink-3);
|
||||
font-size: 13px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.workspace-menu-chevron {
|
||||
margin-left: auto;
|
||||
color: var(--ink-4);
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.workspace-menu-divider {
|
||||
height: 1px;
|
||||
background: var(--line);
|
||||
margin: 4px 6px;
|
||||
}
|
||||
|
||||
.workspace-menu-item-danger {
|
||||
color: var(--wrong);
|
||||
}
|
||||
.workspace-menu-item-danger .workspace-menu-icon {
|
||||
color: var(--wrong);
|
||||
}
|
||||
.workspace-menu-item-danger:hover {
|
||||
background: var(--wrong-weak);
|
||||
color: var(--wrong);
|
||||
}
|
||||
|
||||
.workspace-menu-back {
|
||||
color: var(--ink-3);
|
||||
font-size: 12px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* Empty state */
|
||||
.workspace-empty {
|
||||
text-align: center;
|
||||
|
||||
Reference in new issue
Block a user