dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-21 01:16:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

modal styles

Browse Source
This commit is contained in:
Jan Prochazka
2020-05-13 21:04:13 +02:00
parent 2a0437e8b5
commit 7d844fe892
12 changed files with 142 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
packages/web/src/modals/ConnectionModal.js
View File

@@ -4,46 +4,51 @@ import ModalBase from './ModalBase';
import { FormButtonRow, FormButton, FormTextField, FormSelectField, FormSubmit } from '../utility/forms';
import { TextField } from '../utility/inputs';
import { Formik, Form } from 'formik';
import ModalHeader from './ModalHeader';
import ModalFooter from './ModalFooter';
import ModalContent from './ModalContent';
// import FormikForm from '../utility/FormikForm';
export default function ConnectionModal({ modalState, connection = undefined }) {
const [sqlConnectResult, setSqlConnectResult] = React.useState('Not connected');
const handleTest = async values => {
const handleTest = async (values) => {
const resp = await axios.post('connections/test', values);
const { error, version } = resp.data;
setSqlConnectResult(error || version);
};
const handleSubmit = async values => {
const handleSubmit = async (values) => {
const resp = await axios.post('connections/save', values);
modalState.close();
};
return (
<ModalBase modalState={modalState}>
<h2>{connection ? 'Edit connection' : 'Add connection'}</h2>
<ModalHeader modalState={modalState}>{connection ? 'Edit connection' : 'Add connection'}</ModalHeader>
<Formik onSubmit={handleSubmit} initialValues={connection || { server: 'localhost', engine: 'mssql' }}>
<Form>
<FormSelectField label="Database engine" name="engine">
<option value="mssql">Microsoft SQL Server</option>
<option value="mysql">MySQL</option>
<option value="postgres">Postgre SQL</option>
</FormSelectField>
<FormTextField label="Server" name="server" />
<FormTextField label="Port" name="port" />
<FormTextField label="User" name="user" />
<FormTextField label="Password" name="password" />
<FormTextField label="Display name" name="displayName" />
<ModalContent>
<FormSelectField label="Database engine" name="engine">
<option value="mssql">Microsoft SQL Server</option>
<option value="mysql">MySQL</option>
<option value="postgres">Postgre SQL</option>
</FormSelectField>
<FormTextField label="Server" name="server" />
<FormTextField label="Port" name="port" />
<FormTextField label="User" name="user" />
<FormTextField label="Password" name="password" />
<FormTextField label="Display name" name="displayName" />
<div>Connect result: {sqlConnectResult}</div>
</ModalContent>
<FormButtonRow>
<ModalFooter>
<FormButton text="Test" onClick={handleTest} />
<FormSubmit text="Save" />
</FormButtonRow>
</ModalFooter>
</Form>
</Formik>
<div>Connect result: {sqlConnectResult}</div>
</ModalBase>
);
}