diff --git a/frontend/src/components/apotheke/einstellungen/ApothekeEinstellungen.js b/frontend/src/components/apotheke/einstellungen/ApothekeEinstellungen.js index c391901be576197be7680c4994c92a7a75fd41dd..0dd76c62534aea63763da547f411d7201668b0e7 100644 --- a/frontend/src/components/apotheke/einstellungen/ApothekeEinstellungen.js +++ b/frontend/src/components/apotheke/einstellungen/ApothekeEinstellungen.js @@ -1,132 +1,136 @@ -import React, { useState, Fragment, useEffect } from 'react'; -import { ListGroup, Button, Row, Col } from 'react-bootstrap'; -import { useParams } from 'react-router-dom'; - -import Header from '../../headers/Header'; -import StatusHeader from '../../headers/StatusHeader'; -import UserDetails from '../../../user/UserDetails'; -import ArztTabelle from './tabellen/ArztTabelle'; -import BtmTabelle from './tabellen/BtmTabelle'; -import LieferantTabelle from './tabellen/LieferantTabelle'; -import PersonalTabelle from './tabellen/PersonalTabelle'; -import ApothekeEditModal from '../../../modals/ApothekeEditModal'; - -import './ApothekeEinstellungen.scss' - -function ApothekeEinstellungen(props) { - const { apoId } = useParams() - - const [apotheke, setApotheke] = useState({ anschrift: {} }) - const [activeMenuItem, setActiveMenuItem] = useState('personal'); - const [loggedIn, setLoggedIn] = useState(false); - const [aktiveRolle, setAktiveRolle] = useState(''); - const [user, setUser] = useState({}); - const [showApothekeEditModal, setShowApothekeEditModal] = useState(false); - - - const getCurrentApotheke = () => { - fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}`, { - method: 'GET', - headers: { - 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt") - } - }).then((res) => { - if (res.status === 200) { - return res.json() - } else if (res.status === 403) { - props.history.push('forbidden'); - } else if (res.status === 400) { - props.history.push('badrequest'); - } - }).then((data) => setApotheke(data)) - .catch((err) => { - //SHOW ERROR - return; - }) - } - - const getUserData = () => { - fetch(`http://${process.env.REACT_APP_BACKEND_URL}/benutzer/me`, { - method: 'GET', - headers: { - 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), - } - }) - .then((res) => { - if (res.status === 200) { - return res.json() - } else if (res.status === 403) { - props.history.push('forbidden'); - } else if (res.status === 400) { - props.history.push('badrequest'); - } - }).then((data) => { - setUser(data); - setAktiveRolle(data.rolle) - setLoggedIn(true) - }).catch((err) => { - //SHOW ERROR - return; - }); - } - - - const renderContent = () => { - if (activeMenuItem === 'personal') { - return <PersonalTabelle {...props} />; - } else if (activeMenuItem === 'btm') { - return <BtmTabelle {...props} />; - } else if (activeMenuItem === 'aerzte') { - return <ArztTabelle {...props} /> - } else if (activeMenuItem === 'lieferanten') { - return <LieferantTabelle {...props} /> - } - } - - useEffect(() => { - getUserData(); - getCurrentApotheke(); - }, []); - - return ( - <Fragment> - <ApothekeEditModal {...props} show={showApothekeEditModal} onHide={() => setShowApothekeEditModal(false)} apotheke={apotheke} updateApothekeData={getCurrentApotheke} /> - <StatusHeader aktiveRolle={aktiveRolle} /> - <Header /> - <Row className="details-list"> - <Col md={{ span: 6, offset: 6 }}> - {loggedIn ? <UserDetails {...props} user={user} setUser={setUser} aktiveRolle={aktiveRolle} setAktiveRolle={setAktiveRolle} /> : null} - </Col> - </Row> - <div className="main-content"> - <Row> - <Col sm={4}> - <ul> - <li>Name: {apotheke.name}</li> - <li>E-Mail: {apotheke.email}</li> - <li>Anschrift: {apotheke.anschrift.strasse} {apotheke.anschrift.nummer} ({apotheke.anschrift.plz} {apotheke.anschrift.ort})</li> - </ul> - <Button onClick={() => setShowApothekeEditModal(true)}>Angaben bearbeiten</Button> - </Col> - </Row> - <Row style={{ marginTop: '3em' }}> - <Col sm={3}> - <ListGroup as="ul" className="menu-list"> - <ListGroup.Item as="li" onClick={() => setActiveMenuItem('personal')} active={activeMenuItem === 'personal'}>Pharmazeutisches Personal</ListGroup.Item> - <ListGroup.Item as="li" onClick={() => setActiveMenuItem('btm')} active={activeMenuItem === 'btm'}>Betäubungsmittel</ListGroup.Item> - <ListGroup.Item as="li" onClick={() => setActiveMenuItem('aerzte')} active={activeMenuItem === 'aerzte'}>Ärzte</ListGroup.Item> - <ListGroup.Item as="li" onClick={() => setActiveMenuItem('lieferanten')} active={activeMenuItem === 'lieferanten'}>Lieferanten</ListGroup.Item> - </ListGroup> - </Col> - <Col sm={8}> - {user ? renderContent() : null} - </Col> - </Row> - </div> - - - </Fragment> - ) -} - -export default ApothekeEinstellungen; +import React, { useState, Fragment, useEffect } from 'react'; +import { ListGroup, Button, Row, Col } from 'react-bootstrap'; +import { useParams } from 'react-router-dom'; + +import Header from '../../headers/Header'; +import StatusHeader from '../../headers/StatusHeader'; +import UserDetails from '../../../user/UserDetails'; +import ArztTabelle from './tabellen/ArztTabelle'; +import BtmTabelle from './tabellen/BtmTabelle'; +import LieferantTabelle from './tabellen/LieferantTabelle'; +import PersonalTabelle from './tabellen/PersonalTabelle'; +import EmpfaengerTabelle from './tabellen/EmpfaengerTabelle'; +import ApothekeEditModal from '../../../modals/ApothekeEditModal'; + +import './ApothekeEinstellungen.scss' + +function ApothekeEinstellungen(props) { + const { apoId } = useParams() + + const [apotheke, setApotheke] = useState({ anschrift: {} }) + const [activeMenuItem, setActiveMenuItem] = useState('personal'); + const [loggedIn, setLoggedIn] = useState(false); + const [aktiveRolle, setAktiveRolle] = useState(''); + const [user, setUser] = useState({}); + const [showApothekeEditModal, setShowApothekeEditModal] = useState(false); + + + const getCurrentApotheke = () => { + fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}`, { + method: 'GET', + headers: { + 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt") + } + }).then((res) => { + if (res.status === 200) { + return res.json() + } else if (res.status === 403) { + props.history.push('forbidden'); + } else if (res.status === 400) { + props.history.push('badrequest'); + } + }).then((data) => setApotheke(data)) + .catch((err) => { + //SHOW ERROR + return; + }) + } + + const getUserData = () => { + fetch(`http://${process.env.REACT_APP_BACKEND_URL}/benutzer/me`, { + method: 'GET', + headers: { + 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), + } + }) + .then((res) => { + if (res.status === 200) { + return res.json() + } else if (res.status === 403) { + props.history.push('forbidden'); + } else if (res.status === 400) { + props.history.push('badrequest'); + } + }).then((data) => { + setUser(data); + setAktiveRolle(data.rolle) + setLoggedIn(true) + }).catch((err) => { + //SHOW ERROR + return; + }); + } + + + const renderContent = () => { + if (activeMenuItem === 'personal') { + return <PersonalTabelle {...props} />; + } else if (activeMenuItem === 'btm') { + return <BtmTabelle {...props} />; + } else if (activeMenuItem === 'aerzte') { + return <ArztTabelle {...props} /> + } else if (activeMenuItem === 'lieferanten') { + return <LieferantTabelle {...props} /> + } else if (activeMenuItem === 'empfaenger') { + return <EmpfaengerTabelle {...props} aktiveRolle={aktiveRolle} /> + } + } + + useEffect(() => { + getUserData(); + getCurrentApotheke(); + }, []); + + return ( + <Fragment> + <ApothekeEditModal {...props} show={showApothekeEditModal} onHide={() => setShowApothekeEditModal(false)} apotheke={apotheke} updateApothekeData={getCurrentApotheke} /> + {aktiveRolle.toLowerCase() !== 'benutzer' ? <StatusHeader aktiveRolle={aktiveRolle} /> : null} + <Header /> + <Row className="details-list"> + <Col md={{ span: 6, offset: 6 }}> + {loggedIn ? <UserDetails {...props} user={user} setUser={setUser} aktiveRolle={aktiveRolle} setAktiveRolle={setAktiveRolle} /> : null} + </Col> + </Row> + <div className="main-content"> + <Row> + <Col sm={4}> + <ul> + <li>Name: {apotheke.name}</li> + <li>E-Mail: {apotheke.email}</li> + <li>Anschrift: {apotheke.anschrift.strasse} {apotheke.anschrift.nummer} ({apotheke.anschrift.plz} {apotheke.anschrift.ort})</li> + </ul> + <Button onClick={() => setShowApothekeEditModal(true)}>Angaben bearbeiten</Button> + </Col> + </Row> + <Row style={{ marginTop: '3em' }}> + <Col sm={3}> + <ListGroup as="ul" className="menu-list"> + <ListGroup.Item as="li" onClick={() => setActiveMenuItem('personal')} active={activeMenuItem === 'personal'}>Pharmazeutisches Personal</ListGroup.Item> + <ListGroup.Item as="li" onClick={() => setActiveMenuItem('btm')} active={activeMenuItem === 'btm'}>Betäubungsmittel</ListGroup.Item> + <ListGroup.Item as="li" onClick={() => setActiveMenuItem('aerzte')} active={activeMenuItem === 'aerzte'}>Ärzte</ListGroup.Item> + <ListGroup.Item as="li" onClick={() => setActiveMenuItem('lieferanten')} active={activeMenuItem === 'lieferanten'}>Lieferanten</ListGroup.Item> + <ListGroup.Item as="li" onClick={() => setActiveMenuItem('empfaenger')} active={activeMenuItem === 'empfaenger'}>Empfänger</ListGroup.Item> + </ListGroup> + </Col> + <Col sm={8}> + {user ? renderContent() : null} + </Col> + </Row> + </div> + + + </Fragment> + ) +} + +export default ApothekeEinstellungen; diff --git a/frontend/src/components/apotheke/einstellungen/tabellen/EmpfaengerTabelle.js b/frontend/src/components/apotheke/einstellungen/tabellen/EmpfaengerTabelle.js new file mode 100644 index 0000000000000000000000000000000000000000..4796b89b15c287ccbdf89181cb59803a7e40aec5 --- /dev/null +++ b/frontend/src/components/apotheke/einstellungen/tabellen/EmpfaengerTabelle.js @@ -0,0 +1,113 @@ +import React, { Fragment, useState, useEffect } from 'react'; +import { useParams } from 'react-router-dom'; +import { AddBox, Edit, DeleteForever } from '@material-ui/icons'; +import { Table, Button } from 'react-bootstrap'; +import { useSnackbar } from 'notistack'; + +import EmpfaengerAddModal from '../../../../modals/EmpfaengerAddModal'; +import EmpfaengerEditModal from '../../../../modals/EmpfaengerEditModal'; +import DeleteModal from '../../../../modals/DeleteModal'; + +function EmpfaengerTabelle(props) { + const { apoId } = useParams(); + const [empfaengeren, setEmpfaenger] = useState([]); + const { enqueueSnackbar } = useSnackbar(); + const [selectedEmpfaenger, setSelectedEmpfaenger] = useState(null); + const [showEmpfaengerAddModal, setShowEmpfaengerAddModal] = useState(false); + const [showEmpfaengerEditModal, setShowEmpfaengerEditModal] = useState(false); + const [showDeleteModal, setShowDeleteModal] = useState(false); + + const getEmpfaengerData = () => { + fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/empfaenger`, { + method: 'GET', + headers: { + 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), + } + }).then((res) => { + if (res.status === 200) { + return res.json() + } else if (res.status === 403) { + props.history.push('forbidden'); + } else if (res.status === 400) { + props.history.push('badrequest'); + } + }).then((data) => setEmpfaenger(data)).catch((err) => { + //SHOW ERROR + return; + }); + } + + const deleteEmpfaenger = () => { + fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/empfaenger/${selectedEmpfaenger.id}`, { + method: 'DELETE', + headers: { + 'Authorization': 'Bearer ' + window.sessionStorage.getItem("edbapo-jwt"), + }, + }).then((res) => { + if (res.status === 200) { + getEmpfaengerData() + enqueueSnackbar('Empfaenger erfolgreich gelöscht', { variant: 'success', autoHideDuration: 3000 }); + } else { + //SHOW ERROR + console.log(res); + } + }).catch((err) => { + //SHOW ERROR + console.log(err); + }); + } + + const edit = empfaenger => { + setSelectedEmpfaenger(empfaenger); + setShowEmpfaengerEditModal(true); + } + + const del = empfaenger => { + setSelectedEmpfaenger(empfaenger); + setShowDeleteModal(true); + } + + useEffect(() => { + getEmpfaengerData() + }, []) + + return ( + <Fragment> + <EmpfaengerAddModal {...props} show={showEmpfaengerAddModal} onHide={() => setShowEmpfaengerAddModal(false)} updateEmpfaengerData={getEmpfaengerData} /> + {selectedEmpfaenger ? <EmpfaengerEditModal {...props} empfaenger={selectedEmpfaenger} show={showEmpfaengerEditModal} onHide={() => setShowEmpfaengerEditModal(false)} updateEmpfaengerData={getEmpfaengerData} /> : null} + <DeleteModal {...props} headertext={'Empfaenger löschen'} + maintext={'Möchtest du diesen Empfaenger wirklich löschen?'} onSubmit={deleteEmpfaenger} subtext={'Dieser Vorgang kann nicht rückgängig gemacht werden'} + show={showDeleteModal} onHide={() => setShowDeleteModal(false)} /> + <Table striped bordered hover> + <thead> + <tr> + <th>Name</th> + <th>Vorname</th> + <th>Strasse</th> + <th>Ort</th> + <th style={{ textAlign: 'center', verticalAlign: 'middle' }}> + <Button onClick={() => setShowEmpfaengerAddModal(true)} >Hinzufügen <AddBox /></Button> + </th> + </tr> + </thead> + <tbody> + {props.aktiveRolle.toLowerCase() === 'admin' ? empfaengeren.map(empfaenger => + <tr key={empfaenger.id}> + <td>{empfaenger.name}</td> + <td>{empfaenger.vorname}</td> + <td>{empfaenger.anschrift.strasse} {empfaenger.anschrift.nummer}</td> + <td>{empfaenger.anschrift.plz} {empfaenger.anschrift.ort}</td> + <td style={{ textAlign: 'center', verticalAlign: 'middle' }}> + <Button onClick={() => edit(empfaenger)}><Edit /></Button> + <Button onClick={() => del(empfaenger)}><DeleteForever /></Button> + </td> + </tr> + ) : null} + </tbody> + </Table> + {props.aktiveRolle.toLowerCase() !== 'admin' ? <label>Nur Admins ist es erlaubt die Empfänger Tabelle zu sehen aus Datenschutzrechtlichen Gründen. Es können trotzdem neue Nutzer hinzugefügt werden.</label> : null} + </Fragment> + ) +} + +export default EmpfaengerTabelle; diff --git a/frontend/src/modals/EmpfaengerAddModal.js b/frontend/src/modals/EmpfaengerAddModal.js new file mode 100644 index 0000000000000000000000000000000000000000..078a7e6c63ce2ee588d5f23c9b0e7e8e21049c71 --- /dev/null +++ b/frontend/src/modals/EmpfaengerAddModal.js @@ -0,0 +1,105 @@ +import React from 'react'; +import { useParams } from 'react-router-dom'; +import { Modal, Col, Button, Form } from 'react-bootstrap'; +import { useSnackbar } from 'notistack'; + +function NeuesEmpfaengerenModal(props) { + + const { apoId } = useParams(); + const { enqueueSnackbar } = useSnackbar(); + + const updateDetails = async event => { + event.preventDefault(); + let { name, vorname, plz, ort, strasse, nummer } = event.target; + + let body = { + name: name.value, + vorname: vorname.value, + anschrift: { + ort: ort.value, + plz: plz.value, + strasse: strasse.value, + nummer: nummer.value + } + } + + fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/empfaenger`, { + 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.updateEmpfaengerData(); + enqueueSnackbar('Empfaenger 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.Group as={Col} controlId="vorname"> + <Form.Label>Vorname</Form.Label> + <Form.Control name="vorname" 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 NeuesEmpfaengerenModal; diff --git a/frontend/src/modals/EmpfaengerEditModal.js b/frontend/src/modals/EmpfaengerEditModal.js new file mode 100644 index 0000000000000000000000000000000000000000..61d06d4172c60e828a75a69133a701e55b37b663 --- /dev/null +++ b/frontend/src/modals/EmpfaengerEditModal.js @@ -0,0 +1,110 @@ +import React from 'react'; +import { useParams } from 'react-router-dom'; +import { Modal, Col, Button, Form } from 'react-bootstrap'; +import { useSnackbar } from 'notistack'; + +function EmpfaengerUpdateModal(props) { + + const { apoId } = useParams(); + const { enqueueSnackbar } = useSnackbar(); + + let { id, name, vorname, anschrift } = props.empfaenger; + + const updateDetails = async event => { + event.preventDefault(); + let { name, vorname, plz, ort, strasse, nummer } = event.target; + + let body = { + name: name.value, + vorname: vorname.value, + apotheke: apoId, + anschrift: { + ort: ort.value, + plz: plz.value, + strasse: strasse.value, + nummer: nummer.value + } + } + + fetch(`http://${process.env.REACT_APP_BACKEND_URL}/apotheke/${apoId}/empfaenger/${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.updateEmpfaengerData(); + enqueueSnackbar('Empfaenger 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"> + Empfaenger 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.Group as={Col} controlId="vorname"> + <Form.Label>Vorname</Form.Label> + <Form.Control name="vorname" required defaultValue={vorname} 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 EmpfaengerUpdateModal;