Skip to content
Snippets Groups Projects
Commit e12ee8bb authored by AdrianBeilharz's avatar AdrianBeilharz
Browse files

Empfänger Tabelle hinzugefügt zu Nutzer einstellungen

parent ceda05e3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/components/apotheke/einstellungen/ApothekeEinstellungen.js
+ 136
− 132
View file @ e12ee8bb
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;
frontend/src/components/apotheke/einstellungen/tabellen/EmpfaengerTabelle.js 0 → 100644
+ 113
− 0
View file @ e12ee8bb
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;
frontend/src/modals/EmpfaengerAddModal.js 0 → 100644
+ 105
− 0
View file @ e12ee8bb
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;
frontend/src/modals/EmpfaengerEditModal.js 0 → 100644
+ 110
− 0
View file @ e12ee8bb
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;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment