96
spa/src/components/import/import-wizard.tsx
Normal file
96
spa/src/components/import/import-wizard.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
import { useState } from "react"
|
||||
import type { ImportResultResponse } from "@/api/schema"
|
||||
import { WizardUpload } from "./wizard-upload"
|
||||
import { WizardMapping } from "./wizard-mapping"
|
||||
import { WizardPreview } from "./wizard-preview"
|
||||
import { WizardResult } from "./wizard-result"
|
||||
|
||||
export type ColumnMapping = {
|
||||
date: number | null
|
||||
time: number | null
|
||||
mood: number | null
|
||||
activities: number | null
|
||||
note: number | null
|
||||
}
|
||||
|
||||
export type ParsedFile = {
|
||||
headers: string[]
|
||||
rows: string[][]
|
||||
delimiter: string
|
||||
}
|
||||
|
||||
export function ImportWizard() {
|
||||
const [step, setStep] = useState(0)
|
||||
const [file, setFile] = useState<File | null>(null)
|
||||
const [parsed, setParsed] = useState<ParsedFile | null>(null)
|
||||
const [mapping, setMapping] = useState<ColumnMapping>({
|
||||
date: null,
|
||||
time: null,
|
||||
mood: null,
|
||||
activities: null,
|
||||
note: null,
|
||||
})
|
||||
const [result, setResult] = useState<ImportResultResponse | null>(null)
|
||||
|
||||
const handleFileParsed = (f: File, data: ParsedFile) => {
|
||||
setFile(f)
|
||||
setParsed(data)
|
||||
autoDetectMapping(data.headers)
|
||||
setStep(1)
|
||||
}
|
||||
|
||||
const autoDetectMapping = (headers: string[]) => {
|
||||
const lower = headers.map((h) => h.toLowerCase())
|
||||
setMapping({
|
||||
date: lower.findIndex((h) => h.includes("date") || h === "full_date"),
|
||||
time: lower.findIndex((h) => h.includes("time")),
|
||||
mood: lower.findIndex((h) => h.includes("mood") || h.includes("feeling")),
|
||||
activities: lower.findIndex(
|
||||
(h) => h.includes("activit") || h.includes("tag")
|
||||
),
|
||||
note: lower.findIndex((h) => h.includes("note") || h.includes("comment")),
|
||||
})
|
||||
}
|
||||
|
||||
const handleImportDone = (res: ImportResultResponse) => {
|
||||
setResult(res)
|
||||
setStep(3)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex gap-1">
|
||||
{[0, 1, 2, 3].map((s) => (
|
||||
<div
|
||||
key={s}
|
||||
className={`h-1 flex-1 rounded-full ${s <= step ? "bg-primary" : "bg-muted"}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{step === 0 && <WizardUpload onParsed={handleFileParsed} />}
|
||||
|
||||
{step === 1 && parsed && (
|
||||
<WizardMapping
|
||||
headers={parsed.headers}
|
||||
mapping={mapping}
|
||||
onChange={setMapping}
|
||||
onNext={() => setStep(2)}
|
||||
onBack={() => setStep(0)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{step === 2 && parsed && file && (
|
||||
<WizardPreview
|
||||
file={file}
|
||||
parsed={parsed}
|
||||
mapping={mapping}
|
||||
onDone={handleImportDone}
|
||||
onBack={() => setStep(1)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{step === 3 && result && <WizardResult result={result} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
101
spa/src/components/import/wizard-mapping.tsx
Normal file
101
spa/src/components/import/wizard-mapping.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
import { ArrowLeft } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import type { ColumnMapping } from "./import-wizard"
|
||||
|
||||
const DOMAIN_FIELDS = [
|
||||
{ value: "-1", label: "Skip" },
|
||||
{ value: "date", label: "Date" },
|
||||
{ value: "time", label: "Time" },
|
||||
{ value: "mood", label: "Mood" },
|
||||
{ value: "activities", label: "Activities" },
|
||||
{ value: "note", label: "Note" },
|
||||
]
|
||||
|
||||
interface WizardMappingProps {
|
||||
headers: string[]
|
||||
mapping: ColumnMapping
|
||||
onChange: (mapping: ColumnMapping) => void
|
||||
onNext: () => void
|
||||
onBack: () => void
|
||||
}
|
||||
|
||||
export function WizardMapping({
|
||||
headers,
|
||||
mapping,
|
||||
onChange,
|
||||
onNext,
|
||||
onBack,
|
||||
}: WizardMappingProps) {
|
||||
const setField = (field: keyof ColumnMapping, colIndex: number) => {
|
||||
const newMapping = { ...mapping }
|
||||
for (const key of Object.keys(newMapping) as (keyof ColumnMapping)[]) {
|
||||
if (newMapping[key] === colIndex) newMapping[key] = null
|
||||
}
|
||||
if (colIndex >= 0) newMapping[field] = colIndex
|
||||
onChange(newMapping)
|
||||
}
|
||||
|
||||
const getFieldForColumn = (colIndex: number): string => {
|
||||
for (const [field, idx] of Object.entries(mapping)) {
|
||||
if (idx === colIndex) return field
|
||||
}
|
||||
return "-1"
|
||||
}
|
||||
|
||||
const hasMood = mapping.mood !== null && mapping.mood >= 0
|
||||
const hasDate = mapping.date !== null && mapping.date >= 0
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Button variant="ghost" size="icon" onClick={onBack}>
|
||||
<ArrowLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<h2 className="text-lg font-bold">Map columns</h2>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm">
|
||||
Assign each column to a field
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-3">
|
||||
{headers.map((header, i) => (
|
||||
<div key={i} className="flex items-center justify-between gap-3">
|
||||
<span className="min-w-0 truncate text-sm font-medium">
|
||||
{header}
|
||||
</span>
|
||||
<select
|
||||
value={getFieldForColumn(i)}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value
|
||||
if (val === "-1") {
|
||||
const current = getFieldForColumn(i)
|
||||
if (current !== "-1") {
|
||||
onChange({ ...mapping, [current]: null })
|
||||
}
|
||||
} else {
|
||||
setField(val as keyof ColumnMapping, i)
|
||||
}
|
||||
}}
|
||||
className="h-9 w-32 shrink-0 rounded-md border bg-transparent px-2 text-sm"
|
||||
>
|
||||
{DOMAIN_FIELDS.map((f) => (
|
||||
<option key={f.value} value={f.value}>
|
||||
{f.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Button onClick={onNext} disabled={!hasMood || !hasDate}>
|
||||
{!hasMood || !hasDate ? "Map at least Date and Mood" : "Preview import"}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
99
spa/src/components/import/wizard-preview.tsx
Normal file
99
spa/src/components/import/wizard-preview.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
import { ArrowLeft } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { MoodBadge } from "@/components/mood/mood-badge"
|
||||
import { useImport } from "@/hooks/use-import-export"
|
||||
import type { ImportResultResponse } from "@/api/schema"
|
||||
import type { ColumnMapping, ParsedFile } from "./import-wizard"
|
||||
|
||||
interface WizardPreviewProps {
|
||||
file: File
|
||||
parsed: ParsedFile
|
||||
mapping: ColumnMapping
|
||||
onDone: (result: ImportResultResponse) => void
|
||||
onBack: () => void
|
||||
}
|
||||
|
||||
export function WizardPreview({
|
||||
file,
|
||||
parsed,
|
||||
mapping,
|
||||
onDone,
|
||||
onBack,
|
||||
}: WizardPreviewProps) {
|
||||
const importData = useImport()
|
||||
|
||||
const preview = parsed.rows.slice(0, 5).map((row) => ({
|
||||
date: mapping.date !== null ? (row[mapping.date] ?? "") : "",
|
||||
time: mapping.time !== null ? (row[mapping.time] ?? "") : "",
|
||||
mood: mapping.mood !== null ? (row[mapping.mood] ?? "") : "",
|
||||
activities:
|
||||
mapping.activities !== null ? (row[mapping.activities] ?? "") : "",
|
||||
note: mapping.note !== null ? (row[mapping.note] ?? "") : "",
|
||||
}))
|
||||
|
||||
const moodValue = (mood: string): number => {
|
||||
const num = parseInt(mood)
|
||||
if (num >= 1 && num <= 5) return num
|
||||
const map: Record<string, number> = {
|
||||
awful: 1,
|
||||
bad: 2,
|
||||
meh: 3,
|
||||
good: 4,
|
||||
rad: 5,
|
||||
}
|
||||
return map[mood.toLowerCase()] ?? 3
|
||||
}
|
||||
|
||||
const handleImport = () => {
|
||||
importData.mutate(file, {
|
||||
onSuccess: (result) => onDone(result),
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Button variant="ghost" size="icon" onClick={onBack}>
|
||||
<ArrowLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<h2 className="text-lg font-bold">Preview</h2>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm">First {preview.length} rows</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-3">
|
||||
{preview.map((row, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-start gap-3 rounded-lg border p-3 text-sm"
|
||||
>
|
||||
<MoodBadge value={moodValue(row.mood)} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="font-medium">
|
||||
{row.date} {row.time}
|
||||
</p>
|
||||
{row.activities && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{row.activities}
|
||||
</p>
|
||||
)}
|
||||
{row.note && (
|
||||
<p className="mt-1 line-clamp-1 text-xs text-muted-foreground">
|
||||
{row.note}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Button onClick={handleImport} disabled={importData.isPending}>
|
||||
{importData.isPending ? "Importing..." : "Confirm import"}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
57
spa/src/components/import/wizard-result.tsx
Normal file
57
spa/src/components/import/wizard-result.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import { CheckCircle2, AlertCircle } from "lucide-react"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Link } from "@tanstack/react-router"
|
||||
import type { ImportResultResponse } from "@/api/schema"
|
||||
|
||||
interface WizardResultProps {
|
||||
result: ImportResultResponse
|
||||
}
|
||||
|
||||
export function WizardResult({ result }: WizardResultProps) {
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-sm">Import complete</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle2 className="h-4 w-4 text-green-500" />
|
||||
<span className="text-sm">{result.imported} entries imported</span>
|
||||
</div>
|
||||
|
||||
{result.skipped > 0 && (
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertCircle className="h-4 w-4 text-yellow-500" />
|
||||
<span className="text-sm">{result.skipped} entries skipped</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{result.errors.length > 0 && (
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-sm font-medium">Errors:</span>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{result.errors.slice(0, 5).map((err, i) => (
|
||||
<Badge key={i} variant="destructive" className="text-xs">
|
||||
{err}
|
||||
</Badge>
|
||||
))}
|
||||
{result.errors.length > 5 && (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
+{result.errors.length - 5} more
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Link to="/">
|
||||
<Button className="w-full">Go to dashboard</Button>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
86
spa/src/components/import/wizard-upload.tsx
Normal file
86
spa/src/components/import/wizard-upload.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
import { useRef } from "react"
|
||||
import { Upload } from "lucide-react"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import type { ParsedFile } from "./import-wizard"
|
||||
|
||||
interface WizardUploadProps {
|
||||
onParsed: (file: File, data: ParsedFile) => void
|
||||
}
|
||||
|
||||
export function WizardUpload({ onParsed }: WizardUploadProps) {
|
||||
const fileRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
const handleFile = (file: File) => {
|
||||
const reader = new FileReader()
|
||||
reader.onload = () => {
|
||||
const text = reader.result as string
|
||||
const parsed = parseCSV(text)
|
||||
onParsed(file, parsed)
|
||||
}
|
||||
reader.readAsText(file)
|
||||
}
|
||||
|
||||
const handleDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault()
|
||||
const file = e.dataTransfer.files[0]
|
||||
if (file) handleFile(file)
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardContent>
|
||||
<div
|
||||
onDrop={handleDrop}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
onClick={() => fileRef.current?.click()}
|
||||
className="flex cursor-pointer flex-col items-center gap-3 rounded-xl border-2 border-dashed border-muted-foreground/30 p-10 text-center"
|
||||
>
|
||||
<Upload className="h-8 w-8 text-muted-foreground" />
|
||||
<p className="text-sm font-medium">Drop your CSV file here</p>
|
||||
<p className="text-xs text-muted-foreground">or click to browse</p>
|
||||
<input
|
||||
ref={fileRef}
|
||||
type="file"
|
||||
accept=".csv,.tsv,.txt"
|
||||
className="hidden"
|
||||
onChange={(e) => {
|
||||
const file = e.target.files?.[0]
|
||||
if (file) handleFile(file)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
function parseCSV(text: string): ParsedFile {
|
||||
const lines = text.trim().split("\n")
|
||||
if (lines.length === 0) return { headers: [], rows: [], delimiter: "," }
|
||||
|
||||
const delimiter = lines[0].includes("\t") ? "\t" : ","
|
||||
const headers = parseLine(lines[0], delimiter)
|
||||
const rows = lines.slice(1, 6).map((line) => parseLine(line, delimiter))
|
||||
|
||||
return { headers, rows, delimiter }
|
||||
}
|
||||
|
||||
function parseLine(line: string, delimiter: string): string[] {
|
||||
const result: string[] = []
|
||||
let current = ""
|
||||
let inQuotes = false
|
||||
|
||||
for (const char of line) {
|
||||
if (char === '"') {
|
||||
inQuotes = !inQuotes
|
||||
} else if (char === delimiter && !inQuotes) {
|
||||
result.push(current.trim())
|
||||
current = ""
|
||||
} else {
|
||||
current += char
|
||||
}
|
||||
}
|
||||
result.push(current.trim())
|
||||
|
||||
return result
|
||||
}
|
||||
Reference in New Issue
Block a user