public/api_builder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modified: frontend/src/components/EndpointModal.tsx

Browse Source
This commit is contained in:
GEgorov
2025-12-15 16:18:51 +03:00
parent bd755cd19f
commit afd79b9c2e
1 changed files with 105 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/components/EndpointModal.tsx
View File

@@ -2,7 +2,7 @@ import { useState } from 'react';
import { useMutation, useQueryClient, useQuery } from '@tanstack/react-query';
import { endpointsApi, foldersApi } from '@/services/api';
import { Endpoint, EndpointParameter } from '@/types';
import { Plus, Trash2, Play, Edit2 } from 'lucide-react';
import { Plus, Trash2, Play, Edit2, ChevronDown, ChevronUp } from 'lucide-react';
import toast from 'react-hot-toast';
import SqlEditor from '@/components/SqlEditor';
import CodeEditor from '@/components/CodeEditor';
@@ -45,6 +45,8 @@ export default function EndpointModal({
const [editingQueryIndex, setEditingQueryIndex] = useState<number | null>(null);
const [showScriptCodeEditor, setShowScriptCodeEditor] = useState(false);
const [parametersExpanded, setParametersExpanded] = useState(true);
const [queriesExpanded, setQueriesExpanded] = useState(true);
// Определяем тип выбранной базы данных
const selectedDatabase = databases.find(db => db.id === formData.database_id);
@@ -227,17 +229,29 @@ export default function EndpointModal({
</div>
</div>
<div>
<div className="flex items-center justify-between mb-2">
<label className="block text-sm font-medium text-gray-700">
<div className="border border-gray-200 rounded-lg">
<div
className="flex items-center justify-between p-3 bg-gray-50 cursor-pointer hover:bg-gray-100 rounded-t-lg"
onClick={() => setParametersExpanded(!parametersExpanded)}
>
<div className="flex items-center gap-2">
{parametersExpanded ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
<label className="text-sm font-medium text-gray-700 cursor-pointer">
Параметры запроса
<span className="text-xs text-gray-500 ml-2">
{formData.parameters.length > 0 && (
<span className="ml-2 px-2 py-0.5 bg-primary-100 text-primary-700 rounded-full text-xs">
{formData.parameters.length}
</span>
)}
</label>
<span className="text-xs text-gray-500">
(используйте $имяПараметра в QL запросе)
</span>
</label>
</div>
<button
type="button"
onClick={() => {
onClick={(e) => {
e.stopPropagation();
const newParam: EndpointParameter = {
name: '',
type: 'string' as const,
@@ -246,16 +260,18 @@ export default function EndpointModal({
description: '',
};
setFormData({ ...formData, parameters: [...formData.parameters, newParam] });
setParametersExpanded(true);
}}
className="text-sm text-primary-600 hover:text-primary-700 flex items-center gap-1"
>
<Plus size={16} />
Добавить параметр
Добавить
</button>
</div>
{formData.parameters.length > 0 ? (
<div className="space-y-3 mb-4 border border-gray-200 rounded-lg p-4">
{parametersExpanded && (
formData.parameters.length > 0 ? (
<div className="space-y-3 p-4">
{formData.parameters.map((param: any, index: number) => (
<div key={index} className="flex gap-2 items-start bg-gray-50 p-3 rounded">
<div className="flex-1 grid grid-cols-5 gap-2">
@@ -337,9 +353,10 @@ export default function EndpointModal({
))}
</div>
) : (
<div className="text-center py-4 mb-4 border border-gray-200 rounded-lg bg-gray-50">
<div className="text-center py-4 bg-white rounded-b-lg">
<p className="text-sm text-gray-500">Нет параметров. Добавьте параметры для динамического запроса.</p>
</div>
)
)}
</div>