veikko/lintujamaslo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Complete version of the registration form.

Browse Source
This commit is contained in:
codevictory
2021-12-16 22:38:30 +02:00
parent 79968fcaab
commit 77e91161d6
6 changed files with 308 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/RegForm.scss
View File

@@ -1,18 +1,73 @@
@import '../colors.scss';
form#registration { form#registration {
max-width: 24.5em; max-width: 24.5em;
padding: 1em; padding: 1em;
}
.nameBar {
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
align-items: baseline; align-items: center;
} }
.visitors { .visitors {
display: flex;
width: 72vw;
flex-wrap: wrap;
justify-content: space-evenly;
}
.visitor {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 1em; margin-top: 1em;
margin-bottom: 1em; margin-bottom: 1em;
padding: 1em; padding: 1em;
border-radius: 5px; border-radius: 5px;
background-color: rgb(235, 235, 235); background-color: $background;
width: 400px;
font-family: 'Montserrat-Medium';
label {
color: $brown-text !important;
}
input,
label,
span {
font-size: 1.3rem;
}
.ant-form-item {
width: 100%;
}
}
.addVisitorButton {
font-family: 'Montserrat-Medium';
color: $green-text !important;
font-size: 1.5rem !important;
height: unset !important;
background-color: transparent;
text-transform: uppercase;
border-width: 0.2rem;
border-color: $green-text;
:hover {
background-color: $background !important;
}
}
.submitButton {
font-family: 'Montserrat-Medium';
color: $green-text !important;
font-size: 2rem !important;
height: unset !important;
background-color: transparent;
text-transform: uppercase;
border-width: 0.2rem;
border-color: $green-text;
:hover {
background-color: $background !important;
}
} }

275
src/components/RegForm.tsx
View File

