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

Developer Kits için Responsive

Browse source
This commit is contained in:
Sedat ÖZTÜRK 2026-03-18 08:36:36 +03:00
parent cedb535734
commit 3baeee8002
4 changed files with 29 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
ui/src/views/developerKit/CrudEndpointManager.tsx
View file

@ -372,9 +372,12 @@ const CrudEndpointManager: React.FC = () => {
</div>
{/* Main two-panel layout */}
<div className="flex gap-4" style={{ height: 'calc(100vh - 250px)', minHeight: 400 }}>
<div
className="flex flex-col gap-4 lg:flex-row"
style={{ minHeight: 400, height: 'calc(100vh - 250px)' }}
>
{/* Left Panel: Table List */}
<div className="w-72 flex-shrink-0 flex flex-col bg-white rounded-lg border border-slate-200 overflow-hidden">
<div className="w-full lg:w-72 lg:flex-shrink-0 flex flex-col bg-white rounded-lg border border-slate-200 overflow-hidden h-[38vh] min-h-[260px] lg:h-auto lg:min-h-0">
{/* DataSource selector */}
<div className="p-3 border-b border-slate-200 bg-slate-50">
<select
@ -494,7 +497,7 @@ const CrudEndpointManager: React.FC = () => {
</div>
{/* Right Panel: Endpoint Management */}
<div className="flex-1 min-w-0 flex flex-col bg-white rounded-lg border border-slate-200 overflow-hidden">
<div className="flex-1 min-w-0 flex flex-col bg-white rounded-lg border border-slate-200 overflow-hidden min-h-0">
{!selectedTable ? (
<div className="flex-1 flex flex-col items-center justify-center text-slate-400 p-8">
<FaDatabase className="text-4xl mb-3 text-slate-200" />
@ -506,7 +509,7 @@ const CrudEndpointManager: React.FC = () => {
) : (
<div className="flex flex-col h-full overflow-hidden">
{/* Table header */}
<div className="flex items-center justify-between p-4 border-b border-slate-200 bg-slate-50">
<div className="flex flex-col gap-3 p-4 border-b border-slate-200 bg-slate-50 sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-center gap-3">
<div className="bg-blue-100 text-blue-600 p-2 rounded-lg">
<FaTable />
@ -515,7 +518,7 @@ const CrudEndpointManager: React.FC = () => {
<h4 className="text-slate-900">{selectedTable.schemaName}.{selectedTable.tableName}</h4>
</div>
</div>
<div className="flex items-center gap-2">
<div className="flex flex-wrap items-center gap-2">
{selectedTableEndpoints.length > 0 && (
<button
onClick={() => handleDeleteAll(selectedTable)}

6
ui/src/views/developerKit/DynamicServiceEditor.tsx
View file

@ -301,9 +301,9 @@ const DynamicServiceEditor: React.FC = () => {
)}
{/* Two-panel layout */}
<div className="flex gap-4 items-start">
<div className="flex flex-col xl:flex-row gap-4 items-stretch xl:items-start">
{/* LEFT PANEL — Servis Ayarları */}
<div className="w-1/4 shrink-0 bg-white rounded-lg border border-slate-200 p-5 space-y-4">
<div className="w-full xl:w-1/4 shrink-0 bg-white rounded-lg border border-slate-200 p-5 space-y-4">
{/* Panel header */}
<div className="flex items-center gap-2 pb-3 border-b border-slate-100">
<FaCog className="w-4 h-4 text-blue-500" />
@ -377,7 +377,7 @@ const DynamicServiceEditor: React.FC = () => {
</div>
{/* RIGHT PANEL — Önizleme + Editor */}
<div className="flex-1 min-w-0 space-y-4">
<div className="w-full flex-1 min-w-0 space-y-4">
{/* Monaco Editor */}
<div className="bg-white rounded-lg border border-slate-200 overflow-hidden">
<div className="px-5 py-3 bg-slate-50 border-b border-slate-200 flex items-center justify-between">

20
ui/src/views/developerKit/DynamicServiceManager.tsx
View file

@ -126,7 +126,7 @@ const DynamicServiceManager: React.FC = () => {
/>
{/* Stats */}
<div className="grid grid-cols-1 md:grid-cols-5 gap-6 mt-2 mb-4">
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-4 mt-2 mb-4">
{stats.map((stat, index) => (
<div key={index} className="bg-white rounded-lg border border-slate-200 p-6">
<div className="flex items-center justify-between">
@ -143,7 +143,7 @@ const DynamicServiceManager: React.FC = () => {
</div>
{/* Toolbar */}
<div className="flex flex-col sm:flex-row gap-4">
<div className="flex flex-col lg:flex-row lg:items-center gap-3">
<div className="flex-1 relative">
<FaSearch className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
<input
@ -154,14 +154,14 @@ const DynamicServiceManager: React.FC = () => {
className="w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 w-full lg:w-auto">
<FaFilter className="w-4 h-4 text-slate-500" />
<select
value={filterStatus}
onChange={(e) =>
setFilterStatus(e.target.value as 'all' | 'Success' | 'Failed' | 'Pending')
}
className="px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
className="w-full lg:w-auto 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.DynamicServices.FilterAll')}</option>
<option value="Success">{translate('::App.DeveloperKit.DynamicServices.Successful')}</option>
@ -169,19 +169,19 @@ const DynamicServiceManager: React.FC = () => {
<option value="Pending">{translate('::App.DeveloperKit.DynamicServices.FilterPending')}</option>
</select>
</div>
<div>
<div className="w-full sm:w-auto">
<Link
to={ROUTES_ENUM.protected.saas.developerKit.dynamicServicesNew}
className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
className="w-full sm:w-auto justify-center flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
>
<FaPlus className="w-4 h-4" />
{translate('::App.DeveloperKit.DynamicServices.NewService')}
</Link>
</div>
<div>
<div className="w-full sm:w-auto">
<button
onClick={openSwagger}
className="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors"
className="w-full sm:w-auto justify-center flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors"
>
<FaExternalLinkAlt className="w-3 h-3" />
Swagger
@ -202,7 +202,7 @@ const DynamicServiceManager: React.FC = () => {
className="bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-shadow"
>
<div className="p-6">
<div className="flex items-start justify-between">
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<h3 className="text-base font-semibold text-slate-900">{service.name}</h3>
@ -227,7 +227,7 @@ const DynamicServiceManager: React.FC = () => {
)}
</div>
{service.lastSuccessfulCompilation && (
<div className="flex items-center gap-1 text-xs text-slate-400 ml-4 whitespace-nowrap">
<div className="flex items-center gap-1 text-xs text-slate-400 sm:ml-4 whitespace-nowrap">
<FaCalendarAlt className="w-3 h-3" />
<span>
{new Date(service.lastSuccessfulCompilation).toLocaleDateString()}

18
ui/src/views/developerKit/SqlQueryManager.tsx
View file

@ -404,14 +404,11 @@ GO`,
<div className="flex flex-col flex-1 min-h-0 p-1">
{/* Toolbar */}
<div className="flex-shrink-0 shadow-sm mb-4">
<div className="flex items-center justify-between px-1 py-1">
<div className="flex items-center gap-3">
<div className="flex flex-col gap-2 px-1 py-1 lg:flex-row lg:items-center lg:justify-between">
<div className="flex flex-wrap items-center gap-2 sm:gap-3">
<FaDatabase className="text-lg text-blue-500" />
<span className="text-sm font-medium text-gray-600 dark:text-gray-400">
{translate('::App.Platform.DataSource')}:
</span>
<select
className="border border-gray-300 rounded px-1 py-1"
className="border border-gray-300 rounded px-2 py-1 max-w-full"
disabled={state.selectedDataSource?.length === 0}
value={state.selectedDataSource || ''}
onChange={(e) => {
@ -427,7 +424,7 @@ GO`,
</select>
</div>
<div className="flex items-center gap-3">
<div className="flex flex-wrap items-center gap-2 sm:gap-3">
<Button
size="sm"
variant="default"
@ -452,12 +449,13 @@ GO`,
</Button>
</div>
</div>
</div>
{/* Main Content Area */}
<div className="flex-1 flex min-h-0">
<div className="flex-1 flex min-h-0 flex-col gap-3 lg:flex-row lg:gap-4">
{/* Left Panel - Object Explorer */}
<div className="w-1/3 flex-shrink-0 flex flex-col min-h-0 mr-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-600 shadow">
<div className="w-full lg:w-1/3 flex-shrink-0 flex flex-col h-[35vh] min-h-[260px] max-h-[420px] lg:h-auto lg:min-h-0 lg:max-h-none bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-600 shadow">
<div className="border-b px-4 py-2 bg-gray-50 dark:bg-gray-800 flex-shrink-0 rounded-t-lg">
<h6 className="font-semibold text-sm">
{translate('::App.Platform.ObjectExplorer')}
@ -476,7 +474,7 @@ GO`,
</div>
{/* Center Panel - Editor and Results */}
<div className="flex-1 flex flex-col min-h-0 mr-4">
<div className="flex-1 flex flex-col min-h-0">
{state.executionResult || state.tableColumns ? (
<Splitter direction="vertical" initialSize={250} minSize={150} maxSize={1200}>
<div className="border rounded-lg shadow-sm bg-white dark:bg-gray-800 flex flex-col h-full">