forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-12 10:33:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improved server form

Browse Source
This commit is contained in:
Alejandro Celaya
2020-12-12 11:43:16 +01:00
parent d62edb2249
commit 4d969b994e
8 changed files with 55 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/servers/CreateServer.tsx
View File

@@ -44,7 +44,7 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
return (
<NoMenuLayout>
<ServerForm onSubmit={handleSubmit}>
<ServerForm title={<h5 className="mb-0">Add new server</h5>} onSubmit={handleSubmit}>
<ImportServersBtn onImport={setServersImported} onImportError={setErrorImporting} />
<button className="btn btn-outline-primary">Create server</button>
</ServerForm>

6
src/servers/EditServer.tsx
View File

@@ -23,7 +23,11 @@ export const EditServer = (ServerError: FC) => withSelectedServer<EditServerProp
return (
<NoMenuLayout>
<ServerForm initialValues={selectedServer} onSubmit={handleSubmit}>
<ServerForm
title={<h5 className="mb-0">Edit "{selectedServer.name}"</h5>}
initialValues={selectedServer}
onSubmit={handleSubmit}
>
<Button outline className="mr-2" onClick={goBack}>Cancel</Button>
<Button outline color="primary">Save</Button>
</ServerForm>

3
src/servers/helpers/ServerForm.scss Normal file
View File

@@ -0,0 +1,3 @@
.server-form .form-group:last-child {
margin-bottom: 0;
}

19
src/servers/helpers/ServerForm.tsx
View File

@@ -1,14 +1,17 @@
import { FC, useEffect, useState } from 'react';
import { HorizontalFormGroup } from '../../utils/HorizontalFormGroup';
import { FC, ReactNode, useEffect, useState } from 'react';
import { FormGroupContainer } from '../../utils/FormGroupContainer';
import { handleEventPreventingDefault } from '../../utils/utils';
import { ServerData } from '../data';
import { SimpleCard } from '../../utils/SimpleCard';
import './ServerForm.scss';
interface ServerFormProps {
onSubmit: (server: ServerData) => void;
initialValues?: ServerData;
title?: ReactNode;
}
export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, children }) => {
export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, children, title }) => {
const [ name, setName ] = useState('');
const [ url, setUrl ] = useState('');
const [ apiKey, setApiKey ] = useState('');
@@ -21,10 +24,12 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
}, [ initialValues ]);
return (
<form onSubmit={handleSubmit}>
<HorizontalFormGroup value={name} onChange={setName}>Name</HorizontalFormGroup>
<HorizontalFormGroup type="url" value={url} onChange={setUrl}>URL</HorizontalFormGroup>
<HorizontalFormGroup value={apiKey} onChange={setApiKey}>API key</HorizontalFormGroup>
<form className="server-form" onSubmit={handleSubmit}>
<SimpleCard className="mb-4" title={title}>
<FormGroupContainer value={name} onChange={setName}>Name</FormGroupContainer>
<FormGroupContainer type="url" value={url} onChange={setUrl}>URL</FormGroupContainer>
<FormGroupContainer value={apiKey} onChange={setApiKey}>API key</FormGroupContainer>
</SimpleCard>
<div className="text-right">{children}</div>
</form>