@@ -1,111 +1,212 @@
import { Button, Checkbox, Col, Form, Input, Row, Select } from 'antd'; import { Button, Form, Input, Select } from 'antd';
import { useParams } from 'react-router'; import { useParams } from 'react-router';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import "./RegForm.scss"; import './RegForm.scss';
import { addVisitor } from '../api'; import { addVisitor } from '../api';
import { arrayToString, capFirstLetter } from './utils'; import { arrayToString } from './utils';
import { Visitor } from '../model/visitor'; import { Visitor } from '../model/visitor';
import { FormattedMessage, useIntl } from 'react-intl';
import { useState } from 'react';
const { Option } = Select; const { Option } = Select;
interface ParamTypes { interface ParamTypes {
id: string; id: string;
} }
interface FormValues { interface FormValues {
visitors: Visitor[]; visitors: Visitor[];
} }
const preferences = ["vegan", "vegetarian", "everything goes"].map(preference => { const preferences = ['vegan', 'vegetarian', 'murder'].map((preference) => {
return <Option key={preference} value={preference}>{capFirstLetter(preference)}</Option> return (
<Option key={preference} value={preference}>
<FormattedMessage id={'registration.form.preferences.' + preference} />
</Option>
);
}); });
const allergies = ["lactose", "dairy", "gluten", "wheat"].map(allergy => { const allergies = ['lactose', 'dairy', 'gluten', 'wheat'].map((allergy) => {
return <Option key={allergy} value={allergy}>{capFirstLetter(allergy)}</Option> return (
<Option key={allergy} value={allergy}>
<FormattedMessage id={'registration.form.allergies.' + allergy} />
</Option>
);
}); });
const welcomeDrinks = ['alcoholBubbles', 'alcoholFreeBubbles'].map(
(welcomeDrink) => {
return (
<Option key={welcomeDrink} value={welcomeDrink}>
<FormattedMessage
id={'registration.form.welcomeDrinks.' + welcomeDrink}
/>
</Option>
);
}
);
export const RegForm = () => { export const RegForm = () => {
const { id } = useParams<ParamTypes>(); const { id } = useParams<ParamTypes>();
const intl = useIntl();
const [visitorCount, setVisitorCount] = useState(0);
const onFinish = (values: FormValues) => { const onFinish = (values: FormValues) => {
values.visitors.map(visitor => { values.visitors.map((visitor) => {
addVisitor({ addVisitor({
...visitor, ...visitor,
allergies: visitor.allergies ? arrayToString(visitor.allergies) : "", allergies: visitor.allergies ? arrayToString(visitor.allergies) : '',
services: visitor.services ? arrayToString(visitor.services) : "", services: visitor.services ? arrayToString(visitor.services) : '',
preferences: visitor.preferences ?? "", preferences: visitor.preferences ?? '',
invitationId: visitor.invitationId = atob(id), invitationId: (visitor.invitationId = atob(id)),
}); });
}); });
} };
const [form] = Form.useForm(); const [form] = Form.useForm();
return ( return (
<Form form={form} name="registration" onFinish={onFinish} autoComplete="off"> <Form
<Form.List name="visitors"> form={form}
{(fields, { add, remove }) => ( name='registration'
<> onFinish={onFinish}
{ autoComplete='off'
fields.map(field => ( layout='vertical'
<div className="visitors" key={field.key}> >
<div className="nameBar"> <Form.List name='visitors'>
<Form.Item {(fields, { add, remove }) => (
label="Name" <>
name={[field.name, 'name']} <div className='visitors'>
fieldKey={[field.fieldKey, 'name']} {fields.map((field) => (
rules={[{ required: true, message: 'Missing name' }]} <div className='visitor' key={field.key}>
> <Form.Item
<Input placeholder="Full or nickname" /> label={intl.formatMessage({
</Form.Item> id: 'registration.form.name',
<MinusCircleOutlined onClick={() => remove(field.name)} className="deleteButton" /> })}
</div> name={[field.name, 'name']}
<Form.Item name={[field.name, "allergies"]} label="Allergies" fieldKey={[field.fieldKey, 'name']}
fieldKey={[field.fieldKey, 'allergies']}> rules={[
<Select mode="tags" placeholder="Lactose, wheat..."> {
{allergies} required: true,
</Select> message: intl.formatMessage({
</Form.Item> id: 'registration.form.name.missing',
<Form.Item name={[field.name, "preferences"]} label="Preferences" }),
fieldKey={[field.fieldKey, 'preferences']}> },
<Select placeholder="Vegan..."> ]}
{preferences} >
</Select> <Input
</Form.Item> placeholder={intl.formatMessage({
<Form.Item id: 'registration.form.name.placeholder',
name={[field.name, "services"]} label="Do you need?" })}
fieldKey={[field.fieldKey, 'services']}> />
<Checkbox.Group> </Form.Item>
<Row> <Form.Item
<Col> name={[field.name, 'allergies']}
<Checkbox value="ride"> label={intl.formatMessage({
Ride id: 'registration.form.allergies',
</Checkbox> })}
</Col> fieldKey={[field.fieldKey, 'allergies']}
<Col> >
<Checkbox value="accomodation"> <Select
Accomodation mode='tags'
</Checkbox> placeholder={intl.formatMessage({
</Col> id: 'registration.form.allergies.placeholder',
</Row> })}
</Checkbox.Group> >
</Form.Item> {allergies}
</div> </Select>
))} </Form.Item>
<Form.Item> <Form.Item
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}> name={[field.name, 'preferences']}
Add visitor label={intl.formatMessage({
</Button> id: 'registration.form.preferences',
</Form.Item> })}
</> fieldKey={[field.fieldKey, 'preferences']}
)} >
</Form.List> <Select
placeholder={intl.formatMessage({
id: 'registration.form.preferences.placeholder',
})}
>
{preferences}
</Select>
</Form.Item>
<Form.Item
name={[field.name, 'welcomeDrinks']}
label={intl.formatMessage({
id: 'registration.form.welcomeDrinks',
})}
rules={[
{
required: true,
message: intl.formatMessage({
id: 'registration.form.welcomeDrinks.missing',
}),
},
]}
fieldKey={[field.fieldKey, 'preferences']}
>
<Select
placeholder={intl.formatMessage({
id: 'registration.form.welcomeDrinks.placeholder',
})}
>
{welcomeDrinks}
</Select>
</Form.Item>
<Button
danger
onClick={() => {
remove(field.name);
setVisitorCount(visitorCount - 1);
}}
shape='round'
size='large'
>
<FormattedMessage id='registration.form.remove' />
</Button>
</div>
))}
</div>
<Form.Item> <Form.Item>
<Button type="primary" htmlType="submit"> <Button
Submit className='addVisitorButton'
</Button> size='large'
onClick={() => {
add();
setVisitorCount(visitorCount + 1);
}}
shape='round'
>
<FormattedMessage id='registration.addVisitor' />
</Button>
</Form.Item> </Form.Item>
</Form> </>
); )}
</Form.List>
{visitorCount == 0 ? (
<Form.Item>
<Button
className='submitButton'
type='dashed'
htmlType='submit'
shape='round'
>
<FormattedMessage id='registration.form.decline' />
</Button>
</Form.Item>
) : (
<Form.Item>
<Button
className='submitButton'
htmlType='submit'
size='large'
shape='round'
>
<FormattedMessage id='registration.form.submit' />
</Button>
</Form.Item>
)}
</Form>
);
}; };

4
src/components/utils.ts
View File

@@ -1,7 +1,3 @@
export const capFirstLetter = (str: string) => {
return str.charAt(0).toUpperCase() + str.slice(1);
}
export const arrayToString = (str: string) => { export const arrayToString = (str: string) => {
return str.toString().replaceAll(",", ", "); return str.toString().replaceAll(",", ", ");
} }

