You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
1.2 KiB
JavaScript
33 lines
1.2 KiB
JavaScript
import React from 'react'
|
|
import router from 'next/router'
|
|
import {FormController, Input, TextArea, DecimalInput, Button, Checkbox} from '~/components/form'
|
|
|
|
export default function NewItem() {
|
|
const stringLengthAtLeastOne = str => str.length > 0
|
|
const slugRestrictions = str => {
|
|
if(str.length < 3) return false;
|
|
if(str.length > 20) return false;
|
|
if(!str.match(/^[-a-z0-9_]*$/i)) return false;
|
|
return true;
|
|
}
|
|
|
|
const afterCreate = (item) => {
|
|
router.push(`/admin/items/${item.urlslug}`)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<h2>Create New Item</h2>
|
|
<FormController url="/api/items" afterSubmit={afterCreate}>
|
|
<Input name="name" validate={stringLengthAtLeastOne} />
|
|
<TextArea name="description" validate={stringLengthAtLeastOne} />
|
|
<Input label="URL Slug" name="urlslug" validate={slugRestrictions} />
|
|
<DecimalInput label="Price" name="price_cents" prefix="$" numDecimals={2} transform={float => Math.floor(float * 100)} />
|
|
<Checkbox label="Published" name="published" hint="Publish this item" />
|
|
<p><strong>Note:</strong> You can add images to an item after creating it</p>
|
|
<Button type="submit">Create</Button>
|
|
</FormController>
|
|
</>
|
|
)
|
|
}
|