Skip to content

Commit

Permalink
BasicInformationForm and QuotaModal components
Browse files Browse the repository at this point in the history
  • Loading branch information
@vpiili
vpiili committed Mar 16, 2023
1 parent 4330daa commit b677ba2
Show file tree
Hide file tree
Showing 9 changed files with 416 additions and 10 deletions.
21 changes: 15 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,36 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "4.3.1",
"flag-icons": "^6.6.6",
"i18next": "^22.4.10",
"i18next-browser-languagedetector": "^7.0.1",
"@fortawesome/fontawesome-free": "^6.3.0",
"@fortawesome/fontawesome-svg-core": "^6.3.0",
"@fortawesome/free-regular-svg-icons": "^6.3.0",
"@fortawesome/free-solid-svg-icons": "^6.3.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@js-joda/core": "^5.5.2",
"@js-joda/timezone": "^2.17.2",
"@types/jest": "^27.5.2",
"@types/jquery": "^3.5.14",
"@types/node": "^16.11.68",
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"bootstrap": "^5.2.3",
"flag-icons": "^6.6.6",
"i18next": "^22.4.10",
"i18next-browser-languagedetector": "^7.0.1",
"jquery": "^3.6.1",
"legacy-bootstrap": "npm:[email protected]",
"legacy-fontawesome": "npm:@fortawesome/[email protected]",
"react": "^18.2.0",
"react-bootstrap": "^2.7.2",
"react-datepicker": "^4.10.0",
"react-dom": "^18.2.0",
"react-form-builder2": "^0.14.3",
"react-i18next": "^12.1.5",
"react-router-bootstrap": "^0.26.2",
"react-form-builder2": "^0.14.2",
"react-router-dom": "^6.4.3",
"react-scripts": "5.0.1",
"styled-components": "^5.3.6",
"react-spinners": "^0.13.6",
"styled-components": "^5.3.6",
"typescript": "^4.8.4"
},
"scripts": {
Expand Down Expand Up @@ -67,6 +75,7 @@
"@types/jest": "^27.5.2",
"@types/node": "^16.11.68",
"@types/react": "^18.0.21",
"@types/react-datepicker": "^4.10.0",
"@types/react-dom": "^18.0.6",
"@types/react-router-bootstrap": "^0.26.0",
"@types/styled-components": "^5.1.26",
Expand Down
4 changes: 0 additions & 4 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,6 @@
media="all"
/>
<title>Asteriski - Tapahtumailmoittautumisjärjestelmä</title>
<script
defer
src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"
></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
214 changes: 214 additions & 0 deletions src/components/BasicInformationForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,214 @@
import React, { useState } from 'react'
import { Quota } from '../types/types'
import { Form, Row, Col, Button } from 'react-bootstrap'
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'
import { QuotaModal } from './QuotaModal'
import { EventBasicInformation } from '../types/types'

export const BasicInformationForm = ({
onSubmit,
}: {
onSubmit: (data: EventBasicInformation) => void
}) => {
const [modalVisible, setModalVisible] = useState(false)
const [quotas, setQuotas] = useState<Quota[]>([])
const [name, setName] = useState('')
const [place, setPlace] = useState('')
const [description, setDescription] = useState('')
const [price, setPrice] = useState('')
const [startDate, setStartDate] = useState<Date>()
const [endDate, setEndDate] = useState<Date>()
const [signupStarts, setSignupStarts] = useState<Date>()
const [signupEnds, setSignupEnds] = useState<Date>()
const [image, setImage] = useState<File | null>(null)
const [maxParticipants, setMaxParticipants] = useState('')
const [hasParticipantLimit, setHasParticipantLimit] = useState(false)
const [hasQuotas, setHasQuotas] = useState(false)

return (
<Form>
<Form.Group className="mb-3">
<Form.Label>Tapahtuman nimi</Form.Label>
<Form.Control
required
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</Form.Group>

<Form.Group className="mb-3">
<Form.Label>Tapahtuman paikka</Form.Label>
<Form.Control
required
type="text"
value={place}
onChange={(e) => setPlace(e.target.value)}
/>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>Tapahtuman kuvaus</Form.Label>
<Form.Control
required
as="textarea"
type="text"
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>Tapahtuman hinta</Form.Label>
<Form.Control
required
type="number"
value={price}
onChange={(e) => setPrice(e.target.value)}
/>
</Form.Group>
<Form.Group className="mb-3">
<Row>
<Col md={6}>
<Form.Label>Tapahtuman aloituspäivä</Form.Label>
<DatePicker
selected={startDate}
onChange={(date: Date) => setStartDate(date)}
showTimeSelect
timeFormat="HH:mm"
dateFormat="dd.M.yyyy HH:mm"
/>
</Col>
<Col md={6}>
<Form.Label>Tapahtuman lopetuspäivä</Form.Label>
<DatePicker
selected={endDate}
onChange={(date: Date) => setEndDate(date)}
showTimeSelect
timeFormat="HH:mm"
dateFormat="dd.M.yyyy HH:mm"
/>
</Col>
</Row>
</Form.Group>
<Form.Group className="mb-3">
<Row>
<Col md={6}>
<Form.Label>Ilmoittautumisen aloituspäivä</Form.Label>
<DatePicker
selected={signupStarts}
onChange={(date: Date) => setSignupStarts(date)}
showTimeSelect
timeFormat="HH:mm"
dateFormat="dd.M.yyyy HH:mm"
/>
</Col>
<Col md={6}>
<Form.Label>Ilmoittautumisen lopetuspäivä</Form.Label>
<DatePicker
selected={signupEnds}
onChange={(date: Date) => setSignupEnds(date)}
showTimeSelect
timeFormat="HH:mm"
dateFormat="dd.M.yyyy HH:mm"
/>
</Col>
</Row>
</Form.Group>
<Form.Group className="mb-3">
<Form.Control
type="file"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files) setImage(e.target.files[0])
}}
/>
</Form.Group>
<Form.Group className="mb-3">
<Row>
<Col md={6}>
<Form.Check
label="Tapahtumalla on osallistujamäärärajoitus"
type="checkbox"
checked={hasParticipantLimit}
onChange={(e) => setHasParticipantLimit(e.target.checked)}
/>
</Col>
{hasParticipantLimit && (
<Col md={6}>
<Form.Label>Maksimi osallistujamäärä</Form.Label>
<Form.Control
type={'number'}
value={maxParticipants}
onChange={(e) => setMaxParticipants(e.target.value)}
/>
</Col>
)}
</Row>
</Form.Group>

