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:20:39 +03:00
parent afd79b9c2e
commit 5255e0622e
1 changed files with 77 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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