201 lines
7.7 KiB
TypeScript
201 lines
7.7 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { Globe2, RefreshCw, Upload, BadgeCheck, Mail, FileDown, PencilLine, Trash2 } from 'lucide-react';
|
|
import { useI18n } from '@/lib/i18n';
|
|
|
|
export type QSOMenuState = { x: number; y: number; ids: number[] } | null;
|
|
|
|
type Props = {
|
|
menu: QSOMenuState;
|
|
onClose: () => void;
|
|
onUpdateFromCty: (ids: number[]) => void;
|
|
onUpdateFromQRZ: (ids: number[]) => void;
|
|
onUpdateFromClublog?: (ids: number[]) => void;
|
|
onSendTo?: (service: string, ids: number[]) => void;
|
|
onSendRecording?: (ids: number[]) => void;
|
|
onSendEQSL?: (ids: number[]) => void;
|
|
onBulkEdit?: (ids: number[]) => void;
|
|
onExportSelected?: (ids: number[]) => void;
|
|
onExportFiltered?: () => void;
|
|
onExportCabrilloSelected?: (ids: number[]) => void;
|
|
onExportCabrilloFiltered?: () => void;
|
|
onDelete?: (ids: number[]) => void;
|
|
};
|
|
|
|
const UPLOAD_TARGETS: { service: string; name: string }[] = [
|
|
{ service: 'qrz', name: 'QRZ.com' },
|
|
{ service: 'clublog', name: 'Club Log' },
|
|
{ service: 'hrdlog', name: 'HRDLog.net' },
|
|
{ service: 'eqsl', name: 'eQSL.cc' },
|
|
{ service: 'lotw', name: 'LoTW' },
|
|
];
|
|
|
|
// Lightweight right-click menu for the QSO grids. AG Grid's native context
|
|
// menu is an Enterprise feature, so this is a plain floating menu driven by
|
|
// onCellContextMenu. Stays open until the user clicks outside, presses Escape,
|
|
// or picks a command. (We deliberately do NOT close on scroll/resize: the QSO
|
|
// list auto-refreshes and AG Grid fires internal scroll events on refresh,
|
|
// which used to dismiss the menu the instant it appeared.)
|
|
export function QSOContextMenu({ menu, onClose, onUpdateFromCty, onUpdateFromQRZ, onUpdateFromClublog, onSendTo, onSendRecording, onSendEQSL, onBulkEdit, onExportSelected, onExportFiltered, onExportCabrilloSelected, onExportCabrilloFiltered, onDelete }: Props) {
|
|
const { t } = useI18n();
|
|
useEffect(() => {
|
|
if (!menu) return;
|
|
const close = () => onClose();
|
|
const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
|
|
window.addEventListener('mousedown', close);
|
|
window.addEventListener('keydown', onKey);
|
|
return () => {
|
|
window.removeEventListener('mousedown', close);
|
|
window.removeEventListener('keydown', onKey);
|
|
};
|
|
}, [menu, onClose]);
|
|
|
|
if (!menu) return null;
|
|
const n = menu.ids.length;
|
|
// Keep the menu on-screen near the cursor.
|
|
const x = Math.min(menu.x, window.innerWidth - 248);
|
|
const y = Math.min(menu.y, window.innerHeight - (onSendTo ? 230 : 110));
|
|
|
|
return (
|
|
<div
|
|
className="fixed z-[200] min-w-[240px] rounded-md border border-border bg-popover shadow-lg py-1 text-sm"
|
|
style={{ left: x, top: y }}
|
|
onMouseDown={(e) => e.stopPropagation()}
|
|
>
|
|
<div className="px-3 py-1 text-[11px] uppercase tracking-wider text-muted-foreground">
|
|
{t('qctx.selected', { n })}
|
|
</div>
|
|
<button
|
|
className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-accent/50"
|
|
onClick={() => { onUpdateFromCty(menu.ids); onClose(); }}
|
|
>
|
|
<Globe2 className="size-4 text-primary" />
|
|
<span>{t('qctx.fixCountry')}</span>
|
|
</button>
|
|
<button
|
|
className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-accent/50"
|
|
onClick={() => { onUpdateFromQRZ(menu.ids); onClose(); }}
|
|
>
|
|
<RefreshCw className="size-4 text-info" />
|
|
<span>{t('qctx.updateQrz')}</span>
|
|
</button>
|
|
{onUpdateFromClublog && (
|
|
<button
|
|
className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-accent/50"
|
|
onClick={() => { onUpdateFromClublog(menu.ids); onClose(); }}
|
|
>
|
|
<BadgeCheck className="size-4 text-info" />
|
|
<span>{t('qctx.updateClublog')}</span>
|
|
</button>
|
|
)}
|
|
|
|
{(onSendRecording || onSendEQSL) && (
|
|
<>
|
|
<div className="my-1 border-t border-border" />
|
|
{onSendEQSL && (
|
|
<button
|
|
className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-accent/50"
|
|
onClick={() => { onSendEQSL(menu.ids); onClose(); }}
|
|
>
|
|
<Mail className="size-4 text-warning" />
|
|
<span>{t('qctx.sendQslEmail')}</span>
|
|
</button>
|
|
)}
|
|
{onSendRecording && (
|
|
<button
|
|
className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-accent/50"
|
|
onClick={() => { onSendRecording(menu.ids); onClose(); }}
|
|
>
|
|
<Mail className="size-4 text-danger" />
|
|
<span>{t('qctx.sendRecording')}</span>
|
|
</button>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{onBulkEdit && (
|
|
<>
|
|
<div className="my-1 border-t border-border" />
|
|
<button
|
|
className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-accent/50"
|
|
onClick={() => { onBulkEdit(menu.ids); onClose(); }}
|
|
>
|
|
<PencilLine className="size-4 text-info" />
|
|
<span>{t('qctx.bulkEdit', { n })}</span>
|
|
</button>
|
|
</>
|
|
)}
|
|
|
|
{(onExportSelected || onExportFiltered) && (
|
|
<>
|
|
<div className="my-1 border-t border-border" />
|
|
{onExportSelected && (
|
|
<button
|
|
className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-accent/50"
|
|
onClick={() => { onExportSelected(menu.ids); onClose(); }}
|
|
>
|
|
<FileDown className="size-4 text-info" />
|
|
<span>{t('qctx.exportSelectedAdif', { n })}</span>
|
|
</button>
|
|
)}
|
|
{onExportFiltered && (
|
|
<button
|
|
className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-accent/50"
|
|
onClick={() => { onExportFiltered(); onClose(); }}
|
|
>
|
|
<FileDown className="size-4 text-info" />
|
|
<span>{t('qctx.exportFilteredAdif')}</span>
|
|
</button>
|
|
)}
|
|
{onExportCabrilloSelected && (
|
|
<button
|
|
className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-accent/50"
|
|
onClick={() => { onExportCabrilloSelected(menu.ids); onClose(); }}
|
|
>
|
|
<FileDown className="size-4 text-warning" />
|
|
<span>{t('qctx.exportSelectedCabrillo', { n })}</span>
|
|
</button>
|
|
)}
|
|
{onExportCabrilloFiltered && (
|
|
<button
|
|
className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-accent/50"
|
|
onClick={() => { onExportCabrilloFiltered(); onClose(); }}
|
|
>
|
|
<FileDown className="size-4 text-warning" />
|
|
<span>{t('qctx.exportFilteredCabrillo')}</span>
|
|
</button>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{onSendTo && (
|
|
<>
|
|
<div className="my-1 border-t border-border" />
|
|
{UPLOAD_TARGETS.map((target) => (
|
|
<button
|
|
key={target.service}
|
|
className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-accent/50"
|
|
onClick={() => { onSendTo(target.service, menu.ids); onClose(); }}
|
|
>
|
|
<Upload className="size-4 text-success" />
|
|
<span>{t('qctx.sendTo', { name: target.name })}</span>
|
|
</button>
|
|
))}
|
|
</>
|
|
)}
|
|
|
|
{onDelete && (
|
|
<>
|
|
<div className="my-1 border-t border-border" />
|
|
<button
|
|
className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-danger hover:bg-danger-muted"
|
|
onClick={() => { onDelete(menu.ids); onClose(); }}
|
|
>
|
|
<Trash2 className="size-4" />
|
|
<span>{t('qctx.delete', { n })}</span>
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|