ScoDocMobile/src/ScoDoc/GestionSemestre/Absences/saisieAbs.js

import React, {Component} from "react";
import {Button, Col, Form, Modal} from "react-bootstrap";
import {post} from "../../Request";

/** Module de saisie des absences */
class SaisieAbs extends Component {
    constructor(props){
        super(props)
        this.state = {
            isOpen: false,
            form: {},
            error: false,
            etudid: ""
        }
    }

    openModal = () => this.setState({ isOpen: true });
    closeModal = () => this.setState({ isOpen: false });

    componentDidUpdate(prevProps) {
        if (prevProps.open !== this.props.open) {
            this.setState({etudid: this.props.etudid})
            if (this.props.open === true) {
                this.setState({isOpen: true})
            }
        }
    }

    /**
     * Gestion des données du formulaire
     * @param e {Event}
     */
    onFormSubmit = e => {
        // Traitement du formulaire
        // Empeche le bouton de rediriger ou actualiser la page
        e.preventDefault()
        // Recuperation des valeurs
        const formData = new FormData(e.target), formDataObj = Object.fromEntries(formData.entries())

        let reqstr = "etudid=" + this.state.etudid + "&datedebut="

        if (formDataObj.hasOwnProperty('dateDebut') && formDataObj['dateDebut'] !== "") {
            let dateDebut = formDataObj['dateDebut'].split("-")
            dateDebut = dateDebut[2] + "/" + dateDebut[1] + "/" + dateDebut[0]
            reqstr += dateDebut
            if (formDataObj.hasOwnProperty('dateFin') && formDataObj['dateFin'] !== "") {
                let dateFin = formDataObj['dateFin'].split("-")
                dateFin = dateFin[2] + "/" + dateFin[1] + "/" + dateFin[0]
                reqstr += "&datefin=" + dateFin
            } else {
                reqstr += "&datefin=" + dateDebut
            }
            if (formDataObj.hasOwnProperty('duree')) {
                reqstr += "&demijournee=" + formDataObj['duree']
            }
            if (formDataObj.hasOwnProperty('estjust') && formDataObj.hasOwnProperty('motif') && formDataObj['motif'] !== "") {
                reqstr += "&estjust=True&description=" + formDataObj['motif']
            }
            this.postData(reqstr)
        } else {
            this.setState({error: true})
        }
    }

    /**
     * Envoie une requête POST a l'API
     * @param data {String} - Données à envoyer sous la forme param1=val1&param2=val2...
     */
    postData(data) {
        let dept = window.location.href.split('/')[7]
        let BASE_URL = window.$api_url
        post(BASE_URL + dept + "/Scolarite/Absences/doSignaleAbsence", data)
            .then(response => {
                if (response.status === 200) {
                    // Fermeture du modal
                    this.closeModal()
                }
            });
    }

    render() {
        return (
            <>
                <Modal show={this.state.isOpen} onHide={this.closeModal}>
                    <Modal.Header closeButton>
                        <Modal.Title>Saisie d'absence</Modal.Title>
                    </Modal.Header>

                    <Modal.Body>
                        {this.state.error &&
                            <span>Erreur: La date de début ne doit pas être vide</span>
                        }
                        <Form onSubmit={this.onFormSubmit}>
                            <Form.Row>
                                <Form.Group as={Col} ControlId="dateDebut">
                                    <Form.Label>Date début</Form.Label>
                                    <Form.Control type="date" name="dateDebut"/>
                                </Form.Group>
                                <Form.Group as={Col} ControlId="dateFin">
                                    <Form.Label>Date fin (Optionnel)</Form.Label>
                                    <Form.Control type="date" name="dateFin"/>
                                </Form.Group>
                            </Form.Row>
                            <Form.Row>
                                <Form.Group as={Col} ControlId="duree">
                                    <Form.Check inline label="Journée(s)" name="duree" type="radio" value="2" />
                                    <Form.Check inline label="Matin(s)" name="duree" type="radio" value="1" />
                                    <Form.Check inline label="Après-midi" name="duree" type="radio" value="0" />
                                </Form.Group>
                            </Form.Row>
                            <Form.Row>
                                <Form.Group as={Col} ControlId="estjust">
                                    <Form.Check label="Justifiée" name="estjust" type="checkbox" id="estjust" />
                                </Form.Group>
                            </Form.Row>
                            <Form.Row>
                                <Form.Group as={Col} ControlId="motif">
                                    <Form.Label>Motif</Form.Label>
                                    <Form.Control as="textarea" rows={3} name="motif"/>
                                </Form.Group>
                            </Form.Row>
                            <Form.Row>
                                <Button type="submit" variant="primary">Sauvegarder</Button>
                            </Form.Row>
                        </Form>
                    </Modal.Body>
                    <Modal.Footer>

                        <Button variant="secondary" onClick={() => {this.closeModal()}}>Fermer</Button>
                    </Modal.Footer>
                </Modal>
            </>
        )
    }
}

export default SaisieAbs