diff --git a/frontend/src/components/btmbuch/NeueBuchungModal.js b/frontend/src/components/btmbuch/NeueBuchungModal.js index 18f216e6321a3f669d7506c5fcbd8e1f679eec06..bf59c911c6f1990e8bca75c7def462dbdd3259ca 100644 --- a/frontend/src/components/btmbuch/NeueBuchungModal.js +++ b/frontend/src/components/btmbuch/NeueBuchungModal.js @@ -1,209 +1,210 @@ -import React, { useState, useEffect } from 'react'; -import { Modal, Button, Form, Row, Col } from 'react-bootstrap'; -import { useSnackbar } from 'notistack'; - -function NeueBuchungModal(props) { - - const { enqueueSnackbar } = useSnackbar(); - const [typ, setTyp] = useState(''); - let {lieferanten, aerzte, empfaenger} = props; - - - const [maxMenge, setMaxMenge] = useState(props.btm.btm.menge); - - const sendNewBuchungAnfrage = async (buchungData) => { - const response = await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${props.apothekeId}/btmbuchung`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), - }, - body: JSON.stringify(buchungData) - }).catch((err) => { - //SHOW ERROR - console.log(err); - }); - - - if (response && response.status === 201) { - const data = await response.json(); - // console.log(data); - hideModal(); - enqueueSnackbar('Buchung erfolgreich angelegt', { variant:'success', autoHideDuration: 3000} ); - props.apothekeRefFunctions.updateBtmList(); - } else { - //SHOW ERROR - console.log(response); - } - } - - const createNewBuchung = event => { - event.preventDefault(); - if (typ.toLowerCase() === 'zugang') { - let { anforderungsschein, btmMenge, lieferant, datum} = event.target; - let buchungData = { - benutzer: props.user.id, - btm: props.btm.btm.id, - menge: btmMenge.value, - typ: 'ZUGANG', - lieferant: lieferant.value, - anforderungsschein: anforderungsschein.value, - datum: datum.value, - pruefdatum: '' - } - sendNewBuchungAnfrage(buchungData); - } else if (typ.toLowerCase() === 'abgang') { - let { btmMenge, rezept, empfaenger, arzt, datum} = event.target; - let buchungData = { - benutzer: props.user.id, - btm: props.btm.btm.id, - menge: btmMenge.value, - typ: 'ABGANG', - empfaenger: empfaenger.value, - arzt: arzt.value, - rezept: rezept.value, - pruefdatum: '', - datum: datum.value - } - sendNewBuchungAnfrage(buchungData); - } - } - - const hideModal = () => { - setTyp(''); - props.onHide(); - } - - useEffect(() => { - setMaxMenge(props.btm.btm.menge) - }, []); - - const renderZugang = () => { - return ( - <React.Fragment> - <Form.Group as={Row} controlId="anforderungsschein"> - <Form.Label column sm="2"> - Lieferschein - </Form.Label> - <Col sm="10"> - <Form.Control name="anforderungsschein" type="text" required /> - </Col> - </Form.Group> - <Form.Group as={Row} controlId="lieferant"> - <Form.Label column sm="2"> - Lieferant - </Form.Label> - <Col sm="10"> - <Form.Control name="lieferant" required as="select"> - {lieferanten.map(l => <option key={l.id} value={l.id}>{l.name}</option>)} - </Form.Control> - </Col> - </Form.Group> - </React.Fragment>) - } - - const renderAbgang = () => { - return ( - <React.Fragment> - <Form.Group as={Row} controlId="empfaenger"> - <Form.Label column sm="2"> - Empfaenger - </Form.Label> - <Col sm="10"> - <Form.Control name="empfaenger" required as="select"> - {empfaenger.map(e => <option key={e.id} value={e.id}>{e.name}</option>)} - </Form.Control> - </Col> - </Form.Group> - <Form.Group as={Row} controlId="arzt"> - <Form.Label column sm="2"> - Arzt - </Form.Label> - <Col sm="10"> - <Form.Control name="arzt" required as="select"> - {aerzte.map(a => <option key={a.id} value={a.id}>{a.name}</option>)} - </Form.Control> - </Col> - </Form.Group> - <Form.Group as={Row} controlId="rezept"> - <Form.Label column sm="2"> - Rezept - </Form.Label> - <Col sm="10"> - <Form.Control name="rezept" type="text" required /> - </Col> - </Form.Group> - </React.Fragment>) - } - - return ( - <Modal - {...props} - size="lg" - aria-labelledby="contained-modal-title-vcenter" - centered - onExiting={hideModal} - > - <Modal.Header closeButton> - <Modal.Title id="contained-modal-title-vcenter"> - Betäubungsmittel-Buchung hinzufügen - </Modal.Title> - </Modal.Header> - <Form onSubmit={createNewBuchung}> - <Modal.Body> - <Form.Group as={Row} controlId="Typ"> - <Col sm={{ span: 10, offset: 2 }}> - <Row sm={6}> - <Form.Check required - type="radio" - label="Zugang" - name="TypRadio" - id="ZugangRadio" - onClick={() => {setTyp('zugang'); setMaxMenge(9999)}} - /> - <Form.Check required - type="radio" - label="Abgang" - name="TypRadio" - id="AbgangRadio" - onClick={() => setTyp('abgang')} - /> - </Row> - </Col> - </Form.Group> - - <Form.Group as={Row} controlId="btmMenge"> - <Form.Label column sm="2"> - Menge - </Form.Label> - <Col sm="10"> - <Form.Control name="btmMenge" type="number" min="1" defaultValue="0" /> - </Col> - </Form.Group> - <Form.Group as={Row} controlId="datum"> - <Form.Label column sm="2"> - Datum - </Form.Label> - <Col sm="10"> - <Form.Control name="datum" type="date" defaultValue={new Date()} /> - </Col> - </Form.Group> - - {typ.toLowerCase() === 'zugang' ? renderZugang() : null} - {typ.toLowerCase() === 'abgang' ? renderAbgang() : null} - - </Modal.Body> - <Modal.Footer> - <Button variant="danger" onClick={hideModal}>Close</Button> - <Button variant="primary" type="submit">Bestätigen</Button> - </Modal.Footer> - </Form> - - - - </Modal> - ) -} - -export default NeueBuchungModal; - +import React, { useState, useEffect } from 'react'; +import { Modal, Button, Form, Row, Col } from 'react-bootstrap'; +import { useSnackbar } from 'notistack'; + +function NeueBuchungModal(props) { + + const { enqueueSnackbar } = useSnackbar(); + const [typ, setTyp] = useState(''); + let {lieferanten, aerzte, empfaenger} = props; + + + const [maxMenge, setMaxMenge] = useState(props.btm.btm.menge); + + const sendNewBuchungAnfrage = async (buchungData) => { + const response = await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${props.apothekeId}/btmbuchung`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), + }, + body: JSON.stringify(buchungData) + }).catch((err) => { + //SHOW ERROR + console.log(err); + }); + + + if (response && response.status === 201) { + const data = await response.json(); + // console.log(data); + hideModal(); + enqueueSnackbar('Buchung erfolgreich angelegt', { variant:'success', autoHideDuration: 3000} ); + props.apothekeRefFunctions.updateBtmList(); + } else { + //SHOW ERROR + console.log(response); + } + } + + const createNewBuchung = event => { + event.preventDefault(); + if (typ.toLowerCase() === 'zugang') { + let { anforderungsschein, btmMenge, lieferant, datum} = event.target; + let buchungData = { + benutzer: props.user.id, + btm: props.btm.btm.id, + menge: btmMenge.value, + typ: 'ZUGANG', + lieferant: lieferant.value, + anforderungsschein: anforderungsschein.value, + datum: datum.value, + pruefdatum: '' + } + sendNewBuchungAnfrage(buchungData); + } else if (typ.toLowerCase() === 'abgang') { + let { btmMenge, rezept, empfaenger, arzt, datum} = event.target; + let buchungData = { + benutzer: props.user.id, + btm: props.btm.btm.id, + menge: btmMenge.value, + typ: 'ABGANG', + empfaenger: empfaenger.value, + arzt: arzt.value, + rezept: rezept.value, + pruefdatum: '', + datum: datum.value + } + sendNewBuchungAnfrage(buchungData); + } + } + + const hideModal = () => { + setTyp(''); + props.onHide(); + } + + useEffect(() => { + setMaxMenge(props.btm.btm.menge) + }, []); + + const renderZugang = () => { + return ( + <React.Fragment> + <Form.Group as={Row} controlId="anforderungsschein"> + <Form.Label column sm="2"> + Lieferschein + </Form.Label> + <Col sm="10"> + <Form.Control name="anforderungsschein" type="text" required /> + </Col> + </Form.Group> + <Form.Group as={Row} controlId="lieferant"> + <Form.Label column sm="2"> + Lieferant + </Form.Label> + <Col sm="10"> + <Form.Control name="lieferant" required as="select"> + {lieferanten.map(l => <option key={l.id} value={l.id}>{l.name}</option>)} + </Form.Control> + </Col> + </Form.Group> + </React.Fragment>) + } + + const renderAbgang = () => { + return ( + <React.Fragment> + <Form.Group as={Row} controlId="empfaenger"> + <Form.Label column sm="2"> + Empfaenger + </Form.Label> + <Col sm="10"> + <Form.Control name="empfaenger" required as="select"> + {empfaenger.map(e => <option key={e.id} value={e.id}>{e.name}</option>)} + </Form.Control> + </Col> + </Form.Group> + <Form.Group as={Row} controlId="arzt"> + <Form.Label column sm="2"> + Arzt + </Form.Label> + <Col sm="10"> + <Form.Control name="arzt" required as="select"> + {aerzte.map(a => <option key={a.id} value={a.id}>{a.name}</option>)} + </Form.Control> + </Col> + </Form.Group> + <Form.Group as={Row} controlId="rezept"> + <Form.Label column sm="2"> + Rezept + </Form.Label> + <Col sm="10"> + <Form.Control name="rezept" type="text" required /> + </Col> + </Form.Group> + </React.Fragment>) + } + + return ( + <Modal + {...props} + size="lg" + aria-labelledby="contained-modal-title-vcenter" + centered + onExiting={hideModal} + backdrop="static" + > + <Modal.Header closeButton> + <Modal.Title id="contained-modal-title-vcenter"> + Betäubungsmittel-Buchung hinzufügen + </Modal.Title> + </Modal.Header> + <Form onSubmit={createNewBuchung}> + <Modal.Body> + <Form.Group as={Row} controlId="Typ"> + <Col sm={{ span: 10, offset: 2 }}> + <Row sm={6}> + <Form.Check required + type="radio" + label="Zugang" + name="TypRadio" + id="ZugangRadio" + onClick={() => {setTyp('zugang'); setMaxMenge(9999)}} + /> + <Form.Check required + type="radio" + label="Abgang" + name="TypRadio" + id="AbgangRadio" + onClick={() => setTyp('abgang')} + /> + </Row> + </Col> + </Form.Group> + + <Form.Group as={Row} controlId="btmMenge"> + <Form.Label column sm="2"> + Menge + </Form.Label> + <Col sm="10"> + <Form.Control name="btmMenge" type="number" min="1" defaultValue="0" /> + </Col> + </Form.Group> + <Form.Group as={Row} controlId="datum"> + <Form.Label column sm="2"> + Datum + </Form.Label> + <Col sm="10"> + <Form.Control name="datum" type="date" defaultValue={new Date()} /> + </Col> + </Form.Group> + + {typ.toLowerCase() === 'zugang' ? renderZugang() : null} + {typ.toLowerCase() === 'abgang' ? renderAbgang() : null} + + </Modal.Body> + <Modal.Footer> + <Button variant="danger" onClick={hideModal}>Close</Button> + <Button variant="primary" type="submit">Bestätigen</Button> + </Modal.Footer> + </Form> + + + + </Modal> + ) +} + +export default NeueBuchungModal; + diff --git a/frontend/src/components/btmbuch/NeuesBtmModal.js b/frontend/src/components/btmbuch/NeuesBtmModal.js index 0c55eaebd0ac5b928ec1ad39d9433117fb430fd4..0f13a52ad4ddc9fcecc38cb1a59feeaf69d656e1 100644 --- a/frontend/src/components/btmbuch/NeuesBtmModal.js +++ b/frontend/src/components/btmbuch/NeuesBtmModal.js @@ -1,151 +1,152 @@ -import React, { useState } from "react"; -import { Modal, Button, Form, Row, Col, Alert } from "react-bootstrap"; -import { useSnackbar } from "notistack"; - -export default function NeuesBtmModal(props) { - const { enqueueSnackbar } = useSnackbar(); - const [activeDarreichungsform, setActiveDarreichungsform] = useState("Tbl"); - const [showError, setShowError] = useState(false); - const [errorMessage, setErrorMessage] = useState(""); - - const hideModal = () => { - setShowError(false); - props.onHide(); - }; - - const createNewBtm = async (event) => { - event.preventDefault(); - let { btmName, btmMenge, btmDarreichungsform, btmEinheit } = event.target; - const response = await fetch( - `http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${props.apothekeId}/btm`, - { - method: "POST", - headers: { - "Content-Type": "application/json", - Authorization: - "Bearer " + window.sessionStorage.getItem("edbapo-jwt"), - }, - body: JSON.stringify({ - name: btmName.value, - menge: btmMenge.value, - darreichungsform: btmDarreichungsform.value, - einheit: btmEinheit.value, - }), - } - ).catch((err) => { - //SHOW ERROR - console.log(err); - }); - - if (response && response.status === 201) { - const data = await response.json(); - console.log(data); - hideModal(); - enqueueSnackbar("Betäubungsmittel erfolgreich angelegt", { - variant: "success", - autoHideDuration: 3000, - }); - props.apothekeRefFunctions.updateBtmList(); - } else if (response && response.status === 400) { - setErrorMessage("OHJE"); - setShowError(true); - } - }; - - let darreichungsformen = { - Tbl: { einheiten: ["Stueck"] }, - Trp: { einheiten: ["ml"] }, - Sup: { einheiten: ["Stueck"] }, - RTA: { einheiten: ["Stueck"] }, - RKA: { einheiten: ["Stueck"] }, - Ampullen: { einheiten: ["Stueck"] }, - Rezeptursubstanz: { einheiten: ["g"] }, - HKP: { einheiten: ["Stueck"] }, - Pfl: { einheiten: ["Stueck"] }, - }; - var units = darreichungsformen[activeDarreichungsform].einheiten; - - return ( - <Modal - {...props} - size="lg" - aria-labelledby="contained-modal-title-vcenter" - centered - onExiting={hideModal} - > - <Modal.Header closeButton> - <Modal.Title id="contained-modal-title-vcenter"> - Betäubungsmittel hinzufügen - </Modal.Title> - </Modal.Header> - <Form onSubmit={createNewBtm}> - {showError ? <Alert variant="danger">{errorMessage}</Alert> : null} - <Modal.Body> - <Form.Group as={Row} controlId="btmName"> - <Form.Label column sm="2"> - Name - </Form.Label> - <Col sm="10"> - <Form.Control name="btmName" required type="text" /> - </Col> - </Form.Group> - <Form.Group as={Row} controlId="btmMenge"> - <Form.Label column sm="2"> - Menge - </Form.Label> - <Col sm="10"> - <Form.Control - name="btmMenge" - type="number" - min="0" - defaultValue="0" - /> - </Col> - </Form.Group> - <Form.Group as={Row} controlId="btmDarreichungsform"> - <Form.Label column sm="2"> - Darreichungsform - </Form.Label> - <Col sm="10"> - <Form.Control - onChange={(event) => - setActiveDarreichungsform(event.target.value) - } - name="btmDarreichungsform" - required - as="select" - > - {Object.keys(darreichungsformen).map((df) => ( - <option value={df}>{df}</option> - ))} - </Form.Control> - </Col> - </Form.Group> - - <Form.Group as={Row} controlId="btmEinheit"> - <Form.Label column sm="2"> - Einheit - </Form.Label> - <Col sm="10"> - <Form.Control name="btmEinheit" required as="select"> - {activeDarreichungsform !== "" - ? Object.keys(units).map((e) => ( - <option value={units[e]}>{units[e]}</option> - )) - : null} - </Form.Control> - </Col> - </Form.Group> - </Modal.Body> - <Modal.Footer> - <Button variant="danger" onClick={props.onHide}> - Close - </Button> - <Button variant="primary" type="submit"> - Bestätigen - </Button> - </Modal.Footer> - </Form> - </Modal> - ); -} +import React, { useState } from "react"; +import { Modal, Button, Form, Row, Col, Alert } from "react-bootstrap"; +import { useSnackbar } from "notistack"; + +export default function NeuesBtmModal(props) { + const { enqueueSnackbar } = useSnackbar(); + const [activeDarreichungsform, setActiveDarreichungsform] = useState("Tbl"); + const [showError, setShowError] = useState(false); + const [errorMessage, setErrorMessage] = useState(""); + + const hideModal = () => { + setShowError(false); + props.onHide(); + }; + + const createNewBtm = async (event) => { + event.preventDefault(); + let { btmName, btmMenge, btmDarreichungsform, btmEinheit } = event.target; + const response = await fetch( + `http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${props.apothekeId}/btm`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: + "Bearer " + window.sessionStorage.getItem("edbapo-jwt"), + }, + body: JSON.stringify({ + name: btmName.value, + menge: btmMenge.value, + darreichungsform: btmDarreichungsform.value, + einheit: btmEinheit.value, + }), + } + ).catch((err) => { + //SHOW ERROR + console.log(err); + }); + + if (response && response.status === 201) { + const data = await response.json(); + console.log(data); + hideModal(); + enqueueSnackbar("Betäubungsmittel erfolgreich angelegt", { + variant: "success", + autoHideDuration: 3000, + }); + props.apothekeRefFunctions.updateBtmList(); + } else if (response && response.status === 400) { + setErrorMessage("OHJE"); + setShowError(true); + } + }; + + let darreichungsformen = { + Tbl: { einheiten: ["Stueck"] }, + Trp: { einheiten: ["ml"] }, + Sup: { einheiten: ["Stueck"] }, + RTA: { einheiten: ["Stueck"] }, + RKA: { einheiten: ["Stueck"] }, + Ampullen: { einheiten: ["Stueck"] }, + Rezeptursubstanz: { einheiten: ["g"] }, + HKP: { einheiten: ["Stueck"] }, + Pfl: { einheiten: ["Stueck"] }, + }; + var units = darreichungsformen[activeDarreichungsform].einheiten; + + return ( + <Modal + {...props} + size="lg" + aria-labelledby="contained-modal-title-vcenter" + centered + onExiting={hideModal} + backdrop="static" + > + <Modal.Header closeButton> + <Modal.Title id="contained-modal-title-vcenter"> + Betäubungsmittel hinzufügen + </Modal.Title> + </Modal.Header> + <Form onSubmit={createNewBtm}> + {showError ? <Alert variant="danger">{errorMessage}</Alert> : null} + <Modal.Body> + <Form.Group as={Row} controlId="btmName"> + <Form.Label column sm="2"> + Name + </Form.Label> + <Col sm="10"> + <Form.Control name="btmName" required type="text" /> + </Col> + </Form.Group> + <Form.Group as={Row} controlId="btmMenge"> + <Form.Label column sm="2"> + Menge + </Form.Label> + <Col sm="10"> + <Form.Control + name="btmMenge" + type="number" + min="0" + defaultValue="0" + /> + </Col> + </Form.Group> + <Form.Group as={Row} controlId="btmDarreichungsform"> + <Form.Label column sm="2"> + Darreichungsform + </Form.Label> + <Col sm="10"> + <Form.Control + onChange={(event) => + setActiveDarreichungsform(event.target.value) + } + name="btmDarreichungsform" + required + as="select" + > + {Object.keys(darreichungsformen).map((df) => ( + <option value={df}>{df}</option> + ))} + </Form.Control> + </Col> + </Form.Group> + + <Form.Group as={Row} controlId="btmEinheit"> + <Form.Label column sm="2"> + Einheit + </Form.Label> + <Col sm="10"> + <Form.Control name="btmEinheit" required as="select"> + {activeDarreichungsform !== "" + ? Object.keys(units).map((e) => ( + <option value={units[e]}>{units[e]}</option> + )) + : null} + </Form.Control> + </Col> + </Form.Group> + </Modal.Body> + <Modal.Footer> + <Button variant="danger" onClick={props.onHide}> + Close + </Button> + <Button variant="primary" type="submit"> + Bestätigen + </Button> + </Modal.Footer> + </Form> + </Modal> + ); +} diff --git a/frontend/src/modals/ApothekeRegisterModal.js b/frontend/src/modals/ApothekeRegisterModal.js index b66b2b0992845ad7b4ca9a786fb6fd43e15f7e72..6d5fb79a59ecab706319a573ab71737527d7aa5c 100644 --- a/frontend/src/modals/ApothekeRegisterModal.js +++ b/frontend/src/modals/ApothekeRegisterModal.js @@ -1,327 +1,328 @@ -import React, { useEffect, useState } from "react"; -import { useParams } from 'react-router-dom'; -import { makeStyles, useTheme } from "@material-ui/core/styles"; -import { Modal, Button, Form, Row, Col } from "react-bootstrap"; -import { useForm } from "./useForm"; -import MobileStepper from "@material-ui/core/MobileStepper"; -import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft"; -import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"; - -const useStyles = makeStyles({ - root: { - flexGrow: 1, - }, -}); - -function ApothekeRegisterModal(props) { - const classes = useStyles(); - const theme = useTheme(); - const [activeStep, setActiveStep] = useState(0); - const [showContinueModal, setShowContinueModal] = useState(false); - const [values, handleChange] = useForm({ - name: "", - email: "", - strasse: "", - nummer: "", - plz: "", - ort: "", - vorname: "", - nachname: "", - nutzername: "", - rolle: "Admin", - }); - - const handleNext = () => { - setActiveStep((prevActiveStep) => prevActiveStep + 1); - setShowContinueModal(true); - }; - - const handleBack = () => { - setActiveStep((prevActiveStep) => prevActiveStep - 1); - setShowContinueModal(false); - }; - - const createNewApo = () => { - let body = { - name: values.name, - email: values.email, - anschrift: { - strasse: values.strasse, - nummer: values.nummer, - plz: values.plz, - ort: values.ort, - }, - }; - return fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke`, { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify(body), - }).catch((err) => { - console.log(err); - }); - }; - - const createNewAdmin = (apoId) => { - let body = { - name: values.nachname, - vorname: values.vorname, - nutzername: values.nutzername, - passwort: passwords.password, - rolle: 'ADMIN', - }; - - return fetch( - `http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/benutzer`, - { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify(body), - } - ).catch((err) => { - console.log(err); - }); - }; - - const login = async () => { - let body = { - username: values.nutzername, - password: passwords.password, - }; - return await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/login`, { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify(body), - }).catch((err) => { - //SHOW ERROR - console.log(err); - }); - }; - - const [passwords, setPasswords] = React.useState({ - password: "", - passwordCheck: "", - }); - - function handleChangePassword(e) { - setPasswords({ - ...passwords, - [e.target.name]: e.target.value, - }); - } - - const handleSubmit = async event => { - event.preventDefault(); - - //ERROR HANDLING MISSING - // let { username, neuesPasswort} = event.target; - let apoResponse = await createNewApo(); - if (apoResponse.status === 201) { - let apoId = await apoResponse.json(); - let adminRespone = await createNewAdmin(apoId.id); - if (adminRespone.status === 201) { - let loginResponse = await login(); - if (loginResponse.status === 200) { - const data = await loginResponse.json(); - window.sessionStorage.setItem("edbapo-jwt", data.jwt); - props.history.push(`/apotheke/${data.apothekeId}`); - } - } - } - }; - - const cancel = () => { - setShowContinueModal(false); - }; - - const renderSchritt1 = () => { - return ( - <React.Fragment> - <Form.Label>1. Schritt Apotheke erstellen</Form.Label> - <Form.Row> - <Form.Group as={Col} controlId="name"> - <Form.Control - required - type="text" - placeholder="Name der Apotheke" - name="name" - value={values.name} - onChange={handleChange} - /> - </Form.Group> - </Form.Row> - - <Form.Row> - <Form.Group as={Col} controlId="email"> - <Form.Control - required - type="email" - placeholder="E-Mail der Apotheke" - name="email" - value={values.email} - onChange={handleChange} - /> - </Form.Group> - </Form.Row> - - <Form.Row> - <Form.Group as={Col} sm={9} controlId="strasse"> - <Form.Control - required - type="text" - placeholder="Straße" - name="strasse" - value={values.strasse} - onChange={handleChange} - /> - </Form.Group> - <Form.Group as={Col} sm={3} controlId="nummer"> - <Form.Control - required - type="number" - placeholder="Nummer" - name="nummer" - value={values.nummer} - onChange={handleChange} - /> - </Form.Group> - </Form.Row> - <Form.Row> - <Form.Group as={Col} sm={3} controlId="plz"> - <Form.Control - required - type="text" - placeholder="PLZ" - name="plz" - value={values.plz} - onChange={handleChange} - /> - </Form.Group> - <Form.Group as={Col} sm={9} controlId="ort"> - <Form.Control - required - type="text" - placeholder="Ort" - name="ort" - value={values.ort} - onChange={handleChange} - /> - </Form.Group> - </Form.Row> - </React.Fragment> - ); - }; - - const renderSchritt2 = () => { - return ( - <React.Fragment> - <Form.Label>2. Schritt Admin Nutzer erstellen</Form.Label> - <Form.Group controllId="vorname"> - <Form.Control - required="required" - type="text" - placeholder="Vorname" - name="vorname" - value={values.vorname} - onChange={handleChange} - /> - </Form.Group> - <Form.Group controllId="nachname"> - <Form.Control - required="required" - type="text" - placeholder="Nachname" - name="nachname" - value={values.nachname} - onChange={handleChange} - /> - </Form.Group> - <Form.Group controllId="nutzername"> - <Form.Control - required="required" - type="text" - placeholder="Nutzername" - name="nutzername" - value={values.nutzername} - onChange={handleChange} - /> - </Form.Group> - <Form.Group controllId="password"> - <Form.Control - required="required" - type="password" - placeholder="Passwort erstellen" - name="password" - value={passwords.password} - onChange={handleChangePassword} - /> - </Form.Group> - <Form.Group> - <Form.Control - required="required" - type="password" - name="passwordCheck" - placeholder="Passwort wiederholen" - value={passwords.passwordCheck} - onChange={handleChangePassword} - /> - </Form.Group> - </React.Fragment> - ); - }; - - return ( - <Modal - show={props.show} - onHide={props.onHide} - centered - aria-labelledby="contained-modal-title-vcenter" - > - <Modal.Header> - <Modal.Title>Neue Apotheke registrieren</Modal.Title> - </Modal.Header> - <Form onSubmit={handleSubmit}> - <Modal.Body> - {showContinueModal ? renderSchritt2() : renderSchritt1()} - </Modal.Body> - <MobileStepper - variant="dots" - steps={2} - position="static" - activeStep={activeStep} - className={classes.root} - nextButton={ - <Button - size="small" - type={activeStep == 1 ? "submit" : "button"} - onClick={activeStep == 0 ? handleNext : null} - disabled={activeStep === 2} - > - {activeStep === 1 ? 'Registrien' : 'Weiter'} - {theme.direction === "rtl" ? (<KeyboardArrowLeft />) : (<KeyboardArrowRight />)} - </Button> - } - backButton={ - <Button - size="small" - type={activeStep == 1 ? "submit" : "button"} - onClick={handleBack} - disabled={activeStep === 0} - > - {theme.direction === "rtl" ? ( - <KeyboardArrowRight /> - ) : ( - <KeyboardArrowLeft /> - )} - Zurück - </Button> - } - /> - </Form> - </Modal> - ); -} -export default ApothekeRegisterModal; +import React, { useEffect, useState } from "react"; +import { useParams } from 'react-router-dom'; +import { makeStyles, useTheme } from "@material-ui/core/styles"; +import { Modal, Button, Form, Row, Col } from "react-bootstrap"; +import { useForm } from "./useForm"; +import MobileStepper from "@material-ui/core/MobileStepper"; +import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft"; +import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"; + +const useStyles = makeStyles({ + root: { + flexGrow: 1, + }, +}); + +function ApothekeRegisterModal(props) { + const classes = useStyles(); + const theme = useTheme(); + const [activeStep, setActiveStep] = useState(0); + const [showContinueModal, setShowContinueModal] = useState(false); + const [values, handleChange] = useForm({ + name: "", + email: "", + strasse: "", + nummer: "", + plz: "", + ort: "", + vorname: "", + nachname: "", + nutzername: "", + rolle: "Admin", + }); + + const handleNext = () => { + setActiveStep((prevActiveStep) => prevActiveStep + 1); + setShowContinueModal(true); + }; + + const handleBack = () => { + setActiveStep((prevActiveStep) => prevActiveStep - 1); + setShowContinueModal(false); + }; + + const createNewApo = () => { + let body = { + name: values.name, + email: values.email, + anschrift: { + strasse: values.strasse, + nummer: values.nummer, + plz: values.plz, + ort: values.ort, + }, + }; + return fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(body), + }).catch((err) => { + console.log(err); + }); + }; + + const createNewAdmin = (apoId) => { + let body = { + name: values.nachname, + vorname: values.vorname, + nutzername: values.nutzername, + passwort: passwords.password, + rolle: 'ADMIN', + }; + + return fetch( + `http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/benutzer`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(body), + } + ).catch((err) => { + console.log(err); + }); + }; + + const login = async () => { + let body = { + username: values.nutzername, + password: passwords.password, + }; + return await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/login`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(body), + }).catch((err) => { + //SHOW ERROR + console.log(err); + }); + }; + + const [passwords, setPasswords] = React.useState({ + password: "", + passwordCheck: "", + }); + + function handleChangePassword(e) { + setPasswords({ + ...passwords, + [e.target.name]: e.target.value, + }); + } + + const handleSubmit = async event => { + event.preventDefault(); + + //ERROR HANDLING MISSING + // let { username, neuesPasswort} = event.target; + let apoResponse = await createNewApo(); + if (apoResponse.status === 201) { + let apoId = await apoResponse.json(); + let adminRespone = await createNewAdmin(apoId.id); + if (adminRespone.status === 201) { + let loginResponse = await login(); + if (loginResponse.status === 200) { + const data = await loginResponse.json(); + window.sessionStorage.setItem("edbapo-jwt", data.jwt); + props.history.push(`/apotheke/${data.apothekeId}`); + } + } + } + }; + + const cancel = () => { + setShowContinueModal(false); + }; + + const renderSchritt1 = () => { + return ( + <React.Fragment> + <Form.Label>1. Schritt Apotheke erstellen</Form.Label> + <Form.Row> + <Form.Group as={Col} controlId="name"> + <Form.Control + required + type="text" + placeholder="Name der Apotheke" + name="name" + value={values.name} + onChange={handleChange} + /> + </Form.Group> + </Form.Row> + + <Form.Row> + <Form.Group as={Col} controlId="email"> + <Form.Control + required + type="email" + placeholder="E-Mail der Apotheke" + name="email" + value={values.email} + onChange={handleChange} + /> + </Form.Group> + </Form.Row> + + <Form.Row> + <Form.Group as={Col} sm={9} controlId="strasse"> + <Form.Control + required + type="text" + placeholder="Straße" + name="strasse" + value={values.strasse} + onChange={handleChange} + /> + </Form.Group> + <Form.Group as={Col} sm={3} controlId="nummer"> + <Form.Control + required + type="number" + placeholder="Nummer" + name="nummer" + value={values.nummer} + onChange={handleChange} + /> + </Form.Group> + </Form.Row> + <Form.Row> + <Form.Group as={Col} sm={3} controlId="plz"> + <Form.Control + required + type="text" + placeholder="PLZ" + name="plz" + value={values.plz} + onChange={handleChange} + /> + </Form.Group> + <Form.Group as={Col} sm={9} controlId="ort"> + <Form.Control + required + type="text" + placeholder="Ort" + name="ort" + value={values.ort} + onChange={handleChange} + /> + </Form.Group> + </Form.Row> + </React.Fragment> + ); + }; + + const renderSchritt2 = () => { + return ( + <React.Fragment> + <Form.Label>2. Schritt Admin Nutzer erstellen</Form.Label> + <Form.Group controllId="vorname"> + <Form.Control + required="required" + type="text" + placeholder="Vorname" + name="vorname" + value={values.vorname} + onChange={handleChange} + /> + </Form.Group> + <Form.Group controllId="nachname"> + <Form.Control + required="required" + type="text" + placeholder="Nachname" + name="nachname" + value={values.nachname} + onChange={handleChange} + /> + </Form.Group> + <Form.Group controllId="nutzername"> + <Form.Control + required="required" + type="text" + placeholder="Nutzername" + name="nutzername" + value={values.nutzername} + onChange={handleChange} + /> + </Form.Group> + <Form.Group controllId="password"> + <Form.Control + required="required" + type="password" + placeholder="Passwort erstellen" + name="password" + value={passwords.password} + onChange={handleChangePassword} + /> + </Form.Group> + <Form.Group> + <Form.Control + required="required" + type="password" + name="passwordCheck" + placeholder="Passwort wiederholen" + value={passwords.passwordCheck} + onChange={handleChangePassword} + /> + </Form.Group> + </React.Fragment> + ); + }; + + return ( + <Modal + show={props.show} + onHide={props.onHide} + centered + aria-labelledby="contained-modal-title-vcenter" + backdrop="static" + > + <Modal.Header closeButton> + <Modal.Title>Neue Apotheke registrieren</Modal.Title> + </Modal.Header> + <Form onSubmit={handleSubmit}> + <Modal.Body> + {showContinueModal ? renderSchritt2() : renderSchritt1()} + </Modal.Body> + <MobileStepper + variant="dots" + steps={2} + position="static" + activeStep={activeStep} + className={classes.root} + nextButton={ + <Button + size="small" + type={activeStep == 1 ? "submit" : "button"} + onClick={activeStep == 0 ? handleNext : null} + disabled={activeStep === 2} + > + {activeStep === 1 ? 'Registrien' : 'Weiter'} + {theme.direction === "rtl" ? (<KeyboardArrowLeft />) : (<KeyboardArrowRight />)} + </Button> + } + backButton={ + <Button + size="small" + type={activeStep == 1 ? "submit" : "button"} + onClick={handleBack} + disabled={activeStep === 0} + > + {theme.direction === "rtl" ? ( + <KeyboardArrowRight /> + ) : ( + <KeyboardArrowLeft /> + )} + Zurück + </Button> + } + /> + </Form> + </Modal> + ); +} +export default ApothekeRegisterModal; diff --git a/frontend/src/modals/ArztAddModal.js b/frontend/src/modals/ArztAddModal.js index 5f0ef996bd6362feb0e834c146013ef03e8bc8ce..751b4813cf02ce1ab9b7894b8f6348b7a2741b45 100644 --- a/frontend/src/modals/ArztAddModal.js +++ b/frontend/src/modals/ArztAddModal.js @@ -1,102 +1,103 @@ -import React from 'react'; -import { useParams } from 'react-router-dom'; -import { Modal, Col, Button, Form } from 'react-bootstrap'; -import { useSnackbar } from 'notistack'; - -function ArztAddModal(props) { - - const { apoId } = useParams(); - const { enqueueSnackbar } = useSnackbar(); - - const updateDetails = event => { - event.preventDefault(); - let { name, plz, ort, strasse, nummer } = event.target; - - let body = { - name: name.value, - anschrift: { - ort: ort.value, - plz: plz.value, - strasse: strasse.value, - nummer: nummer.value - } - } - - fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/arzt`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), - }, - body: JSON.stringify(body) - }).then((res) => { - if (res.status === 201) { - props.onHide(); - props.updateArztData(); - enqueueSnackbar('Arzt erstellt', { variant: 'success', autoHideDuration: 3000 }); - } else if (res.status === 400) { - enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 }); - } - }).catch((err) => { - console.log(err); - return; - }); - - - } - - return ( - <Modal - {...props} - size="lg" - aria-labelledby="contained-modal-title-vcenter" - centered - onExiting={props.onHide} - > - <Modal.Header closeButton> - <Modal.Title id="contained-modal-title-vcenter"> - Arzt hinzufügen - </Modal.Title> - </Modal.Header> - <Form onSubmit={updateDetails}> - <Modal.Body> - <Form.Row> - <Form.Group as={Col} controlId="name"> - <Form.Label>Name</Form.Label> - <Form.Control name="name" required type="text" /> - </Form.Group> - </Form.Row> - - <Form.Row> - <Form.Group as={Col} sm={9} controlId="strasse"> - <Form.Label>Straße</Form.Label> - <Form.Control name="strasse" required type="text" /> - </Form.Group> - <Form.Group as={Col} sm={3} controlId="nummer"> - <Form.Label>Nummer</Form.Label> - <Form.Control name="nummer" required type="text" /> - </Form.Group> - </Form.Row> - <Form.Row> - <Form.Group as={Col} sm={3} controlId="plz"> - <Form.Label>PLZ</Form.Label> - <Form.Control name="plz" required type="text" /> - </Form.Group> - - <Form.Group as={Col} sm={9} controlId="ort"> - <Form.Label>Ort</Form.Label> - <Form.Control name="ort" required type="text" /> - </Form.Group> - </Form.Row> - </Modal.Body> - <Modal.Footer> - <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button> - <Button variant="primary" type="submit" >Bestätigen</Button> - </Modal.Footer> - </Form> - </Modal> - ) - -} - -export default ArztAddModal; +import React from 'react'; +import { useParams } from 'react-router-dom'; +import { Modal, Col, Button, Form } from 'react-bootstrap'; +import { useSnackbar } from 'notistack'; + +function ArztAddModal(props) { + + const { apoId } = useParams(); + const { enqueueSnackbar } = useSnackbar(); + + const updateDetails = event => { + event.preventDefault(); + let { name, plz, ort, strasse, nummer } = event.target; + + let body = { + name: name.value, + anschrift: { + ort: ort.value, + plz: plz.value, + strasse: strasse.value, + nummer: nummer.value + } + } + + fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/arzt`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), + }, + body: JSON.stringify(body) + }).then((res) => { + if (res.status === 201) { + props.onHide(); + props.updateArztData(); + enqueueSnackbar('Arzt erstellt', { variant: 'success', autoHideDuration: 3000 }); + } else if (res.status === 400) { + enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 }); + } + }).catch((err) => { + console.log(err); + return; + }); + + + } + + return ( + <Modal + {...props} + size="lg" + aria-labelledby="contained-modal-title-vcenter" + centered + onExiting={props.onHide} + backdrop="static" + > + <Modal.Header closeButton> + <Modal.Title id="contained-modal-title-vcenter"> + Arzt hinzufügen + </Modal.Title> + </Modal.Header> + <Form onSubmit={updateDetails}> + <Modal.Body> + <Form.Row> + <Form.Group as={Col} controlId="name"> + <Form.Label>Name</Form.Label> + <Form.Control name="name" required type="text" /> + </Form.Group> + </Form.Row> + + <Form.Row> + <Form.Group as={Col} sm={9} controlId="strasse"> + <Form.Label>Straße</Form.Label> + <Form.Control name="strasse" required type="text" /> + </Form.Group> + <Form.Group as={Col} sm={3} controlId="nummer"> + <Form.Label>Nummer</Form.Label> + <Form.Control name="nummer" required type="text" /> + </Form.Group> + </Form.Row> + <Form.Row> + <Form.Group as={Col} sm={3} controlId="plz"> + <Form.Label>PLZ</Form.Label> + <Form.Control name="plz" required type="text" /> + </Form.Group> + + <Form.Group as={Col} sm={9} controlId="ort"> + <Form.Label>Ort</Form.Label> + <Form.Control name="ort" required type="text" /> + </Form.Group> + </Form.Row> + </Modal.Body> + <Modal.Footer> + <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button> + <Button variant="primary" type="submit" >Bestätigen</Button> + </Modal.Footer> + </Form> + </Modal> + ) + +} + +export default ArztAddModal; diff --git a/frontend/src/modals/ArztEditModal.js b/frontend/src/modals/ArztEditModal.js index e0ce1b7f6991cfd4809d7852c9a16cf649dca29c..a9a4dbbfcafaa96cc862a33560089d092856eb87 100644 --- a/frontend/src/modals/ArztEditModal.js +++ b/frontend/src/modals/ArztEditModal.js @@ -1,107 +1,108 @@ -import React from 'react'; -import { useParams } from 'react-router-dom'; -import { Modal, Col, Button, Form } from 'react-bootstrap'; -import { useSnackbar } from 'notistack'; - -function ArztEditModal(props) { - - const { apoId } = useParams(); - const { enqueueSnackbar } = useSnackbar(); - - let { id, name, anschrift } = props.arzt; - - - const updateDetails = async event => { - event.preventDefault(); - let { name, plz, ort, strasse, nummer } = event.target; - - let body = { - name: name.value, - anschrift: { - ort: ort.value, - plz: plz.value, - strasse: strasse.value, - nummer: nummer.value - } - } - - fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/arzt/${id}`, { - method: 'PUT', - headers: { - 'Content-Type': 'application/json', - 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), - }, - body: JSON.stringify(body) - }).then((res) => { - if (res.status === 200) { - props.onHide(); - props.updateArztData(); - enqueueSnackbar('Arzt aktualisiert', { variant: 'success', autoHideDuration: 3000 }); - } else if (res.status === 400) { - enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 }); - } else if (res.status === 403) { - enqueueSnackbar('Falsches Passwort', { variant: 'error', autoHideDuration: 3000 }); - } - }).catch((err) => { - console.log(err); - return; - }); - - - } - - return ( - <Modal - {...props} - size="lg" - aria-labelledby="contained-modal-title-vcenter" - centered - onExiting={props.onHide} - > - <Modal.Header closeButton> - <Modal.Title id="contained-modal-title-vcenter"> - Arzt bearbeiten - </Modal.Title> - </Modal.Header> - <Form onSubmit={updateDetails}> - <Modal.Body> - <Form.Row> - <Form.Group as={Col} controlId="name"> - <Form.Label>Name</Form.Label> - <Form.Control name="name" required defaultValue={name} type="text" /> - </Form.Group> - </Form.Row> - - <Form.Row> - <Form.Group as={Col} sm={9} controlId="strasse"> - <Form.Label>Straße</Form.Label> - <Form.Control name="strasse" required type="text" defaultValue={anschrift.strasse} /> - </Form.Group> - <Form.Group as={Col} sm={3} controlId="nummer"> - <Form.Label>Nummer</Form.Label> - <Form.Control name="nummer" required type="text" defaultValue={anschrift.nummer} /> - </Form.Group> - </Form.Row> - <Form.Row> - <Form.Group as={Col} sm={3} controlId="plz"> - <Form.Label>PLZ</Form.Label> - <Form.Control name="plz" required type="text" defaultValue={anschrift.plz} /> - </Form.Group> - - <Form.Group as={Col} sm={9} controlId="ort"> - <Form.Label>Ort</Form.Label> - <Form.Control name="ort" required type="text" defaultValue={anschrift.ort} /> - </Form.Group> - </Form.Row> - </Modal.Body> - <Modal.Footer> - <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button> - <Button variant="primary" type="submit" >Bestätigen</Button> - </Modal.Footer> - </Form> - </Modal> - ) - -} - -export default ArztEditModal; +import React from 'react'; +import { useParams } from 'react-router-dom'; +import { Modal, Col, Button, Form } from 'react-bootstrap'; +import { useSnackbar } from 'notistack'; + +function ArztEditModal(props) { + + const { apoId } = useParams(); + const { enqueueSnackbar } = useSnackbar(); + + let { id, name, anschrift } = props.arzt; + + + const updateDetails = async event => { + event.preventDefault(); + let { name, plz, ort, strasse, nummer } = event.target; + + let body = { + name: name.value, + anschrift: { + ort: ort.value, + plz: plz.value, + strasse: strasse.value, + nummer: nummer.value + } + } + + fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/arzt/${id}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), + }, + body: JSON.stringify(body) + }).then((res) => { + if (res.status === 200) { + props.onHide(); + props.updateArztData(); + enqueueSnackbar('Arzt aktualisiert', { variant: 'success', autoHideDuration: 3000 }); + } else if (res.status === 400) { + enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 }); + } else if (res.status === 403) { + enqueueSnackbar('Falsches Passwort', { variant: 'error', autoHideDuration: 3000 }); + } + }).catch((err) => { + console.log(err); + return; + }); + + + } + + return ( + <Modal + {...props} + size="lg" + aria-labelledby="contained-modal-title-vcenter" + centered + onExiting={props.onHide} + backdrop="static" + > + <Modal.Header closeButton> + <Modal.Title id="contained-modal-title-vcenter"> + Arzt bearbeiten + </Modal.Title> + </Modal.Header> + <Form onSubmit={updateDetails}> + <Modal.Body> + <Form.Row> + <Form.Group as={Col} controlId="name"> + <Form.Label>Name</Form.Label> + <Form.Control name="name" required defaultValue={name} type="text" /> + </Form.Group> + </Form.Row> + + <Form.Row> + <Form.Group as={Col} sm={9} controlId="strasse"> + <Form.Label>Straße</Form.Label> + <Form.Control name="strasse" required type="text" defaultValue={anschrift.strasse} /> + </Form.Group> + <Form.Group as={Col} sm={3} controlId="nummer"> + <Form.Label>Nummer</Form.Label> + <Form.Control name="nummer" required type="text" defaultValue={anschrift.nummer} /> + </Form.Group> + </Form.Row> + <Form.Row> + <Form.Group as={Col} sm={3} controlId="plz"> + <Form.Label>PLZ</Form.Label> + <Form.Control name="plz" required type="text" defaultValue={anschrift.plz} /> + </Form.Group> + + <Form.Group as={Col} sm={9} controlId="ort"> + <Form.Label>Ort</Form.Label> + <Form.Control name="ort" required type="text" defaultValue={anschrift.ort} /> + </Form.Group> + </Form.Row> + </Modal.Body> + <Modal.Footer> + <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button> + <Button variant="primary" type="submit" >Bestätigen</Button> + </Modal.Footer> + </Form> + </Modal> + ) + +} + +export default ArztEditModal; diff --git a/frontend/src/modals/BtmAddModal.js b/frontend/src/modals/BtmAddModal.js index 1120c8cf800a7219fff15ed7b0366e76702e6754..5b0b55b853da0997e6a27f4b780b4ec7a49a7869 100644 --- a/frontend/src/modals/BtmAddModal.js +++ b/frontend/src/modals/BtmAddModal.js @@ -1,129 +1,130 @@ -import React, { useState } from 'react'; -import { useParams } from 'react-router-dom'; -import { Modal, Button, Form, Row, Col, Alert } from 'react-bootstrap'; -import { useSnackbar } from 'notistack'; - -function BtmAddModal(props) { - - const { apoId } = useParams(); - const { enqueueSnackbar } = useSnackbar(); - const [activeDarreichungsform, setActiveDarreichungsform] = useState('Tbl'); - const [showError, setShowError] = useState(false); - const [errorMessage, setErrorMessage] = useState(''); - - const createNewBtm = async event => { - event.preventDefault(); - let { btmName, btmMenge, btmDarreichungsform, btmEinheit } = event.target; - - fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/btm`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), - }, - body: JSON.stringify({ - name: btmName.value, - menge: btmMenge.value, - darreichungsform: btmDarreichungsform.value, - einheit: btmEinheit.value - }) - }).then((res) => { - if (res.status === 201) { - props.onHide(); - props.updateBtmData(); - enqueueSnackbar('Betäubungsmittel erfolgreich angelegt', { variant: 'success', autoHideDuration: 3000 }); - } else if (res.status === 400) { - setErrorMessage('Betäubungsmittel existiert bereits oder Daten ungültig'); - setShowError(true); - } - }).catch((err) => { - //SHOW ERROR - console.log(err); - }); - - - - } - - // let einheiten = ['g','mg','ml', 'Stueck'] - let darreichungsformen = { - 'Tbl': { einheiten: ['Stueck'] }, - 'Trp': { einheiten: ['ml'] }, - 'Sup': { einheiten: ['Stueck'] }, - 'RTA': { einheiten: ['Stueck'] }, - 'RKA': { einheiten: ['Stueck'] }, - 'Ampullen': { einheiten: ['Stueck'] }, - 'Rezeptursubstanz': { einheiten: ['mg', 'g'] }, - 'HKP': { einheiten: ['Stueck'] }, - 'Pfl': { einheiten: ['Stueck'] } - } - var units = darreichungsformen[activeDarreichungsform].einheiten; - - return ( - <Modal - {...props} - size="lg" - aria-labelledby="contained-modal-title-vcenter" - centered - onExiting={props.onHide} - > - <Modal.Header closeButton> - <Modal.Title id="contained-modal-title-vcenter"> - Betäubungsmittel hinzufügen - </Modal.Title> - </Modal.Header> - <Form onSubmit={createNewBtm}> - {showError ? <Alert variant="danger">{errorMessage}</Alert> : null} - <Modal.Body> - <Form.Group as={Row} controlId="btmName"> - <Form.Label column sm="2"> - Name - </Form.Label> - <Col sm="10"> - <Form.Control name="btmName" required type="text" /> - </Col> - </Form.Group> - - <Form.Group as={Row} controlId="btmMenge"> - <Form.Label column sm="2"> - Menge - </Form.Label> - <Col sm="10"> - <Form.Control name="btmMenge" type="number" min="0" defaultValue="0" /> - </Col> - </Form.Group> - - - <Form.Group as={Row} controlId="btmDarreichungsform"> - <Form.Label column sm="2"> - Darreichungsform - </Form.Label> - <Col sm="10"> - <Form.Control onChange={event => setActiveDarreichungsform(event.target.value)} name="btmDarreichungsform" required as="select"> - {Object.keys(darreichungsformen).map(df => <option kef={df} value={df}>{df}</option>)} - </Form.Control> - </Col> - </Form.Group> - - <Form.Group as={Row} controlId="btmEinheit"> - <Form.Label column sm="2"> - Einheit - </Form.Label> - <Col sm="10"> - <Form.Control name="btmEinheit" required as="select"> - {activeDarreichungsform !== '' ? Object.keys(units).map(e => <option key={units[e]} value={units[e]}>{units[e]}</option>) : null} - </Form.Control> - </Col> - </Form.Group> - - </Modal.Body> - <Modal.Footer> - <Button variant="" onClick={props.onHide}>Abbrechen</Button> - <Button variant="primary" type="submit">Bestätigen</Button> - </Modal.Footer> - </Form> - </Modal> - ) -} - -export default BtmAddModal; +import React, { useState } from 'react'; +import { useParams } from 'react-router-dom'; +import { Modal, Button, Form, Row, Col, Alert } from 'react-bootstrap'; +import { useSnackbar } from 'notistack'; + +function BtmAddModal(props) { + + const { apoId } = useParams(); + const { enqueueSnackbar } = useSnackbar(); + const [activeDarreichungsform, setActiveDarreichungsform] = useState('Tbl'); + const [showError, setShowError] = useState(false); + const [errorMessage, setErrorMessage] = useState(''); + + const createNewBtm = async event => { + event.preventDefault(); + let { btmName, btmMenge, btmDarreichungsform, btmEinheit } = event.target; + + fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/btm`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), + }, + body: JSON.stringify({ + name: btmName.value, + menge: btmMenge.value, + darreichungsform: btmDarreichungsform.value, + einheit: btmEinheit.value + }) + }).then((res) => { + if (res.status === 201) { + props.onHide(); + props.updateBtmData(); + enqueueSnackbar('Betäubungsmittel erfolgreich angelegt', { variant: 'success', autoHideDuration: 3000 }); + } else if (res.status === 400) { + setErrorMessage('Betäubungsmittel existiert bereits oder Daten ungültig'); + setShowError(true); + } + }).catch((err) => { + //SHOW ERROR + console.log(err); + }); + + + + } + + // let einheiten = ['g','mg','ml', 'Stueck'] + let darreichungsformen = { + 'Tbl': { einheiten: ['Stueck'] }, + 'Trp': { einheiten: ['ml'] }, + 'Sup': { einheiten: ['Stueck'] }, + 'RTA': { einheiten: ['Stueck'] }, + 'RKA': { einheiten: ['Stueck'] }, + 'Ampullen': { einheiten: ['Stueck'] }, + 'Rezeptursubstanz': { einheiten: ['mg', 'g'] }, + 'HKP': { einheiten: ['Stueck'] }, + 'Pfl': { einheiten: ['Stueck'] } + } + var units = darreichungsformen[activeDarreichungsform].einheiten; + + return ( + <Modal + {...props} + size="lg" + aria-labelledby="contained-modal-title-vcenter" + centered + onExiting={props.onHide} + backdrop="static" + > + <Modal.Header closeButton> + <Modal.Title id="contained-modal-title-vcenter"> + Betäubungsmittel hinzufügen + </Modal.Title> + </Modal.Header> + <Form onSubmit={createNewBtm}> + {showError ? <Alert variant="danger">{errorMessage}</Alert> : null} + <Modal.Body> + <Form.Group as={Row} controlId="btmName"> + <Form.Label column sm="2"> + Name + </Form.Label> + <Col sm="10"> + <Form.Control name="btmName" required type="text" /> + </Col> + </Form.Group> + + <Form.Group as={Row} controlId="btmMenge"> + <Form.Label column sm="2"> + Menge + </Form.Label> + <Col sm="10"> + <Form.Control name="btmMenge" type="number" min="0" defaultValue="0" /> + </Col> + </Form.Group> + + + <Form.Group as={Row} controlId="btmDarreichungsform"> + <Form.Label column sm="2"> + Darreichungsform + </Form.Label> + <Col sm="10"> + <Form.Control onChange={event => setActiveDarreichungsform(event.target.value)} name="btmDarreichungsform" required as="select"> + {Object.keys(darreichungsformen).map(df => <option kef={df} value={df}>{df}</option>)} + </Form.Control> + </Col> + </Form.Group> + + <Form.Group as={Row} controlId="btmEinheit"> + <Form.Label column sm="2"> + Einheit + </Form.Label> + <Col sm="10"> + <Form.Control name="btmEinheit" required as="select"> + {activeDarreichungsform !== '' ? Object.keys(units).map(e => <option key={units[e]} value={units[e]}>{units[e]}</option>) : null} + </Form.Control> + </Col> + </Form.Group> + + </Modal.Body> + <Modal.Footer> + <Button variant="" onClick={props.onHide}>Abbrechen</Button> + <Button variant="primary" type="submit">Bestätigen</Button> + </Modal.Footer> + </Form> + </Modal> + ) +} + +export default BtmAddModal; diff --git a/frontend/src/modals/BtmEditModal.js b/frontend/src/modals/BtmEditModal.js index 47e3fd31ba4302ffb0bdfda8e21b1a052721b923..8454fc156546fcd288c420b2449e06a09fa0ffd5 100644 --- a/frontend/src/modals/BtmEditModal.js +++ b/frontend/src/modals/BtmEditModal.js @@ -1,160 +1,161 @@ -import React, { useState, useEffect } from 'react'; -import { useParams } from 'react-router-dom'; -import { Modal, Col, Button, Form, Alert, Row } from 'react-bootstrap'; -import { useSnackbar } from 'notistack'; -import { responsiveFontSizes } from '@material-ui/core'; - -function BtmEditModal(props) { - - const { apoId } = useParams(); - - const darreichungsformen = { - 'Tbl': { einheiten: ['Stueck'] }, - 'Trp': { einheiten: ['ml'] }, - 'Sup': { einheiten: ['Stueck'] }, - 'RTA': { einheiten: ['Stueck'] }, - 'RKA': { einheiten: ['Stueck'] }, - 'Ampullen': { einheiten: ['Stueck'] }, - 'Rezeptursubstanz': { einheiten: ['mg', 'g'] }, - 'HKP': { einheiten: ['Stueck'] }, - 'Pfl': { einheiten: ['Stueck'] } - }; - - let { id, darreichungsform, einheit, name, menge } = props.btm; - // console.log(props.btm) - - const [activeDarreichungsform, setActiveDarreichungsform] = useState(darreichungsform); - const [activeEinheit, setActiveEinheit] = useState(einheit); - const [einheiten, setEinheiten] = useState(darreichungsformen[darreichungsform].einheiten); - - const [showError, setShowError] = useState(false); - const [errorMessage, setErrorMessage] = useState(''); - const { enqueueSnackbar } = useSnackbar(); - - - const updateDetails = async event => { - event.preventDefault(); - let { name, darreichungsform, einheit, menge } = event.target; - let body = { - name: name.value, - darreichungsform: darreichungsform.value, - einheit: einheit.value, - menge: menge.value - } - console.log(body) - fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/btm/${id}`, { - method: 'PUT', - headers: { - 'Content-Type': 'application/json', - 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), - }, - body: JSON.stringify(body) - }).then((res) => { - if (res.status === 200) { - hide(); - props.updateBtmData(); - enqueueSnackbar('Benutzer aktualisiert', { variant: 'success', autoHideDuration: 3000 }); - } else if (res.status === 400) { - enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 }); - } else if (responsiveFontSizes.status === 403) { - enqueueSnackbar('Falsches Passwort', { variant: 'error', autoHideDuration: 3000 }); - } - }).catch((err) => { - console.log(err); - return; - }); - - - } - - useEffect(() => { - setActiveDarreichungsform(props.btm.darreichungsform); - setActiveEinheit(props.btm.einheit); - setEinheiten(darreichungsformen[props.btm.darreichungsform].einheiten) - console.log(activeDarreichungsform, activeEinheit, einheiten) - }, [props.btm]) - - const hide = () => { - setActiveDarreichungsform(props.btm.darreichungsform); - setActiveEinheit(props.btm.einheit); - setEinheiten(darreichungsformen[props.btm.darreichungsform].einheiten) - props.onHide(); - } - - return ( - <Modal - {...props} - size="lg" - aria-labelledby="contained-modal-title-vcenter" - centered - onExiting={hide} - > - <Modal.Header closeButton> - <Modal.Title id="contained-modal-title-vcenter"> - Betäubungsmittel bearbeiten - </Modal.Title> - </Modal.Header> - <Form onSubmit={updateDetails}> - {showError ? <Alert variant="danger">{errorMessage}</Alert> : null} - <Modal.Body> - <Form.Group as={Row} controlId="name"> - <Form.Label column sm="2"> - Name - </Form.Label> - <Col sm="10"> - <Form.Control defaultValue={name} name="name" required type="text" /> - </Col> - </Form.Group> - - <Form.Group as={Row} controlId="menge"> - <Form.Label column sm="2"> - Menge - </Form.Label> - <Col sm="10"> - <Form.Control defaultValue={menge} name="menge" type="number" min="0" /> - </Col> - </Form.Group> - - - <Form.Group as={Row} controlId="darreichungsform"> - <Form.Label column sm="2"> - Darreichungsform - </Form.Label> - <Col sm="10"> - <Form.Control defaultValue={darreichungsform} onChange={event => { - setActiveDarreichungsform(event.target.value) - setEinheiten(darreichungsformen[event.target.value].einheiten) - }} name="darreichungsform" required as="select"> - { - darreichungsformen ? Object.keys(darreichungsformen).map(df => <option kef={df} value={df}>{df}</option>) : null - } - </Form.Control> - </Col> - </Form.Group> - - <Form.Group as={Row} controlId="einheit"> - <Form.Label column sm="2"> - Einheit - </Form.Label> - <Col sm="10"> - <Form.Control defaultValue={einheit} name="einheit" required as="select"> - { - einheiten ? Object.keys(einheiten).map(e => <option key={einheiten[e]} value={einheiten[e]}>{einheiten[e]}</option>) : null - } - </Form.Control> - </Col> - </Form.Group> - - </Modal.Body> - <Modal.Footer> - <Button variant="" onClick={props.onHide}>Abbrechen</Button> - <Button variant="primary" type="submit">Bestätigen</Button> - </Modal.Footer> - </Form> - </Modal> - ) - - -} - -export default BtmEditModal; +import React, { useState, useEffect } from 'react'; +import { useParams } from 'react-router-dom'; +import { Modal, Col, Button, Form, Alert, Row } from 'react-bootstrap'; +import { useSnackbar } from 'notistack'; +import { responsiveFontSizes } from '@material-ui/core'; + +function BtmEditModal(props) { + + const { apoId } = useParams(); + + const darreichungsformen = { + 'Tbl': { einheiten: ['Stueck'] }, + 'Trp': { einheiten: ['ml'] }, + 'Sup': { einheiten: ['Stueck'] }, + 'RTA': { einheiten: ['Stueck'] }, + 'RKA': { einheiten: ['Stueck'] }, + 'Ampullen': { einheiten: ['Stueck'] }, + 'Rezeptursubstanz': { einheiten: ['mg', 'g'] }, + 'HKP': { einheiten: ['Stueck'] }, + 'Pfl': { einheiten: ['Stueck'] } + }; + + let { id, darreichungsform, einheit, name, menge } = props.btm; + // console.log(props.btm) + + const [activeDarreichungsform, setActiveDarreichungsform] = useState(darreichungsform); + const [activeEinheit, setActiveEinheit] = useState(einheit); + const [einheiten, setEinheiten] = useState(darreichungsformen[darreichungsform].einheiten); + + const [showError, setShowError] = useState(false); + const [errorMessage, setErrorMessage] = useState(''); + const { enqueueSnackbar } = useSnackbar(); + + + const updateDetails = async event => { + event.preventDefault(); + let { name, darreichungsform, einheit, menge } = event.target; + let body = { + name: name.value, + darreichungsform: darreichungsform.value, + einheit: einheit.value, + menge: menge.value + } + console.log(body) + fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/btm/${id}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), + }, + body: JSON.stringify(body) + }).then((res) => { + if (res.status === 200) { + hide(); + props.updateBtmData(); + enqueueSnackbar('Benutzer aktualisiert', { variant: 'success', autoHideDuration: 3000 }); + } else if (res.status === 400) { + enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 }); + } else if (responsiveFontSizes.status === 403) { + enqueueSnackbar('Falsches Passwort', { variant: 'error', autoHideDuration: 3000 }); + } + }).catch((err) => { + console.log(err); + return; + }); + + + } + + useEffect(() => { + setActiveDarreichungsform(props.btm.darreichungsform); + setActiveEinheit(props.btm.einheit); + setEinheiten(darreichungsformen[props.btm.darreichungsform].einheiten) + console.log(activeDarreichungsform, activeEinheit, einheiten) + }, [props.btm]) + + const hide = () => { + setActiveDarreichungsform(props.btm.darreichungsform); + setActiveEinheit(props.btm.einheit); + setEinheiten(darreichungsformen[props.btm.darreichungsform].einheiten) + props.onHide(); + } + + return ( + <Modal + {...props} + size="lg" + aria-labelledby="contained-modal-title-vcenter" + centered + onExiting={hide} + backdrop="static" + > + <Modal.Header closeButton> + <Modal.Title id="contained-modal-title-vcenter"> + Betäubungsmittel bearbeiten + </Modal.Title> + </Modal.Header> + <Form onSubmit={updateDetails}> + {showError ? <Alert variant="danger">{errorMessage}</Alert> : null} + <Modal.Body> + <Form.Group as={Row} controlId="name"> + <Form.Label column sm="2"> + Name + </Form.Label> + <Col sm="10"> + <Form.Control defaultValue={name} name="name" required type="text" /> + </Col> + </Form.Group> + + <Form.Group as={Row} controlId="menge"> + <Form.Label column sm="2"> + Menge + </Form.Label> + <Col sm="10"> + <Form.Control defaultValue={menge} name="menge" type="number" min="0" /> + </Col> + </Form.Group> + + + <Form.Group as={Row} controlId="darreichungsform"> + <Form.Label column sm="2"> + Darreichungsform + </Form.Label> + <Col sm="10"> + <Form.Control defaultValue={darreichungsform} onChange={event => { + setActiveDarreichungsform(event.target.value) + setEinheiten(darreichungsformen[event.target.value].einheiten) + }} name="darreichungsform" required as="select"> + { + darreichungsformen ? Object.keys(darreichungsformen).map(df => <option kef={df} value={df}>{df}</option>) : null + } + </Form.Control> + </Col> + </Form.Group> + + <Form.Group as={Row} controlId="einheit"> + <Form.Label column sm="2"> + Einheit + </Form.Label> + <Col sm="10"> + <Form.Control defaultValue={einheit} name="einheit" required as="select"> + { + einheiten ? Object.keys(einheiten).map(e => <option key={einheiten[e]} value={einheiten[e]}>{einheiten[e]}</option>) : null + } + </Form.Control> + </Col> + </Form.Group> + + </Modal.Body> + <Modal.Footer> + <Button variant="" onClick={props.onHide}>Abbrechen</Button> + <Button variant="primary" type="submit">Bestätigen</Button> + </Modal.Footer> + </Form> + </Modal> + ) + + +} + +export default BtmEditModal; diff --git a/frontend/src/modals/DeleteModal.js b/frontend/src/modals/DeleteModal.js index 27a755e3bba9c5443bece63f506a1d83228bc963..8584712b7181b0537fd847cd48cdf8a9654d8046 100644 --- a/frontend/src/modals/DeleteModal.js +++ b/frontend/src/modals/DeleteModal.js @@ -1,39 +1,40 @@ -import React from 'react'; -import { Modal, Row, Col, Button } from 'react-bootstrap'; -import Warning from '@material-ui/icons/Warning' - -function DeleteModal(props) { - - return ( - <Modal - {...props} - size="lg" - aria-labelledby="contained-modal-title-vcenter" - centered - onExiting={props.onHide} - > - <Modal.Header closeButton> - <Modal.Title id="contained-modal-title-vcenter"> - {props.headertext} - </Modal.Title> - </Modal.Header> - <Modal.Body> - <Row > - <Col sm="9"> - <p style={{ fontSize: '20pt' }}>{props.maintext}</p> - <small>{props.subtext}</small> - </Col> - <Col sm="3"> - <Warning color="error" fontSize="large" /> - </Col> - </Row> - </Modal.Body> - <Modal.Footer> - <Button autoFocus variant="" onClick={props.onHide}>Abbrechen</Button> - <Button variant="danger" onClick={() => { props.onHide(); props.onSubmit() }}>Bestätigen</Button> - </Modal.Footer> - </Modal> - ) -} - -export default DeleteModal; +import React from 'react'; +import { Modal, Row, Col, Button } from 'react-bootstrap'; +import Warning from '@material-ui/icons/Warning' + +function DeleteModal(props) { + + return ( + <Modal + {...props} + size="lg" + aria-labelledby="contained-modal-title-vcenter" + centered + onExiting={props.onHide} + backdrop="static" + > + <Modal.Header closeButton> + <Modal.Title id="contained-modal-title-vcenter"> + {props.headertext} + </Modal.Title> + </Modal.Header> + <Modal.Body> + <Row > + <Col sm="9"> + <p style={{ fontSize: '20pt' }}>{props.maintext}</p> + <small>{props.subtext}</small> + </Col> + <Col sm="3"> + <Warning color="error" fontSize="large" /> + </Col> + </Row> + </Modal.Body> + <Modal.Footer> + <Button autoFocus variant="" onClick={props.onHide}>Abbrechen</Button> + <Button variant="danger" onClick={() => { props.onHide(); props.onSubmit() }}>Bestätigen</Button> + </Modal.Footer> + </Modal> + ) +} + +export default DeleteModal; diff --git a/frontend/src/modals/LieferantAddModal.js b/frontend/src/modals/LieferantAddModal.js index 817e18d81cafed02ec29c24bef67540a6d689a81..f06c1e53e325190b77e04d3ad160c73bd296ea70 100644 --- a/frontend/src/modals/LieferantAddModal.js +++ b/frontend/src/modals/LieferantAddModal.js @@ -1,99 +1,100 @@ -import React from 'react'; -import { useParams } from 'react-router-dom'; -import { Modal, Col, Button, Form } from 'react-bootstrap'; -import { useSnackbar } from 'notistack'; - -function NeuesLieferantenModal(props) { - - const { apoId } = useParams(); - const { enqueueSnackbar } = useSnackbar(); - - const updateDetails = async event => { - event.preventDefault(); - let { name, plz, ort, strasse, nummer } = event.target; - - let body = { - name: name.value, - anschrift: { - ort: ort.value, - plz: plz.value, - strasse: strasse.value, - nummer: nummer.value - } - } - - fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/lieferant`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), - }, - body: JSON.stringify(body) - }).then((res) => { - if (res.status === 201) { - props.onHide(); - props.updateLieferantData(); - enqueueSnackbar('Lieferant aktualisiert', { variant: 'success', autoHideDuration: 3000 }); - } else if (res.status === 400) { - enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 }); - } - }).catch((err) => { - console.log(err); - return; - }); - } - - return ( - <Modal - {...props} - size="lg" - aria-labelledby="contained-modal-title-vcenter" - centered - onExiting={props.onHide} - > - <Modal.Header closeButton> - <Modal.Title id="contained-modal-title-vcenter"> - Liefernat hinzufügen - </Modal.Title> - </Modal.Header> - <Form onSubmit={updateDetails}> - <Modal.Body> - <Form.Row> - <Form.Group as={Col} controlId="name"> - <Form.Label>Name</Form.Label> - <Form.Control name="name" required type="text" /> - </Form.Group> - </Form.Row> - - <Form.Row> - <Form.Group as={Col} sm={9} controlId="strasse"> - <Form.Label>Straße</Form.Label> - <Form.Control name="strasse" required type="text" /> - </Form.Group> - <Form.Group as={Col} sm={3} controlId="nummer"> - <Form.Label>Nummer</Form.Label> - <Form.Control name="nummer" required type="text" /> - </Form.Group> - </Form.Row> - <Form.Row> - <Form.Group as={Col} sm={3} controlId="plz"> - <Form.Label>PLZ</Form.Label> - <Form.Control name="plz" required type="text" /> - </Form.Group> - - <Form.Group as={Col} sm={9} controlId="ort"> - <Form.Label>Ort</Form.Label> - <Form.Control name="ort" required type="text" /> - </Form.Group> - </Form.Row> - </Modal.Body> - <Modal.Footer> - <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button> - <Button variant="primary" type="submit" >Bestätigen</Button> - </Modal.Footer> - </Form> - </Modal> - ) -} - -export default NeuesLieferantenModal; +import React from 'react'; +import { useParams } from 'react-router-dom'; +import { Modal, Col, Button, Form } from 'react-bootstrap'; +import { useSnackbar } from 'notistack'; + +function NeuesLieferantenModal(props) { + + const { apoId } = useParams(); + const { enqueueSnackbar } = useSnackbar(); + + const updateDetails = async event => { + event.preventDefault(); + let { name, plz, ort, strasse, nummer } = event.target; + + let body = { + name: name.value, + anschrift: { + ort: ort.value, + plz: plz.value, + strasse: strasse.value, + nummer: nummer.value + } + } + + fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/lieferant`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), + }, + body: JSON.stringify(body) + }).then((res) => { + if (res.status === 201) { + props.onHide(); + props.updateLieferantData(); + enqueueSnackbar('Lieferant aktualisiert', { variant: 'success', autoHideDuration: 3000 }); + } else if (res.status === 400) { + enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 }); + } + }).catch((err) => { + console.log(err); + return; + }); + } + + return ( + <Modal + {...props} + size="lg" + aria-labelledby="contained-modal-title-vcenter" + centered + onExiting={props.onHide} + backdrop="static" + > + <Modal.Header closeButton> + <Modal.Title id="contained-modal-title-vcenter"> + Liefernat hinzufügen + </Modal.Title> + </Modal.Header> + <Form onSubmit={updateDetails}> + <Modal.Body> + <Form.Row> + <Form.Group as={Col} controlId="name"> + <Form.Label>Name</Form.Label> + <Form.Control name="name" required type="text" /> + </Form.Group> + </Form.Row> + + <Form.Row> + <Form.Group as={Col} sm={9} controlId="strasse"> + <Form.Label>Straße</Form.Label> + <Form.Control name="strasse" required type="text" /> + </Form.Group> + <Form.Group as={Col} sm={3} controlId="nummer"> + <Form.Label>Nummer</Form.Label> + <Form.Control name="nummer" required type="text" /> + </Form.Group> + </Form.Row> + <Form.Row> + <Form.Group as={Col} sm={3} controlId="plz"> + <Form.Label>PLZ</Form.Label> + <Form.Control name="plz" required type="text" /> + </Form.Group> + + <Form.Group as={Col} sm={9} controlId="ort"> + <Form.Label>Ort</Form.Label> + <Form.Control name="ort" required type="text" /> + </Form.Group> + </Form.Row> + </Modal.Body> + <Modal.Footer> + <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button> + <Button variant="primary" type="submit" >Bestätigen</Button> + </Modal.Footer> + </Form> + </Modal> + ) +} + +export default NeuesLieferantenModal; diff --git a/frontend/src/modals/LieferantEditModal.js b/frontend/src/modals/LieferantEditModal.js index 0bcdafb9bc1d55984dc9ee0bd0d3a4ccb17d41a3..85173334d06f1299d2b4925a580b12ea025a04c2 100644 --- a/frontend/src/modals/LieferantEditModal.js +++ b/frontend/src/modals/LieferantEditModal.js @@ -1,103 +1,104 @@ -import React from 'react'; -import { useParams } from 'react-router-dom'; -import { Modal, Col, Button, Form } from 'react-bootstrap'; -import { useSnackbar } from 'notistack'; - -function LieferantUpdateModal(props) { - - const { apoId } = useParams(); - const { enqueueSnackbar } = useSnackbar(); - - let { id, name, anschrift } = props.lieferant; - - const updateDetails = async event => { - event.preventDefault(); - let { name, plz, ort, strasse, nummer } = event.target; - - let body = { - name: name.value, - anschrift: { - ort: ort.value, - plz: plz.value, - strasse: strasse.value, - nummer: nummer.value - } - } - - fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/lieferant/${id}`, { - method: 'PUT', - headers: { - 'Content-Type': 'application/json', - 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), - }, - body: JSON.stringify(body) - }).then((res) => { - if (res.status === 200) { - props.onHide(); - props.updateLieferantData(); - enqueueSnackbar('Lieferant aktualisiert', { variant: 'success', autoHideDuration: 3000 }); - } else if (res.status === 400) { - enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 }); - } else if (res.status === 403) { - enqueueSnackbar('Falsches Passwort', { variant: 'error', autoHideDuration: 3000 }); - } - }).catch((err) => { - console.log(err); - return; - }); - } - - return ( - <Modal - {...props} - size="lg" - aria-labelledby="contained-modal-title-vcenter" - centered - onExiting={props.onHide} - > - <Modal.Header closeButton> - <Modal.Title id="contained-modal-title-vcenter"> - Lieferant bearbeiten - </Modal.Title> - </Modal.Header> - <Form onSubmit={updateDetails}> - <Modal.Body> - <Form.Row> - <Form.Group as={Col} controlId="name"> - <Form.Label>Name</Form.Label> - <Form.Control name="name" required defaultValue={name} type="text" /> - </Form.Group> - </Form.Row> - - <Form.Row> - <Form.Group as={Col} sm={9} controlId="strasse"> - <Form.Label>Straße</Form.Label> - <Form.Control name="strasse" required type="text" defaultValue={anschrift.strasse} /> - </Form.Group> - <Form.Group as={Col} sm={3} controlId="nummer"> - <Form.Label>Nummer</Form.Label> - <Form.Control name="nummer" required type="text" defaultValue={anschrift.nummer} /> - </Form.Group> - </Form.Row> - <Form.Row> - <Form.Group as={Col} sm={3} controlId="plz"> - <Form.Label>PLZ</Form.Label> - <Form.Control name="plz" required type="text" defaultValue={anschrift.plz} /> - </Form.Group> - - <Form.Group as={Col} sm={9} controlId="ort"> - <Form.Label>Ort</Form.Label> - <Form.Control name="ort" required type="text" defaultValue={anschrift.ort} /> - </Form.Group> - </Form.Row> - </Modal.Body> - <Modal.Footer> - <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button> - <Button variant="primary" type="submit" >Bestätigen</Button> - </Modal.Footer> - </Form> - </Modal> - ) -} - -export default LieferantUpdateModal; +import React from 'react'; +import { useParams } from 'react-router-dom'; +import { Modal, Col, Button, Form } from 'react-bootstrap'; +import { useSnackbar } from 'notistack'; + +function LieferantUpdateModal(props) { + + const { apoId } = useParams(); + const { enqueueSnackbar } = useSnackbar(); + + let { id, name, anschrift } = props.lieferant; + + const updateDetails = async event => { + event.preventDefault(); + let { name, plz, ort, strasse, nummer } = event.target; + + let body = { + name: name.value, + anschrift: { + ort: ort.value, + plz: plz.value, + strasse: strasse.value, + nummer: nummer.value + } + } + + fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/lieferant/${id}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), + }, + body: JSON.stringify(body) + }).then((res) => { + if (res.status === 200) { + props.onHide(); + props.updateLieferantData(); + enqueueSnackbar('Lieferant aktualisiert', { variant: 'success', autoHideDuration: 3000 }); + } else if (res.status === 400) { + enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 }); + } else if (res.status === 403) { + enqueueSnackbar('Falsches Passwort', { variant: 'error', autoHideDuration: 3000 }); + } + }).catch((err) => { + console.log(err); + return; + }); + } + + return ( + <Modal + {...props} + size="lg" + aria-labelledby="contained-modal-title-vcenter" + centered + onExiting={props.onHide} + backdrop="static" + > + <Modal.Header closeButton> + <Modal.Title id="contained-modal-title-vcenter"> + Lieferant bearbeiten + </Modal.Title> + </Modal.Header> + <Form onSubmit={updateDetails}> + <Modal.Body> + <Form.Row> + <Form.Group as={Col} controlId="name"> + <Form.Label>Name</Form.Label> + <Form.Control name="name" required defaultValue={name} type="text" /> + </Form.Group> + </Form.Row> + + <Form.Row> + <Form.Group as={Col} sm={9} controlId="strasse"> + <Form.Label>Straße</Form.Label> + <Form.Control name="strasse" required type="text" defaultValue={anschrift.strasse} /> + </Form.Group> + <Form.Group as={Col} sm={3} controlId="nummer"> + <Form.Label>Nummer</Form.Label> + <Form.Control name="nummer" required type="text" defaultValue={anschrift.nummer} /> + </Form.Group> + </Form.Row> + <Form.Row> + <Form.Group as={Col} sm={3} controlId="plz"> + <Form.Label>PLZ</Form.Label> + <Form.Control name="plz" required type="text" defaultValue={anschrift.plz} /> + </Form.Group> + + <Form.Group as={Col} sm={9} controlId="ort"> + <Form.Label>Ort</Form.Label> + <Form.Control name="ort" required type="text" defaultValue={anschrift.ort} /> + </Form.Group> + </Form.Row> + </Modal.Body> + <Modal.Footer> + <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button> + <Button variant="primary" type="submit" >Bestätigen</Button> + </Modal.Footer> + </Form> + </Modal> + ) +} + +export default LieferantUpdateModal; diff --git a/frontend/src/modals/PersonalAddModal.js b/frontend/src/modals/PersonalAddModal.js index d0c68596bd12c3fa723fc8c80b7fb26c9d417c02..40c0f15a566547d1a5f08ccd3f8079907c038a41 100644 --- a/frontend/src/modals/PersonalAddModal.js +++ b/frontend/src/modals/PersonalAddModal.js @@ -1,146 +1,147 @@ -import React, { useState, useEffect } from 'react'; -import { Modal, Col, Button, Form } from 'react-bootstrap'; -import { useParams } from 'react-router-dom'; -import { useSnackbar } from 'notistack'; - -function PersonalAddModal(props) { - - const { apoId } = useParams(); - - const [nutzernameVergeben, setNutzernameVergeben] = useState(false); - - //for password checking - const [passwordConfirmInvalid, setPasswordConfirmInvalid] = useState(false); - const [newPasswordVal, setNewPasswordVal] = useState(''); - const [passwordConfirmVal, setPasswordConfirmVal] = useState(''); - - const { enqueueSnackbar } = useSnackbar(); - - let roles = ["ADMIN", "PRUEFER", "BENUTZER"]; - - const createNewUser = async event => { - event.preventDefault(); - let { username, vorname, nachname, neuesPasswort, rolle } = event.target; - - let body = { - name: nachname.value, - nutzername: username.value, - vorname: vorname.value, - aktiv: true, - rolle: rolle.value, - passwort: neuesPasswort.value - } - - console.log(body) - fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/benutzer`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), - }, - body: JSON.stringify(body) - }).then((res) => { - if (res.status === 201) { - props.onHide(); - props.updateUserList(); - enqueueSnackbar('Benutzer erstellt', { variant: 'success', autoHideDuration: 3000 }); - } else if (res.status === 400) { - enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 }); - } - }).catch((err) => { - console.log(err); - return; - }); - } - - const checkIfUserNameIsTaken = async event => { - let newUsername = event.target.value; - if (newUsername.length < 4) { - //if shorter than 4 its invalid - setNutzernameVergeben(true); - return; - } - - await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/benutzer/${newUsername}/checkUsername`, { - method: 'POST', - }).then((res) => { - if (res.status === 200) { - setNutzernameVergeben(false); - } else if (res.status === 400) { - setNutzernameVergeben(true); - } - }).catch((err) => { - console.log(err); - return; - }); - } - - useEffect(() => { - setPasswordConfirmInvalid(newPasswordVal !== passwordConfirmVal); - }, [newPasswordVal, passwordConfirmVal]); - - - return ( - <Modal - {...props} - size="lg" - aria-labelledby="contained-modal-title-vcenter" - centered - onExiting={props.onHide} - > - <Modal.Header closeButton> - <Modal.Title id="contained-modal-title-vcenter"> - Personal hinzufügen - </Modal.Title> - </Modal.Header> - <Form onSubmit={createNewUser}> - <Modal.Body> - <Form.Row> - <Form.Group as={Col} controlId="username"> - <Form.Label>Benutzername</Form.Label> - <Form.Control name="username" required onChange={checkIfUserNameIsTaken} - isInvalid={nutzernameVergeben} type="text" /> - </Form.Group> - </Form.Row> - - <Form.Row> - <Form.Group as={Col} sm={4} controlId="vorname"> - <Form.Label>Vorname</Form.Label> - <Form.Control name="vorname" required type="text" /> - </Form.Group> - - <Form.Group as={Col} sm={8} controlId="nachname"> - <Form.Label>Nachname</Form.Label> - <Form.Control name="nachname" required type="text" /> - </Form.Group> - </Form.Row> - - <Form.Row> - <Form.Group as={Col} controlId="neuesPasswort"> - <Form.Label>Neues Passwort</Form.Label> - <Form.Control required minlength={5} onChange={event => setNewPasswordVal(event.target.value)} name="neuesPasswort" type="password" /> - </Form.Group> - <Form.Group as={Col} controlId="neuesPasswortConfirm"> - <Form.Label>Neues Passwort bestätigen</Form.Label> - <Form.Control required minlength={5} onChange={event => setPasswordConfirmVal(event.target.value)} isInvalid={passwordConfirmInvalid} name="neuesPasswortConfirm" type="password" /> - </Form.Group> - </Form.Row> - <Form.Row> - <Form.Group as={Col} sm={4} controlId="rolle"> - <Form.Label>Rolle</Form.Label> - <Form.Control required name="rolle" required as="select" > - {roles.map(r => <option key={r} value={r}>{r}</option>)} - </Form.Control> - </Form.Group> - </Form.Row> - </Modal.Body> - <Modal.Footer> - <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button> - <Button variant="primary" type="submit" >Bestätigen</Button> - </Modal.Footer> - </Form> - </Modal> - ) -} - -export default PersonalAddModal; +import React, { useState, useEffect } from 'react'; +import { Modal, Col, Button, Form } from 'react-bootstrap'; +import { useParams } from 'react-router-dom'; +import { useSnackbar } from 'notistack'; + +function PersonalAddModal(props) { + + const { apoId } = useParams(); + + const [nutzernameVergeben, setNutzernameVergeben] = useState(false); + + //for password checking + const [passwordConfirmInvalid, setPasswordConfirmInvalid] = useState(false); + const [newPasswordVal, setNewPasswordVal] = useState(''); + const [passwordConfirmVal, setPasswordConfirmVal] = useState(''); + + const { enqueueSnackbar } = useSnackbar(); + + let roles = ["ADMIN", "PRUEFER", "BENUTZER"]; + + const createNewUser = async event => { + event.preventDefault(); + let { username, vorname, nachname, neuesPasswort, rolle } = event.target; + + let body = { + name: nachname.value, + nutzername: username.value, + vorname: vorname.value, + aktiv: true, + rolle: rolle.value, + passwort: neuesPasswort.value + } + + console.log(body) + fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/benutzer`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), + }, + body: JSON.stringify(body) + }).then((res) => { + if (res.status === 201) { + props.onHide(); + props.updateUserList(); + enqueueSnackbar('Benutzer erstellt', { variant: 'success', autoHideDuration: 3000 }); + } else if (res.status === 400) { + enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 }); + } + }).catch((err) => { + console.log(err); + return; + }); + } + + const checkIfUserNameIsTaken = async event => { + let newUsername = event.target.value; + if (newUsername.length < 4) { + //if shorter than 4 its invalid + setNutzernameVergeben(true); + return; + } + + await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/benutzer/${newUsername}/checkUsername`, { + method: 'POST', + }).then((res) => { + if (res.status === 200) { + setNutzernameVergeben(false); + } else if (res.status === 400) { + setNutzernameVergeben(true); + } + }).catch((err) => { + console.log(err); + return; + }); + } + + useEffect(() => { + setPasswordConfirmInvalid(newPasswordVal !== passwordConfirmVal); + }, [newPasswordVal, passwordConfirmVal]); + + + return ( + <Modal + {...props} + size="lg" + aria-labelledby="contained-modal-title-vcenter" + centered + onExiting={props.onHide} + backdrop="static" + > + <Modal.Header closeButton> + <Modal.Title id="contained-modal-title-vcenter"> + Personal hinzufügen + </Modal.Title> + </Modal.Header> + <Form onSubmit={createNewUser}> + <Modal.Body> + <Form.Row> + <Form.Group as={Col} controlId="username"> + <Form.Label>Benutzername</Form.Label> + <Form.Control name="username" required onChange={checkIfUserNameIsTaken} + isInvalid={nutzernameVergeben} type="text" /> + </Form.Group> + </Form.Row> + + <Form.Row> + <Form.Group as={Col} sm={4} controlId="vorname"> + <Form.Label>Vorname</Form.Label> + <Form.Control name="vorname" required type="text" /> + </Form.Group> + + <Form.Group as={Col} sm={8} controlId="nachname"> + <Form.Label>Nachname</Form.Label> + <Form.Control name="nachname" required type="text" /> + </Form.Group> + </Form.Row> + + <Form.Row> + <Form.Group as={Col} controlId="neuesPasswort"> + <Form.Label>Neues Passwort</Form.Label> + <Form.Control required minlength={5} onChange={event => setNewPasswordVal(event.target.value)} name="neuesPasswort" type="password" /> + </Form.Group> + <Form.Group as={Col} controlId="neuesPasswortConfirm"> + <Form.Label>Neues Passwort bestätigen</Form.Label> + <Form.Control required minlength={5} onChange={event => setPasswordConfirmVal(event.target.value)} isInvalid={passwordConfirmInvalid} name="neuesPasswortConfirm" type="password" /> + </Form.Group> + </Form.Row> + <Form.Row> + <Form.Group as={Col} sm={4} controlId="rolle"> + <Form.Label>Rolle</Form.Label> + <Form.Control required name="rolle" required as="select" > + {roles.map(r => <option key={r} value={r}>{r}</option>)} + </Form.Control> + </Form.Group> + </Form.Row> + </Modal.Body> + <Modal.Footer> + <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button> + <Button variant="primary" type="submit" >Bestätigen</Button> + </Modal.Footer> + </Form> + </Modal> + ) +} + +export default PersonalAddModal; diff --git a/frontend/src/modals/PersonalEditModal.js b/frontend/src/modals/PersonalEditModal.js index 3752bc48a1ad5b9009fa3b76771aa247fe13e5a3..77084788ded3c9a4f79e2075b496cc0df3ba950c 100644 --- a/frontend/src/modals/PersonalEditModal.js +++ b/frontend/src/modals/PersonalEditModal.js @@ -1,170 +1,171 @@ -import React, { useState, useEffect } from 'react'; -import { Modal, Col, Button, Form, OverlayTrigger, Row, Tooltip } from 'react-bootstrap'; -import { useParams } from 'react-router-dom'; -import HelpIcon from '@material-ui/icons/Help'; -import { Checkbox } from '@material-ui/core'; -import { useSnackbar } from 'notistack'; - -function PersonalUpdateModal(props) { - - const { apoId } = useParams(); - - let { id, nutzername, name, vorname, aktiv, rolle } = props.user; - const [nutzernameVergeben, setNutzernameVergeben] = useState(false); - - //for password checking - const [passwordConfirmInvalid, setPasswordConfirmInvalid] = useState(false); - const [newPasswordVal, setNewPasswordVal] = useState(''); - const [passwordConfirmVal, setPasswordConfirmVal] = useState(''); - - const { enqueueSnackbar } = useSnackbar(); - - let roles = ["ADMIN", "PRUEFER", "BENUTZER"]; - - - const updateDetails = async event => { - event.preventDefault(); - let { username, vorname, nachname, neuesPasswort, rolle, aktiv } = event.target; - - let body = { - name: nachname.value, - nutzername: username.value, - vorname: vorname.value, - aktiv: aktiv.checked, - rolle: rolle.value - } - if (neuesPasswort.value) { - body.newPassword = neuesPasswort.value; - } - fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/benutzer/${id}`, { - method: 'PUT', - headers: { - 'Content-Type': 'application/json', - 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), - }, - body: JSON.stringify(body) - }).then((res) => { - if (res.status === 200) { - props.onHide(); - props.updateUserList(); - enqueueSnackbar('Benutzer aktualisiert', { variant: 'success', autoHideDuration: 3000 }); - } else if (res.status === 400) { - enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 }); - } else if (res.status === 403) { - enqueueSnackbar('Falsches Passwort', { variant: 'error', autoHideDuration: 3000 }); - } - }).catch((err) => { - console.log(err); - return; - }); - } - - const checkIfUserNameIsTaken = async event => { - let newUsername = event.target.value; - if (newUsername.length < 4) { - //if shorter than 4 its invalid - setNutzernameVergeben(true); - return; - } - - if (newUsername !== nutzername && newUsername) { - await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${id}/benutzer/${newUsername}/checkUsername`, { - method: 'POST', - }).then((res) => { - if (res.status === 200) { - setNutzernameVergeben(false); - } else if (res.status === 400) { - setNutzernameVergeben(true); - } - }).catch((err) => { - console.log(err); - return; - }); - - } else { - setNutzernameVergeben(false); - } - } - - useEffect(() => { - setPasswordConfirmInvalid(newPasswordVal !== passwordConfirmVal); - }, [newPasswordVal, passwordConfirmVal]); - - - return ( - <Modal - {...props} - size="lg" - aria-labelledby="contained-modal-title-vcenter" - centered - onExiting={props.onHide} - > - <Modal.Header closeButton> - <Modal.Title id="contained-modal-title-vcenter"> - Personal bearbeiten - </Modal.Title> - </Modal.Header> - <Form onSubmit={updateDetails}> - <Modal.Body> - <Form.Row> - <Form.Group as={Col} controlId="username"> - <Form.Label>Benutzername</Form.Label> - <Form.Control name="username" required onChange={checkIfUserNameIsTaken} - isInvalid={nutzernameVergeben} defaultValue={nutzername} type="text" /> - </Form.Group> - </Form.Row> - - <Form.Row> - <Form.Group as={Col} sm={4} controlId="vorname"> - <Form.Label>Vorname</Form.Label> - <Form.Control name="vorname" required defaultValue={vorname} type="text" /> - </Form.Group> - - <Form.Group as={Col} sm={8} controlId="nachname"> - <Form.Label>Nachname</Form.Label> - <Form.Control name="nachname" required defaultValue={name} type="text" /> - </Form.Group> - </Form.Row> - - <Form.Row> - <Form.Group as={Col} controlId="neuesPasswort"> - <Form.Label>Neues Passwort</Form.Label> - <Form.Control minlength={5} onChange={event => setNewPasswordVal(event.target.value)} name="neuesPasswort" type="password" /> - </Form.Group> - <Form.Group as={Col} controlId="neuesPasswortConfirm"> - <Form.Label>Neues Passwort bestätigen</Form.Label> - <Form.Control minlength={5} onChange={event => setPasswordConfirmVal(event.target.value)} isInvalid={passwordConfirmInvalid} name="neuesPasswortConfirm" type="password" /> - </Form.Group> - </Form.Row> - <Form.Group style={{ marginLeft: '1em' }} controlId="aktiv"> - <Row style={{ alignItems: 'center' }} > - <Form.Label>Aktiv</Form.Label> - <Checkbox defaultChecked={aktiv} type="checkbox" name="aktiv" /> - <OverlayTrigger - placement="right" - delay={{ show: 250, hide: 400 }} - overlay={props => <Tooltip id="button-tooltip" {...props}>Ein inaktiver Benutzer ist gesperrt und kann sich nicht einloggen</Tooltip>} - > - <HelpIcon style={{ marginLeft: '0.3em' }} /> - </OverlayTrigger> - - - <Form.Group style={{ marginLeft: '3.5em' }} as={Col} sm={4} controlId="rolle"> - <Form.Label>Rolle</Form.Label> - <Form.Control name="rolle" required as="select" defaultValue={rolle}> - {roles.map(r => <option key={r} value={r}>{r}</option>)} - </Form.Control> - </Form.Group> - </Row> - </Form.Group> - </Modal.Body> - <Modal.Footer> - <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button> - <Button variant="primary" type="submit" >Bestätigen</Button> - </Modal.Footer> - </Form> - </Modal> - ) -} - -export default PersonalUpdateModal; +import React, { useState, useEffect } from 'react'; +import { Modal, Col, Button, Form, OverlayTrigger, Row, Tooltip } from 'react-bootstrap'; +import { useParams } from 'react-router-dom'; +import HelpIcon from '@material-ui/icons/Help'; +import { Checkbox } from '@material-ui/core'; +import { useSnackbar } from 'notistack'; + +function PersonalUpdateModal(props) { + + const { apoId } = useParams(); + + let { id, nutzername, name, vorname, aktiv, rolle } = props.user; + const [nutzernameVergeben, setNutzernameVergeben] = useState(false); + + //for password checking + const [passwordConfirmInvalid, setPasswordConfirmInvalid] = useState(false); + const [newPasswordVal, setNewPasswordVal] = useState(''); + const [passwordConfirmVal, setPasswordConfirmVal] = useState(''); + + const { enqueueSnackbar } = useSnackbar(); + + let roles = ["ADMIN", "PRUEFER", "BENUTZER"]; + + + const updateDetails = async event => { + event.preventDefault(); + let { username, vorname, nachname, neuesPasswort, rolle, aktiv } = event.target; + + let body = { + name: nachname.value, + nutzername: username.value, + vorname: vorname.value, + aktiv: aktiv.checked, + rolle: rolle.value + } + if (neuesPasswort.value) { + body.newPassword = neuesPasswort.value; + } + fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/benutzer/${id}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), + }, + body: JSON.stringify(body) + }).then((res) => { + if (res.status === 200) { + props.onHide(); + props.updateUserList(); + enqueueSnackbar('Benutzer aktualisiert', { variant: 'success', autoHideDuration: 3000 }); + } else if (res.status === 400) { + enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant: 'error', autoHideDuration: 3000 }); + } else if (res.status === 403) { + enqueueSnackbar('Falsches Passwort', { variant: 'error', autoHideDuration: 3000 }); + } + }).catch((err) => { + console.log(err); + return; + }); + } + + const checkIfUserNameIsTaken = async event => { + let newUsername = event.target.value; + if (newUsername.length < 4) { + //if shorter than 4 its invalid + setNutzernameVergeben(true); + return; + } + + if (newUsername !== nutzername && newUsername) { + await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${id}/benutzer/${newUsername}/checkUsername`, { + method: 'POST', + }).then((res) => { + if (res.status === 200) { + setNutzernameVergeben(false); + } else if (res.status === 400) { + setNutzernameVergeben(true); + } + }).catch((err) => { + console.log(err); + return; + }); + + } else { + setNutzernameVergeben(false); + } + } + + useEffect(() => { + setPasswordConfirmInvalid(newPasswordVal !== passwordConfirmVal); + }, [newPasswordVal, passwordConfirmVal]); + + + return ( + <Modal + {...props} + size="lg" + aria-labelledby="contained-modal-title-vcenter" + centered + onExiting={props.onHide} + backdrop="static" + > + <Modal.Header closeButton> + <Modal.Title id="contained-modal-title-vcenter"> + Personal bearbeiten + </Modal.Title> + </Modal.Header> + <Form onSubmit={updateDetails}> + <Modal.Body> + <Form.Row> + <Form.Group as={Col} controlId="username"> + <Form.Label>Benutzername</Form.Label> + <Form.Control name="username" required onChange={checkIfUserNameIsTaken} + isInvalid={nutzernameVergeben} defaultValue={nutzername} type="text" /> + </Form.Group> + </Form.Row> + + <Form.Row> + <Form.Group as={Col} sm={4} controlId="vorname"> + <Form.Label>Vorname</Form.Label> + <Form.Control name="vorname" required defaultValue={vorname} type="text" /> + </Form.Group> + + <Form.Group as={Col} sm={8} controlId="nachname"> + <Form.Label>Nachname</Form.Label> + <Form.Control name="nachname" required defaultValue={name} type="text" /> + </Form.Group> + </Form.Row> + + <Form.Row> + <Form.Group as={Col} controlId="neuesPasswort"> + <Form.Label>Neues Passwort</Form.Label> + <Form.Control minlength={5} onChange={event => setNewPasswordVal(event.target.value)} name="neuesPasswort" type="password" /> + </Form.Group> + <Form.Group as={Col} controlId="neuesPasswortConfirm"> + <Form.Label>Neues Passwort bestätigen</Form.Label> + <Form.Control minlength={5} onChange={event => setPasswordConfirmVal(event.target.value)} isInvalid={passwordConfirmInvalid} name="neuesPasswortConfirm" type="password" /> + </Form.Group> + </Form.Row> + <Form.Group style={{ marginLeft: '1em' }} controlId="aktiv"> + <Row style={{ alignItems: 'center' }} > + <Form.Label>Aktiv</Form.Label> + <Checkbox defaultChecked={aktiv} type="checkbox" name="aktiv" /> + <OverlayTrigger + placement="right" + delay={{ show: 250, hide: 400 }} + overlay={props => <Tooltip id="button-tooltip" {...props}>Ein inaktiver Benutzer ist gesperrt und kann sich nicht einloggen</Tooltip>} + > + <HelpIcon style={{ marginLeft: '0.3em' }} /> + </OverlayTrigger> + + + <Form.Group style={{ marginLeft: '3.5em' }} as={Col} sm={4} controlId="rolle"> + <Form.Label>Rolle</Form.Label> + <Form.Control name="rolle" required as="select" defaultValue={rolle}> + {roles.map(r => <option key={r} value={r}>{r}</option>)} + </Form.Control> + </Form.Group> + </Row> + </Form.Group> + </Modal.Body> + <Modal.Footer> + <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button> + <Button variant="primary" type="submit" >Bestätigen</Button> + </Modal.Footer> + </Form> + </Modal> + ) +} + +export default PersonalUpdateModal; diff --git a/frontend/src/modals/UpdateBuchungModal.js b/frontend/src/modals/UpdateBuchungModal.js index 2fd0370f817113467290fd170bc56cdd30104173..b09897ce00b236224ad5f650ba809514b268f2a3 100644 --- a/frontend/src/modals/UpdateBuchungModal.js +++ b/frontend/src/modals/UpdateBuchungModal.js @@ -1,200 +1,201 @@ -import React,{useEffect} from 'react'; -import { Modal, Button, Form, Row, Col } from 'react-bootstrap'; -import { useSnackbar } from 'notistack'; -import { useParams } from 'react-router-dom'; - - - -function UpdateBuchungModal(props) { - - // let apothekeId = sessionStorage.getItem('apothekeId'); - const { apoId } = useParams(); - // eslint-disable-next-line - let {lieferanten, aerzte, empfaenger} = props; - const { enqueueSnackbar } = useSnackbar(); - - const sendUpdateRequest = async (buchungData) => { - const response = await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/btmbuchung/${props.buchung.id}`, { - method: 'PUT', - headers: { - 'Content-Type': 'application/json', - 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), - }, - body: JSON.stringify(buchungData) - }).catch((err) => { - //SHOW ERROR - console.log(err); - }); - - - if (response && response.status === 200) { - props.onHide(); - enqueueSnackbar('Buchung erfolgreich aktualisiert', { variant: 'success', autoHideDuration: 3000 }); - props.apothekeRefFunctions.updateBtmList(); - } else { - //SHOW ERROR - console.log(response); - } - } - - - - - const updateBuchung = event => { - event.preventDefault(); - - if (props.buchung.typ.toLowerCase() === 'zugang') { - let { anforderungsschein, btmMenge, lieferant, pruefdatum, datum } = event.target; - let buchungData = { - benutzer: props.user.id, - btm: props.btm.btm.id, - menge: btmMenge.value, - typ: 'ZUGANG', - lieferant: lieferant.value, - anforderungsschein: anforderungsschein.value, - pruefdatum: pruefdatum.value, - datum: datum.value - } - sendUpdateRequest(buchungData); - } else if (props.buchung.typ.toLowerCase() === 'abgang') { - let { btmMenge, rezept, empfaenger, arzt, pruefdatum, datum} = event.target; - let buchungData = { - benutzer: props.user.id, - btm: props.btm.btm.id, - menge: btmMenge.value, - typ: 'ABGANG', - empfaenger: empfaenger.value, - arzt: arzt.value, - rezept: rezept.value, - pruefdatum: pruefdatum.value, - datum: datum.value - } - sendUpdateRequest(buchungData); - } - } - - - - - function Zugang({ buchung }) { - if (buchung.typ) { - if (buchung.typ.toLowerCase() === 'zugang') { - return ( - <React.Fragment> - <Form.Group as={Row} controlId="anforderungsschein"> - <Form.Label column sm="2"> - Anforderungsschein - </Form.Label> - <Col sm="10"> - <Form.Control name="anforderungsschein" type="text" required defaultValue={buchung.anforderungsschein} /> - </Col> - </Form.Group> - <Form.Group as={Row} controlId="lieferant"> - <Form.Label column sm="2"> - Lieferant - </Form.Label> - <Col sm="10"> - <Form.Control name="lieferant" defaultValue={buchung.lieferant.name} required as="select"> - {console.log('lieferanten', lieferanten)} - {lieferanten.map(l => <option key={l.id} value={l.id}>{l.name}</option>)} - </Form.Control> - </Col> - </Form.Group> - </React.Fragment>) - } - } - return null; - } - - function Abgang({ buchung }) { - if (buchung.typ) { - if (buchung.typ.toLowerCase() === 'abgang') { - return ( - <React.Fragment> - <Form.Group as={Row} controlId="empfaenger"> - <Form.Label column sm="2"> - Empfaenger - </Form.Label> - <Col sm="10"> - <Form.Control name="empfaenger" defaultValue={buchung.empfaenger.name} required as="select"> - {empfaenger.map(e => <option key={e.id} value={e.id}>{e.vorname} {e.name}</option>)} - </Form.Control> - </Col> - </Form.Group> - <Form.Group as={Row} controlId="arzt"> - <Form.Label column sm="2"> - Arzt - </Form.Label> - <Col sm="10"> - <Form.Control name="arzt" defaultValue={buchung.arzt.name} required as="select"> - {aerzte.map(a => <option key={a.id} value={a.id}>{a.name}</option>)} - </Form.Control> - </Col> - </Form.Group> - <Form.Group as={Row} controlId="rezept"> - <Form.Label column sm="2"> - Rezept - </Form.Label> - <Col sm="10"> - <Form.Control defaultValue={buchung.rezept} name="rezept" type="text" required /> - </Col> - </Form.Group> - </React.Fragment>) - } - } - return null; - } - - - return ( - <Modal - {...props} - size="lg" - aria-labelledby="contained-modal-title-vcenter" - centered - onExiting={props.onHide} - > - <Modal.Header closeButton> - <Modal.Title id="contained-modal-title-vcenter"> - Betäubungsmittel-Buchung aktualisieren - </Modal.Title> - </Modal.Header> - <Form onSubmit={updateBuchung}> - <Modal.Body> - <Form.Group as={Row} controlId="datum"> - <Form.Label column sm="2"> - Datum - </Form.Label> - <Col sm="10"> - <Form.Control name="datum" type="date" defaultValue={props.buchung.datum} /> - </Col> - </Form.Group> - <Form.Group as={Row} controlId="btmMenge"> - <Form.Label column sm="2"> - Menge - </Form.Label> - <Col sm="10"> - <Form.Control name="btmMenge" type="number" min="1" defaultValue={props.buchung.menge} /> - </Col> - </Form.Group> - <Form.Group as={Row} controlId="pruefdatum"> - <Form.Label column sm="2"> - Prüfdatum - </Form.Label> - <Col sm="10"> - <Form.Control name="pruefdatum" type="date" defaultValue={props.buchung.pruefdatum} /> - </Col> - </Form.Group> - <Zugang buchung={props.buchung} /> - <Abgang buchung={props.buchung} /> - </Modal.Body> - <Modal.Footer> - <Button variant="" onClick={props.onHide}>Abbrechen</Button> - <Button variant="primary" type="submit">Bestätigen</Button> - </Modal.Footer> - </Form> - </Modal> - ) -} - -export default UpdateBuchungModal; +import React,{useEffect} from 'react'; +import { Modal, Button, Form, Row, Col } from 'react-bootstrap'; +import { useSnackbar } from 'notistack'; +import { useParams } from 'react-router-dom'; + + + +function UpdateBuchungModal(props) { + + // let apothekeId = sessionStorage.getItem('apothekeId'); + const { apoId } = useParams(); + // eslint-disable-next-line + let {lieferanten, aerzte, empfaenger} = props; + const { enqueueSnackbar } = useSnackbar(); + + const sendUpdateRequest = async (buchungData) => { + const response = await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/btmbuchung/${props.buchung.id}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), + }, + body: JSON.stringify(buchungData) + }).catch((err) => { + //SHOW ERROR + console.log(err); + }); + + + if (response && response.status === 200) { + props.onHide(); + enqueueSnackbar('Buchung erfolgreich aktualisiert', { variant: 'success', autoHideDuration: 3000 }); + props.apothekeRefFunctions.updateBtmList(); + } else { + //SHOW ERROR + console.log(response); + } + } + + + + + const updateBuchung = event => { + event.preventDefault(); + + if (props.buchung.typ.toLowerCase() === 'zugang') { + let { anforderungsschein, btmMenge, lieferant, pruefdatum, datum } = event.target; + let buchungData = { + benutzer: props.user.id, + btm: props.btm.btm.id, + menge: btmMenge.value, + typ: 'ZUGANG', + lieferant: lieferant.value, + anforderungsschein: anforderungsschein.value, + pruefdatum: pruefdatum.value, + datum: datum.value + } + sendUpdateRequest(buchungData); + } else if (props.buchung.typ.toLowerCase() === 'abgang') { + let { btmMenge, rezept, empfaenger, arzt, pruefdatum, datum} = event.target; + let buchungData = { + benutzer: props.user.id, + btm: props.btm.btm.id, + menge: btmMenge.value, + typ: 'ABGANG', + empfaenger: empfaenger.value, + arzt: arzt.value, + rezept: rezept.value, + pruefdatum: pruefdatum.value, + datum: datum.value + } + sendUpdateRequest(buchungData); + } + } + + + + + function Zugang({ buchung }) { + if (buchung.typ) { + if (buchung.typ.toLowerCase() === 'zugang') { + return ( + <React.Fragment> + <Form.Group as={Row} controlId="anforderungsschein"> + <Form.Label column sm="2"> + Anforderungsschein + </Form.Label> + <Col sm="10"> + <Form.Control name="anforderungsschein" type="text" required defaultValue={buchung.anforderungsschein} /> + </Col> + </Form.Group> + <Form.Group as={Row} controlId="lieferant"> + <Form.Label column sm="2"> + Lieferant + </Form.Label> + <Col sm="10"> + <Form.Control name="lieferant" defaultValue={buchung.lieferant.name} required as="select"> + {console.log('lieferanten', lieferanten)} + {lieferanten.map(l => <option key={l.id} value={l.id}>{l.name}</option>)} + </Form.Control> + </Col> + </Form.Group> + </React.Fragment>) + } + } + return null; + } + + function Abgang({ buchung }) { + if (buchung.typ) { + if (buchung.typ.toLowerCase() === 'abgang') { + return ( + <React.Fragment> + <Form.Group as={Row} controlId="empfaenger"> + <Form.Label column sm="2"> + Empfaenger + </Form.Label> + <Col sm="10"> + <Form.Control name="empfaenger" defaultValue={buchung.empfaenger.name} required as="select"> + {empfaenger.map(e => <option key={e.id} value={e.id}>{e.vorname} {e.name}</option>)} + </Form.Control> + </Col> + </Form.Group> + <Form.Group as={Row} controlId="arzt"> + <Form.Label column sm="2"> + Arzt + </Form.Label> + <Col sm="10"> + <Form.Control name="arzt" defaultValue={buchung.arzt.name} required as="select"> + {aerzte.map(a => <option key={a.id} value={a.id}>{a.name}</option>)} + </Form.Control> + </Col> + </Form.Group> + <Form.Group as={Row} controlId="rezept"> + <Form.Label column sm="2"> + Rezept + </Form.Label> + <Col sm="10"> + <Form.Control defaultValue={buchung.rezept} name="rezept" type="text" required /> + </Col> + </Form.Group> + </React.Fragment>) + } + } + return null; + } + + + return ( + <Modal + {...props} + size="lg" + aria-labelledby="contained-modal-title-vcenter" + centered + onExiting={props.onHide} + backdrop="static" + > + <Modal.Header closeButton> + <Modal.Title id="contained-modal-title-vcenter"> + Betäubungsmittel-Buchung aktualisieren + </Modal.Title> + </Modal.Header> + <Form onSubmit={updateBuchung}> + <Modal.Body> + <Form.Group as={Row} controlId="datum"> + <Form.Label column sm="2"> + Datum + </Form.Label> + <Col sm="10"> + <Form.Control name="datum" type="date" defaultValue={props.buchung.datum} /> + </Col> + </Form.Group> + <Form.Group as={Row} controlId="btmMenge"> + <Form.Label column sm="2"> + Menge + </Form.Label> + <Col sm="10"> + <Form.Control name="btmMenge" type="number" min="1" defaultValue={props.buchung.menge} /> + </Col> + </Form.Group> + <Form.Group as={Row} controlId="pruefdatum"> + <Form.Label column sm="2"> + Prüfdatum + </Form.Label> + <Col sm="10"> + <Form.Control name="pruefdatum" type="date" defaultValue={props.buchung.pruefdatum} /> + </Col> + </Form.Group> + <Zugang buchung={props.buchung} /> + <Abgang buchung={props.buchung} /> + </Modal.Body> + <Modal.Footer> + <Button variant="" onClick={props.onHide}>Abbrechen</Button> + <Button variant="primary" type="submit">Bestätigen</Button> + </Modal.Footer> + </Form> + </Modal> + ) +} + +export default UpdateBuchungModal; diff --git a/frontend/src/modals/UserDetailsUpdateModal.js b/frontend/src/modals/UserDetailsUpdateModal.js index 19fbd6d30482f9f25cbc5446ff77052eb81514fb..ea2fb7626f33a744f9848ff2a5aeb23ead9b01ed 100644 --- a/frontend/src/modals/UserDetailsUpdateModal.js +++ b/frontend/src/modals/UserDetailsUpdateModal.js @@ -1,183 +1,184 @@ -import React, { useState, useEffect } from 'react'; -import { useParams } from 'react-router-dom'; -import { Modal, Col, Button, Form } from 'react-bootstrap'; -import { useSnackbar } from 'notistack'; - -function UserDetailsUpdateModal(props) { - - const { apoId } = useParams(); - let { nutzername, name, vorname, id } = props.user; - const [nutzernameVergeben, setNutzernameVergeben] = useState(false); - - //for password checking - const [passwordConfirmInvalid, setPasswordConfirmInvalid] = useState(false); - const [newPasswordVal, setNewPasswordVal] = useState(''); - const [passwordConfirmVal, setPasswordConfirmVal] = useState(''); - - const { enqueueSnackbar } = useSnackbar(); - - - const updateDetails = async event => { - event.preventDefault(); - let { username, vorname, nachname, neuesPasswort, altesPasswort } = event.target; - let body = { - name: nachname.value, - nutzername: username.value, - vorname: vorname.value, - oldPassword: altesPasswort.value, - aktiv: true - } - if(neuesPasswort.value){ - body.newPassword = neuesPasswort.value; - } - const response = await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/benutzer/${id}`, { - method: 'PUT', - headers: { - 'Content-Type': 'application/json', - 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), - }, - body: JSON.stringify(body) - }).catch((err) => { - console.log(err); - return; - }); - - if(response.status === 200) { - const data = await response.json(); - props.onHide(); - props.setUser(data); - let pw = neuesPasswort.value ? neuesPasswort.value: altesPasswort.value; - if(props.loggedInUser.nutzername === nutzername) { - //if the same user is logged in and changes its details a new token is needed - getNewJwt(username.value, pw); - }else { - enqueueSnackbar('Benutzer Informationen aktualisiert', { variant:'success', autoHideDuration: 3000} ); - } - }else if(response.status === 400) { - enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant:'error', autoHideDuration: 3000} ); - }else if(response.status === 403) { - enqueueSnackbar('Falsches Passwort', { variant:'error', autoHideDuration: 3000} ); - } - } - - const getNewJwt = async (username, password) => { - console.log(username, password) - const response = await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/login`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - username: username, - password: password - }) - }).catch((err) => { - //SHOW ERROR - console.log(err); - }); - - if(response && response.status === 200){ - const data = await response.json(); - window.sessionStorage.setItem("edbapo-jwt", data.jwt) - enqueueSnackbar('Benutzer Informationen aktualisiert', { variant:'success', autoHideDuration: 3000} ); - }else { - enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant:'error', autoHideDuration: 3000} ); - } - } - - - const checkIfUserNameIsTaken = async event => { - let newUsername = event.target.value; - if (newUsername.length < 4) { - //if shorter than 4 its invalid - setNutzernameVergeben(true); - return; - } - - if (newUsername !== nutzername && newUsername) { - const response = await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/benutzer/${newUsername}/checkUsername`, { - method: 'POST', - }).catch((err) => { - console.log(err); - return; - }); - - if (response.status === 200) { - setNutzernameVergeben(false); - } else if (response.status === 400) { - setNutzernameVergeben(true); - } - } else { - setNutzernameVergeben(false); - } - } - - useEffect(() => { - setPasswordConfirmInvalid(newPasswordVal !== passwordConfirmVal); - }, [newPasswordVal, passwordConfirmVal]); - - - return ( - <Modal - {...props} - size="lg" - aria-labelledby="contained-modal-title-vcenter" - centered - onExiting={props.onHide} - > - <Modal.Header closeButton> - <Modal.Title id="contained-modal-title-vcenter"> - Benutzer Einstellungen - </Modal.Title> - </Modal.Header> - <Form onSubmit={updateDetails}> - <Modal.Body> - <Form.Row> - <Form.Group as={Col} controlId="username"> - <Form.Label>Benutzername</Form.Label> - <Form.Control name="username" required onChange={checkIfUserNameIsTaken} - isInvalid={nutzernameVergeben} defaultValue={nutzername} type="text" /> - </Form.Group> - </Form.Row> - - <Form.Row> - <Form.Group as={Col} sm={4} controlId="vorname"> - <Form.Label>Vorname</Form.Label> - <Form.Control name="vorname" required defaultValue={vorname} type="text" /> - </Form.Group> - - <Form.Group as={Col} sm={8} controlId="nachname"> - <Form.Label>Nachname</Form.Label> - <Form.Control name="nachname" required defaultValue={name} type="text" /> - </Form.Group> - </Form.Row> - - <Form.Row> - <Form.Group as={Col} controlId="neuesPasswort"> - <Form.Label>Neues Passwort</Form.Label> - <Form.Control onChange={event => setNewPasswordVal(event.target.value)} name="neuesPasswort" type="password" /> - </Form.Group> - <Form.Group as={Col} controlId="neuesPasswortConfirm"> - <Form.Label>Neues Passwort bestätigen</Form.Label> - <Form.Control onChange={event => setPasswordConfirmVal(event.target.value)} isInvalid={passwordConfirmInvalid} name="neuesPasswortConfirm" type="password" /> - </Form.Group> - </Form.Row> - - <hr /> - <Form.Row> - <Form.Group as={Col} controlId="altesPasswort"> - <Form.Label>Passwort eingeben</Form.Label> - <Form.Control name="altesPasswort" required type="password" /> - </Form.Group> - </Form.Row> - </Modal.Body> - <Modal.Footer> - <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button> - <Button variant="primary" type="submit" >Bestätigen</Button> - </Modal.Footer> - </Form> - </Modal> - ) -} - -export default UserDetailsUpdateModal; \ No newline at end of file +import React, { useState, useEffect } from 'react'; +import { useParams } from 'react-router-dom'; +import { Modal, Col, Button, Form } from 'react-bootstrap'; +import { useSnackbar } from 'notistack'; + +function UserDetailsUpdateModal(props) { + + const { apoId } = useParams(); + let { nutzername, name, vorname, id } = props.user; + const [nutzernameVergeben, setNutzernameVergeben] = useState(false); + + //for password checking + const [passwordConfirmInvalid, setPasswordConfirmInvalid] = useState(false); + const [newPasswordVal, setNewPasswordVal] = useState(''); + const [passwordConfirmVal, setPasswordConfirmVal] = useState(''); + + const { enqueueSnackbar } = useSnackbar(); + + + const updateDetails = async event => { + event.preventDefault(); + let { username, vorname, nachname, neuesPasswort, altesPasswort } = event.target; + let body = { + name: nachname.value, + nutzername: username.value, + vorname: vorname.value, + oldPassword: altesPasswort.value, + aktiv: true + } + if(neuesPasswort.value){ + body.newPassword = neuesPasswort.value; + } + const response = await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/benutzer/${id}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), + }, + body: JSON.stringify(body) + }).catch((err) => { + console.log(err); + return; + }); + + if(response.status === 200) { + const data = await response.json(); + props.onHide(); + props.setUser(data); + let pw = neuesPasswort.value ? neuesPasswort.value: altesPasswort.value; + if(props.loggedInUser.nutzername === nutzername) { + //if the same user is logged in and changes its details a new token is needed + getNewJwt(username.value, pw); + }else { + enqueueSnackbar('Benutzer Informationen aktualisiert', { variant:'success', autoHideDuration: 3000} ); + } + }else if(response.status === 400) { + enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant:'error', autoHideDuration: 3000} ); + }else if(response.status === 403) { + enqueueSnackbar('Falsches Passwort', { variant:'error', autoHideDuration: 3000} ); + } + } + + const getNewJwt = async (username, password) => { + console.log(username, password) + const response = await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/login`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + username: username, + password: password + }) + }).catch((err) => { + //SHOW ERROR + console.log(err); + }); + + if(response && response.status === 200){ + const data = await response.json(); + window.sessionStorage.setItem("edbapo-jwt", data.jwt) + enqueueSnackbar('Benutzer Informationen aktualisiert', { variant:'success', autoHideDuration: 3000} ); + }else { + enqueueSnackbar('Ein Fehler ist aufgetaucht', { variant:'error', autoHideDuration: 3000} ); + } + } + + + const checkIfUserNameIsTaken = async event => { + let newUsername = event.target.value; + if (newUsername.length < 4) { + //if shorter than 4 its invalid + setNutzernameVergeben(true); + return; + } + + if (newUsername !== nutzername && newUsername) { + const response = await fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/benutzer/${newUsername}/checkUsername`, { + method: 'POST', + }).catch((err) => { + console.log(err); + return; + }); + + if (response.status === 200) { + setNutzernameVergeben(false); + } else if (response.status === 400) { + setNutzernameVergeben(true); + } + } else { + setNutzernameVergeben(false); + } + } + + useEffect(() => { + setPasswordConfirmInvalid(newPasswordVal !== passwordConfirmVal); + }, [newPasswordVal, passwordConfirmVal]); + + + return ( + <Modal + {...props} + size="lg" + aria-labelledby="contained-modal-title-vcenter" + centered + onExiting={props.onHide} + backdrop="static" + > + <Modal.Header closeButton> + <Modal.Title id="contained-modal-title-vcenter"> + Benutzer Einstellungen + </Modal.Title> + </Modal.Header> + <Form onSubmit={updateDetails}> + <Modal.Body> + <Form.Row> + <Form.Group as={Col} controlId="username"> + <Form.Label>Benutzername</Form.Label> + <Form.Control name="username" required onChange={checkIfUserNameIsTaken} + isInvalid={nutzernameVergeben} defaultValue={nutzername} type="text" /> + </Form.Group> + </Form.Row> + + <Form.Row> + <Form.Group as={Col} sm={4} controlId="vorname"> + <Form.Label>Vorname</Form.Label> + <Form.Control name="vorname" required defaultValue={vorname} type="text" /> + </Form.Group> + + <Form.Group as={Col} sm={8} controlId="nachname"> + <Form.Label>Nachname</Form.Label> + <Form.Control name="nachname" required defaultValue={name} type="text" /> + </Form.Group> + </Form.Row> + + <Form.Row> + <Form.Group as={Col} controlId="neuesPasswort"> + <Form.Label>Neues Passwort</Form.Label> + <Form.Control onChange={event => setNewPasswordVal(event.target.value)} name="neuesPasswort" type="password" /> + </Form.Group> + <Form.Group as={Col} controlId="neuesPasswortConfirm"> + <Form.Label>Neues Passwort bestätigen</Form.Label> + <Form.Control onChange={event => setPasswordConfirmVal(event.target.value)} isInvalid={passwordConfirmInvalid} name="neuesPasswortConfirm" type="password" /> + </Form.Group> + </Form.Row> + + <hr /> + <Form.Row> + <Form.Group as={Col} controlId="altesPasswort"> + <Form.Label>Passwort eingeben</Form.Label> + <Form.Control name="altesPasswort" required type="password" /> + </Form.Group> + </Form.Row> + </Modal.Body> + <Modal.Footer> + <Button autofocus variant="" onClick={props.onHide}>Abbrechen</Button> + <Button variant="primary" type="submit" >Bestätigen</Button> + </Modal.Footer> + </Form> + </Modal> + ) +} + +export default UserDetailsUpdateModal;