From 5255e0622ef47c6e1f3a999ea837eadf82da69a1 Mon Sep 17 00:00:00 2001
From: GEgorov <GEgorov@ncms-i.ru>
Date: Mon, 15 Dec 2025 16:20:39 +0300
Subject: [PATCH] 	modified:   frontend/src/components/EndpointModal.tsx

---
 frontend/src/components/EndpointModal.tsx | 139 ++++++++++++----------
 1 file changed, 77 insertions(+), 62 deletions(-)

diff --git a/frontend/src/components/EndpointModal.tsx b/frontend/src/components/EndpointModal.tsx
index 6ed723e..bdf93d7 100644
--- a/frontend/src/components/EndpointModal.tsx
+++ b/frontend/src/components/EndpointModal.tsx
@@ -464,14 +464,26 @@ export default function EndpointModal({
                 </select>
               </div>
 
-              <div>
-                <div className="flex items-center justify-between mb-2">
-                  <label className="block text-sm font-medium text-gray-700">
-                    SQL Запросы для скрипта
-                  </label>
+              <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={() => setQueriesExpanded(!queriesExpanded)}
+                >
+                  <div className="flex items-center gap-2">
+                    {queriesExpanded ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
+                    <label className="text-sm font-medium text-gray-700 cursor-pointer">
+                      SQL Запросы для скрипта
+                      {formData.script_queries.length > 0 && (
+                        <span className="ml-2 px-2 py-0.5 bg-primary-100 text-primary-700 rounded-full text-xs">
+                          {formData.script_queries.length}
+                        </span>
+                      )}
+                    </label>
+                  </div>
                   <button
                     type="button"
-                    onClick={() => {
+                    onClick={(e) => {
+                      e.stopPropagation();
                       const newQueries = [...formData.script_queries, {
                         name: '',
                         sql: '',
@@ -483,72 +495,75 @@ export default function EndpointModal({
                       }];
                       setFormData({ ...formData, script_queries: newQueries });
                       setEditingQueryIndex(newQueries.length - 1);
+                      setQueriesExpanded(true);
                     }}
                     className="text-sm text-primary-600 hover:text-primary-700 flex items-center gap-1"
                   >
                     <Plus size={16} />
-                    Добавить запрос
+                    Добавить
                   </button>
                 </div>
-                {formData.script_queries.length > 0 ? (
-                  <div className="space-y-2 mb-4">
-                    {formData.script_queries.map((query: any, idx: number) => (
-                      <div key={idx} className="border border-gray-200 rounded-lg p-4 bg-white hover:shadow-sm transition-shadow">
-                        <div className="flex items-center justify-between">
-                          <div className="flex-1">
-                            <div className="flex items-center gap-2 mb-1">
-                              <code className="text-sm font-semibold text-gray-900">{query.name || 'Безымянный запрос'}</code>
-                              {query.database_id && (
-                                <>
-                                  <span className="text-xs text-gray-500">
-                                    → {databases.find(db => db.id === query.database_id)?.name || 'БД не выбрана'}
-                                  </span>
-                                  {databases.find(db => db.id === query.database_id)?.type === 'aql' && (
-                                    <span className="text-xs bg-purple-100 text-purple-700 px-2 py-0.5 rounded">AQL</span>
-                                  )}
-                                </>
+                {queriesExpanded && (
+                  formData.script_queries.length > 0 ? (
+                    <div className="space-y-2 p-4">
+                      {formData.script_queries.map((query: any, idx: number) => (
+                        <div key={idx} className="border border-gray-200 rounded-lg p-4 bg-white hover:shadow-sm transition-shadow">
+                          <div className="flex items-center justify-between">
+                            <div className="flex-1">
+                              <div className="flex items-center gap-2 mb-1">
+                                <code className="text-sm font-semibold text-gray-900">{query.name || 'Безымянный запрос'}</code>
+                                {query.database_id && (
+                                  <>
+                                    <span className="text-xs text-gray-500">
+                                      → {databases.find(db => db.id === query.database_id)?.name || 'БД не выбрана'}
+                                    </span>
+                                    {databases.find(db => db.id === query.database_id)?.type === 'aql' && (
+                                      <span className="text-xs bg-purple-100 text-purple-700 px-2 py-0.5 rounded">AQL</span>
+                                    )}
+                                  </>
+                                )}
+                              </div>
+                              {query.sql && (
+                                <div className="text-xs text-gray-600 font-mono bg-gray-50 p-2 rounded mt-1 truncate">
+                                  {query.sql.substring(0, 100)}{query.sql.length > 100 ? '...' : ''}
+                                </div>
+                              )}
+                              {query.aql_endpoint && (
+                                <div className="text-xs text-gray-600 font-mono bg-purple-50 p-2 rounded mt-1">
+                                  <span className="text-purple-700 font-semibold">{query.aql_method}</span> {query.aql_endpoint}
+                                </div>
                               )}
                             </div>
-                            {query.sql && (
-                              <div className="text-xs text-gray-600 font-mono bg-gray-50 p-2 rounded mt-1 truncate">
-                                {query.sql.substring(0, 100)}{query.sql.length > 100 ? '...' : ''}
-                              </div>
-                            )}
-                            {query.aql_endpoint && (
-                              <div className="text-xs text-gray-600 font-mono bg-purple-50 p-2 rounded mt-1">
-                                <span className="text-purple-700 font-semibold">{query.aql_method}</span> {query.aql_endpoint}
-                              </div>
-                            )}
-                          </div>
-                          <div className="flex gap-2 ml-4">
-                            <button
-                              type="button"
-                              onClick={() => setEditingQueryIndex(idx)}
-                              className="p-2 hover:bg-blue-50 rounded text-blue-600"
-                              title="Редактировать запрос"
-                            >
-                              <Edit2 size={16} />
-                            </button>
-                            <button
-                              type="button"
-                              onClick={() => {
-                                const newQueries = formData.script_queries.filter((_: any, i: number) => i !== idx);
-                                setFormData({ ...formData, script_queries: newQueries });
-                              }}
-                              className="p-2 hover:bg-red-50 rounded text-red-600"
-                              title="Удалить запрос"
-                            >
-                              <Trash2 size={16} />
-                            </button>
+                            <div className="flex gap-2 ml-4">
+                              <button
+                                type="button"
+                                onClick={() => setEditingQueryIndex(idx)}
+                                className="p-2 hover:bg-blue-50 rounded text-blue-600"
+                                title="Редактировать запрос"
+                              >
+                                <Edit2 size={16} />
+                              </button>
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  const newQueries = formData.script_queries.filter((_: any, i: number) => i !== idx);
+                                  setFormData({ ...formData, script_queries: newQueries });
+                                }}
+                                className="p-2 hover:bg-red-50 rounded text-red-600"
+                                title="Удалить запрос"
+                              >
+                                <Trash2 size={16} />
+                              </button>
+                            </div>
                           </div>
                         </div>
-                      </div>
-                    ))}
-                  </div>
-                ) : (
-                  <div className="text-center py-6 mb-4 border border-gray-200 rounded-lg bg-gray-50">
-                    <p className="text-sm text-gray-500">Нет SQL запросов. Добавьте запросы для использования в скрипте.</p>
-                  </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="text-center py-6 bg-white rounded-b-lg">
+                      <p className="text-sm text-gray-500">Нет SQL запросов. Добавьте запросы для использования в скрипте.</p>
+                    </div>
+                  )
                 )}
               </div>