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

details:

Browse Source
pull/84/head
jimmys-box 2 years ago
parent 88329fb886
commit 85be3fe95a
7 changed files with 189 additions and 31 deletions
Show Stats Download Patch File Download Diff File

17
components/form/CandidateField.jsx
Unescape View File

@ -68,6 +68,7 @@ const CandidateField = ({avatar, label, description, candIndex, onDelete, onAdd,
const removeCandidate = () => {
onDelete();
toggle();
}
@ -82,8 +83,15 @@ const CandidateField = ({avatar, label, description, candIndex, onDelete, onAdd,
setCreateObjectURL(URL.createObjectURL(i));
}
};
const test = {...inputProps};
console.log(test);
return (
<Row className="rowNoMargin">
<div className={className}>
@ -147,11 +155,8 @@ console.log(test);
<Label>Description (Facultatif)</Label>
<Input
type="text"
value={description}
placeholder="Texte"
tabIndex={candIndex + 1}
defaultValue={description}
maxLength="250"
autoFocus
/>
<Row className="removeAddButtons">

8
components/form/CandidatesField.jsx
Unescape View File

@ -73,14 +73,14 @@ const CandidatesField = ({onChange}) => {
const handleKeyPress = (e, index) => {
if (e.key === "Enter") {
e.preventDefault();
if (index + 1 === candidates.length) {
if (index + 2 === candidates.length) {
addCandidate();
}
else {
candidates[index + 1].fieldRef.current.focus();
}
}candidates[index + 1].fieldRef.current.focus();
}
}
const onSortEnd = ({oldIndex, newIndex}) => {

15
components/form/ConfirmModal.jsx
Unescape View File

@ -114,14 +114,19 @@ const ConfirmModal = ({ CreateElection, handleRestrictResultCheck, handleIsTimeL
</div>
</Row>
<Row>
<div className="p-2 pl-3 pr-3 mb-3 recap-vote-content">
<ul className="m-0 pl-4">
<div className="p-2 mb-3 recap-vote-content">
<ul className="m-0 p-2">
{candidates.map((candidate, i) => {
if (candidate.label !== "") {
return (
<li key={i} className="m-0">
{candidate.label}
<li key={i} className="m-0 d-flex justify-content-between">
<div className="d-flex">
<div className="avatarThumb mr-2">
<img src="" alt="" />
</div>
{candidate.label}
</div>
<TrashButton />
</li>
);
} else {

106
package-lock.json generated
Unescape View File

@ -46,6 +46,7 @@
"react": "^17.0.2",
"react-bootstrap": "^2.1.0",
"react-bubble-chart": "^0.4.0",
"react-datepicker": "^4.7.0",
"react-dom": "^17.0.2",
"react-flags-select": "^2.1.2",
"react-google-charts": "^3.0.15",
@ -4849,6 +4850,18 @@
"node": ">= 6"
}
},
"node_modules/date-fns": {
"version": "2.28.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
"integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==",
"engines": {
"node": ">=0.11"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/date-fns"
}
},
"node_modules/debug": {
"version": "3.2.7",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
@ -8699,6 +8712,36 @@
"react-dom": ">=0.14.x"
}
},
"node_modules/react-datepicker": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.7.0.tgz",
"integrity": "sha512-FS8KgbwqpxmJBv/bUdA42MYqYZa+fEYcpc746DZiHvVE2nhjrW/dg7c5B5fIUuI8gZET6FOzuDgezNcj568Czw==",
"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",
"react-dom": "^16.9.0 || ^17"
}
},
"node_modules/react-datepicker/node_modules/react-popper": {
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
"integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
"dependencies": {
"react-fast-compare": "^3.0.1",
"warning": "^4.0.2"
},
"peerDependencies": {
"@popperjs/core": "^2.0.0",
"react": "^16.8.0 || ^17"
}
},
"node_modules/react-dom": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@ -8712,6 +8755,11 @@
"react": "17.0.2"
}
},
"node_modules/react-fast-compare": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
"integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
},
"node_modules/react-flags-select": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/react-flags-select/-/react-flags-select-2.1.2.tgz",
@ -8797,6 +8845,19 @@
"react-dom": "^16.3.2"
}
},
"node_modules/react-onclickoutside": {
"version": "6.12.1",
"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.1.tgz",
"integrity": "sha512-a5Q7CkWznBRUWPmocCvE8b6lEYw1s6+opp/60dCunhO+G6E4tDTO2Sd2jKE+leEnnrLAE2Wj5DlDHNqj5wPv1Q==",
"funding": {
"type": "individual",
"url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
},
"peerDependencies": {
"react": "^15.5.x || ^16.x || ^17.x",
"react-dom": "^15.5.x || ^16.x || ^17.x"
}
},
"node_modules/react-plotly.js": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/react-plotly.js/-/react-plotly.js-2.5.1.tgz",
@ -13865,6 +13926,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.28.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
"integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
},
"debug": {
"version": "3.2.7",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
@ -16874,6 +16940,30 @@
"integrity": "sha1-ACi0Oq4dJsfaJ96d3X1OuSf9WhA=",
"requires": {}
},
"react-datepicker": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.7.0.tgz",
"integrity": "sha512-FS8KgbwqpxmJBv/bUdA42MYqYZa+fEYcpc746DZiHvVE2nhjrW/dg7c5B5fIUuI8gZET6FOzuDgezNcj568Czw==",
"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"
},
"dependencies": {
"react-popper": {
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
"integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
"requires": {
"react-fast-compare": "^3.0.1",
"warning": "^4.0.2"
}
}
}
},
"react-dom": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@ -16884,6 +16974,11 @@
"scheduler": "^0.20.2"
}
},
"react-fast-compare": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
"integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
},
"react-flags-select": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/react-flags-select/-/react-flags-select-2.1.2.tgz",
@ -16942,6 +17037,12 @@
"integrity": "sha512-1AneeJlAwjvzkPV740q2SXes/kW3HKOzR3gs+U7whrHN5nz+yH5Unosf/rvz8kRj/eFwBf6fTzMqlJiupu7S5Q==",
"requires": {}
},
"react-onclickoutside": {
"version": "6.12.1",
"resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.1.tgz",
"integrity": "sha512-a5Q7CkWznBRUWPmocCvE8b6lEYw1s6+opp/60dCunhO+G6E4tDTO2Sd2jKE+leEnnrLAE2Wj5DlDHNqj5wPv1Q==",
"requires": {}
},
"react-plotly.js": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/react-plotly.js/-/react-plotly.js-2.5.1.tgz",
@ -17678,11 +17779,6 @@
"xtend": "~4.0.1"
}
},
"tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
},
"tinycolor2": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",

