sozsoft/erp-platform
1
0
Fork 0
Code Issues 6 Pull requests Projects 3 Releases Packages Wiki Activity Actions

CustomComponents hataları

Browse source
This commit is contained in:
Sedat ÖZTÜRK 2025-08-11 13:48:36 +03:00
parent 8cc8ed07f9
commit 64ccc150df
8 changed files with 1000 additions and 921 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
configs/deployment/docker-compose-app.yml
View file

@ -18,7 +18,7 @@ services:
- ASPNETCORE_ENVIRONMENT=Dev
- SEED=${SEED}
networks:
- kurs-platform-data_db
- db
# Backend API
api:
@ -33,7 +33,7 @@ services:
- cdn:/etc/api/cdn
- api-keys:/root/.aspnet/DataProtection-Keys
networks:
- kurs-platform-data_db
- db
- default
# Frontend (UI)

5
configs/deployment/docker-compose-data.yml
View file

@ -3,7 +3,8 @@ name: kurs-platform-data
networks:
db:
external: false
external: true
name: kurs-platform-data_db
volumes:
pg:
@ -46,4 +47,4 @@ services:
volumes:
- mssql:/var/opt/mssql
networks:
- db
- db

9
ui/src/components/componentEditor/ComponentPreview.tsx
View file

@ -8,16 +8,21 @@ export interface ComponentPreviewProps {
}
const ComponentPreview: React.FC<ComponentPreviewProps> = ({ componentName, className = '' }) => {
const { components } = useComponents()
const { components, loading } = useComponents()
if (!componentName) {
return <div className="text-sm text-gray-500">Bileşen ismi yok.</div>
}
// components dizisinin varlığını kontrol et
if (loading || !components || !Array.isArray(components)) {
return <div className="text-sm text-gray-500">Bileşenler yükleniyor...</div>
}
// Belirtilen bileşeni bul
const component = components.find((c) => c.name === componentName && c.isActive)
let dependencies: string[] = [];
let dependencies: string[] = []
if (component?.dependencies) {
try {

703
ui/src/components/developerKit/CodeLayout.tsx
View file

File diff suppressed because it is too large Load diff

29
ui/src/components/developerKit/ComponentEditor.tsx
View file

@ -19,7 +19,7 @@ const ComponentEditor: React.FC = () => {
const { id } = useParams()
const navigate = useNavigate()
const { translate } = useLocalization()
const { getComponent, addComponent, updateComponent } = useComponents()
const [name, setName] = useState('')
@ -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>
)}

157
ui/src/components/developerKit/ComponentManager.tsx
View file

@ -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, loading, 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 || 0
const activeComponents = components?.filter((c) => c.isActive).length || 0
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,21 +139,27 @@ 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>
</div>
{/* Components List */}
{filteredComponents?.length > 0 ? (
{loading ? (
<div className="flex items-center justify-center py-12">
<div className="text-slate-600">Bileşenler yükleniyor...</div>
</div>
) : filteredComponents?.length > 0 ? (
<div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
{filteredComponents.map((component) => (
<div
@ -177,43 +170,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 +222,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 +244,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 +255,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 +284,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 +306,7 @@ const ComponentManager: React.FC = () => {
</div>
)}
</div>
);
};
)
}
export default ComponentManager;
export default ComponentManager

151
ui/src/contexts/ComponentContext.tsx
View file

@ -1,116 +1,123 @@
import { CreateUpdateCustomComponentDto, CustomComponent, CustomComponentDto } from '@/proxy/developerKit/models';
import { developerKitService } from '@/services/developerKit.service';
import { useStoreState } from '@/store/store';
import React, { createContext, useContext, useState, useEffect } from 'react';
import {
CreateUpdateCustomComponentDto,
CustomComponent,
CustomComponentDto,
} from '@/proxy/developerKit/models'
import { developerKitService } from '@/services/developerKit.service'
import { useStoreState } from '@/store/store'
import React, { createContext, useContext, useState, useEffect } from 'react'
interface ComponentContextType {
components: CustomComponent[];
loading: boolean;
error: string | null;
addComponent: (component: CreateUpdateCustomComponentDto) => Promise<void>;
updateComponent: (id: string, component: CreateUpdateCustomComponentDto) => Promise<void>;
deleteComponent: (id: string) => Promise<void>;
getComponent: (id: string) => CustomComponent | undefined;
getComponentByName: (name: string) => CustomComponent | undefined;
refreshComponents: () => Promise<void>;
registeredComponents: Record<string, React.ComponentType<unknown>>;
registerComponent: (name: string, component: React.ComponentType<unknown>) => void;
components: CustomComponent[]
loading: boolean
error: string | null
addComponent: (component: CreateUpdateCustomComponentDto) => Promise<void>
updateComponent: (id: string, component: CreateUpdateCustomComponentDto) => Promise<void>
deleteComponent: (id: string) => Promise<void>
getComponent: (id: string) => CustomComponent | undefined
getComponentByName: (name: string) => CustomComponent | undefined
refreshComponents: () => Promise<void>
registeredComponents: Record<string, React.ComponentType<unknown>>
registerComponent: (name: string, component: React.ComponentType<unknown>) => void
}
const ComponentContext = createContext<ComponentContextType | undefined>(undefined);
const ComponentContext = createContext<ComponentContextType | undefined>(undefined)
// eslint-disable-next-line react-refresh/only-export-components
export const useComponents = () => {
const context = useContext(ComponentContext);
const context = useContext(ComponentContext)
if (context === undefined) {
throw new Error('useComponents must be used within a ComponentProvider');
throw new Error('useComponents must be used within a ComponentProvider')
}
return context;
};
return context
}
export const ComponentProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const extraProperties = useStoreState((state) => state.abpConfig?.config?.extraProperties)
const [components, setComponents] = useState<CustomComponent[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [registeredComponents, setRegisteredComponents] = useState<Record<string, React.ComponentType<unknown>>>({});
const [components, setComponents] = useState<CustomComponent[]>([])
const [loading, setLoading] = useState(false)
const [error, setError] = useState<string | null>(null)
const [registeredComponents, setRegisteredComponents] = useState<
Record<string, React.ComponentType<unknown>>
>({})
const refreshComponents = async () => {
try {
setLoading(true);
setError(null);
setLoading(true)
setError(null)
const customComponents = extraProperties?.customComponents as CustomComponentDto[]
setComponents(customComponents);
setComponents(customComponents || [])
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to fetch components');
console.error('Failed to fetch components:', err);
} finally {
setLoading(false);
setError(err instanceof Error ? err.message : 'Failed to fetch components')
console.error('Failed to fetch components:', err)
setComponents([])
} finally {
setLoading(false)
}
};
}
useEffect(() => {
refreshComponents();
}, []);
refreshComponents()
}, [extraProperties])
const addComponent = async (componentData: CreateUpdateCustomComponentDto) => {
try {
setLoading(true);
setError(null);
const newComponent = await developerKitService.createCustomComponent(componentData);
setComponents(prev => [...prev, newComponent]);
setLoading(true)
setError(null)
const newComponent = await developerKitService.createCustomComponent(componentData)
setComponents((prev) => [...prev, newComponent])
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to create component');
throw err;
setError(err instanceof Error ? err.message : 'Failed to create component')
throw err
} finally {
setLoading(false);
setLoading(false)
}
};
}
const updateComponent = async (id: string, componentData: CreateUpdateCustomComponentDto) => {
try {
setLoading(true);
setError(null);
const updatedComponent = await developerKitService.updateCustomComponent(id, componentData);
setComponents(prev => prev.map(component =>
component.id === id ? updatedComponent : component
));
setLoading(true)
setError(null)
const updatedComponent = await developerKitService.updateCustomComponent(id, componentData)
setComponents((prev) =>
prev.map((component) => (component.id === id ? updatedComponent : component)),
)
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to update component');
throw err;
setError(err instanceof Error ? err.message : 'Failed to update component')
throw err
} finally {
setLoading(false);
setLoading(false)
}
};
}
const deleteComponent = async (id: string) => {
try {
setLoading(true);
setError(null);
await developerKitService.deleteCustomComponent(id);
setComponents(prev => prev.filter(component => component.id !== id));
setLoading(true)
setError(null)
await developerKitService.deleteCustomComponent(id)
setComponents((prev) => prev.filter((component) => component.id !== id))
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to delete component');
throw err;
setError(err instanceof Error ? err.message : 'Failed to delete component')
throw err
} finally {
setLoading(false);
setLoading(false)
}
};
}
const getComponent = (id: string) => {
return components.find(comp => comp.id === id);
};
return components?.find((comp) => comp.id === id)
}
const getComponentByName = (name: string) => {
return components.find(comp => comp.name === name);
};
return components?.find((comp) => comp.name === name)
}
const registerComponent = (name: string, component: React.ComponentType<unknown>) => {
setRegisteredComponents(prev => ({
setRegisteredComponents((prev) => ({
...prev,
[name]: component
}));
};
[name]: component,
}))
}
const value = {
components,
@ -123,8 +130,8 @@ export const ComponentProvider: React.FC<{ children: React.ReactNode }> = ({ chi
getComponentByName,
refreshComponents,
registeredComponents,
registerComponent
};
registerComponent,
}
return <ComponentContext.Provider value={value}>{children}</ComponentContext.Provider>;
};
return <ComponentContext.Provider value={value}>{children}</ComponentContext.Provider>
}

863
ui/src/contexts/ComponentRegistryContext.tsx
View file

File diff suppressed because it is too large Load diff