parent
2883af2b4f
commit
8e9de4c944
@ -0,0 +1,68 @@
|
||||
import {useTranslation} from "next-i18next";
|
||||
import {faXmark} from "@fortawesome/free-solid-svg-icons";
|
||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
||||
import {Row, Col} from "reactstrap"
|
||||
import {useState} from "react";
|
||||
import Button from "@components/Button"
|
||||
|
||||
|
||||
const InputField = ({value, onDelete}) => {
|
||||
return <Button
|
||||
icon={faXmark}
|
||||
className='bg-light text-primary border-0'
|
||||
outline={true}
|
||||
style={{boxShadow: "unset"}}
|
||||
>
|
||||
{value}
|
||||
</Button >
|
||||
}
|
||||
|
||||
|
||||
const ListInput = ({onEdit, inputs, validator}) => {
|
||||
|
||||
const [state, setState] = useState("");
|
||||
|
||||
const {t} = useTranslation();
|
||||
|
||||
const handleDelete = (position: number) => {
|
||||
onEdit({...inputs}.splice(position))
|
||||
}
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === 'Enter') {
|
||||
if (validator(state)) {
|
||||
setState("");
|
||||
onEdit([...inputs, state])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setState(e.target.value);
|
||||
}
|
||||
|
||||
return <Row className='gx-2 p-1 shadow list-input align-items-center'>
|
||||
{inputs.map((item, i) =>
|
||||
<Col className='col-auto'>
|
||||
<InputField
|
||||
key={i}
|
||||
value={item}
|
||||
onDelete={() => handleDelete(i)}
|
||||
/>
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
<Col className='col-auto'>
|
||||
<input
|
||||
type='text'
|
||||
className='border-0 w-100'
|
||||
placeholder={t('admin.private-placeholder')}
|
||||
onKeyPress={handleKeyDown}
|
||||
onChange={handleChange}
|
||||
value={state}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
}
|
||||
|
||||
export default ListInput;
|
||||
@ -0,0 +1,56 @@
|
||||
import {useState} from 'react'
|
||||
import {Row, Col} from 'reactstrap';
|
||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||||
import {
|
||||
faPlus, faPen, faXmark, faCheck, faRotateLeft
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import {useElection, useElectionDispatch} from './ElectionContext';
|
||||
|
||||
const GradeField = ({value}) => {
|
||||
const [modal, setModal] = useState(false);
|
||||
const toggle = () => setModal(m => !m)
|
||||
|
||||
const election = useElection();
|
||||
const grade = election.grades[value];
|
||||
const dispatch = useElectionDispatch();
|
||||
|
||||
// const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
// dispatch({
|
||||
// type: 'grade-set',
|
||||
// position: value,
|
||||
// field: 'name',
|
||||
// value: e.target.value,
|
||||
// })
|
||||
// }
|
||||
|
||||
const handleActive = () => {
|
||||
dispatch({
|
||||
type: 'grade-set',
|
||||
position: value,
|
||||
field: 'active',
|
||||
value: !grade.active,
|
||||
})
|
||||
}
|
||||
|
||||
const style = {
|
||||
color: grade.active ? "white" : "#8F88BA",
|
||||
backgroundColor: grade.active ? grade.color : "#F2F0FF",
|
||||
}
|
||||
|
||||
return <Row
|
||||
style={style}
|
||||
onClick={toggle}
|
||||
className='p-2 m-1 rounded-1'
|
||||
>
|
||||
<Col className={`${grade.active ? "" : "text-decoration-line-through"} col-auto fw-bold`}>
|
||||
{grade.name}
|
||||
</Col>
|
||||
<Col onClick={handleActive} className='col-auto'>
|
||||
<FontAwesomeIcon icon={grade.active ? faXmark : faRotateLeft} />
|
||||
</Col>
|
||||
</Row >
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default GradeField;
|
||||
Loading…
Reference in new issue