From 7e5c1488ecc57a05f9544c43b9f932d4ca5ff809 Mon Sep 17 00:00:00 2001 From: Clement G Date: Mon, 10 Jun 2019 19:52:52 +0200 Subject: [PATCH] Clean code from moje_react, design create election form --- src/components/form/ButtonWithConfirm.js | 1 + src/components/form/ModalConfirm.js | 4 +- src/components/views/CreateElection.js | 271 ++++++++++++----------- src/scss/_app.scss | 20 ++ src/scss/_bootstrap.scss | 4 + src/scss/config.scss | 4 +- 6 files changed, 171 insertions(+), 133 deletions(-) create mode 100644 src/scss/_bootstrap.scss diff --git a/src/components/form/ButtonWithConfirm.js b/src/components/form/ButtonWithConfirm.js index dab0412..e5373a2 100644 --- a/src/components/form/ButtonWithConfirm.js +++ b/src/components/form/ButtonWithConfirm.js @@ -35,6 +35,7 @@ class ButtonWithConfirm extends Component { return (
{' '} - + + ); diff --git a/src/components/views/CreateElection.js b/src/components/views/CreateElection.js index e6ce140..0218619 100644 --- a/src/components/views/CreateElection.js +++ b/src/components/views/CreateElection.js @@ -1,39 +1,62 @@ import React, {Component} from "react"; -import { Container, Row, Col, Input, Label, Card, CardHeader, CardBody, Collapse } from 'reactstrap'; + +import { + Container, + Row, + Col, + Input, + Label, + InputGroup, + InputGroupAddon, + Button +} from 'reactstrap'; + import {toast, ToastContainer} from 'react-toastify'; import HelpButton from "../form/HelpButton"; import {arrayMove, sortableContainer, sortableElement, sortableHandle} from 'react-sortable-hoc'; import ButtonWithConfirm from "../form/ButtonWithConfirm"; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import {faPlus, faTrashAlt, faCheck } from '@fortawesome/free-solid-svg-icons'; + + const DragHandle = sortableHandle(({children}) => {children}); const SortableCandidate = sortableElement(({candidate, sortIndex, form}) =>
  • -
    -
    -
    -
    -
    - - {sortIndex + 1} + + + + + + + {sortIndex + 1} -
    - + form.editCandidateLabel(event, sortIndex)} + onKeyPress={(event) => form.handleKeypressOnCandidateLabel(event, sortIndex)} + placeholder="Nom du candidat ou de la proposition ..." + tabIndex={ sortIndex + 1} + innerRef={(ref) => form.candidateInputs[sortIndex] = ref} maxLength="250"/> - -
    + +
    Suppression ?
    -
    Êtes-vous sûr de vouloir supprimer la - proposition "{candidate.label}" ? +
    Êtes-vous sûr de vouloir supprimer {(candidate.label!=="")?"{candidate.label}":la ligne {sortIndex+1}} ?
    form.removeCandidate(sortIndex)}>Oui
    Non
    -
    -
    -
    -
    + + + + + Saisissez ici le nom de votre candidat ou de votre proposition (250 caractères max.) + + + +
    • ); const SortableCandidatesContainer = sortableContainer(({items, form}) => { @@ -47,24 +70,29 @@ class CreateElection extends Component { constructor(props) { super(props); this.state = { - candidates:[] - }; - this._candidateLabelInput = React.createRef(); - this._addCandidateButton = React.createRef(); + candidates:[{label:""},{label:""}], + title:null, + isVisibleTipsDragAndDropCandidate:true + }; + this.candidateInputs = []; this.focusInput= React.createRef(); } - addCandidate = (evt) => { - if (evt.type === "click" || (evt.type === "keydown" && evt.keyCode === 13)) { - const candidateFieldLabel = this._candidateLabelInput.current.value; - let candidates = this.state.candidates; - if (candidates.length < 100) { - candidates.push({label: candidateFieldLabel}); - this._candidateLabelInput.current.value = ''; - this.setState({isAddCandidateOpen: false, candidates: candidates}); - } + handleChangeTitle= (event) => { + this.setState({title: event.target.value}); + }; + + addCandidate = (event) => { + + let candidates = this.state.candidates; + if (candidates.length < 100) { + candidates.push({label:""}); + this.setState({ candidates: candidates}); + } + if(event.type === 'keypress'){ + setTimeout(()=>{ this.candidateInputs[this.state.candidates.length-1].focus()},250); } }; @@ -72,6 +100,10 @@ class CreateElection extends Component { removeCandidate = (index) => { let candidates = this.state.candidates; candidates.splice(index, 1); + console.log(candidates.length); + if(candidates.length===0){ + candidates=[{label:""}]; + } this.setState({candidates: candidates}); }; @@ -79,43 +111,55 @@ class CreateElection extends Component { let candidates = this.state.candidates; candidates[index].label = event.currentTarget.value; this.setState({candidates: candidates}); + }; - toggleAddCandidate = () => { - if (this.state.candidates.length >= 100) { - toast.error("Vous ne pouvez plus ajouter de proposition ! (100 max.)", { - position: toast.POSITION.TOP_CENTER - }); - } else { - this._candidateLabelInput.current.value = ""; - this.setState({ - isAddCandidateOpen: !this.state.isAddCandidateOpen - }); + handleKeypressOnCandidateLabel = (event, index) => { + if(event.key === 'Enter'){ + event.preventDefault(); + if(index+1===this.state.candidates.length){ + this.addCandidate(event); + }else{ + this.candidateInputs[index+1].focus(); + } + } + }; + onCandidatesSortEnd = ({oldIndex, newIndex}) => { + let candidates = this.state.candidates; + candidates = arrayMove(candidates, oldIndex, newIndex); + this.setState({candidates: candidates}); }; - render(){ + handleSubmit= (event) => { + event.preventDefault(); + }; + + componentWillMount() { const params = new URLSearchParams(this.props.location.search); + this.setState({title:params.get("title")?params.get("title"):""}); + } + render(){ + + const params = new URLSearchParams(this.props.location.search); return( -
    +

    Démarrer un vote

     - -
    -     +
    - + @@ -124,93 +168,60 @@ class CreateElection extends Component { - - -
    -
    - {this.state.candidates.length} - {(this.state.candidates.length < 2) ? Proposition soumise : - Propositions soumises } - au vote -
    -
    - - -
    -
    + + + + + -
    -
    - {(this.state.candidates.length > 2 && this.state.isVisibleTipsDragndropCandidate === true) ? -
    -
    - - Astuce : Vous pouvez changer l'ordre des - propositions par glisser-déposer du numéro ! -
    -
    - -
    -
    :
    } -
    -
    - { - this._candidateLabelInput.current.focus() - }} - onExited={() => { - this._addCandidateButton.current.focus() - }}> - - - - Ajout d'une proposition - (100 max.) - -
    -
    - - this.addCandidate(evt)} - ref={this._candidateLabelInput} - placeholder="Nom de la proposition, nom du candidat, etc..." - maxLength="250"/> -
    -
    -
    -
    - - -
    -
    -     -     - - -     -
    - -
    - {this.state.isAddCandidateOpen ? null : - } - -
    - -
    + + + + + + + + +
    + + + + +
    Valider
    +
    Confirmation
    +
    +
    Voici votre vote :
    +
    +

    {this.state.title}

    +
      + { + + this.state.candidates.map((candidate,i) => { + if(candidate.label!==""){ + return
    • {candidate.label}
      • + }else{ + return
    • + } + + }) + } +
    +
    +

    Une fois validé, vous ne pourrez plus le modifier, souhaitez-vous continuer ?

    + +
    +
    {}}>Oui
    +
    Non
    +     + +     ) diff --git a/src/scss/_app.scss b/src/scss/_app.scss index 27c3fb7..9ed94cb 100644 --- a/src/scss/_app.scss +++ b/src/scss/_app.scss @@ -2,6 +2,7 @@ $mv-blue-color: #009900 !default; $mv-red-color: #000099 !default; $mv-light-color: #efefff !default; +$mv-dark-color: #333 !default; // Override default variables before the import bootstrap $body-bg: #000000 !default; @@ -11,6 +12,7 @@ $theme-colors: ( "primary": $mv-blue-color, "secondary": $mv-red-color, "light": $mv-light-color, + "dark": $mv-dark-color, "danger": #990000, "success": #009900, "info": #2B8299, @@ -68,3 +70,21 @@ hr{ margin:auto; } + +ul.sortable,li.sortable{ + padding:0; + margin:0 0 0 0; + list-style-type: none; +} +li.sortable{ + margin:0 0 15px 0; +} + +.pointer{ + cursor: pointer; +} + + +.modal{ + color:$mv-dark-color; +} \ No newline at end of file diff --git a/src/scss/_bootstrap.scss b/src/scss/_bootstrap.scss new file mode 100644 index 0000000..b431718 --- /dev/null +++ b/src/scss/_bootstrap.scss @@ -0,0 +1,4 @@ +@import '~bootstrap/scss/bootstrap.scss'; + + + diff --git a/src/scss/config.scss b/src/scss/config.scss index b27e14e..b24d198 100644 --- a/src/scss/config.scss +++ b/src/scss/config.scss @@ -2,6 +2,7 @@ $mv-blue-color: #2A43A0; $mv-red-color: #EE455B; $mv-light-color: #efefff; +$mv-dark-color: #333; // Override default variables before the import bootstrap $body-bg: #000000; @@ -11,6 +12,7 @@ $theme-colors: ( "primary": $mv-blue-color, "secondary": $mv-red-color, "light": $mv-light-color, + "dark": $mv-dark-color, "danger": #990000, "success": #009900, "info": #2B8299, @@ -18,5 +20,5 @@ $theme-colors: ( ); -@import '~bootstrap/scss/bootstrap.scss'; +@import '_bootstrap.scss'; @import 'app.scss'; \ No newline at end of file