1
package.json
Unescape View File

@ -48,6 +48,7 @@
"react": "^17.0.2",
"react-bootstrap": "^2.1.0",
"react-bubble-chart": "^0.4.0",
"react-datepicker": "^4.7.0",
"react-dom": "^17.0.2",
"react-flags-select": "^2.1.2",
"react-google-charts": "^3.0.15",

11
pages/new/index.js
Unescape View File

@ -42,7 +42,7 @@ import CandidatesField from "@components/form/CandidatesField";
import ConfirmModal from "@components/form/ConfirmModal";
import config from "../../next-i18next.config.js";
import Footer from '@components/layouts/Footer'
import DatePicker from "react-datepicker";
// Error messages
const AT_LEAST_2_CANDIDATES_ERROR = "Please add at least 2 candidates.";
@ -242,7 +242,7 @@ const CreateElection = (props) => {
changeDisplay();
};
const [startDate, setStartDate] = useState(new Date());
return (
<Container className="addCandidatePage">
<Head>
@ -391,11 +391,14 @@ const CreateElection = (props) => {
(isTimeLimited ? "d-block " : "d-none")
}
>
<Row className="displayNone">
<DatePicker selected={startDate} onChange=
{(date) => setStartDate(date)} />
{/* <Row className="displayNone">
<Col xs="12" md="3" lg="3">
<span className="label">- {t("Starting date")}</span>
</Col>
<Col xs="6" md="4" lg="3">
<input
className="form-control"
type="date"
@ -462,7 +465,7 @@ const CreateElection = (props) => {
{displayClockOptions()}
</select>
</Col>
</Row>
</Row> */}
</div></div>
<hr className="settings-divider" />
<Row className="componentMobile">

62
styles/scss/_newVote.scss
Unescape View File

@ -455,6 +455,11 @@ line-height: 24px;
font-size: 15px;
line-height: 24px;
color: #2400FD;
width: 100%;
}
.recap-vote-content .cancelButton {
color: #8F88BA;
}
.modal-footer {
border-top: none;
@ -560,7 +565,8 @@ z-index: 3;
content: '';
border-radius: 30px;
background-color: #FFF; }
input[type=radio]:last-of-type:checked ~ .radio-switch { background-color: #4af }
input[type=radio]:last-of-type:checked ~ .radio-switch { background-color: #2708E4;
}
input[type=radio]:last-of-type:checked ~ .radio-switch:before { right: 2px }
.radio-group > label {
@ -619,6 +625,53 @@ line-height: 24px!important;
}
.rightColumn {
padding-left: 15px;
}
.react-multi-email {
border: none!important;
border-bottom: solid 2px #C3BFD8!important;
border-radius: 0px!important;
}
.react-multi-email [data-tag] {
color: #2400FD!important;
font-weight: 700;
font-size: 14px;
line-height: 24px;
}
.react-datepicker__header {
background: none!important;
border: none!important;
}
.react-datepicker__navigation-icon::before {
top: 12px!important;
border-color: #2400FD!important;
}
.react-datepicker__day--selected {
background-color: #2400FD!important;
border-radius: 0px!important;
color: white!important;
}
.react-datepicker__day {
font-weight: 500!important;
font-size: 18px!important;
line-height: 100%!important;
color: #0A004C;
width: 44px;
height: 44px;
padding: 11px!important;
}
.react-datepicker__day-name {
font-weight: 700!important;
font-size: 14px!important;
line-height: 100%!important;
color: #0A004C;
width: 44px;
opacity: 0.4;
padding: 11px!important;
}
.recap-vote-content .badge:first-of-type {
color: #8F88BA!important;
text-decoration: line-through;
}
@media screen and (min-width: 619px) and (max-width: 1120px) {
.btn-return-candidates {
@ -768,12 +821,7 @@ color: #2400FD;
font-size: 35px;
font-weight: 100;
}
.react-multi-email {
border: none!important;
border-bottom: solid 2px #C3BFD8!important;
border-radius: 0px!important;
}
.btn-confirm-mobile {
width: 100%;

Write Preview
Loading…
Cancel
Save