mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-09 17:57:26 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #540 from acelaya-forks/feature/extended-basic-creation-form

Browse source 
Added custom slug field to the basic creation form in Overview page
This commit is contained in:
Alejandro Celaya 2021-12-19 12:56:21 +01:00 committed by GitHub
commit 482314b9f4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -7,6 +7,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased] ## [Unreleased]
### Added ### Added
* [#535](https://github.com/shlinkio/shlink-web-client/pull/535) Allowed editing default domain redirects when consuming Shlink 2.10 or newer. * [#535](https://github.com/shlinkio/shlink-web-client/pull/535) Allowed editing default domain redirects when consuming Shlink 2.10 or newer.
* [#531](https://github.com/shlinkio/shlink-web-client/pull/531) Added custom slug field to the basic creation form in the Overview page.
### Changed ### Changed
* [#534](https://github.com/shlinkio/shlink-web-client/pull/534) Updated axios. * [#534](https://github.com/shlinkio/shlink-web-client/pull/534) Updated axios.

25
src/short-urls/ShortUrlForm.tsx
View file

@ -41,6 +41,7 @@ export const ShortUrlForm = (
): FC<ShortUrlFormProps> => ({ mode, saving, onSave, initialState, selectedServer }) => { ): FC<ShortUrlFormProps> => ({ mode, saving, onSave, initialState, selectedServer }) => {
const [ shortUrlData, setShortUrlData ] = useState(initialState); const [ shortUrlData, setShortUrlData ] = useState(initialState);
const isEdit = mode === 'edit'; const isEdit = mode === 'edit';
const isBasicMode = mode === 'create-basic';
const hadTitleOriginally = hasValue(initialState.title); const hadTitleOriginally = hasValue(initialState.title);
const changeTags = (tags: string[]) => setShortUrlData({ ...shortUrlData, tags: tags.map(normalizeTag) }); const changeTags = (tags: string[]) => setShortUrlData({ ...shortUrlData, tags: tags.map(normalizeTag) });
const reset = () => setShortUrlData(initialState); const reset = () => setShortUrlData(initialState);
@ -66,8 +67,14 @@ export const ShortUrlForm = (
setShortUrlData(initialState); setShortUrlData(initialState);
}, [ initialState ]); }, [ initialState ]);
const renderOptionalInput = (id: NonDateFields, placeholder: string, type: InputType = 'text', props = {}) => ( const renderOptionalInput = (
<FormGroup> id: NonDateFields,
placeholder: string,
type: InputType = 'text',
props = {},
fromGroupProps = {},
) => (
<FormGroup {...fromGroupProps}>
<Input <Input
id={id} id={id}
type={type} type={type}
@ -101,10 +108,12 @@ export const ShortUrlForm = (
onChange={(e) => setShortUrlData({ ...shortUrlData, longUrl: e.target.value })} onChange={(e) => setShortUrlData({ ...shortUrlData, longUrl: e.target.value })}
/> />
</FormGroup> </FormGroup>
<Row>
<FormGroup> {isBasicMode && renderOptionalInput('customSlug', 'Custom slug', 'text', { bsSize: 'lg' }, { className: 'col-lg-6' })}
<TagsSelector selectedTags={shortUrlData.tags ?? []} onChange={changeTags} /> <FormGroup className={isBasicMode ? 'col-lg-6' : 'col-12 mb-0'}>
</FormGroup> <TagsSelector selectedTags={shortUrlData.tags ?? []} onChange={changeTags} />
</FormGroup>
</Row>
</> </>
); );
@ -118,8 +127,8 @@ export const ShortUrlForm = (
return ( return (
<form className="short-url-form" onSubmit={submit}> <form className="short-url-form" onSubmit={submit}>
{mode === 'create-basic' && basicComponents} {isBasicMode && basicComponents}
{mode !== 'create-basic' && ( {!isBasicMode && (
<> <>
<SimpleCard title="Basic options" className="mb-3"> <SimpleCard title="Basic options" className="mb-3">
{basicComponents} {basicComponents}