mirror of
https://github.com/yu-i-i/overleaf-cep.git
synced 2026-11-12 13:13:45 +01:00
517 lines
18 KiB
TypeScript
517 lines
18 KiB
TypeScript
/**
|
|
* Zotero picker modal (P4 — BIB_ORCID_TEMPLATES_PLAN.md).
|
|
*
|
|
* Same UX as the ORCID picker, source = the user's OWN linked Zotero:
|
|
* step 'library': pick a library (main library or a group) + an
|
|
* optional collection + Browse
|
|
* step 'items': list items (newest first), select some, Import
|
|
*
|
|
* The modal ends by calling `onInsert(bibtexText)` with the combined
|
|
* BibTeX of the selected items (one combined Zotero request server-side;
|
|
* the host surface parses and writes it through its own guarded import
|
|
* path). "Zotero not linked" (409) renders a link action to the OAuth
|
|
* flow.
|
|
*/
|
|
import { useCallback, useEffect, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import {
|
|
OLModal,
|
|
OLModalHeader,
|
|
OLModalTitle,
|
|
OLModalBody,
|
|
OLModalFooter,
|
|
} from '@/shared/components/ol/ol-modal'
|
|
import OLButton from '@/shared/components/ol/ol-button'
|
|
import OLFormGroup from '@/shared/components/ol/ol-form-group'
|
|
import OLFormLabel from '@/shared/components/ol/ol-form-label'
|
|
import OLFormSelect from '@/shared/components/ol/ol-form-select'
|
|
import OLFormCheckbox from '@/shared/components/ol/ol-form-checkbox'
|
|
import Notification from '@/shared/components/notification'
|
|
import { getJSON } from '@/infrastructure/fetch-json'
|
|
|
|
type Library = { id: string; kind: 'user' | 'group'; name: string }
|
|
type Collection = { key: string; name: string }
|
|
type ZItem = {
|
|
key: string
|
|
title: string
|
|
itemType: string
|
|
date: string
|
|
firstCreator: string
|
|
}
|
|
|
|
type ZoteroPickerModalProps = {
|
|
show: boolean
|
|
handleHide: () => void
|
|
/** Host writes these BibTeX entries (raw text, combined). */
|
|
onInsert: (bibtexText: string) => void
|
|
}
|
|
|
|
type Step = 'library' | 'items'
|
|
|
|
function errorMessage(err: unknown, fallback: string) {
|
|
if (err && typeof err === 'object') {
|
|
const data = (err as { data?: { message?: string } }).data
|
|
if (data?.message) return data.message === 'zotero_not_linked' ? 'zotero_not_linked' : data.message
|
|
if ((err as { message?: string }).message) {
|
|
return (err as { message: string }).message
|
|
}
|
|
}
|
|
return fallback
|
|
}
|
|
|
|
const ITEMS_PER_PAGE = 100
|
|
|
|
export default function ZoteroPickerModal({
|
|
show,
|
|
handleHide,
|
|
onInsert,
|
|
}: ZoteroPickerModalProps) {
|
|
const { t } = useTranslation()
|
|
|
|
const [step, setStep] = useState<Step>('library')
|
|
const [notLinked, setNotLinked] = useState(false)
|
|
|
|
// -- library step --
|
|
const [loadingLibraries, setLoadingLibraries] = useState(false)
|
|
const [libraries, setLibraries] = useState<Library[]>([])
|
|
const [libraryIdx, setLibraryIdx] = useState(0)
|
|
const [collections, setCollections] = useState<Collection[]>([])
|
|
const [collectionsLoading, setCollectionsLoading] = useState(false)
|
|
const [collectionKey, setCollectionKey] = useState('')
|
|
const [libraryError, setLibraryError] = useState<string | null>(null)
|
|
|
|
// -- items step --
|
|
const [items, setItems] = useState<ZItem[]>([])
|
|
const [total, setTotal] = useState(0)
|
|
const [itemsLoading, setItemsLoading] = useState(false)
|
|
const [itemsError, setItemsError] = useState<string | null>(null)
|
|
const [selectedKeys, setSelectedKeys] = useState<Set<string>>(new Set())
|
|
|
|
// -- import state --
|
|
const [importing, setImporting] = useState(false)
|
|
const [importError, setImportError] = useState<string | null>(null)
|
|
|
|
const currentLibrary = libraries[libraryIdx]
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Reset when the modal closes
|
|
// -----------------------------------------------------------------------
|
|
const handleClose = useCallback(() => {
|
|
setStep('library')
|
|
setNotLinked(false)
|
|
setLibraries([])
|
|
setLibraryIdx(0)
|
|
setCollections([])
|
|
setCollectionKey('')
|
|
setLibraryError(null)
|
|
setItems([])
|
|
setTotal(0)
|
|
setItemsError(null)
|
|
setSelectedKeys(new Set())
|
|
setImporting(false)
|
|
setImportError(null)
|
|
handleHide()
|
|
}, [handleHide])
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Load libraries when the modal opens
|
|
// -----------------------------------------------------------------------
|
|
useEffect(() => {
|
|
if (!show) return
|
|
let alive = true
|
|
setLoadingLibraries(true)
|
|
setLibraryError(null)
|
|
setNotLinked(false)
|
|
setLibraries([])
|
|
setCollections([])
|
|
setCollectionKey('')
|
|
setLibraryIdx(0)
|
|
void getJSON<Library[]>('/user/zotero/picker/libraries')
|
|
.then(data => {
|
|
if (!alive) return
|
|
const libs = Array.isArray(data) ? data : []
|
|
setLibraries(libs)
|
|
if (libs.length === 0) {
|
|
setLibraryError(t('Failed to load your Zotero libraries'))
|
|
}
|
|
})
|
|
.catch(err => {
|
|
if (!alive) return
|
|
const msg = errorMessage(err, t('Failed to load your Zotero libraries'))
|
|
if (msg === 'zotero_not_linked') setNotLinked(true)
|
|
else setLibraryError(msg)
|
|
})
|
|
.finally(() => {
|
|
if (alive) setLoadingLibraries(false)
|
|
})
|
|
return () => {
|
|
alive = false
|
|
}
|
|
}, [show, t])
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Load the collections of the selected library
|
|
// -----------------------------------------------------------------------
|
|
const loadCollections = useCallback(
|
|
(lib: Library) => {
|
|
setCollections([])
|
|
setCollectionKey('')
|
|
setCollectionsLoading(true)
|
|
const qs = new URLSearchParams({ libraryKind: lib.kind })
|
|
if (lib.kind === 'group') qs.set('library', lib.id)
|
|
void getJSON<Collection[]>(`/user/zotero/picker/collections?${qs.toString()}`)
|
|
.then(data => {
|
|
setCollections(Array.isArray(data) ? data : [])
|
|
})
|
|
.catch(err => {
|
|
const msg = errorMessage(err, null)
|
|
if (msg === 'zotero_not_linked') setNotLinked(true)
|
|
})
|
|
.finally(() => setCollectionsLoading(false))
|
|
},
|
|
[]
|
|
)
|
|
|
|
useEffect(() => {
|
|
if (show && currentLibrary) {
|
|
loadCollections(currentLibrary)
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [show, libraryIdx, libraries.length])
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Browse items
|
|
// -----------------------------------------------------------------------
|
|
const browse = useCallback(() => {
|
|
if (!currentLibrary) return
|
|
setStep('items')
|
|
setItemsError(null)
|
|
setImportError(null)
|
|
setItems([])
|
|
setSelectedKeys(new Set())
|
|
setItemsLoading(true)
|
|
const qs = new URLSearchParams({
|
|
libraryKind: currentLibrary.kind,
|
|
})
|
|
if (currentLibrary.kind === 'group') qs.set('library', currentLibrary.id)
|
|
if (collectionKey) qs.set('collection', collectionKey)
|
|
qs.set('limit', String(ITEMS_PER_PAGE))
|
|
void getJSON<{ items: ZItem[]; total: number }>(
|
|
`/user/zotero/picker/items?${qs.toString()}`
|
|
)
|
|
.then(data => {
|
|
setItems(data.items || [])
|
|
setTotal(data.total || (data.items || []).length)
|
|
})
|
|
.catch(err => {
|
|
const msg = errorMessage(err, t('Failed to load items'))
|
|
if (msg === 'zotero_not_linked') {
|
|
setNotLinked(true)
|
|
setStep('library')
|
|
} else {
|
|
setItemsError(msg)
|
|
}
|
|
})
|
|
.finally(() => setItemsLoading(false))
|
|
}, [currentLibrary, collectionKey, t])
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Selection
|
|
// -----------------------------------------------------------------------
|
|
const toggleItem = useCallback((key: string) => {
|
|
setSelectedKeys(prev => {
|
|
const next = new Set(prev)
|
|
if (next.has(key)) next.delete(key)
|
|
else next.add(key)
|
|
return next
|
|
})
|
|
}, [])
|
|
|
|
const allSelected = items.length > 0 && items.every(i => selectedKeys.has(i.key))
|
|
const toggleAll = useCallback(() => {
|
|
if (allSelected) setSelectedKeys(new Set())
|
|
else setSelectedKeys(new Set(items.map(i => i.key)))
|
|
}, [allSelected, items])
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Import
|
|
// -----------------------------------------------------------------------
|
|
const handleImport = useCallback(async () => {
|
|
if (!currentLibrary || selectedKeys.size === 0) return
|
|
setImporting(true)
|
|
setImportError(null)
|
|
try {
|
|
const qs = new URLSearchParams({
|
|
libraryKind: currentLibrary.kind,
|
|
keys: Array.from(selectedKeys).join(','),
|
|
})
|
|
if (currentLibrary.kind === 'group') qs.set('library', currentLibrary.id)
|
|
const data = await getJSON<{ bibtex: string }>(
|
|
`/user/zotero/picker/bibtex?${qs.toString()}`
|
|
)
|
|
onInsert(data.bibtex || '')
|
|
handleClose()
|
|
} catch (err) {
|
|
const msg = errorMessage(err, null)
|
|
if (msg === 'zotero_not_linked') {
|
|
setNotLinked(true)
|
|
setImportError(t('Zotero is no longer linked to your account'))
|
|
} else {
|
|
setImportError(errorMessage(err, t('Could not import from Zotero')))
|
|
}
|
|
setImporting(false)
|
|
}
|
|
}, [currentLibrary, selectedKeys, onInsert, handleClose, t])
|
|
|
|
// -----------------------------------------------------------------------
|
|
// Render
|
|
// -----------------------------------------------------------------------
|
|
return (
|
|
<OLModal show={show} onHide={handleClose} data-testid="zotero-picker-modal">
|
|
<OLModalHeader closeButton>
|
|
<OLModalTitle>
|
|
{step === 'library'
|
|
? t('Import from Zotero')
|
|
: t('Items', {
|
|
author: currentLibrary?.name || t('Zotero'),
|
|
})}
|
|
</OLModalTitle>
|
|
</OLModalHeader>
|
|
|
|
<OLModalBody>
|
|
{notLinked ? (
|
|
<>
|
|
<p>{t('Zotero is not linked to your account yet.')}</p>
|
|
<p>
|
|
{t('Link your Zotero account to import references. Create a key at ') +
|
|
(
|
|
<a
|
|
href="https://www.zotero.org/settings/keys"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
zotero.org/settings/keys
|
|
</a>
|
|
) +
|
|
t(' (library access + read access to all groups).')}
|
|
</p>
|
|
<div style={{ display: 'flex', gap: '8px' }}>
|
|
<OLButton
|
|
variant="primary"
|
|
href="/user/zotero/oauth?popup=0"
|
|
target="_blank"
|
|
>
|
|
{t('Link Zotero')}
|
|
</OLButton>
|
|
<OLButton variant="secondary" onClick={handleClose}>
|
|
{t('Cancel')}
|
|
</OLButton>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
{step === 'library' && (
|
|
<>
|
|
{libraryError && (
|
|
<Notification
|
|
type="error"
|
|
content={libraryError}
|
|
isDismissible
|
|
onDismiss={() => setLibraryError(null)}
|
|
/>
|
|
)}
|
|
{loadingLibraries && <p>{t('Loading your Zotero libraries…')}</p>}
|
|
{!loadingLibraries && libraries.length > 0 && (
|
|
<>
|
|
<OLFormGroup>
|
|
<OLFormLabel htmlFor="zot-lib-select">{t('library')}</OLFormLabel>
|
|
<OLFormSelect
|
|
id="zot-lib-select"
|
|
value={String(libraryIdx)}
|
|
onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
|
|
setLibraryIdx(Number(e.target.value) || 0)
|
|
}
|
|
>
|
|
{libraries.map((lib, i) => (
|
|
<option key={`${lib.kind}-${lib.id}`} value={String(i)}>
|
|
{lib.name}
|
|
</option>
|
|
))}
|
|
</OLFormSelect>
|
|
</OLFormGroup>
|
|
<OLFormGroup>
|
|
<OLFormLabel htmlFor="zot-coll-select">
|
|
{t('collection')} ({t('optional')})
|
|
</OLFormLabel>
|
|
<OLFormSelect
|
|
id="zot-coll-select"
|
|
value={collectionKey}
|
|
disabled={collectionsLoading}
|
|
onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
|
|
setCollectionKey(e.target.value)
|
|
}
|
|
>
|
|
<option value="">{t('All items')}</option>
|
|
{collections.map(c => (
|
|
<option key={c.key} value={c.key}>
|
|
{c.name}
|
|
</option>
|
|
))}
|
|
</OLFormSelect>
|
|
</OLFormGroup>
|
|
<OLButton
|
|
variant="primary"
|
|
onClick={browse}
|
|
>
|
|
{t('Browse items')}
|
|
</OLButton>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{step === 'items' && (
|
|
<>
|
|
<OLButton
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
setStep('library')
|
|
setItemsError(null)
|
|
setImportError(null)
|
|
}}
|
|
style={{ padding: 0, marginBottom: '8px' }}
|
|
data-testid="zot-back"
|
|
>
|
|
{t('Back to libraries')}
|
|
</OLButton>
|
|
|
|
{itemsLoading && <p>{t('Loading items…')}</p>}
|
|
|
|
{itemsError && (
|
|
<Notification
|
|
type="error"
|
|
content={itemsError}
|
|
isDismissible
|
|
onDismiss={() => setItemsError(null)}
|
|
/>
|
|
)}
|
|
{importError && (
|
|
<Notification
|
|
type="warning"
|
|
content={importError}
|
|
isDismissible
|
|
onDismiss={() => setImportError(null)}
|
|
/>
|
|
)}
|
|
|
|
{!itemsLoading && items.length > 0 && (
|
|
<>
|
|
<p style={{ fontSize: '12px', color: 'var(--text-secondary, #666)' }}>
|
|
{t('Showing __shown__ of __total__ (newest first)', {
|
|
shown: items.length,
|
|
total,
|
|
})}
|
|
</p>
|
|
<div style={{ marginBottom: '8px' }}>
|
|
<OLFormCheckbox
|
|
checked={allSelected}
|
|
onChange={toggleAll}
|
|
label={t('Select all (__count__)', { count: items.length })}
|
|
/>
|
|
</div>
|
|
<div
|
|
style={{
|
|
maxHeight: '350px',
|
|
overflowY: 'auto',
|
|
border: '1px solid var(--border-color)',
|
|
borderRadius: '4px',
|
|
}}
|
|
data-testid="zot-items"
|
|
>
|
|
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
|
<thead>
|
|
<tr
|
|
style={{
|
|
borderBottom: '1px solid var(--border-color)',
|
|
backgroundColor: 'var(--bg-light-secondary)',
|
|
}}
|
|
>
|
|
<th style={{ padding: '6px 10px', width: '30px' }} />
|
|
<th style={{ padding: '6px 10px', textAlign: 'left' }}>
|
|
{t('Title')}
|
|
</th>
|
|
<th style={{ padding: '6px 10px', textAlign: 'left' }}>
|
|
{t('Type')}
|
|
</th>
|
|
<th style={{ padding: '6px 10px', textAlign: 'left', width: '70px' }}>
|
|
{t('Year')}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{items.map((w, i) => (
|
|
<tr
|
|
key={w.key || i}
|
|
style={{
|
|
borderBottom: '1px solid var(--border-color)',
|
|
}}
|
|
>
|
|
<td style={{ padding: '6px 10px' }}>
|
|
<OLFormCheckbox
|
|
checked={selectedKeys.has(w.key)}
|
|
onChange={() => toggleItem(w.key)}
|
|
aria-label={w.title || t('Untitled')}
|
|
/>
|
|
</td>
|
|
<td style={{ padding: '6px 10px' }}>
|
|
{w.title || t('Untitled')}
|
|
{w.firstCreator ? (
|
|
<span
|
|
style={{
|
|
fontSize: '12px',
|
|
color: 'var(--text-secondary, #666)',
|
|
}}
|
|
>
|
|
{` — ${w.firstCreator}`}
|
|
</span>
|
|
) : null}
|
|
</td>
|
|
<td style={{ padding: '6px 10px', fontSize: '12px' }}>
|
|
{w.itemType || '—'}
|
|
</td>
|
|
<td style={{ padding: '6px 10px', fontSize: '12px' }}>
|
|
{(w.date || '').slice(0, 4) || '—'}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</OLModalBody>
|
|
|
|
{step === 'items' && !notLinked && !itemsLoading && items.length > 0 && (
|
|
<OLModalFooter>
|
|
<OLButton variant="secondary" onClick={handleClose}>
|
|
{t('Cancel')}
|
|
</OLButton>
|
|
<OLButton
|
|
variant="primary"
|
|
onClick={() => void handleImport()}
|
|
disabled={selectedKeys.size === 0 || importing}
|
|
isLoading={importing}
|
|
>
|
|
{t('Import selected (__count__)', { count: selectedKeys.size })}
|
|
</OLButton>
|
|
</OLModalFooter>
|
|
)}
|
|
</OLModal>
|
|
)
|
|
}
|