fix: Claire review

pull/89/head
Pierre-Louis Guhur 1 year ago
parent 30069d197c
commit 56faea19a7

@ -30,10 +30,10 @@ const ListInput = ({ onEdit, inputs, validator }) => {
};
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
if (e.key === 'Enter' || e.key === 'Tab' || e.key === ';') {
if (validator(state)) {
setState('');
onEdit([...inputs, state]);
setState('');
}
}
};
@ -54,9 +54,9 @@ const ListInput = ({ onEdit, inputs, validator }) => {
type="text"
className="border-0 w-100"
placeholder={t('admin.private-placeholder')}
onKeyPress={handleKeyDown}
onKeyDown={handleKeyDown}
onChange={handleChange}
value={state}
value={state.replace(';', '')}
/>
</Col>
</Row>

@ -1,22 +1,22 @@
import {Row, Col, Modal, ModalBody} from 'reactstrap';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import { Row, Col, Modal, ModalBody } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faTrashCan,
faTrashAlt,
faArrowLeft,
} from '@fortawesome/free-solid-svg-icons';
import {useTranslation} from 'next-i18next';
import {ElectionTypes, useElection} from '@services/ElectionContext';
import { useTranslation } from 'next-i18next';
import { ElectionTypes, useElection } from '@services/ElectionContext';
import Button from '@components/Button';
const CandidateModal = ({isOpen, position, toggle}) => {
const {t} = useTranslation();
const CandidateModal = ({ isOpen, position, toggle }) => {
const { t } = useTranslation();
const [election, dispatch] = useElection();
const candidate = election.candidates[position];
const removeCandidate = () => {
dispatch({type: ElectionTypes.CANDIDATE_RM, position: position});
dispatch({ type: ElectionTypes.CANDIDATE_RM, position: position });
toggle();
};
@ -49,7 +49,12 @@ const CandidateModal = ({isOpen, position, toggle}) => {
>
{t('admin.candidate-confirm-back')}
</Button>
<Button icon={faTrashAlt} color="danger" onClick={removeCandidate}>
<Button
icon={faTrashAlt}
color="danger"
role="submit"
onClick={removeCandidate}
>
{t('admin.candidate-confirm-ok')}
</Button>
</div>

@ -185,6 +185,7 @@ const CandidateModal = ({ isOpen, position, toggle }) => {
position="right"
disabled={disabled}
icon={faPlus}
role="submit"
>
{t('common.save')}
</Button>

@ -104,6 +104,7 @@ const CandidatesField = ({ onSubmit }) => {
<Container className="candidate flex-grow-1 my-5 flex-column d-flex justify-content-between">
<div className="d-flex flex-column">
<h4 className="mb-4">{t('admin.add-candidates')}</h4>
<div className="mb-4">{t('admin.add-candidates-desc')}</div>
<Alert msg={error} />
<div className="d-flex flex-column mx-2 mx-md-0">
{candidates.map((_, index) => {

@ -1,18 +1,11 @@
import { useState } from 'react';
import { Row, Col } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faPlus,
faPen,
faXmark,
faCheck,
faRotateLeft,
faTrashCan,
} from '@fortawesome/free-solid-svg-icons';
import { faXmark, faRotateLeft } from '@fortawesome/free-solid-svg-icons';
import { useSortable } from '@dnd-kit/sortable';
import { ElectionTypes, useElection } from '@services/ElectionContext';
import { getGradeColor, gradeColors } from '@services/grades';
import { useSortable } from '@dnd-kit/sortable';
import VerticalGripDots from '@components/VerticalGripDots';
import GradeModalSet from './GradeModalSet';
export interface GradeInterface {
value: number;
@ -29,13 +22,16 @@ export default ({ value }: GradeInterface) => {
const { attributes, listeners, setNodeRef, transform, transition } =
useSortable({ id: grade.name });
const [visible, setVisible] = useState<boolean>(false);
const toggle = () => setVisible((v) => !v);
const handleActive = () => {
if (!grade.active && numGrades >= gradeColors.length) {
return;
}
dispatch({
type: ElectionTypes.GRADE_SET,
position: value,
position: election.grades.map((g) => g.value).indexOf(value),
field: 'active',
value: !grade.active,
});
@ -64,6 +60,8 @@ export default ({ value }: GradeInterface) => {
<div
style={{ touchAction: 'none' }}
className={grade.active ? '' : 'text-decoration-line-through'}
role="button"
onClick={toggle}
>
{grade.name}
</div>
@ -80,6 +78,7 @@ export default ({ value }: GradeInterface) => {
<FontAwesomeIcon onClick={handleActive} icon={faRotateLeft} />
)}
</div>
<GradeModalSet toggle={toggle} isOpen={visible} value={value} />
</div>
);
};

@ -1,24 +1,27 @@
import {useState, useEffect} from 'react';
import {Col, Label, Input, Modal, ModalBody, Form} from 'reactstrap';
import {faPlus, faArrowLeft} from '@fortawesome/free-solid-svg-icons';
import {useTranslation} from 'next-i18next';
import {ElectionTypes, useElection} from '@services/ElectionContext';
import { useState, useEffect } from 'react';
import { Col, Label, Input, Modal, ModalBody, Form } from 'reactstrap';
import { faPlus, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
import { useTranslation } from 'next-i18next';
import { ElectionTypes, useElection } from '@services/ElectionContext';
import Button from '@components/Button';
import {GradeItem} from '@services/type';
import { GradeItem } from '@services/type';
const GradeModal = ({isOpen, toggle}) => {
const {t} = useTranslation();
const GradeModal = ({ isOpen, toggle }) => {
const { t } = useTranslation();
const [election, dispatch] = useElection();
const [grade, setGrade] = useState<GradeItem>({name: "", description: "", value: -1, active: true});
const [grade, setGrade] = useState<GradeItem>({
name: '',
description: '',
value: -1,
active: true,
});
useEffect(() => {
const maxValue = Math.max(...election.grades.map(g => g.value));
setGrade({...grade, value: maxValue + 1});
const maxValue = Math.max(...election.grades.map((g) => g.value));
setGrade({ ...grade, value: maxValue + 1 });
}, [election]);
const save = () => {
dispatch({
type: ElectionTypes.SET,
@ -29,11 +32,11 @@ const GradeModal = ({isOpen, toggle}) => {
};
const handleName = (e) => {
setGrade((s) => ({...s, name: e.target.value}));
setGrade((s) => ({ ...s, name: e.target.value }));
};
const names = election.grades.map(g => g.name)
const disabled = grade.name === "" || names.includes(grade.name);
const names = election.grades.map((g) => g.name);
const disabled = grade.name === '' || names.includes(grade.name);
return (
<Modal
@ -78,7 +81,13 @@ const GradeModal = ({isOpen, toggle}) => {
>
{t('common.cancel')}
</Button>
<Button disabled={disabled} color="primary" onClick={save} icon={faPlus}>
<Button
disabled={disabled}
color="primary"
role="submit"
onClick={save}
icon={faPlus}
>
{t('common.save')}
</Button>
</div>

@ -0,0 +1,93 @@
import { useState, useEffect, MouseEvent, ChangeEvent } from 'react';
import { Col, Label, Input, Modal, ModalBody, Form } from 'reactstrap';
import { faPlus, faArrowLeft } from '@fortawesome/free-solid-svg-icons';
import { useTranslation } from 'next-i18next';
import { ElectionTypes, useElection } from '@services/ElectionContext';
import Button from '@components/Button';
const GradeModal = ({ isOpen, toggle, value }) => {
const { t } = useTranslation();
const [election, dispatch] = useElection();
const grade = election.grades.filter((g) => g.value === value)[0];
const [name, setName] = useState<string>(grade.name);
useEffect(() => {
setName(grade.name);
}, [grade]);
const handleSubmit = (e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
dispatch({
type: ElectionTypes.GRADE_SET,
position: election.grades.map((g) => g.value).indexOf(value),
field: 'name',
value: name,
});
toggle();
};
const handleName = (e: ChangeEvent<HTMLInputElement>) => {
setName(e.target.value);
};
return (
<Modal
isOpen={isOpen}
toggle={toggle}
keyboard={true}
className="modal_grade"
>
<div className="modal-header p-4">
<h4 className="modal-title">{t('admin.edit-grade')}</h4>
<button
type="button"
onClick={toggle}
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<ModalBody className="p-4">
<p>{t('admin.add-grade-desc')}</p>
<Col>
<Form className="container container-fluid">
<div className="mb-3">
<Label className="fw-bold">{t('common.name')} </Label>
<Input
type="text"
placeholder={t('admin.grade-name-placeholder')}
value={name}
onChange={handleName}
autoFocus
required
/>
</div>
<div className="mt-5 gap-2 d-grid mb-3 d-md-flex">
<Button
onClick={toggle}
color="dark"
className="me-md-auto"
outline={true}
icon={faArrowLeft}
>
{t('common.cancel')}
</Button>
<Button
color="primary"
onClick={handleSubmit}
icon={faPlus}
role="submit"
>
{t('common.save')}
</Button>
</div>
</Form>
</Col>
</ModalBody>
</Modal>
);
};
export default GradeModal;

@ -116,9 +116,11 @@
"admin.step-params": "Parameters",
"admin.step-confirm": "Confirm",
"admin.add-candidates": "Add the candidates",
"admin.add-candidates-desc": "You can reorganize the candidates by moving them with the six-dots icon.",
"admin.add-candidate": "Add a candidate",
"admin.add-candidate-desc": "Add a picture, a name, and a description of the candidate.",
"admin.add-grade": "Add a grade",
"admin.edit-grade": "Edit a grade",
"admin.add-grade-desc": "The name of the endorsement must be unique. Together, the statements should form a graduated scale of values. After clicking on \"Save\", drag the statement to where you want to place it on the value scale",
"admin.grades-title": "Personalize the grades",
"admin.grade-name-placeholder": "Add the name of the grade",

@ -117,12 +117,14 @@
"admin.step-params": "Paramètres du vote",
"admin.step-confirm": "Confirmation",
"admin.add-candidates": "Ajouter les candidats",
"admin.add-candidates-desc": "Vous pouvez ordonner les candidats en déplaçant l'icône avec six points avec la souris.",
"admin.add-candidate": "Ajouter un candidat",
"admin.candidate-name-placeholder": "Ajouter le nom ou le titre du candidat.",
"admin.candidate-desc-placeholder": "Ajouter la description du candidat.",
"admin.add-candidate-desc": "Ajouter une photo, le nom et une description au candidat.",
"admin.add-grade": "Ajouter une mention",
"admin.add-grade-desc": "Le nom de la mention doit être unique. Prises ensemble, les mentions doivent constituer une échelle graduée de valeurs. Après avoir cliqué sur “Sauvegarder”, faites glisser la mention où vous voulez la placer sur léchelle de valeurs.",
"admin.edit-grade": "Éditer une mention",
"admin.grade-name-placeholder": "Ajoutez le nom de la mention.",
"admin.candidate-confirm-del": "Vous souhaitez supprimer un candidat",
"admin.candidate-confirm-back": "Non, je le garde",

Loading…
Cancel
Save