367 lines
11 KiB
React
367 lines
11 KiB
React
|
import { useState, useEffect, useCallback } from 'react'
|
||
|
|
import { useNavigate } from 'react-router-dom'
|
||
|
|
import { ArrowLeft, FileSpreadsheet, Loader2 } from 'lucide-react'
|
||
|
|
import { api } from '../utils/api'
|
||
|
|
|
||
|
|
/** Module mit funktionierendem Universal-Executor; Aktivität: Legacy-Import auf der Aktivitätsseite. */
|
||
|
|
const UNIVERSAL_IMPORT_IDS = new Set(['nutrition', 'weight', 'blood_pressure'])
|
||
|
|
|
||
|
|
function SampleTable({ sampleRows, columns }) {
|
||
|
|
if (!sampleRows?.length || !columns?.length) return null
|
||
|
|
const showCols = columns.slice(0, 8)
|
||
|
|
return (
|
||
|
|
<div style={{ overflowX: 'auto', marginTop: 12 }}>
|
||
|
|
<table style={{ width: '100%', fontSize: 12, borderCollapse: 'collapse' }}>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
{showCols.map((c) => (
|
||
|
|
<th
|
||
|
|
key={c}
|
||
|
|
style={{
|
||
|
|
textAlign: 'left',
|
||
|
|
padding: '8px 6px',
|
||
|
|
borderBottom: '1px solid var(--border)',
|
||
|
|
color: 'var(--text2)',
|
||
|
|
whiteSpace: 'nowrap',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{c}
|
||
|
|
</th>
|
||
|
|
))}
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{sampleRows.slice(0, 5).map((row, i) => (
|
||
|
|
<tr key={i}>
|
||
|
|
{showCols.map((c) => (
|
||
|
|
<td
|
||
|
|
key={c}
|
||
|
|
style={{
|
||
|
|
padding: '6px',
|
||
|
|
borderBottom: '1px solid var(--border)',
|
||
|
|
maxWidth: 140,
|
||
|
|
overflow: 'hidden',
|
||
|
|
textOverflow: 'ellipsis',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{row[c] ?? '—'}
|
||
|
|
</td>
|
||
|
|
))}
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function UniversalCsvImportPage() {
|
||
|
|
const navigate = useNavigate()
|
||
|
|
const [modules, setModules] = useState([])
|
||
|
|
const [moduleId, setModuleId] = useState('')
|
||
|
|
const [file, setFile] = useState(null)
|
||
|
|
const [analyzeResult, setAnalyzeResult] = useState(null)
|
||
|
|
const [mappingsList, setMappingsList] = useState({ system_templates: [], user_mappings: [] })
|
||
|
|
const [mappingId, setMappingId] = useState('')
|
||
|
|
const [loadingModules, setLoadingModules] = useState(true)
|
||
|
|
const [loadingAnalyze, setLoadingAnalyze] = useState(false)
|
||
|
|
const [loadingImport, setLoadingImport] = useState(false)
|
||
|
|
const [error, setError] = useState(null)
|
||
|
|
const [success, setSuccess] = useState(null)
|
||
|
|
|
||
|
|
const loadMappings = useCallback(async (mid) => {
|
||
|
|
if (!mid) {
|
||
|
|
setMappingsList({ system_templates: [], user_mappings: [] })
|
||
|
|
return
|
||
|
|
}
|
||
|
|
const data = await api.getCsvMappings(mid)
|
||
|
|
setMappingsList({
|
||
|
|
system_templates: data.system_templates || [],
|
||
|
|
user_mappings: data.user_mappings || [],
|
||
|
|
})
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
let cancel = false
|
||
|
|
;(async () => {
|
||
|
|
setLoadingModules(true)
|
||
|
|
setError(null)
|
||
|
|
try {
|
||
|
|
const data = await api.getCsvModules()
|
||
|
|
const list = (data.modules || []).filter((m) => UNIVERSAL_IMPORT_IDS.has(m.id))
|
||
|
|
if (!cancel) {
|
||
|
|
setModules(list)
|
||
|
|
if (list.length && !moduleId) setModuleId(list[0].id)
|
||
|
|
}
|
||
|
|
} catch (e) {
|
||
|
|
if (!cancel) setError(e.message || 'Module konnten nicht geladen werden')
|
||
|
|
} finally {
|
||
|
|
if (!cancel) setLoadingModules(false)
|
||
|
|
}
|
||
|
|
})()
|
||
|
|
return () => {
|
||
|
|
cancel = true
|
||
|
|
}
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (moduleId) {
|
||
|
|
loadMappings(moduleId)
|
||
|
|
setAnalyzeResult(null)
|
||
|
|
setMappingId('')
|
||
|
|
setSuccess(null)
|
||
|
|
}
|
||
|
|
}, [moduleId, loadMappings])
|
||
|
|
|
||
|
|
const allMappingOptions = [
|
||
|
|
...(mappingsList.system_templates || []).map((m) => ({
|
||
|
|
id: m.id,
|
||
|
|
label: `${m.name} (System)`,
|
||
|
|
isSystem: true,
|
||
|
|
})),
|
||
|
|
...(mappingsList.user_mappings || []).map((m) => ({
|
||
|
|
id: m.id,
|
||
|
|
label: m.name,
|
||
|
|
isSystem: false,
|
||
|
|
})),
|
||
|
|
]
|
||
|
|
|
||
|
|
const handleAnalyze = async () => {
|
||
|
|
if (!file || !moduleId) {
|
||
|
|
setError('Bitte Modul und Datei wählen')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
setLoadingAnalyze(true)
|
||
|
|
setError(null)
|
||
|
|
setSuccess(null)
|
||
|
|
try {
|
||
|
|
const res = await api.analyzeCsv(file, moduleId)
|
||
|
|
setAnalyzeResult(res)
|
||
|
|
const mapData = await api.getCsvMappings(moduleId)
|
||
|
|
const sys = mapData.system_templates || []
|
||
|
|
const usr = mapData.user_mappings || []
|
||
|
|
setMappingsList({ system_templates: sys, user_mappings: usr })
|
||
|
|
const options = [
|
||
|
|
...sys.map((m) => ({ id: m.id, name: m.name, isSystem: true })),
|
||
|
|
...usr.map((m) => ({ id: m.id, name: m.name, isSystem: false })),
|
||
|
|
]
|
||
|
|
const detected = res.detected_mappings || []
|
||
|
|
const best = detected[0]
|
||
|
|
let pick = options[0]?.id
|
||
|
|
if (best && (best.confidence || 0) >= 0.5 && options.some((o) => o.id === best.mapping_id)) {
|
||
|
|
pick = best.mapping_id
|
||
|
|
}
|
||
|
|
if (pick != null) setMappingId(String(pick))
|
||
|
|
else setMappingId('')
|
||
|
|
} catch (e) {
|
||
|
|
setError(e.message || 'Analyse fehlgeschlagen')
|
||
|
|
setAnalyzeResult(null)
|
||
|
|
} finally {
|
||
|
|
setLoadingAnalyze(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleImport = async () => {
|
||
|
|
if (!file || !moduleId || !mappingId) {
|
||
|
|
setError('Bitte Datei, Modul und Vorlage wählen')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
setLoadingImport(true)
|
||
|
|
setError(null)
|
||
|
|
setSuccess(null)
|
||
|
|
try {
|
||
|
|
const res = await api.importUniversalCsv(file, moduleId, Number(mappingId))
|
||
|
|
const st = res.stats || {}
|
||
|
|
setSuccess(
|
||
|
|
`Import abgeschlossen: ${st.imported ?? 0} neu, ${st.updated ?? 0} aktualisiert, ` +
|
||
|
|
`${st.skipped ?? 0} übersprungen, ${st.errors ?? 0} Zeilenfehler.`
|
||
|
|
)
|
||
|
|
} catch (e) {
|
||
|
|
setError(e.message || 'Import fehlgeschlagen')
|
||
|
|
} finally {
|
||
|
|
setLoadingImport(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="capture-page" style={{ paddingBottom: 88 }}>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => navigate(-1)}
|
||
|
|
className="btn btn-secondary"
|
||
|
|
style={{
|
||
|
|
marginBottom: 16,
|
||
|
|
display: 'inline-flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
gap: 8,
|
||
|
|
padding: '8px 12px',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<ArrowLeft size={18} /> Zurück
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<h1 className="page-title" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||
|
|
<FileSpreadsheet size={26} strokeWidth={2} />
|
||
|
|
CSV-Import
|
||
|
|
</h1>
|
||
|
|
<p style={{ fontSize: 14, color: 'var(--text2)', marginBottom: 20, lineHeight: 1.5 }}>
|
||
|
|
Bekannte Formate (FDDB, Apple Health, Omron, …) per Vorlage zuordnen und importieren.
|
||
|
|
Trainingseinheiten weiterhin unter{' '}
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="btn btn-secondary"
|
||
|
|
style={{ padding: '2px 8px', fontSize: 13 }}
|
||
|
|
onClick={() => navigate('/activity')}
|
||
|
|
>
|
||
|
|
Aktivität
|
||
|
|
</button>
|
||
|
|
.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
{error && (
|
||
|
|
<div
|
||
|
|
className="card"
|
||
|
|
style={{
|
||
|
|
marginBottom: 16,
|
||
|
|
padding: 12,
|
||
|
|
borderColor: 'var(--danger)',
|
||
|
|
color: 'var(--danger)',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{error}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{success && (
|
||
|
|
<div
|
||
|
|
className="card"
|
||
|
|
style={{
|
||
|
|
marginBottom: 16,
|
||
|
|
padding: 12,
|
||
|
|
borderColor: 'var(--accent)',
|
||
|
|
color: 'var(--accent-dark)',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{success}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<div className="card" style={{ marginBottom: 16, padding: 16 }}>
|
||
|
|
<div className="form-label">1. Modul</div>
|
||
|
|
{loadingModules ? (
|
||
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--text3)' }}>
|
||
|
|
<Loader2 size={18} style={{ animation: 'spin 0.7s linear infinite' }} /> Lade …
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<select
|
||
|
|
className="form-input"
|
||
|
|
value={moduleId}
|
||
|
|
onChange={(e) => setModuleId(e.target.value)}
|
||
|
|
style={{ width: '100%', marginTop: 8 }}
|
||
|
|
>
|
||
|
|
{modules.map((m) => (
|
||
|
|
<option key={m.id} value={m.id}>
|
||
|
|
{m.id === 'nutrition'
|
||
|
|
? 'Ernährung'
|
||
|
|
: m.id === 'weight'
|
||
|
|
? 'Gewicht'
|
||
|
|
: m.id === 'blood_pressure'
|
||
|
|
? 'Blutdruck'
|
||
|
|
: m.id}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="card" style={{ marginBottom: 16, padding: 16 }}>
|
||
|
|
<div className="form-label">2. CSV-Datei</div>
|
||
|
|
<input
|
||
|
|
type="file"
|
||
|
|
accept=".csv,text/csv"
|
||
|
|
className="form-input"
|
||
|
|
style={{ marginTop: 8, width: '100%' }}
|
||
|
|
onChange={(e) => {
|
||
|
|
setFile(e.target.files?.[0] || null)
|
||
|
|
setAnalyzeResult(null)
|
||
|
|
setSuccess(null)
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="btn btn-primary"
|
||
|
|
style={{ marginTop: 12, width: '100%' }}
|
||
|
|
disabled={!file || !moduleId || loadingAnalyze}
|
||
|
|
onClick={handleAnalyze}
|
||
|
|
>
|
||
|
|
{loadingAnalyze ? (
|
||
|
|
<>
|
||
|
|
<Loader2 size={18} style={{ marginRight: 8, animation: 'spin 0.7s linear infinite' }} /> Analysiere …
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
'Vorschau und Erkennung'
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{analyzeResult && (
|
||
|
|
<div className="card" style={{ marginBottom: 16, padding: 16 }}>
|
||
|
|
<div className="form-label">3. Vorschau</div>
|
||
|
|
<div style={{ fontSize: 13, color: 'var(--text2)', marginTop: 8 }}>
|
||
|
|
Trennzeichen: <strong>{analyzeResult.delimiter}</strong> · Spalten: {analyzeResult.columns?.length ?? 0}
|
||
|
|
</div>
|
||
|
|
{(analyzeResult.detected_mappings || []).length > 0 && (
|
||
|
|
<div style={{ marginTop: 10, fontSize: 13 }}>
|
||
|
|
<strong>Erkannte Vorlagen:</strong>
|
||
|
|
<ul style={{ margin: '6px 0 0 18px', padding: 0 }}>
|
||
|
|
{analyzeResult.detected_mappings.map((d) => (
|
||
|
|
<li key={d.mapping_id}>
|
||
|
|
{d.mapping_name} · Übereinstimmung ca. {Math.round((d.confidence || 0) * 100)} %
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<SampleTable sampleRows={analyzeResult.sample_rows} columns={analyzeResult.columns} />
|
||
|
|
|
||
|
|
<div className="form-label" style={{ marginTop: 16 }}>
|
||
|
|
Import-Vorlage
|
||
|
|
</div>
|
||
|
|
<select
|
||
|
|
className="form-input"
|
||
|
|
value={mappingId}
|
||
|
|
onChange={(e) => setMappingId(e.target.value)}
|
||
|
|
style={{ width: '100%', marginTop: 8 }}
|
||
|
|
>
|
||
|
|
{allMappingOptions.length === 0 ? (
|
||
|
|
<option value="">Keine Vorlage für dieses Modul</option>
|
||
|
|
) : (
|
||
|
|
allMappingOptions.map((o) => (
|
||
|
|
<option key={o.id} value={o.id}>
|
||
|
|
{o.label}
|
||
|
|
</option>
|
||
|
|
))
|
||
|
|
)}
|
||
|
|
</select>
|
||
|
|
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="btn btn-primary"
|
||
|
|
style={{ marginTop: 16, width: '100%' }}
|
||
|
|
disabled={!file || !mappingId || loadingImport}
|
||
|
|
onClick={handleImport}
|
||
|
|
>
|
||
|
|
{loadingImport ? (
|
||
|
|
<>
|
||
|
|
<Loader2 size={18} style={{ marginRight: 8, animation: 'spin 0.7s linear infinite' }} /> Import läuft …
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
'Import starten'
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|