CustomComponents hataları
This commit is contained in:
Sedat ÖZTÜRK
parent
8cc8ed07f9
commit
8c74740eb3
3 changed files with 363 additions and 520 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -59,10 +59,10 @@ const ComponentEditor: React.FC = () => {
|
|||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (code && editorState.components.length === 0) {
|
||||
if (code && editorState.components?.length === 0) {
|
||||
parseAndUpdateComponents(code)
|
||||
}
|
||||
}, [code, editorState.components.length])
|
||||
}, [code, editorState.components?.length])
|
||||
|
||||
// Load existing component data - sadece edit modunda
|
||||
useEffect(() => {
|
||||
|
|
@ -144,7 +144,9 @@ const ComponentEditor: React.FC = () => {
|
|||
<div className="h-screen flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<RefreshCw className="w-8 h-8 text-blue-500 animate-spin mx-auto mb-3" />
|
||||
<p className="text-slate-600">{translate('::App.DeveloperKit.ComponentEditor.Loading')}</p>
|
||||
<p className="text-slate-600">
|
||||
{translate('::App.DeveloperKit.ComponentEditor.Loading')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
@ -220,7 +222,9 @@ const ComponentEditor: React.FC = () => {
|
|||
className="flex items-center gap-2 bg-yellow-600 text-white px-4 py-2 rounded-lg hover:bg-yellow-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
|
||||
>
|
||||
<Save className="w-4 h-4" />
|
||||
{isSaving ? translate('::App.DeveloperKit.ComponentEditor.Saving') : translate('::App.DeveloperKit.ComponentEditor.Save')}
|
||||
{isSaving
|
||||
? translate('::App.DeveloperKit.ComponentEditor.Saving')
|
||||
: translate('::App.DeveloperKit.ComponentEditor.Save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -237,19 +241,26 @@ const ComponentEditor: React.FC = () => {
|
|||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-red-800 font-medium mb-2">
|
||||
{validationErrors.length} {translate('::App.DeveloperKit.ComponentEditor.ValidationError.Title')}
|
||||
{validationErrors.length !== 1 ? 's' : ''} {translate('::App.DeveloperKit.ComponentEditor.ValidationError.Found')}
|
||||
{validationErrors.length}{' '}
|
||||
{translate('::App.DeveloperKit.ComponentEditor.ValidationError.Title')}
|
||||
{validationErrors.length !== 1 ? 's' : ''}{' '}
|
||||
{translate('::App.DeveloperKit.ComponentEditor.ValidationError.Found')}
|
||||
</p>
|
||||
<div className="space-y-1">
|
||||
{validationErrors.slice(0, 5).map((error, index) => (
|
||||
<div key={index} className="text-sm text-red-700">
|
||||
<span className="font-medium">{translate('::App.DeveloperKit.ComponentEditor.ValidationError.Line')} {error.startLineNumber}:</span>{' '}
|
||||
<span className="font-medium">
|
||||
{translate('::App.DeveloperKit.ComponentEditor.ValidationError.Line')}{' '}
|
||||
{error.startLineNumber}:
|
||||
</span>{' '}
|
||||
{error.message}
|
||||
</div>
|
||||
))}
|
||||
{validationErrors.length > 5 && (
|
||||
<div className="text-sm text-red-600 italic">
|
||||
... {translate('::App.DeveloperKit.ComponentEditor.ValidationError.And')} {validationErrors.length - 5} {translate('::App.DeveloperKit.ComponentEditor.ValidationError.More')}
|
||||
... {translate('::App.DeveloperKit.ComponentEditor.ValidationError.And')}{' '}
|
||||
{validationErrors.length - 5}{' '}
|
||||
{translate('::App.DeveloperKit.ComponentEditor.ValidationError.More')}
|
||||
{validationErrors.length - 5 !== 1 ? 's' : ''}
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useComponents } from "../../contexts/ComponentContext";
|
||||
import React, { useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { useComponents } from '../../contexts/ComponentContext'
|
||||
import {
|
||||
Plus,
|
||||
Search,
|
||||
|
|
@ -14,21 +14,19 @@ import {
|
|||
CheckCircle,
|
||||
XCircle,
|
||||
View,
|
||||
} from "lucide-react";
|
||||
import { ROUTES_ENUM } from "@/routes/route.constant";
|
||||
import { useLocalization } from "@/utils/hooks/useLocalization";
|
||||
} from 'lucide-react'
|
||||
import { ROUTES_ENUM } from '@/routes/route.constant'
|
||||
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||||
|
||||
const ComponentManager: React.FC = () => {
|
||||
const { components, updateComponent, deleteComponent } = useComponents();
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [filterActive, setFilterActive] = useState<
|
||||
"all" | "active" | "inactive"
|
||||
>("all");
|
||||
const { components, updateComponent, deleteComponent } = useComponents()
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [filterActive, setFilterActive] = useState<'all' | 'active' | 'inactive'>('all')
|
||||
|
||||
// Calculate statistics
|
||||
const totalComponents = components?.length;
|
||||
const activeComponents = components?.filter((c) => c.isActive).length;
|
||||
const inactiveComponents = totalComponents - activeComponents;
|
||||
const totalComponents = components?.length
|
||||
const activeComponents = components?.filter((c) => c.isActive).length
|
||||
const inactiveComponents = totalComponents - activeComponents
|
||||
const { translate } = useLocalization()
|
||||
|
||||
const stats = [
|
||||
|
|
@ -36,62 +34,58 @@ const ComponentManager: React.FC = () => {
|
|||
name: translate('::App.DeveloperKit.Component.Total'),
|
||||
value: totalComponents,
|
||||
icon: Puzzle,
|
||||
color: "text-purple-600",
|
||||
bgColor: "bg-purple-100",
|
||||
color: 'text-purple-600',
|
||||
bgColor: 'bg-purple-100',
|
||||
},
|
||||
{
|
||||
name: translate('::App.DeveloperKit.Component.Active'),
|
||||
value: activeComponents,
|
||||
icon: CheckCircle,
|
||||
color: "text-emerald-600",
|
||||
bgColor: "bg-emerald-100",
|
||||
color: 'text-emerald-600',
|
||||
bgColor: 'bg-emerald-100',
|
||||
},
|
||||
{
|
||||
name: translate('::App.DeveloperKit.Component.Inactive'),
|
||||
value: inactiveComponents,
|
||||
icon: XCircle,
|
||||
color: "text-slate-600",
|
||||
bgColor: "bg-slate-100",
|
||||
color: 'text-slate-600',
|
||||
bgColor: 'bg-slate-100',
|
||||
},
|
||||
];
|
||||
]
|
||||
|
||||
const filteredComponents = components?.filter((component) => {
|
||||
const matchesSearch =
|
||||
component.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
(component.description || "")
|
||||
.toLowerCase()
|
||||
.includes(searchTerm.toLowerCase());
|
||||
(component.description || '').toLowerCase().includes(searchTerm.toLowerCase())
|
||||
|
||||
const matchesFilter =
|
||||
filterActive === "all" ||
|
||||
(filterActive === "active" && component.isActive) ||
|
||||
(filterActive === "inactive" && !component.isActive);
|
||||
filterActive === 'all' ||
|
||||
(filterActive === 'active' && component.isActive) ||
|
||||
(filterActive === 'inactive' && !component.isActive)
|
||||
|
||||
return matchesSearch && matchesFilter;
|
||||
});
|
||||
return matchesSearch && matchesFilter
|
||||
})
|
||||
|
||||
const handleToggleActive = async (id: string, isActive: boolean) => {
|
||||
try {
|
||||
const component = components.find((c) => c.id === id);
|
||||
const component = components?.find((c) => c.id === id)
|
||||
if (component) {
|
||||
await updateComponent(id, { ...component, isActive });
|
||||
await updateComponent(id, { ...component, isActive })
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to toggle component status:", err);
|
||||
console.error('Failed to toggle component status:', err)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const handleDelete = async (id: string, name: string) => {
|
||||
if (
|
||||
window.confirm(translate('::App.DeveloperKit.Component.ConfirmDelete'))
|
||||
) {
|
||||
if (window.confirm(translate('::App.DeveloperKit.Component.ConfirmDelete'))) {
|
||||
try {
|
||||
await deleteComponent(id);
|
||||
await deleteComponent(id)
|
||||
} catch (err) {
|
||||
console.error("Failed to delete component:", err);
|
||||
console.error('Failed to delete component:', err)
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
|
|
@ -114,18 +108,11 @@ const ComponentManager: React.FC = () => {
|
|||
{/* Statistics Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||||
{stats.map((stat, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-white rounded-lg border border-slate-200 p-6"
|
||||
>
|
||||
<div key={index} className="bg-white rounded-lg border border-slate-200 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-600 mb-1">
|
||||
{stat.name}
|
||||
</p>
|
||||
<p className="text-3xl font-bold text-slate-900">
|
||||
{stat.value}
|
||||
</p>
|
||||
<p className="text-sm font-medium text-slate-600 mb-1">{stat.name}</p>
|
||||
<p className="text-3xl font-bold text-slate-900">{stat.value}</p>
|
||||
</div>
|
||||
<div className={`p-3 rounded-lg ${stat.bgColor}`}>
|
||||
<stat.icon className={`w-6 h-6 ${stat.color}`} />
|
||||
|
|
@ -152,14 +139,16 @@ const ComponentManager: React.FC = () => {
|
|||
<Filter className="w-5 h-5 text-slate-500" />
|
||||
<select
|
||||
value={filterActive}
|
||||
onChange={(e) =>
|
||||
setFilterActive(e.target.value as "all" | "active" | "inactive")
|
||||
}
|
||||
onChange={(e) => setFilterActive(e.target.value as 'all' | 'active' | 'inactive')}
|
||||
className="px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
<option value="all">{translate('::App.DeveloperKit.Component.Filter.All')}</option>
|
||||
<option value="active">{translate('::App.DeveloperKit.Component.Filter.Active')}</option>
|
||||
<option value="inactive">{translate('::App.DeveloperKit.Component.Filter.Inactive')}</option>
|
||||
<option value="active">
|
||||
{translate('::App.DeveloperKit.Component.Filter.Active')}
|
||||
</option>
|
||||
<option value="inactive">
|
||||
{translate('::App.DeveloperKit.Component.Filter.Inactive')}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -177,43 +166,35 @@ const ComponentManager: React.FC = () => {
|
|||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="text-lg font-semibold text-slate-900">
|
||||
{component.name}
|
||||
</h3>
|
||||
<h3 className="text-lg font-semibold text-slate-900">{component.name}</h3>
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${
|
||||
component.isActive ? "bg-green-500" : "bg-slate-300"
|
||||
component.isActive ? 'bg-green-500' : 'bg-slate-300'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-slate-600 text-sm mb-3">
|
||||
{(() => {
|
||||
try {
|
||||
const parsed = JSON.parse(
|
||||
component.dependencies ?? "[]"
|
||||
);
|
||||
const parsed = JSON.parse(component.dependencies ?? '[]')
|
||||
return Array.isArray(parsed) && parsed.length > 0
|
||||
? `${parsed.join(", ")}`
|
||||
: translate('::App.DeveloperKit.Component.NoDependencies');
|
||||
? `${parsed.join(', ')}`
|
||||
: translate('::App.DeveloperKit.Component.NoDependencies')
|
||||
} catch {
|
||||
return translate('::App.DeveloperKit.Component.NoDependencies');
|
||||
return translate('::App.DeveloperKit.Component.NoDependencies')
|
||||
}
|
||||
})()}
|
||||
</p>
|
||||
|
||||
{component.description && (
|
||||
<p className="text-slate-600 text-sm mb-3">
|
||||
{component.description}
|
||||
</p>
|
||||
<p className="text-slate-600 text-sm mb-3">{component.description}</p>
|
||||
)}
|
||||
<div className="flex items-center gap-4 text-xs text-slate-500">
|
||||
<div className="flex items-center gap-1">
|
||||
<Calendar className="w-3 h-3" />
|
||||
<span>
|
||||
{component.lastModificationTime
|
||||
? new Date(
|
||||
component.lastModificationTime
|
||||
).toLocaleDateString()
|
||||
? new Date(component.lastModificationTime).toLocaleDateString()
|
||||
: translate('::App.DeveloperKit.Component.DateNotAvailable')}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -237,13 +218,11 @@ const ComponentManager: React.FC = () => {
|
|||
<div className="flex items-center justify-between pt-4 border-t border-slate-100">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() =>
|
||||
handleToggleActive(component.id, !component.isActive)
|
||||
}
|
||||
onClick={() => handleToggleActive(component.id, !component.isActive)}
|
||||
className={`flex items-center gap-1 px-2 py-1 rounded text-xs font-medium transition-colors ${
|
||||
component.isActive
|
||||
? "bg-green-100 text-green-700 hover:bg-green-200"
|
||||
: "bg-slate-100 text-slate-600 hover:bg-slate-200"
|
||||
? 'bg-green-100 text-green-700 hover:bg-green-200'
|
||||
: 'bg-slate-100 text-slate-600 hover:bg-slate-200'
|
||||
}`}
|
||||
>
|
||||
{component.isActive ? (
|
||||
|
|
@ -261,7 +240,10 @@ const ComponentManager: React.FC = () => {
|
|||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Link
|
||||
to={ROUTES_ENUM.protected.saas.developerKitComponentsEdit.replace(':id', component.id)}
|
||||
to={ROUTES_ENUM.protected.saas.developerKitComponentsEdit.replace(
|
||||
':id',
|
||||
component.id,
|
||||
)}
|
||||
target="_blank"
|
||||
className="p-2 text-slate-600 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors"
|
||||
title={translate('::App.DeveloperKit.Component.Edit')}
|
||||
|
|
@ -269,7 +251,10 @@ const ComponentManager: React.FC = () => {
|
|||
<Edit className="w-4 h-4" />
|
||||
</Link>
|
||||
<Link
|
||||
to={ROUTES_ENUM.protected.saas.developerKitComponentsView.replace(':id', component.id)}
|
||||
to={ROUTES_ENUM.protected.saas.developerKitComponentsView.replace(
|
||||
':id',
|
||||
component.id,
|
||||
)}
|
||||
className="p-2 text-slate-600 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors"
|
||||
title={translate('::App.DeveloperKit.Component.View')}
|
||||
>
|
||||
|
|
@ -295,16 +280,16 @@ const ComponentManager: React.FC = () => {
|
|||
<Plus className="w-8 h-8 text-slate-500" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-slate-900 mb-2">
|
||||
{searchTerm || filterActive !== "all"
|
||||
{searchTerm || filterActive !== 'all'
|
||||
? translate('::App.DeveloperKit.Component.Empty.Filtered.Title')
|
||||
: translate('::App.DeveloperKit.Component.Empty.Initial.Title')}
|
||||
</h3>
|
||||
<p className="text-slate-600 mb-6">
|
||||
{searchTerm || filterActive !== "all"
|
||||
{searchTerm || filterActive !== 'all'
|
||||
? translate('::App.DeveloperKit.Component.Empty.Filtered.Description')
|
||||
: translate('::App.DeveloperKit.Component.Empty.Initial.Description')}
|
||||
</p>
|
||||
{!searchTerm && filterActive === "all" && (
|
||||
{!searchTerm && filterActive === 'all' && (
|
||||
<Link
|
||||
to={ROUTES_ENUM.protected.saas.developerKitComponentsNew}
|
||||
className="inline-flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
|
||||
|
|
@ -317,7 +302,7 @@ const ComponentManager: React.FC = () => {
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default ComponentManager;
|
||||
export default ComponentManager
|
||||
|
|
|
|||
Loading…
Reference in a new issue