feat(export): implementar cooldown y manejo de estado en exportaciones
Se añade un sistema de cooldown para las solicitudes de exportación en los componentes DashboardPage y GroupResultsPage, evitando el spam de notificaciones. Se optimiza el componente ExportDropdown para manejar el estado de desactivación basado en el cooldown y el estado de exportación en curso. Además, se mejora la lógica de manejo de exportaciones para asegurar una mejor experiencia de usuario.
This commit is contained in:
@@ -16,6 +16,7 @@ import {
|
|||||||
export function ExportDropdown({
|
export function ExportDropdown({
|
||||||
onExport,
|
onExport,
|
||||||
exportingFormat = null,
|
exportingFormat = null,
|
||||||
|
disabled = false,
|
||||||
selectedCount = 0,
|
selectedCount = 0,
|
||||||
isAuthenticated = false,
|
isAuthenticated = false,
|
||||||
newPublicationsCount = 0,
|
newPublicationsCount = 0,
|
||||||
@@ -61,7 +62,7 @@ export function ExportDropdown({
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={handleDownload}
|
onClick={handleDownload}
|
||||||
disabled={isBusy || nothingToDownload}
|
disabled={disabled || isBusy || nothingToDownload}
|
||||||
className="inline-flex w-full items-center justify-center gap-2 rounded-lg border border-surface-border-strong bg-surface-primary px-[18px] py-2.5 text-sm font-medium text-ink-primary transition-colors enabled:hover:bg-surface-secondary disabled:cursor-not-allowed disabled:opacity-70 sm:w-auto"
|
className="inline-flex w-full items-center justify-center gap-2 rounded-lg border border-surface-border-strong bg-surface-primary px-[18px] py-2.5 text-sm font-medium text-ink-primary transition-colors enabled:hover:bg-surface-secondary disabled:cursor-not-allowed disabled:opacity-70 sm:w-auto"
|
||||||
>
|
>
|
||||||
{isBusy ? (
|
{isBusy ? (
|
||||||
|
|||||||
@@ -26,6 +26,9 @@ const SUCCESS_FLASH_MS = 3000;
|
|||||||
/** Minimum gap between sync requests (protects backend + avoids toast spam). */
|
/** Minimum gap between sync requests (protects backend + avoids toast spam). */
|
||||||
const SYNC_COOLDOWN_MS = 5000;
|
const SYNC_COOLDOWN_MS = 5000;
|
||||||
const SYNC_TOAST_ID = "researcher-sync";
|
const SYNC_TOAST_ID = "researcher-sync";
|
||||||
|
/** Minimum gap between export requests (protects backend + avoids toast spam). */
|
||||||
|
const EXPORT_COOLDOWN_MS = 5000;
|
||||||
|
const EXPORT_TOAST_ID = "researcher-export";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Researcher detail page. Owns:
|
* Researcher detail page. Owns:
|
||||||
@@ -60,6 +63,10 @@ export function DashboardPage() {
|
|||||||
const syncCooldownUntilRef = useRef(0);
|
const syncCooldownUntilRef = useRef(0);
|
||||||
const syncCooldownTimerRef = useRef(null);
|
const syncCooldownTimerRef = useRef(null);
|
||||||
const [exportingFormat, setExportingFormat] = useState(null);
|
const [exportingFormat, setExportingFormat] = useState(null);
|
||||||
|
const [exportCooldownActive, setExportCooldownActive] = useState(false);
|
||||||
|
const exportInFlightRef = useRef(false);
|
||||||
|
const exportCooldownUntilRef = useRef(0);
|
||||||
|
const exportCooldownTimerRef = useRef(null);
|
||||||
const [exportDestination, setExportDestination] = useState(
|
const [exportDestination, setExportDestination] = useState(
|
||||||
DEFAULT_EXPORT_DESTINATION,
|
DEFAULT_EXPORT_DESTINATION,
|
||||||
);
|
);
|
||||||
@@ -122,10 +129,14 @@ export function DashboardPage() {
|
|||||||
if (syncCooldownTimerRef.current) {
|
if (syncCooldownTimerRef.current) {
|
||||||
clearTimeout(syncCooldownTimerRef.current);
|
clearTimeout(syncCooldownTimerRef.current);
|
||||||
}
|
}
|
||||||
|
if (exportCooldownTimerRef.current) {
|
||||||
|
clearTimeout(exportCooldownTimerRef.current);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const syncDisabled = syncStatus !== "idle" || syncCooldownActive;
|
const syncDisabled = syncStatus !== "idle" || syncCooldownActive;
|
||||||
|
const exportDisabled = Boolean(exportingFormat) || exportCooldownActive;
|
||||||
|
|
||||||
function startSyncCooldown() {
|
function startSyncCooldown() {
|
||||||
syncCooldownUntilRef.current = Date.now() + SYNC_COOLDOWN_MS;
|
syncCooldownUntilRef.current = Date.now() + SYNC_COOLDOWN_MS;
|
||||||
@@ -139,6 +150,18 @@ export function DashboardPage() {
|
|||||||
}, SYNC_COOLDOWN_MS);
|
}, SYNC_COOLDOWN_MS);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function startExportCooldown() {
|
||||||
|
exportCooldownUntilRef.current = Date.now() + EXPORT_COOLDOWN_MS;
|
||||||
|
setExportCooldownActive(true);
|
||||||
|
if (exportCooldownTimerRef.current) {
|
||||||
|
clearTimeout(exportCooldownTimerRef.current);
|
||||||
|
}
|
||||||
|
exportCooldownTimerRef.current = setTimeout(() => {
|
||||||
|
setExportCooldownActive(false);
|
||||||
|
exportCooldownTimerRef.current = null;
|
||||||
|
}, EXPORT_COOLDOWN_MS);
|
||||||
|
}
|
||||||
|
|
||||||
if (!isValidOrcid(orcid)) {
|
if (!isValidOrcid(orcid)) {
|
||||||
return <Navigate to="/" replace />;
|
return <Navigate to="/" replace />;
|
||||||
}
|
}
|
||||||
@@ -190,6 +213,15 @@ export function DashboardPage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function handleExport(format, profile = DEFAULT_EXPORT_DESTINATION) {
|
async function handleExport(format, profile = DEFAULT_EXPORT_DESTINATION) {
|
||||||
|
if (
|
||||||
|
exportInFlightRef.current ||
|
||||||
|
exportingFormat ||
|
||||||
|
Date.now() < exportCooldownUntilRef.current
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
exportInFlightRef.current = true;
|
||||||
setExportingFormat(format);
|
setExportingFormat(format);
|
||||||
try {
|
try {
|
||||||
let ids;
|
let ids;
|
||||||
@@ -201,9 +233,9 @@ export function DashboardPage() {
|
|||||||
ids = newPublicationIds;
|
ids = newPublicationIds;
|
||||||
if (ids.length === 0) {
|
if (ids.length === 0) {
|
||||||
toast.info("No hay publicaciones nuevas", {
|
toast.info("No hay publicaciones nuevas", {
|
||||||
|
id: EXPORT_TOAST_ID,
|
||||||
description: "Ya has descargado todas las publicaciones de este investigador.",
|
description: "Ya has descargado todas las publicaciones de este investigador.",
|
||||||
});
|
});
|
||||||
setExportingFormat(null);
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
@@ -239,14 +271,18 @@ export function DashboardPage() {
|
|||||||
scope = "todo el investigador";
|
scope = "todo el investigador";
|
||||||
}
|
}
|
||||||
toast.success(`Exportación ${format.toUpperCase()} completada`, {
|
toast.success(`Exportación ${format.toUpperCase()} completada`, {
|
||||||
|
id: EXPORT_TOAST_ID,
|
||||||
description: scope,
|
description: scope,
|
||||||
});
|
});
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
toast.error(`Error al exportar ${format.toUpperCase()}`, {
|
toast.error(`Error al exportar ${format.toUpperCase()}`, {
|
||||||
|
id: EXPORT_TOAST_ID,
|
||||||
description: err?.message ?? "No se pudo generar el fichero.",
|
description: err?.message ?? "No se pudo generar el fichero.",
|
||||||
});
|
});
|
||||||
} finally {
|
} finally {
|
||||||
setExportingFormat(null);
|
setExportingFormat(null);
|
||||||
|
exportInFlightRef.current = false;
|
||||||
|
startExportCooldown();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -277,6 +313,7 @@ export function DashboardPage() {
|
|||||||
<ExportDropdown
|
<ExportDropdown
|
||||||
onExport={handleExport}
|
onExport={handleExport}
|
||||||
exportingFormat={exportingFormat}
|
exportingFormat={exportingFormat}
|
||||||
|
disabled={exportDisabled}
|
||||||
selectedCount={selectedIds.size}
|
selectedCount={selectedIds.size}
|
||||||
isAuthenticated={isAuthenticated}
|
isAuthenticated={isAuthenticated}
|
||||||
newPublicationsCount={newPublicationIds.length}
|
newPublicationsCount={newPublicationIds.length}
|
||||||
|
|||||||
@@ -17,12 +17,15 @@ import { downloadExport, searchResearchersBulk } from "../services/api";
|
|||||||
import {
|
import {
|
||||||
DEFAULT_EXPORT_DESTINATION,
|
DEFAULT_EXPORT_DESTINATION,
|
||||||
DEFAULT_EXPORT_PROFILE,
|
DEFAULT_EXPORT_PROFILE,
|
||||||
EXPORT_ZIP_DESTINATION,
|
resolveExportFromDestination,
|
||||||
swordXmlFilename,
|
swordXmlFilename,
|
||||||
} from "../utils/exportProfiles";
|
} from "../utils/exportProfiles";
|
||||||
import { ExportDropdown } from "../components/dashboard/ExportDropdown";
|
import { ExportDropdown } from "../components/dashboard/ExportDropdown";
|
||||||
import { useAuth } from "../contexts/AuthContext";
|
import { useAuth } from "../contexts/AuthContext";
|
||||||
|
|
||||||
|
const EXPORT_COOLDOWN_MS = 5000;
|
||||||
|
const GLOBAL_EXPORT_TOAST_ID = "group-export-global";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Group results view: shows one summary card per researcher, plus a global
|
* Group results view: shows one summary card per researcher, plus a global
|
||||||
* "download all new" (or "download everything") action in the header.
|
* "download all new" (or "download everything") action in the header.
|
||||||
@@ -44,11 +47,23 @@ export function GroupResultsPage() {
|
|||||||
const [globalExportDestination, setGlobalExportDestination] = useState(
|
const [globalExportDestination, setGlobalExportDestination] = useState(
|
||||||
DEFAULT_EXPORT_DESTINATION,
|
DEFAULT_EXPORT_DESTINATION,
|
||||||
);
|
);
|
||||||
const [swordProfile, setSwordProfile] = useState(DEFAULT_EXPORT_PROFILE);
|
|
||||||
|
|
||||||
// Track per-researcher export state (format | null)
|
// Track per-researcher export state (format | null)
|
||||||
const [cardExporting, setCardExporting] = useState({});
|
const [cardExporting, setCardExporting] = useState({});
|
||||||
|
|
||||||
|
const [globalExportCooldownActive, setGlobalExportCooldownActive] =
|
||||||
|
useState(false);
|
||||||
|
const globalExportInFlightRef = useRef(false);
|
||||||
|
const globalExportCooldownUntilRef = useRef(0);
|
||||||
|
const globalExportCooldownTimerRef = useRef(null);
|
||||||
|
|
||||||
|
const [cardExportCooldownActive, setCardExportCooldownActive] = useState(
|
||||||
|
{},
|
||||||
|
);
|
||||||
|
const cardExportInFlightRef = useRef(new Set());
|
||||||
|
const cardExportCooldownUntilRef = useRef({});
|
||||||
|
const cardExportCooldownTimerRef = useRef({});
|
||||||
|
|
||||||
const abortRef = useRef(null);
|
const abortRef = useRef(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -95,6 +110,54 @@ export function GroupResultsPage() {
|
|||||||
return () => ctrl.abort();
|
return () => ctrl.abort();
|
||||||
}, [orcidIds, navigate]);
|
}, [orcidIds, navigate]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const cardTimersObj = cardExportCooldownTimerRef.current;
|
||||||
|
return () => {
|
||||||
|
const globalTimer = globalExportCooldownTimerRef.current;
|
||||||
|
if (globalTimer) {
|
||||||
|
clearTimeout(globalTimer);
|
||||||
|
}
|
||||||
|
for (const t of Object.values(cardTimersObj)) {
|
||||||
|
clearTimeout(t);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
function startGlobalExportCooldown() {
|
||||||
|
globalExportCooldownUntilRef.current = Date.now() + EXPORT_COOLDOWN_MS;
|
||||||
|
setGlobalExportCooldownActive(true);
|
||||||
|
|
||||||
|
if (globalExportCooldownTimerRef.current) {
|
||||||
|
clearTimeout(globalExportCooldownTimerRef.current);
|
||||||
|
}
|
||||||
|
globalExportCooldownTimerRef.current = setTimeout(() => {
|
||||||
|
setGlobalExportCooldownActive(false);
|
||||||
|
globalExportCooldownUntilRef.current = 0;
|
||||||
|
globalExportCooldownTimerRef.current = null;
|
||||||
|
}, EXPORT_COOLDOWN_MS);
|
||||||
|
}
|
||||||
|
|
||||||
|
function startCardExportCooldown(orcidId) {
|
||||||
|
const until = Date.now() + EXPORT_COOLDOWN_MS;
|
||||||
|
cardExportCooldownUntilRef.current[orcidId] = until;
|
||||||
|
setCardExportCooldownActive((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[orcidId]: true,
|
||||||
|
}));
|
||||||
|
|
||||||
|
if (cardExportCooldownTimerRef.current[orcidId]) {
|
||||||
|
clearTimeout(cardExportCooldownTimerRef.current[orcidId]);
|
||||||
|
}
|
||||||
|
cardExportCooldownTimerRef.current[orcidId] = setTimeout(() => {
|
||||||
|
setCardExportCooldownActive((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[orcidId]: false,
|
||||||
|
}));
|
||||||
|
cardExportCooldownUntilRef.current[orcidId] = 0;
|
||||||
|
cardExportCooldownTimerRef.current[orcidId] = null;
|
||||||
|
}, EXPORT_COOLDOWN_MS);
|
||||||
|
}
|
||||||
|
|
||||||
// All new publication IDs across all loaded researchers
|
// All new publication IDs across all loaded researchers
|
||||||
const allNewIds = useMemo(() => {
|
const allNewIds = useMemo(() => {
|
||||||
if (!isAuthenticated) return [];
|
if (!isAuthenticated) return [];
|
||||||
@@ -110,25 +173,30 @@ export function GroupResultsPage() {
|
|||||||
[results],
|
[results],
|
||||||
);
|
);
|
||||||
|
|
||||||
function handleGlobalExportDestinationChange(nextDestination) {
|
async function handleGlobalExport(format, profile = DEFAULT_EXPORT_PROFILE) {
|
||||||
setGlobalExportDestination(nextDestination);
|
if (
|
||||||
// Keep last XML profile for card-level exports.
|
globalExportInFlightRef.current ||
|
||||||
if (nextDestination !== EXPORT_ZIP_DESTINATION) {
|
Date.now() < globalExportCooldownUntilRef.current
|
||||||
setSwordProfile(nextDestination);
|
) {
|
||||||
}
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleGlobalExport(format, profile = DEFAULT_EXPORT_PROFILE) {
|
|
||||||
const ids = isAuthenticated ? allNewIds : allIds;
|
const ids = isAuthenticated ? allNewIds : allIds;
|
||||||
if (ids.length === 0) {
|
if (ids.length === 0) {
|
||||||
toast.info(
|
toast.info(
|
||||||
isAuthenticated
|
isAuthenticated
|
||||||
? "No hay publicaciones nuevas"
|
? "No hay publicaciones nuevas"
|
||||||
: "No hay publicaciones para exportar",
|
: "No hay publicaciones para exportar",
|
||||||
{ description: "No se encontraron publicaciones en los investigadores cargados." },
|
{
|
||||||
|
id: GLOBAL_EXPORT_TOAST_ID,
|
||||||
|
description:
|
||||||
|
"No se encontraron publicaciones en los investigadores cargados.",
|
||||||
|
},
|
||||||
);
|
);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
globalExportInFlightRef.current = true;
|
||||||
setGlobalExporting(format);
|
setGlobalExporting(format);
|
||||||
try {
|
try {
|
||||||
// For bulk export we send all IDs together, passing a placeholder orcid
|
// For bulk export we send all IDs together, passing a placeholder orcid
|
||||||
@@ -151,14 +219,18 @@ export function GroupResultsPage() {
|
|||||||
URL.revokeObjectURL(objectUrl);
|
URL.revokeObjectURL(objectUrl);
|
||||||
}
|
}
|
||||||
toast.success(`Exportación ${format.toUpperCase()} completada`, {
|
toast.success(`Exportación ${format.toUpperCase()} completada`, {
|
||||||
|
id: GLOBAL_EXPORT_TOAST_ID,
|
||||||
description: `${ids.length} publicaciones exportadas.`,
|
description: `${ids.length} publicaciones exportadas.`,
|
||||||
});
|
});
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
toast.error(`Error al exportar ${format.toUpperCase()}`, {
|
toast.error(`Error al exportar ${format.toUpperCase()}`, {
|
||||||
|
id: GLOBAL_EXPORT_TOAST_ID,
|
||||||
description: err?.message ?? "No se pudo generar el fichero.",
|
description: err?.message ?? "No se pudo generar el fichero.",
|
||||||
});
|
});
|
||||||
} finally {
|
} finally {
|
||||||
setGlobalExporting(null);
|
setGlobalExporting(null);
|
||||||
|
globalExportInFlightRef.current = false;
|
||||||
|
startGlobalExportCooldown();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -169,11 +241,22 @@ export function GroupResultsPage() {
|
|||||||
totalIds,
|
totalIds,
|
||||||
profile = DEFAULT_EXPORT_PROFILE,
|
profile = DEFAULT_EXPORT_PROFILE,
|
||||||
) {
|
) {
|
||||||
const ids = isAuthenticated ? newIds : totalIds;
|
if (cardExportInFlightRef.current.has(orcidId)) {
|
||||||
if (ids.length === 0) {
|
|
||||||
toast.info("No hay publicaciones para exportar");
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
const now = Date.now();
|
||||||
|
const until = cardExportCooldownUntilRef.current[orcidId] ?? 0;
|
||||||
|
if (now < until) return;
|
||||||
|
|
||||||
|
const ids = isAuthenticated ? newIds : totalIds;
|
||||||
|
if (ids.length === 0) {
|
||||||
|
toast.info("No hay publicaciones para exportar", {
|
||||||
|
id: `group-export-card-${orcidId}`,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
cardExportInFlightRef.current.add(orcidId);
|
||||||
setCardExporting((prev) => ({ ...prev, [orcidId]: format }));
|
setCardExporting((prev) => ({ ...prev, [orcidId]: format }));
|
||||||
try {
|
try {
|
||||||
const { blob } = await downloadExport(orcidId, format, {
|
const { blob } = await downloadExport(orcidId, format, {
|
||||||
@@ -194,10 +277,12 @@ export function GroupResultsPage() {
|
|||||||
URL.revokeObjectURL(objectUrl);
|
URL.revokeObjectURL(objectUrl);
|
||||||
}
|
}
|
||||||
toast.success(`Exportación ${format.toUpperCase()} completada`, {
|
toast.success(`Exportación ${format.toUpperCase()} completada`, {
|
||||||
|
id: `group-export-card-${orcidId}`,
|
||||||
description: `${ids.length} publicaciones de ${orcidId}.`,
|
description: `${ids.length} publicaciones de ${orcidId}.`,
|
||||||
});
|
});
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
toast.error(`Error al exportar ${format.toUpperCase()}`, {
|
toast.error(`Error al exportar ${format.toUpperCase()}`, {
|
||||||
|
id: `group-export-card-${orcidId}`,
|
||||||
description: err?.message ?? "No se pudo generar el fichero.",
|
description: err?.message ?? "No se pudo generar el fichero.",
|
||||||
});
|
});
|
||||||
} finally {
|
} finally {
|
||||||
@@ -206,6 +291,8 @@ export function GroupResultsPage() {
|
|||||||
delete next[orcidId];
|
delete next[orcidId];
|
||||||
return next;
|
return next;
|
||||||
});
|
});
|
||||||
|
cardExportInFlightRef.current.delete(orcidId);
|
||||||
|
startCardExportCooldown(orcidId);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -250,11 +337,14 @@ export function GroupResultsPage() {
|
|||||||
<ExportDropdown
|
<ExportDropdown
|
||||||
onExport={handleGlobalExport}
|
onExport={handleGlobalExport}
|
||||||
exportingFormat={globalExporting}
|
exportingFormat={globalExporting}
|
||||||
|
disabled={
|
||||||
|
Boolean(globalExporting) || globalExportCooldownActive
|
||||||
|
}
|
||||||
selectedCount={0}
|
selectedCount={0}
|
||||||
isAuthenticated={isAuthenticated}
|
isAuthenticated={isAuthenticated}
|
||||||
newPublicationsCount={allNewIds.length}
|
newPublicationsCount={allNewIds.length}
|
||||||
exportDestination={globalExportDestination}
|
exportDestination={globalExportDestination}
|
||||||
onExportDestinationChange={handleGlobalExportDestinationChange}
|
onExportDestinationChange={setGlobalExportDestination}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -281,15 +371,22 @@ export function GroupResultsPage() {
|
|||||||
bundle={bundle}
|
bundle={bundle}
|
||||||
isAuthenticated={isAuthenticated}
|
isAuthenticated={isAuthenticated}
|
||||||
exporting={cardExporting[bundle.researcher?.orcid_id] ?? null}
|
exporting={cardExporting[bundle.researcher?.orcid_id] ?? null}
|
||||||
onExport={(fmt, newIds, totalIds) =>
|
exportCooldownActive={
|
||||||
|
cardExportCooldownActive[bundle.researcher?.orcid_id] ??
|
||||||
|
false
|
||||||
|
}
|
||||||
|
onExport={(newIds, totalIds) => {
|
||||||
|
const { format, profile } = resolveExportFromDestination(
|
||||||
|
globalExportDestination,
|
||||||
|
);
|
||||||
handleCardExport(
|
handleCardExport(
|
||||||
bundle.researcher?.orcid_id,
|
bundle.researcher?.orcid_id,
|
||||||
fmt,
|
format,
|
||||||
newIds,
|
newIds,
|
||||||
totalIds,
|
totalIds,
|
||||||
swordProfile,
|
profile ?? DEFAULT_EXPORT_PROFILE,
|
||||||
)
|
);
|
||||||
}
|
}}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@@ -349,6 +446,7 @@ function ResearcherResultCard({
|
|||||||
bundle,
|
bundle,
|
||||||
isAuthenticated,
|
isAuthenticated,
|
||||||
exporting,
|
exporting,
|
||||||
|
exportCooldownActive,
|
||||||
onExport,
|
onExport,
|
||||||
}) {
|
}) {
|
||||||
const researcher = bundle.researcher ?? {};
|
const researcher = bundle.researcher ?? {};
|
||||||
@@ -419,60 +517,54 @@ function ResearcherResultCard({
|
|||||||
>
|
>
|
||||||
Ver detalle
|
Ver detalle
|
||||||
</Link>
|
</Link>
|
||||||
<ExportFormatMenu
|
<CardExportButton
|
||||||
onExport={(fmt) => onExport(fmt, newIds, allPubIds)}
|
onClick={() => onExport(newIds, allPubIds)}
|
||||||
exporting={exporting}
|
exporting={exporting}
|
||||||
isAuthenticated={isAuthenticated}
|
isAuthenticated={isAuthenticated}
|
||||||
hasNew={hasNew}
|
hasNew={hasNew}
|
||||||
newCount={newCount}
|
newCount={newCount}
|
||||||
totalCount={totalRecords}
|
totalCount={totalRecords}
|
||||||
|
exportCooldownActive={exportCooldownActive}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─────────────────────── Inline export format picker ─────────────────── */
|
/* ─────────────────────── Per-card download button ────────────────────── */
|
||||||
|
|
||||||
function ExportFormatMenu({
|
function CardExportButton({
|
||||||
onExport,
|
onClick,
|
||||||
exporting,
|
exporting,
|
||||||
isAuthenticated,
|
isAuthenticated,
|
||||||
hasNew,
|
hasNew,
|
||||||
newCount,
|
newCount,
|
||||||
totalCount,
|
totalCount,
|
||||||
|
exportCooldownActive,
|
||||||
}) {
|
}) {
|
||||||
const [open, setOpen] = useState(false);
|
|
||||||
const ref = useRef(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
function handleClick(e) {
|
|
||||||
if (ref.current && !ref.current.contains(e.target)) setOpen(false);
|
|
||||||
}
|
|
||||||
document.addEventListener("mousedown", handleClick);
|
|
||||||
return () => document.removeEventListener("mousedown", handleClick);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const isBusy = Boolean(exporting);
|
const isBusy = Boolean(exporting);
|
||||||
const disabled =
|
const disabled =
|
||||||
isBusy || (isAuthenticated && !hasNew && totalCount > 0 && newCount === 0);
|
isBusy ||
|
||||||
|
exportCooldownActive ||
|
||||||
|
(isAuthenticated && !hasNew && totalCount > 0 && newCount === 0);
|
||||||
|
|
||||||
let label;
|
let label;
|
||||||
if (isBusy) {
|
if (isBusy) {
|
||||||
label = `Exportando ${exporting.toUpperCase()}...`;
|
label = `Descargando ${exporting.toUpperCase()}...`;
|
||||||
|
} else if (exportCooldownActive) {
|
||||||
|
label = "Espera un momento...";
|
||||||
} else if (isAuthenticated) {
|
} else if (isAuthenticated) {
|
||||||
label = hasNew ? `Nuevo (${newCount})` : "Descargado";
|
label = hasNew ? `Descargar (${newCount})` : "Todo descargado";
|
||||||
} else {
|
} else {
|
||||||
label = `Todo (${totalCount})`;
|
label = `Descargar (${totalCount})`;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative" ref={ref}>
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => setOpen((o) => !o)}
|
onClick={onClick}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
className="inline-flex items-center gap-1.5 rounded-lg border border-surface-border-strong bg-surface-primary px-3 py-2 text-[13px] font-medium text-ink-primary transition-colors enabled:hover:bg-surface-secondary disabled:cursor-not-allowed disabled:opacity-60"
|
className="inline-flex flex-1 items-center justify-center gap-1.5 rounded-lg border border-surface-border-strong bg-surface-primary px-3 py-2 text-[13px] font-medium text-ink-primary transition-colors enabled:hover:bg-surface-secondary disabled:cursor-not-allowed disabled:opacity-60 sm:flex-none"
|
||||||
>
|
>
|
||||||
{isBusy ? (
|
{isBusy ? (
|
||||||
<Spinner size={13} />
|
<Spinner size={13} />
|
||||||
@@ -483,28 +575,6 @@ function ExportFormatMenu({
|
|||||||
)}
|
)}
|
||||||
{label}
|
{label}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{open && (
|
|
||||||
<div className="absolute right-0 top-[calc(100%+4px)] z-50 min-w-[160px] overflow-hidden rounded-xl border border-surface-border-strong bg-surface-primary shadow-lg">
|
|
||||||
{["xml", "zip"].map((fmt, idx) => (
|
|
||||||
<button
|
|
||||||
key={fmt}
|
|
||||||
type="button"
|
|
||||||
onClick={() => {
|
|
||||||
setOpen(false);
|
|
||||||
onExport(fmt);
|
|
||||||
}}
|
|
||||||
className={`flex w-full items-center gap-2 px-3 py-2.5 text-left text-[13px] font-medium text-ink-primary transition-colors hover:bg-surface-secondary ${
|
|
||||||
idx === 0 ? "border-b border-surface-border/60" : ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<DownloadIcon size={13} />
|
|
||||||
{fmt.toUpperCase()}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user