79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
import { parseExcelFile } from '@/services/fileApiSevice'
|
||
import { Template } from '@/types/template'
|
||
import React, { useState } from 'react'
|
||
import { ExcelUploadPanel } from './ExcelUploadPanel'
|
||
import { FormattingToolbar } from './FormattingToolbar'
|
||
import { HeaderBar } from './HeaderBar'
|
||
import { SpreadsheetViewer } from './SpreadsheetViewer'
|
||
|
||
interface TemplateEditorProps {
|
||
template: Template
|
||
onBack: () => void
|
||
}
|
||
|
||
export const TemplateEditor: React.FC<TemplateEditorProps> = ({
|
||
template,
|
||
onBack,
|
||
}) => {
|
||
const [editedTemplate, setEditedTemplate] = useState(template)
|
||
const [excelData, setExcelData] = useState<Record<string, any>>(
|
||
template.excelData || {}
|
||
)
|
||
const [isLoading, setIsLoading] = useState(false)
|
||
const [dataVersion, setDataVersion] = useState(0)
|
||
|
||
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const file = e.target.files?.[0]
|
||
if (!file) return
|
||
setIsLoading(true)
|
||
try {
|
||
const { fileId, data, mergedCells } = await parseExcelFile(
|
||
file,
|
||
template.id
|
||
)
|
||
setExcelData(data)
|
||
|
||
const updatedTemplate = {
|
||
...template,
|
||
excelFile: file,
|
||
excelData: data,
|
||
mergedCells,
|
||
updatedAt: new Date(),
|
||
}
|
||
|
||
setEditedTemplate(updatedTemplate)
|
||
setDataVersion(v => v + 1)
|
||
|
||
console.log('✅ Файл загружен с ID:', fileId)
|
||
} catch (err) {
|
||
console.error(err)
|
||
alert('Ошибка при загрузке Excel файла на сервер')
|
||
} finally {
|
||
setIsLoading(false)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="flex h-screen flex-col bg-background">
|
||
<HeaderBar template={editedTemplate} onBack={onBack} />
|
||
<div className="flex-shrink-0 border-b bg-muted/30 px-4 py-2">
|
||
<div className="flex items-center justify-between">
|
||
<FormattingToolbar />
|
||
<ExcelUploadPanel
|
||
fileName={editedTemplate.excelFile?.name}
|
||
isLoading={isLoading}
|
||
onUploadClick={() => {}}
|
||
onFileChange={handleFileChange}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<SpreadsheetViewer
|
||
data={excelData}
|
||
mergedCells={editedTemplate.mergedCells || []}
|
||
dataVersion={dataVersion}
|
||
templateId={editedTemplate.id}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|