28
src/constants/localization/registration/en.ts
View File

@@ -4,4 +4,32 @@ export const registration: Record<string, string> = {
"registration.about": "We will be updating the program and menu in lintujamaslo.net", "registration.about": "We will be updating the program and menu in lintujamaslo.net",
"registration.saveTheLink": "Save the link", "registration.saveTheLink": "Save the link",
"registration.fillInBefore": "Please fill the visitors in before 27th of June", "registration.fillInBefore": "Please fill the visitors in before 27th of June",
"registration.addVisitor": "Add visitor",
"registration.form.submit": "Submit",
"registration.form.decline": "Decline invitation",
"registration.form.remove": "Remove",
"registration.form.name": "Name",
"registration.form.name.placeholder": "Full or nickname",
"registration.form.name.missing": "Missing name",
"registration.form.allergies": "Food allergies",
"registration.form.allergies.placeholder": "Lactose, wheat...",
"registration.form.allergies.lactose": "Lactose",
"registration.form.allergies.dairy": "Dairy",
"registration.form.allergies.gluten": "Gluten",
"registration.form.allergies.wheat": "Wheat",
"registration.form.preferences": "Food preferences",
"registration.form.preferences.placeholder": "Vegan...",
"registration.form.preferences.vegan": "Vegan",
"registration.form.preferences.vegetarian": "Vegetarian",
"registration.form.preferences.murder": "Murder",
"registration.form.welcomeDrinks": "Welcome drink",
"registration.form.welcomeDrinks.placeholder": "What fancy you?",
"registration.form.welcomeDrinks.missing": "Missing welcome drink",
"registration.form.welcomeDrinks.alcoholBubbles": "Alcohol bubbles",
"registration.form.welcomeDrinks.alcoholFreeBubbles": "Alcohol-free bubbles"
} }

29
src/constants/localization/registration/fi.ts
View File

@@ -3,5 +3,32 @@ export const registration: Record<string, string> = {
"registration.questions": "Jos sinulla on mitään kysymyksiä\nsienistä\nvaarallisista pedoista", "registration.questions": "Jos sinulla on mitään kysymyksiä\nsienistä\nvaarallisista pedoista",
"registration.about": "Päivitämme menua ja ohjelmaa osoitteeseen lintujamaslo.net", "registration.about": "Päivitämme menua ja ohjelmaa osoitteeseen lintujamaslo.net",
"registration.saveTheLink": "Laita linkki talteen", "registration.saveTheLink": "Laita linkki talteen",
"registration.fillInBefore": "Lisääthän teiltä osallistuvat henkilöt viimeistään 27th of June", "registration.fillInBefore": "Lisääthän teiltä osallistuvat henkilöt viimeistään 27. kesäkuuta",
"registration.addVisitor": "Lisää osallistuja",
"registration.form.submit": "Vahvista",
"registration.form.decline": "Kieltäydyn kutsusta",
"registration.form.remove": "Poista",
"registration.form.name": "Nimi",
"registration.form.name.placeholder": "Koko tai lempinimi",
"registration.form.name.missing": "Nimi puuttuu",
"registration.form.allergies": "Ruoka-allergiat",
"registration.form.allergies.placeholder": "Laktoosi, vehnä...",
"registration.form.allergies.lactose": "Laktoosi",
"registration.form.allergies.dairy": "Maitotuotteet",
"registration.form.allergies.gluten": "Gluteeni",
"registration.form.allergies.wheat": "Vehnä",
"registration.form.preferences": "Erikoisruokavalio",
"registration.form.preferences.placeholder": "Vegaaninen...",
"registration.form.preferences.vegan": "Vegaani",
"registration.form.preferences.vegetarian": "Kasvissyöjä",
"registration.form.preferences.murder": "Murha",
"registration.form.welcomeDrinks": "Tervetuliasmalja",
"registration.form.welcomeDrinks.placeholder": "Mitä saisi olla?",
"registration.form.welcomeDrinks.missing": "Tervetulias malja puuttuu",
"registration.form.welcomeDrinks.alcoholBubbles": "Holillista kuplivaa",
"registration.form.welcomeDrinks.alcoholFreeBubbles": "Holitonta kuplivaa"
} }

3
src/pages/Registration.scss
View File

@@ -5,13 +5,13 @@
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
white-space: pre-line; white-space: pre-line;
text-transform: uppercase;
.Registration-main { .Registration-main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
max-width: 50%; max-width: 50%;
text-transform: uppercase;
img { img {
max-width: 60%; max-width: 60%;
@@ -27,6 +27,7 @@
.Registration-desc { .Registration-desc {
max-width: 23rem; max-width: 23rem;
margin-top: 3rem; margin-top: 3rem;
text-transform: uppercase;
h2 { h2 {
text-align: center; text-align: center;
color: $brown-text !important; color: $brown-text !important;