437 lines
18 KiB
TypeScript
437 lines
18 KiB
TypeScript
import React, { useState, useEffect } from 'react'
|
||
import { FaSave, FaTimes, FaFileAlt, FaCode, FaCog } from 'react-icons/fa'
|
||
import { ReportHtmlEditor } from './ReportHtmlEditor'
|
||
import { ReportParameterDto, ReportTemplateDto, ReportCategoryDto } from '@/proxy/reports/models'
|
||
import { Button, Input, Dialog } from '../ui'
|
||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||
|
||
interface TemplateEditorProps {
|
||
isOpen: boolean
|
||
onClose: () => void
|
||
onSave: (template: ReportTemplateDto) => Promise<void>
|
||
template?: ReportTemplateDto | null
|
||
categories: ReportCategoryDto[]
|
||
}
|
||
|
||
export const TemplateEditor: React.FC<TemplateEditorProps> = ({
|
||
isOpen,
|
||
onClose,
|
||
onSave,
|
||
template,
|
||
categories,
|
||
}) => {
|
||
const [activeTab, setActiveTab] = useState<'info' | 'parameters' | 'content'>('info')
|
||
const [formData, setFormData] = useState({
|
||
name: '',
|
||
description: '',
|
||
htmlContent: '',
|
||
categoryId: '',
|
||
tags: [] as string[],
|
||
parameters: [] as ReportParameterDto[],
|
||
})
|
||
|
||
const { translate } = useLocalization()
|
||
const [tagInput, setTagInput] = useState('')
|
||
const [isSaving, setIsSaving] = useState(false)
|
||
|
||
useEffect(() => {
|
||
if (template) {
|
||
setFormData({
|
||
name: template.name,
|
||
description: template.description || '',
|
||
htmlContent: template.htmlContent,
|
||
categoryId: template.categoryId!,
|
||
tags: template.tags,
|
||
parameters: template.parameters,
|
||
})
|
||
} else {
|
||
setFormData({
|
||
name: '',
|
||
description: '',
|
||
htmlContent: '',
|
||
categoryId: '',
|
||
tags: [],
|
||
parameters: [],
|
||
})
|
||
}
|
||
setActiveTab('info')
|
||
}, [template, isOpen])
|
||
|
||
// Otomatik parametre algılama
|
||
useEffect(() => {
|
||
const extractParameters = (htmlContent: string) => {
|
||
const paramRegex = /@@([\p{L}0-9_]+)/gu
|
||
const matches = [...htmlContent.matchAll(paramRegex)]
|
||
const uniqueParams = [...new Set(matches.map((match) => match[1]))]
|
||
|
||
const newParameters: ReportParameterDto[] = uniqueParams.map((paramName) => {
|
||
// Mevcut parametreyi kontrol et
|
||
const existingParam = formData.parameters.find((p) => p.name === paramName)
|
||
if (existingParam) {
|
||
return existingParam
|
||
}
|
||
|
||
// Yeni parametre oluştur
|
||
return {
|
||
id: crypto.randomUUID(),
|
||
templateId: template?.id || '',
|
||
name: paramName,
|
||
placeholder: `@@${paramName}`,
|
||
type: 'text',
|
||
required: true,
|
||
description: `${paramName} parametresi`,
|
||
}
|
||
})
|
||
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
parameters: newParameters,
|
||
}))
|
||
}
|
||
|
||
if (formData.htmlContent) {
|
||
extractParameters(formData.htmlContent)
|
||
}
|
||
}, [formData.htmlContent])
|
||
|
||
const handleSave = async () => {
|
||
if (!formData.name.trim() || !formData.htmlContent.trim()) {
|
||
return
|
||
}
|
||
|
||
console.log('FormData before save:', formData)
|
||
console.log('Categories available:', categories)
|
||
|
||
setIsSaving(true)
|
||
try {
|
||
await onSave(formData as unknown as ReportTemplateDto)
|
||
onClose()
|
||
} catch (error) {
|
||
console.error('Error saving template:', error)
|
||
// Handle error - could show toast notification
|
||
} finally {
|
||
setIsSaving(false)
|
||
}
|
||
}
|
||
|
||
const addTag = () => {
|
||
if (tagInput.trim() && !formData.tags.includes(tagInput.trim())) {
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
tags: [...prev.tags, tagInput.trim()],
|
||
}))
|
||
setTagInput('')
|
||
}
|
||
}
|
||
|
||
const removeTag = (tagToRemove: string) => {
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
tags: prev.tags.filter((tag) => tag !== tagToRemove),
|
||
}))
|
||
}
|
||
|
||
const updateParameter = (paramId: string, updates: Partial<ReportParameterDto>) => {
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
parameters: prev.parameters.map((param) =>
|
||
param.id === paramId ? { ...param, ...updates } : param,
|
||
),
|
||
}))
|
||
}
|
||
|
||
const tabs = [
|
||
{ id: 'info', label: translate('::App.Reports.TemplateEditor.Tab.Info'), icon: FaFileAlt },
|
||
{
|
||
id: 'parameters',
|
||
label: translate('::App.Reports.TemplateEditor.Tab.Parameters'),
|
||
icon: FaCog,
|
||
},
|
||
{ id: 'content', label: translate('::App.Reports.TemplateEditor.Tab.Content'), icon: FaCode },
|
||
]
|
||
|
||
return (
|
||
<>
|
||
<Dialog isOpen={isOpen} onClose={onClose} width="100%">
|
||
<h5 className="mb-4">
|
||
{template
|
||
? translate('::App.Reports.TemplateEditor.TitleEdit')
|
||
: translate('::App.Reports.TemplateEditor.TitleNew')}
|
||
</h5>
|
||
<div className="flex flex-col h-full">
|
||
{/* Tab Navigation */}
|
||
<div className="border-b border-gray-200 bg-gray-50 flex-shrink-0">
|
||
<nav className="flex space-x-8 px-6">
|
||
{tabs.map((tab) => {
|
||
const Icon = tab.icon
|
||
return (
|
||
<button
|
||
key={tab.id}
|
||
onClick={() => setActiveTab(tab.id as 'info' | 'content' | 'parameters')}
|
||
className={`
|
||
flex items-center py-4 px-1 border-b-2 font-medium text-sm transition-colors
|
||
${
|
||
activeTab === tab.id
|
||
? 'border-blue-500 text-blue-600'
|
||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
||
}
|
||
`}
|
||
>
|
||
<Icon className="h-4 w-4 mr-2" />
|
||
{tab.label}
|
||
</button>
|
||
)
|
||
})}
|
||
</nav>
|
||
</div>
|
||
|
||
{/* Tab Content */}
|
||
<div className="flex-1 flex flex-col min-h-0">
|
||
{activeTab === 'info' && (
|
||
<div className="overflow-y-auto flex-1 p-3">
|
||
<div className="mx-auto">
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||
{/* Left Column - Basic Info */}
|
||
<div className="space-y-6">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
{translate('::App.Reports.TemplateEditor.Label.Name')}
|
||
</label>
|
||
<input
|
||
autoFocus
|
||
value={formData.name}
|
||
onChange={(e) =>
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
name: e.target.value,
|
||
}))
|
||
}
|
||
placeholder={translate('::App.Reports.TemplateEditor.Placeholder.Name')}
|
||
className="w-full flex-1 px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
{translate('::App.Reports.TemplateEditor.Label.Category')}
|
||
</label>
|
||
<select
|
||
value={formData.categoryId}
|
||
onChange={(e) => {
|
||
console.log('Category selected:', e.target.value)
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
categoryId: e.target.value,
|
||
}))
|
||
}}
|
||
className="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||
>
|
||
<option value="">
|
||
{translate('::App.Reports.TemplateEditor.Placeholder.SelectCategory')}
|
||
</option>
|
||
{categories.map((category) => (
|
||
<option key={category.id} value={category.id}>
|
||
{category.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
{translate('::App.Reports.TemplateEditor.Label.Tags')}
|
||
</label>
|
||
<div className="flex space-x-2 mb-3">
|
||
<input
|
||
type="text"
|
||
value={tagInput}
|
||
onChange={(e) => setTagInput(e.target.value)}
|
||
onKeyPress={(e) => e.key === 'Enter' && addTag()}
|
||
placeholder={translate(
|
||
'::App.Reports.TemplateEditor.Placeholder.AddTag',
|
||
)}
|
||
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||
/>
|
||
<Button type="button" onClick={addTag} size="sm">
|
||
{translate('::App.Reports.TemplateEditor.Button.Add')}
|
||
</Button>
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
{formData.tags.map((tag) => (
|
||
<span
|
||
key={tag}
|
||
className="inline-flex items-center px-3 py-1 text-sm bg-blue-100 text-blue-800 rounded-full"
|
||
>
|
||
{tag}
|
||
<button
|
||
onClick={() => removeTag(tag)}
|
||
className="ml-2 text-blue-600 hover:text-blue-800"
|
||
>
|
||
<FaTimes className="h-3 w-3" />
|
||
</button>
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right Column - Description */}
|
||
<div className="space-y-6">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
{translate('::App.Reports.TemplateEditor.Label.Description')}
|
||
</label>
|
||
<Input
|
||
value={formData.description}
|
||
onChange={(e) =>
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
description: e.target.value,
|
||
}))
|
||
}
|
||
placeholder={translate(
|
||
'::App.Reports.TemplateEditor.Placeholder.Description',
|
||
)}
|
||
textArea={true}
|
||
rows={12}
|
||
className="text-left h-full"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'content' && (
|
||
<div className="flex-1 flex flex-col min-h-0">
|
||
<div className="flex-1 p-3 min-h-0">
|
||
<ReportHtmlEditor
|
||
value={formData.htmlContent}
|
||
onChange={(content) =>
|
||
setFormData((prev) => ({ ...prev, htmlContent: content }))
|
||
}
|
||
height="50vh"
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'parameters' && (
|
||
<div className="overflow-y-auto flex-1 p-6">
|
||
<div className="max-w-full mx-auto">
|
||
{formData.parameters.length === 0 ? (
|
||
<div className="text-center py-12">
|
||
<FaCog className="h-16 w-16 text-gray-400 mx-auto mb-4" />
|
||
<p className="text-gray-500 text-lg mb-2">
|
||
{translate('::App.Reports.TemplateEditor.NoParameters')}
|
||
</p>
|
||
<p className="text-gray-400 text-sm">
|
||
{translate('::App.Reports.TemplateEditor.NoParametersDescription')}
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||
{formData.parameters.map((param) => (
|
||
<div
|
||
key={param.id}
|
||
className="bg-white p-3 rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition-shadow min-w-0"
|
||
>
|
||
<div className="flex items-start justify-between mb-2 min-w-0">
|
||
<div className="flex items-center gap-1 min-w-0 flex-1">
|
||
<div className="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0"></div>
|
||
<code className="text-xs font-mono text-blue-700 bg-blue-50 px-1.5 py-0.5 rounded truncate">
|
||
@@{param.name}
|
||
</code>
|
||
</div>
|
||
<select
|
||
value={param.type}
|
||
onChange={(e) =>
|
||
updateParameter(param.id, { type: e.target.value as any })
|
||
}
|
||
className="text-xs bg-gray-100 text-gray-600 px-1.5 py-0.5 rounded-full flex-shrink-0 ml-1 border-none outline-none cursor-pointer"
|
||
>
|
||
<option value="text">text</option>
|
||
<option value="number">number</option>
|
||
<option value="date">date</option>
|
||
<option value="select">select</option>
|
||
<option value="checkbox">checkbox</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div className="mb-2">
|
||
<input
|
||
type="text"
|
||
value={param.description || ''}
|
||
onChange={(e) =>
|
||
updateParameter(param.id, { description: e.target.value })
|
||
}
|
||
placeholder={translate(
|
||
'::App.Reports.TemplateEditor.Placeholder.ParameterDescription',
|
||
)}
|
||
className="w-full text-xs text-gray-600 bg-transparent border-none outline-none resize-none"
|
||
/>
|
||
</div>
|
||
|
||
<div className="mb-2">
|
||
<input
|
||
type="text"
|
||
value={param.defaultValue || ''}
|
||
onChange={(e) =>
|
||
updateParameter(param.id, { defaultValue: e.target.value })
|
||
}
|
||
placeholder={translate(
|
||
'::App.Reports.TemplateEditor.Placeholder.DefaultValue',
|
||
)}
|
||
className="w-full text-xs bg-gray-50 px-1.5 py-0.5 rounded border border-gray-200 outline-none"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2">
|
||
<label className="flex items-center gap-1 cursor-pointer">
|
||
<input
|
||
type="checkbox"
|
||
checked={param.required}
|
||
onChange={(e) =>
|
||
updateParameter(param.id, { required: e.target.checked })
|
||
}
|
||
className="w-3 h-3 text-red-600 rounded border-gray-300 focus:ring-red-500"
|
||
/>
|
||
<span className="text-xs text-gray-600">
|
||
{translate('::App.Reports.TemplateEditor.Label.Required')}
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Tab Footer */}
|
||
<div className="flex justify-between">
|
||
<Button variant="default" onClick={onClose} disabled={isSaving}>
|
||
{translate('::App.Reports.TemplateEditor.Button.Cancel')}
|
||
</Button>
|
||
|
||
<Button
|
||
variant="solid"
|
||
onClick={handleSave}
|
||
className="bg-blue-600 hover:bg-blue-700 font-medium px-2 py-2 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 flex items-center space-x-2"
|
||
>
|
||
<FaSave className="h-5 w-5" />
|
||
{isSaving
|
||
? translate('::App.Reports.TemplateEditor.Button.Saving')
|
||
: template
|
||
? translate('::App.Reports.TemplateEditor.Button.Update')
|
||
: translate('::App.Reports.TemplateEditor.Button.Save')}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</Dialog>
|
||
</>
|
||
)
|
||
}
|