modified: frontend/src/pages/Databases.tsx

modified:   frontend/src/pages/Settings.tsx
This commit is contained in:
GEgorov
2025-10-07 19:59:48 +03:00
parent 713e9ba7f7
commit 65e4f5b423
2 changed files with 211 additions and 101 deletions

View File

@@ -274,12 +274,17 @@ function DatabaseModal({
<label className="block text-sm font-medium text-gray-700 mb-1">Тип</label> <label className="block text-sm font-medium text-gray-700 mb-1">Тип</label>
<select <select
value={formData.type} value={formData.type}
onChange={(e) => setFormData({ ...formData, type: e.target.value })} onChange={(e) => {
console.log('🔄 Database type changed to:', e.target.value);
setFormData({ ...formData, type: e.target.value });
}}
className="input w-full" className="input w-full"
> >
<option value="postgresql">PostgreSQL</option> <option value="postgresql">PostgreSQL</option>
<option value="aql">AQL (HTTP API)</option> <option value="aql">AQL (HTTP API)</option>
</select> </select>
{/* DEBUG: AQL option should be visible above */}
<div className="text-xs text-gray-500 mt-1">Available types: PostgreSQL, AQL (HTTP API)</div>
</div> </div>
{formData.type === 'aql' ? ( {formData.type === 'aql' ? (

View File

@@ -351,10 +351,20 @@ function DatabasesSubTab() {
)} )}
</div> </div>
<div className="grid grid-cols-2 gap-x-4 gap-y-1 text-sm text-gray-600 ml-8"> <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-sm text-gray-600 ml-8">
{db.type === 'aql' ? (
<>
<div>Base URL: <span className="font-medium text-gray-900">{db.aql_base_url}</span></div>
<div>Auth Type: <span className="font-medium text-gray-900">{db.aql_auth_type}</span></div>
<div>Auth: <span className="font-medium text-gray-900"></span></div>
</>
) : (
<>
<div>Хост: <span className="font-medium text-gray-900">{db.host}:{db.port}</span></div> <div>Хост: <span className="font-medium text-gray-900">{db.host}:{db.port}</span></div>
<div>База: <span className="font-medium text-gray-900">{db.database_name}</span></div> <div>База: <span className="font-medium text-gray-900">{db.database_name}</span></div>
<div>Пользователь: <span className="font-medium text-gray-900">{db.username}</span></div> <div>Пользователь: <span className="font-medium text-gray-900">{db.username}</span></div>
<div>Пароль: <span className="font-medium text-gray-900"></span></div> <div>Пароль: <span className="font-medium text-gray-900"></span></div>
</>
)}
</div> </div>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
@@ -430,6 +440,11 @@ function DatabaseModal({
password: '', password: '',
ssl: database?.ssl || false, ssl: database?.ssl || false,
is_active: database?.is_active !== undefined ? database.is_active : true, is_active: database?.is_active !== undefined ? database.is_active : true,
// AQL-specific fields
aql_base_url: database?.aql_base_url || '',
aql_auth_type: database?.aql_auth_type || 'basic',
aql_auth_value: database?.aql_auth_value || '',
aql_headers: database?.aql_headers || {},
}); });
const saveMutation = useMutation({ const saveMutation = useMutation({
@@ -439,6 +454,10 @@ function DatabaseModal({
if (database && !payload.password) { if (database && !payload.password) {
delete payload.password; delete payload.password;
} }
// Для AQL: если редактируем и auth_value пустой, удаляем его
if (database && data.type === 'aql' && !payload.aql_auth_value) {
delete payload.aql_auth_value;
}
return database ? dbManagementApi.update(database.id, payload) : dbManagementApi.create(payload); return database ? dbManagementApi.update(database.id, payload) : dbManagementApi.create(payload);
}, },
onSuccess: () => { onSuccess: () => {
@@ -478,7 +497,6 @@ function DatabaseModal({
/> />
</div> </div>
<div className="grid grid-cols-2 gap-4">
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1">Тип</label> <label className="block text-sm font-medium text-gray-700 mb-1">Тип</label>
<select <select
@@ -487,8 +505,105 @@ function DatabaseModal({
className="input w-full" className="input w-full"
> >
<option value="postgresql">PostgreSQL</option> <option value="postgresql">PostgreSQL</option>
<option value="aql">AQL (HTTP API)</option>
</select> </select>
</div> </div>
{formData.type === 'aql' ? (
<>
{/* AQL Fields */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">AQL Base URL *</label>
<input
type="text"
required
value={formData.aql_base_url}
onChange={(e) => setFormData({ ...formData, aql_base_url: e.target.value })}
className="input w-full"
placeholder="http://api.ehrdb.ncms-i.ru/api/rest/v1"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Тип аутентификации</label>
<select
value={formData.aql_auth_type}
onChange={(e) => setFormData({ ...formData, aql_auth_type: e.target.value })}
className="input w-full"
>
<option value="basic">Basic Auth</option>
<option value="bearer">Bearer Token</option>
<option value="custom">Custom Header</option>
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
{formData.aql_auth_type === 'basic' && 'Basic Auth Value (Base64)'}
{formData.aql_auth_type === 'bearer' && 'Bearer Token'}
{formData.aql_auth_type === 'custom' && 'Custom Authorization Value'}
</label>
<input
type="password"
required={!database}
value={formData.aql_auth_value}
onChange={(e) => setFormData({ ...formData, aql_auth_value: e.target.value })}
className="input w-full"
placeholder={database ? '••••••••' : 'Введите значение'}
/>
{database && (
<p className="text-xs text-gray-500 mt-1">Оставьте пустым, чтобы не менять</p>
)}
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Дополнительные заголовки (JSON)
<span className="text-xs text-gray-500 ml-2">необязательно</span>
</label>
<textarea
value={typeof formData.aql_headers === 'string' ? formData.aql_headers : JSON.stringify(formData.aql_headers, null, 2)}
onChange={(e) => {
try {
const parsed = JSON.parse(e.target.value);
setFormData({ ...formData, aql_headers: parsed });
} catch {
setFormData({ ...formData, aql_headers: e.target.value });
}
}}
className="input w-full font-mono text-sm"
rows={4}
placeholder='{"x-dbrole": "KIS.EMIAS.XАПИД", "Hack-Time": "true"}'
/>
</div>
<div className="flex items-center gap-4">
<label className="flex items-center gap-2">
<input
type="checkbox"
checked={formData.is_active}
onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
className="rounded"
/>
<span className="text-sm text-gray-700">Активна</span>
</label>
</div>
</>
) : (
<>
{/* PostgreSQL Fields */}
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Хост</label>
<input
type="text"
required
value={formData.host}
onChange={(e) => setFormData({ ...formData, host: e.target.value })}
className="input w-full"
placeholder="localhost"
/>
</div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1">Порт</label> <label className="block text-sm font-medium text-gray-700 mb-1">Порт</label>
<input <input
@@ -501,18 +616,6 @@ function DatabaseModal({
</div> </div>
</div> </div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Хост</label>
<input
type="text"
required
value={formData.host}
onChange={(e) => setFormData({ ...formData, host: e.target.value })}
className="input w-full"
placeholder="localhost"
/>
</div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1">Имя базы данных</label> <label className="block text-sm font-medium text-gray-700 mb-1">Имя базы данных</label>
<input <input
@@ -583,6 +686,8 @@ function DatabaseModal({
<span className="text-sm text-gray-700">Активна</span> <span className="text-sm text-gray-700">Активна</span>
</label> </label>
</div> </div>
</>
)}
<div className="flex gap-3 pt-4 border-t border-gray-200"> <div className="flex gap-3 pt-4 border-t border-gray-200">
<button type="button" onClick={onClose} className="btn btn-secondary"> <button type="button" onClick={onClose} className="btn btn-secondary">