<Form.Group className="mb-3">
<Row>
<Col md={6}>
<Form.Check
label="Tapahtumalla on osallistujakiintiöitä"
type="checkbox"
checked={hasQuotas}
onChange={(e) => setHasQuotas(e.target.checked)}
/>
</Col>
{hasQuotas && (
<Col md={6}>
<Form.Label>Osallistujakiintiöt</Form.Label>
<Form.Control
as="textarea"
disabled
value={quotas
.map(({ group, quota }) => `${group || ''}: ${quota || ''}`)
.join('\n')}
/>
<Button
size="sm"
variant="info"
onClick={() => setModalVisible(true)}
style={{ marginTop: '10px' }}
>
{quotas.length ? 'Muokkaa kiintiöitä' : 'Lisää kiintiöitä'}
</Button>
<QuotaModal
visible={modalVisible}
onHide={() => setModalVisible(false)}
onSubmit={(quotas) => setQuotas(quotas)}
/>
</Col>
)}
</Row>
</Form.Group>

<Button
variant="primary"
onClick={() =>
onSubmit({
name,
place,
description,
price: Number(price) || undefined,
startDate: parseDate(startDate) || '',
endDate: parseDate(endDate),
signupStarts: parseDate(signupStarts),
signupEnds: parseDate(signupEnds),
bannerImg: image?.name || undefined,
minParticipants: 0,
maxParticipants: Number(maxParticipants) || undefined,
})
}
style={{ marginRight: '10px' }}
>
Jatka
</Button>
<Button variant="secondary" onClick={(e) => e}>
Tyhjennä
</Button>
</Form>
)
}

const parseDate = (date?: Date) => date?.toDateString() || undefined
31 changes: 31 additions & 0 deletions src/components/FormBuilder.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React, { useState } from 'react'
import {
ReactFormBuilder,
ReactFormGenerator,
FormBuilderPostData,
} from 'react-form-builder2'
import 'legacy-bootstrap/dist/css/bootstrap.min.css' // :(
import 'legacy-fontawesome/css/all.min.css' // :`(
import 'react-form-builder2/dist/app.css'

const FormBuilder = () => {
const [data, setData] = useState<FormBuilderPostData | null>(null)
return (
<>
<ReactFormGenerator
data={data?.task_data || []}
form_action=""
form_method="POST"
/>
<ReactFormBuilder
editMode
onPost={(a) => {
console.log(a)
setData(a)
}}
/>
</>
)
}

export { FormBuilder }
1 change: 1 addition & 0 deletions src/components/HeaderComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ const StyledHeaderContainer = styled.div`
const StyledNavbar = styled(Navbar)`
background-color: #2b8c49;
box-shadow: 0 0 0.7em #8e8d8d;
padding: 0.5rem 1rem;
`

const StyledLink = styled(Nav.Link)`
Expand Down
Loading

0 comments on commit b677ba2

Please sign in to comment.