MieuxVoter
/
mvfront-react
mirror of https://github.com/MieuxVoter/mvfront-react
4
1
Fork 0
Code Issues Releases Wiki Polls Activity

wip: datepicker

Browse Source
pull/89/head
Pierre-Louis Guhur 1 year ago
parent 82d4ecccb5
commit daafcc9036
7 changed files with 122 additions and 13 deletions
Show Stats Download Patch File Download Diff File

4
components/CreationSteps.jsx
Unescape View File

@ -34,7 +34,7 @@ export const ProgressSteps = ({step, className, ...props}) => {
const stepId = creationSteps.indexOf(step);
return <Row className={`w-100 m-5 d-flex ${className}`} {...props}>
<Col className='col-3'>
<Col className='col-lg-3 col-6 mb-3'>
{step === 'candidate' ? null : (
<Row className='gx-2 align-items-end'>
<Col className='col-auto'>
@ -47,7 +47,7 @@ export const ProgressSteps = ({step, className, ...props}) => {
)
}
</Col>
<Col className='col-6'>
<Col className='col-lg-6 col-12'>
<Row className='w-100 gx-5 justify-content-center'>
{creationSteps.map((name, i) => <Step name={name} active={step === name} check={i < stepId} key={i} position={i + 1} />
)}

33
components/DatePicker.jsx
Unescape View File

@ -0,0 +1,33 @@
import {useState, forwardRef} from 'react'
import {Button, Row, Col} from 'reactstrap'
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import DatePicker from 'react-datepicker'
const CustomDatePicker = ({icon, date, setDate}) => {
return (<DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />);
// const ExampleCustomInput = forwardRef(({value, onClick}, ref) => (
// <Button onClick={onClick} ref={ref}>
// <Row className='gx-2 align-items-end'>
// <Col className='col-auto'>
// <FontAwesomeIcon icon={icon} />
// </Col>
// <Col className='col-auto'>
// {children}
// </Col>
// </Row>
// </Button>
// ));
// {/*<Button className="example-custom-input"
// {value}
// </button>*/}
// return (
// <DatePicker
// selected={startDate}
// onChange={(date) => setStartDate(date)}
// customInput={<ExampleCustomInput />}
// />
// );
};
export default CustomDatePicker;

3
components/Logo.jsx
Unescape View File

@ -10,9 +10,8 @@ export const getStaticProps = async ({locale}) => ({
},
});
const Logo = props => {
const Logo = ({title, ...props}) => {
const {t} = useTranslation();
const {title} = props;
const src = title ? logoWithText : logo;
return (
<Image

23
components/admin/ParamsField.jsx
Unescape View File

@ -4,6 +4,7 @@ import {Container, Row, Col} from 'reactstrap';
import {faArrowRight} from "@fortawesome/free-solid-svg-icons";
import {MAX_NUM_CANDIDATES} from '@services/constants';
import Button from '@components/Button'
import DatePicker from '@components/DatePicker'
import {useElection, useElectionDispatch} from './ElectionContext';
@ -31,7 +32,7 @@ const AccessResults = () => {
<Row>
<Col className='col-auto me-auto'>
<h4 className='text-dark'>{t('admin.access-results')}</h4>
<p className='text-dark-50'>{t('admin.access-results-desc')}</p>
<p className='text-muted'>{t('admin.access-results-desc')}</p>
</Col>
<Col className='col-auto d-flex align-items-center'>
<Switch toggle={toggle} state={election.restrictResult} />
@ -42,29 +43,37 @@ const AccessResults = () => {
const LimitDate = () => {
const {t} = useTranslation();
const defaultEndDate = new Date();
defaultEndDate.setUTCDate(endDate.getUTCDate() + 15)
const [endDate, setStartDate] = useState(defaultEndDate);
const election = useElection();
const dispatch = useElectionDispatch();
const hasDate = () => {
return election.endVote !== null;
}
const toggle = () => {
dispatch({
'type': 'set',
'field': 'restrictResult',
'value': !election.restrictResult
'field': 'endVote',
'value': hasDate() ? null : endVote,
})
}
const desc = t('admin.limit-diration-desc');
return (<Container className='bg-white container-fluid p-4'>
const desc = t('admin.limit-duration-desc');
return (<Container className='bg-white container-fluid p-4 mt-1'>
<Row>
<Col className='col-auto me-auto'>
<h4 className='text-dark'>{t('admin.limit-duration')}</h4>
{desc === "" ? null :
<p className='text-dark-50'>{desc}</p>
<p className='text-muted'>{desc}</p>
}
</Col>
<Col className='col-auto d-flex align-items-center'>
<Switch toggle={toggle} state={election.restrictResult} />
<Switch toggle={toggle} state={endVote} />
<DatePicker />
</Col>
</Row>
</Container>)

67
package-lock.json generated
Unescape View File

@ -28,6 +28,7 @@
"next-i18next": "^12.1.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-datepicker": "^4.8.0",
"react-dom": "^18.2.0",
"react-flags-select": "^2.2.3",
"react-i18next": "^12.0.0",
@ -1551,6 +1552,18 @@
"node": ">= 6"
}
},
"node_modules/date-fns": {
"version": "2.29.3",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
"integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
"engines": {
"node": ">=0.11"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/date-fns"
}
},
"node_modules/debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -3681,6 +3694,23 @@
"node": ">=0.10.0"
}
},
"node_modules/react-datepicker": {
"version": "4.8.0",
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.8.0.tgz",
"integrity": "sha512-u69zXGHMpxAa4LeYR83vucQoUCJQ6m/WBsSxmUMu/M8ahTSVMMyiyQzauHgZA2NUr9y0FUgOAix71hGYUb6tvg==",
"dependencies": {
"@popperjs/core": "^2.9.2",
"classnames": "^2.2.6",
"date-fns": "^2.24.0",
"prop-types": "^15.7.2",
"react-onclickoutside": "^6.12.0",
"react-popper": "^2.2.5"
},
"peerDependencies": {
"react": "^16.9.0 || ^17 || ^18",
"react-dom": "^16.9.0 || ^17 || ^18"
}
},
"node_modules/react-dom": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@ -3737,6 +3767,19 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/react-onclickoutside": {
"version": "6.12.2",
"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.2.tgz",
"integrity": "sha512-NMXGa223OnsrGVp5dJHkuKxQ4czdLmXSp5jSV9OqiCky9LOpPATn3vLldc+q5fK3gKbEHvr7J1u0yhBh/xYkpA==",
"funding": {
"type": "individual",
"url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
},
"peerDependencies": {
"react": "^15.5.x || ^16.x || ^17.x || ^18.x",
"react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
}
},
"node_modules/react-popper": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
@ -5474,6 +5517,11 @@
"resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz",
"integrity": "sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og=="
},
"date-fns": {
"version": "2.29.3",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
"integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
},
"debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -6943,6 +6991,19 @@
"loose-envify": "^1.1.0"
}
},
"react-datepicker": {
"version": "4.8.0",
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.8.0.tgz",
"integrity": "sha512-u69zXGHMpxAa4LeYR83vucQoUCJQ6m/WBsSxmUMu/M8ahTSVMMyiyQzauHgZA2NUr9y0FUgOAix71hGYUb6tvg==",
"requires": {
"@popperjs/core": "^2.9.2",
"classnames": "^2.2.6",
"date-fns": "^2.24.0",
"prop-types": "^15.7.2",
"react-onclickoutside": "^6.12.0",
"react-popper": "^2.2.5"
}
},
"react-dom": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@ -6980,6 +7041,12 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"react-onclickoutside": {
"version": "6.12.2",
"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.2.tgz",
"integrity": "sha512-NMXGa223OnsrGVp5dJHkuKxQ4czdLmXSp5jSV9OqiCky9LOpPATn3vLldc+q5fK3gKbEHvr7J1u0yhBh/xYkpA==",
"requires": {}
},
"react-popper": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",

1
package.json
Unescape View File

@ -30,6 +30,7 @@
"next-i18next": "^12.1.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-datepicker": "^4.8.0",
"react-dom": "^18.2.0",
"react-flags-select": "^2.2.3",
"react-i18next": "^12.0.0",

4
pages/admin/new.js
Unescape View File

@ -29,7 +29,7 @@ const CreateElectionForm = (props) => {
const election = useElection();
const handleSubmit = () => {
if (stepId < 2) {
if (stepId < creationSteps.length - 1) {
setStepId(i => i + 1);
}
else { // TODO
@ -37,7 +37,7 @@ const CreateElectionForm = (props) => {
}
// at which creation step are we?
const [stepId, setStepId] = useState(0);
const [stepId, setStepId] = useState(1);
const step = creationSteps[stepId];
let Step;

Write Preview
Loading…
Cancel
Save