plugin-postgresql-connector
Version:
NocoBase plugin for connecting to external PostgreSQL databases
125 lines • 9.38 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ConnectionForm = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const antd_1 = require("antd");
const icons_1 = require("@ant-design/icons");
const client_1 = require("@nocobase/client");
const { Title } = antd_1.Typography;
const ConnectionForm = ({ onSuccess, initialValues, mode = 'create', connectionId }) => {
const [form] = antd_1.Form.useForm();
const [testing, setTesting] = (0, react_1.useState)(false);
const [testResult, setTestResult] = (0, react_1.useState)(null);
// Test connection functionality
const { run: testConnection } = (0, client_1.useRequest)((values) => ({
url: '/postgresql-connections/test',
method: 'POST',
data: values,
}), {
manual: true,
onSuccess: (data) => {
setTestResult({ success: true, message: 'Kết nối thành công!' });
antd_1.message.success('Connection test successful!');
},
onError: (error) => {
setTestResult({ success: false, message: error.message || 'Connection failed' });
antd_1.message.error(`Connection test failed: ${error.message}`);
},
onFinally: () => {
setTesting(false);
},
});
// Create connection functionality
const { run: createConnection, loading: creating } = (0, client_1.useRequest)((values) => ({
url: '/postgresql-connections',
method: 'POST',
data: values,
}), {
manual: true,
onSuccess: (data) => {
antd_1.message.success('Tạo kết nối thành công!');
form.resetFields();
setTestResult(null);
onSuccess?.(data);
},
onError: (error) => {
antd_1.message.error(`Tạo kết nối thất bại: ${error.message}`);
},
});
// Update connection functionality
const { run: updateConnection, loading: updating } = (0, client_1.useRequest)((values) => ({
url: `/postgresql-connections/${connectionId}`,
method: 'PUT',
data: values,
}), {
manual: true,
onSuccess: (data) => {
antd_1.message.success('Cập nhật kết nối thành công!');
setTestResult(null);
onSuccess?.(data);
},
onError: (error) => {
antd_1.message.error(`Cập nhật kết nối thất bại: ${error.message}`);
},
});
const handleTestConnection = async () => {
try {
const values = await form.validateFields();
setTesting(true);
setTestResult(null);
testConnection(values);
}
catch (error) {
console.error('Validation failed:', error);
antd_1.message.warning('Vui lòng điền đầy đủ thông tin kết nối');
}
};
const handleSubmit = async () => {
try {
const values = await form.validateFields();
if (mode === 'edit' && connectionId) {
updateConnection(values);
}
else {
createConnection(values);
}
}
catch (error) {
console.error('Validation failed:', error);
antd_1.message.warning('Vui lòng kiểm tra lại thông tin');
}
};
const isLoading = creating || updating;
return ((0, jsx_runtime_1.jsxs)(antd_1.Card, { children: [(0, jsx_runtime_1.jsx)("div", { style: { marginBottom: 24 }, children: (0, jsx_runtime_1.jsxs)(Title, { level: 4, style: { margin: 0, display: 'flex', alignItems: 'center', gap: 8 }, children: [(0, jsx_runtime_1.jsx)(icons_1.DatabaseOutlined, {}), mode === 'edit' ? 'Chỉnh sửa kết nối PostgreSQL' : 'Tạo kết nối PostgreSQL mới'] }) }), (0, jsx_runtime_1.jsxs)(antd_1.Form, { form: form, layout: "vertical", initialValues: {
port: 5432,
ssl: false,
...initialValues,
}, style: { maxWidth: 600 }, children: [(0, jsx_runtime_1.jsx)(antd_1.Form.Item, { name: "name", label: "T\u00EAn k\u1EBFt n\u1ED1i", rules: [
{ required: true, message: 'Vui lòng nhập tên kết nối' },
{ min: 3, message: 'Tên kết nối phải có ít nhất 3 ký tự' },
{ max: 100, message: 'Tên kết nối không được vượt quá 100 ký tự' },
], children: (0, jsx_runtime_1.jsx)(antd_1.Input, { placeholder: "V\u00ED d\u1EE5: Production Database", size: "large" }) }), (0, jsx_runtime_1.jsxs)(antd_1.Space, { size: "large", style: { width: '100%' }, direction: "vertical", children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 16 }, children: [(0, jsx_runtime_1.jsx)(antd_1.Form.Item, { name: "host", label: "Host", rules: [{ required: true, message: 'Vui lòng nhập host' }], style: { flex: 1 }, children: (0, jsx_runtime_1.jsx)(antd_1.Input, { placeholder: "localhost ho\u1EB7c IP address", size: "large" }) }), (0, jsx_runtime_1.jsx)(antd_1.Form.Item, { name: "port", label: "Port", rules: [
{ required: true, message: 'Vui lòng nhập port' },
{ type: 'number', min: 1, max: 65535, message: 'Port phải từ 1-65535' },
], style: { width: 120 }, children: (0, jsx_runtime_1.jsx)(antd_1.InputNumber, { placeholder: "5432", min: 1, max: 65535, size: "large", style: { width: '100%' } }) })] }), (0, jsx_runtime_1.jsx)(antd_1.Form.Item, { name: "database", label: "T\u00EAn database", rules: [
{ required: true, message: 'Vui lòng nhập tên database' },
{ min: 1, message: 'Tên database không được để trống' },
], children: (0, jsx_runtime_1.jsx)(antd_1.Input, { placeholder: "V\u00ED d\u1EE5: myapp_production", size: "large" }) }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: 16 }, children: [(0, jsx_runtime_1.jsx)(antd_1.Form.Item, { name: "username", label: "Username", rules: [{ required: true, message: 'Vui lòng nhập username' }], style: { flex: 1 }, children: (0, jsx_runtime_1.jsx)(antd_1.Input, { placeholder: "postgres", size: "large" }) }), (0, jsx_runtime_1.jsx)(antd_1.Form.Item, { name: "password", label: "Password", rules: [{ required: true, message: 'Vui lòng nhập password' }], style: { flex: 1 }, children: (0, jsx_runtime_1.jsx)(antd_1.Input.Password, { placeholder: "Nh\u1EADp password", size: "large" }) })] }), (0, jsx_runtime_1.jsx)(antd_1.Form.Item, { name: "ssl", label: "K\u1EBFt n\u1ED1i SSL", valuePropName: "checked", extra: "B\u1EADt SSL \u0111\u1EC3 k\u1EBFt n\u1ED1i an to\u00E0n h\u01A1n", children: (0, jsx_runtime_1.jsx)(antd_1.Switch, { checkedChildren: "SSL", unCheckedChildren: "No SSL" }) })] }), testResult && ((0, jsx_runtime_1.jsxs)("div", { style: {
marginBottom: 16,
padding: 12,
border: `1px solid ${testResult.success ? '#52c41a' : '#ff4d4f'}`,
borderRadius: 6,
backgroundColor: testResult.success ? '#f6ffed' : '#fff2f0',
display: 'flex',
alignItems: 'center',
gap: 8,
}, children: [(0, jsx_runtime_1.jsx)(icons_1.CheckCircleOutlined, { style: {
color: testResult.success ? '#52c41a' : '#ff4d4f'
} }), (0, jsx_runtime_1.jsx)("span", { style: { color: testResult.success ? '#52c41a' : '#ff4d4f' }, children: testResult.message })] })), (0, jsx_runtime_1.jsx)(antd_1.Form.Item, { style: { marginTop: 24 }, children: (0, jsx_runtime_1.jsxs)(antd_1.Space, { children: [(0, jsx_runtime_1.jsx)(antd_1.Button, { type: "default", onClick: handleTestConnection, loading: testing, icon: testing ? (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, {}) : (0, jsx_runtime_1.jsx)(icons_1.CheckCircleOutlined, {}), size: "large", children: testing ? 'Đang kiểm tra...' : 'Kiểm tra kết nối' }), (0, jsx_runtime_1.jsx)(antd_1.Button, { type: "primary", onClick: handleSubmit, loading: isLoading, disabled: !testResult?.success, size: "large", children: isLoading
? (mode === 'edit' ? 'Đang cập nhật...' : 'Đang tạo...')
: (mode === 'edit' ? 'Cập nhật kết nối' : 'Tạo kết nối') })] }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: 16, padding: 12, backgroundColor: '#f0f0f0', borderRadius: 6 }, children: (0, jsx_runtime_1.jsxs)(antd_1.Typography.Text, { type: "secondary", style: { fontSize: 12 }, children: [(0, jsx_runtime_1.jsx)("strong", { children: "L\u01B0u \u00FD:" }), " Vui l\u00F2ng ki\u1EC3m tra k\u1EBFt n\u1ED1i tr\u01B0\u1EDBc khi l\u01B0u. Password s\u1EBD \u0111\u01B0\u1EE3c m\u00E3 h\u00F3a an to\u00E0n khi l\u01B0u tr\u1EEF."] }) })] }));
};
exports.ConnectionForm = ConnectionForm;
exports.default = exports.ConnectionForm;
//# sourceMappingURL=ConnectionForm.js.map