modified: frontend/src/components/EndpointModal.tsx

frontend/src/components/EndpointModal.tsx

@@ -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="border border-gray-200 rounded-lg">
-            <div className="flex items-center justify-between mb-2">
+            <div
-              <label className="block text-sm font-medium text-gray-700">
+              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 ? (
+            {parametersExpanded && (
-              <div className="space-y-3 mb-4 border border-gray-200 rounded-lg p-4">
+              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>