132 lines
4.6 KiB
TypeScript
132 lines
4.6 KiB
TypeScript
import React, { useState } from 'react'
|
||
import { Button, Input, Dialog } from '../ui'
|
||
import { FaFileAlt } from 'react-icons/fa';
|
||
import { ReportTemplateDto } from '@/proxy/reports/models'
|
||
|
||
interface ReportGeneratorProps {
|
||
isOpen: boolean
|
||
onClose: () => void
|
||
template: ReportTemplateDto | null
|
||
onGenerate: (templateId: string, parameters: Record<string, string>) => Promise<string | null> // Rapor ID'si döndürmek için (async)
|
||
}
|
||
|
||
export const ReportGenerator: React.FC<ReportGeneratorProps> = ({
|
||
isOpen,
|
||
onClose,
|
||
template,
|
||
onGenerate,
|
||
}) => {
|
||
const [parameterValues, setParameterValues] = useState<Record<string, string>>({})
|
||
const [isGenerating, setIsGenerating] = useState(false)
|
||
// const [showPrintPreview, setShowPrintPreview] = useState(false);
|
||
|
||
React.useEffect(() => {
|
||
if (template && isOpen) {
|
||
const initialValues: Record<string, string> = {}
|
||
template.parameters.forEach((param) => {
|
||
initialValues[param.name] = param.defaultValue || ''
|
||
})
|
||
setParameterValues(initialValues)
|
||
}
|
||
}, [template, isOpen])
|
||
|
||
const handleParameterChange = (paramName: string, value: string) => {
|
||
setParameterValues((prev) => ({
|
||
...prev,
|
||
[paramName]: value,
|
||
}))
|
||
}
|
||
|
||
const handleGenerateAndShow = async () => {
|
||
if (!template) return
|
||
|
||
setIsGenerating(true)
|
||
try {
|
||
// Rapor oluştur ve ID'yi al
|
||
const reportId = await onGenerate(template.id, parameterValues)
|
||
|
||
if (reportId) {
|
||
// Yeni sekmede rapor URL'sini aç
|
||
const reportUrl = `/admin/reports/${reportId}`
|
||
window.open(reportUrl, '_blank')
|
||
onClose() // Modal'ı kapat
|
||
}
|
||
} catch (error) {
|
||
console.error('Error generating report:', error)
|
||
// Handle error - could show toast notification
|
||
} finally {
|
||
setIsGenerating(false)
|
||
}
|
||
}
|
||
|
||
if (!template) return null
|
||
|
||
const isValid = template.parameters.every(
|
||
(param) =>
|
||
!param.required || (parameterValues[param.name] && parameterValues[param.name].trim()),
|
||
)
|
||
|
||
return (
|
||
<>
|
||
<Dialog isOpen={isOpen} onClose={onClose} width="60%">
|
||
<h5 className="mb-4">{`${template.name} - Rapor Parametreleri`}</h5>
|
||
<div className="space-y-6">
|
||
<div className="bg-gray-50 p-4 rounded-lg">
|
||
<h3 className="font-medium text-gray-900 mb-2">{template.name}</h3>
|
||
<p className="text-gray-600 text-sm">{template.description}</p>
|
||
<div className="flex items-center mt-2 space-x-2">
|
||
<span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
|
||
{template.categoryName}
|
||
</span>
|
||
{template.tags.map((tag) => (
|
||
<span key={tag} className="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded">
|
||
{tag}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{template.parameters.length > 0 ? (
|
||
<div className="space-y-4">
|
||
<h4 className="font-medium text-gray-900">Parametre Değerleri</h4>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
{template.parameters.map((param) => (
|
||
<Input
|
||
key={param.id}
|
||
type={param.type}
|
||
value={parameterValues[param.name] || ''}
|
||
onChange={(e) => handleParameterChange(param.name, e.target.value)}
|
||
placeholder={`${param.name} ${param.required ? '*' : ''}`}
|
||
title={param.description}
|
||
/>
|
||
))}
|
||
</div>
|
||
{template.parameters.some((p) => p.required) && (
|
||
<p className="text-sm text-gray-500">* Zorunlu alanlar</p>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<div className="py-8 text-gray-500">
|
||
<FaFileAlt className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
||
<p>Bu şablon için parametre tanımlanmamış.</p>
|
||
<p className="text-sm">Direkt rapor oluşturabilirsiniz.</p>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex justify-end space-x-3">
|
||
<Button onClick={onClose} disabled={isGenerating}>
|
||
İptal
|
||
</Button>
|
||
<Button variant="solid" onClick={handleGenerateAndShow} disabled={!isValid || isGenerating}
|
||
className="bg-blue-600 hover:bg-blue-700 font-medium px-2 sm:px-3 py-1.5 rounded text-xs flex items-center gap-1"
|
||
|
||
>
|
||
<FaFileAlt className="h-4 w-4 mr-2" />
|
||
{isGenerating ? 'Oluşturuluyor...' : 'Rapor Oluştur'}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Dialog>
|
||
</>
|
||
)
|
||
}
|