Skip to content

Commit

Permalink
Latest rems admin ui stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
Ariel Virgulto committed Sep 20, 2024
1 parent 791cc3a commit accf432
Show file tree
Hide file tree
Showing 11 changed files with 513 additions and 112 deletions.
6 changes: 6 additions & 0 deletions frontend/config.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"realm": "ClientFhirServer",
"client": "app-login",
"auth": "http://localhost:8180/",
"scopeId": "pims"
}
6 changes: 6 additions & 0 deletions frontend/src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,12 @@
.white-btn {
color: white !important;
border-color: white !important;
margin-right: 5px !important;
}
.right-btn {
display: flex;
justify-content: flex-end;
margin: 10px 16px 10px 0;
}

.App h1 {
Expand Down
50 changes: 28 additions & 22 deletions frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,30 @@
import './App.css'
import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';
import { useState } from 'react';
import { Button } from '@mui/material';
import Box from '@mui/material/Box';
import { Container } from '@mui/system';
import DatasetIcon from '@mui/icons-material/Dataset';
import Login from './views/Login';
import Register from './views/Register';
import Data from './views/DataViews/Data';
import axios from 'axios'


function App() {
const [token, setToken] = useState(null);

const resetDB = async () => {
await axios
.post('http://localhost:8090/etasu/reset')
.then(function (response: any) {
console.log(response);
; })
.catch((error: any) => {
console.log('Error resetting the DB -- > ', error);
})
}

return (
<Box>
<BrowserRouter>
<div className='App'>
<Container maxWidth='false'>
<div className="containerg">
Expand All @@ -22,28 +34,22 @@ function App() {
/>
<h1>Rems Admin</h1>
</div>
<div className="links">
<Link className="navButtons" to="/view/data">
<Button variant="outlined" className="white-btn">Data</Button>
</Link>
<Link className="navButtons" to="/register">
<Button variant="outlined" className="white-btn">Register User</Button>
</Link>
<Link className="navButtons" to="/login">
<Button variant="outlined" className="white-btn">Login</Button>
</Link>
</div>
{ token ? (
<div className="links">
<Button variant="outlined" className="white-btn" onClick={() => resetDB()}>Reset full DB</Button>
<Button variant="outlined" className="white-btn" onClick={() => setToken(null)}>Logout</Button>
</div>
) : ( <span></span>)
}
</div>
</Container>

</div>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
<Route path="/view/data" element={<Data />} />
<Route path="/" exact element={<Login />} />
</Routes>
</BrowserRouter>
{ token ? (
<Data />
) : (
<Login tokenCallback={setToken} />
)
}
</Box>
)
}
Expand Down
55 changes: 40 additions & 15 deletions frontend/src/views/DataViews/CaseCollection.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
import axios from 'axios'
import { useEffect, useState, SetStateAction } from 'react'
import {
Box,
Button,
Card,
CardActions,
CardContent,
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Typography
TableRow
} from '@mui/material';
import IconButton from '@mui/material/IconButton';
import DeleteIcon from '@mui/icons-material/Delete';
import { Refresh } from '@mui/icons-material';

export type RemsCase = {
case_number?: string;
Expand All @@ -35,8 +33,7 @@ export type RemsCase = {
requirementName: string;
stakeholderId: string;
completed: boolean;
}[]
| null;
}[];
_id: string;
};
const CaseCollection = () => {
Expand All @@ -49,7 +46,7 @@ const CaseCollection = () => {
}, [])

const getAllRemsCase = async () => {
const url = 'http://localhost:8090/all/remscase';
const url = 'http://localhost:8090/api/all/remscase';
await axios
.get(url)
.then(function (response: { data: SetStateAction<RemsCase[]>; }) {
Expand All @@ -63,14 +60,11 @@ const CaseCollection = () => {
}

const deleteSingleRow = async (event: any, row: RemsCase) => {
console.log('row to delete is -- > ', row);
const url = 'http://localhost:8090/remsCase/deleteOne';
const url = 'http://localhost:8090/api/remsCase/deleteOne';
await axios
.post(url, {data: { params: row}})
.then(function (response: { data: any; status: number; }) {
console.log('response data -- > ', response.data);
if (response.status === 200) {
console.log('Response.data -- > ', response.data);
getAllRemsCase();
}
})
Expand All @@ -80,15 +74,46 @@ const CaseCollection = () => {
})
}

const formattedReqs = (row: RemsCase) => {
let reqNames: String[] = []
row.metRequirements.forEach((req: any) => {
const completed = req.completed ? 'Completed': 'Not completed';
reqNames.push(`${req.requirementName}: ${completed}`);
})
return reqNames.join(', ');
}

if (allData.length < 1 && !isLoading) {
return (
<Card style={{ padding: '15px' }}>
<div className="right-btn">
<Button
variant="contained"
startIcon={<Refresh />}
onClick={() => {
getAllRemsCase();
}}
>
Refresh
</Button>
</div>
<h1>No data</h1>
</Card>
)
} else {
return (
<Card sx={{ bgColor: '#F5F5F7' }}>
<div className="right-btn">
<Button
variant="contained"
startIcon={<Refresh />}
onClick={() => {
getAllRemsCase();
}}
>
Refresh
</Button>
</div>
<Card>
<Card>
<CardContent>
Expand All @@ -105,13 +130,13 @@ const CaseCollection = () => {
<TableCell align="right">Status</TableCell>
<TableCell align="right">Dispense Status</TableCell>
<TableCell align="left">Authorization Number</TableCell>
{/* <TableCell align="right">Met Requirements</TableCell> */}
<TableCell align="right">Met Requirements</TableCell>
<TableCell align="right">Delete</TableCell>
</TableRow>
</TableHead>
<TableBody>
{allData.map(row => {
// console.log('row -- > ', row);
const metReq = formattedReqs(row);
return (
<TableRow key={row.case_number}>
<TableCell align="right">{row.case_number}</TableCell>
Expand All @@ -122,13 +147,13 @@ const CaseCollection = () => {
<TableCell align="right">{row.patientDOB}</TableCell>
<TableCell align="right">{row.status}</TableCell>
<TableCell align="right">{row.dispenseStatus}</TableCell>
<TableCell align="left">{row.auth_number}</TableCell>
<TableCell align="right">{row.auth_number}</TableCell>
<TableCell align="right">{metReq}</TableCell>
<TableCell align="right">
<IconButton aria-label="delete" onClick={(event: any) => deleteSingleRow(event, row)}>
<DeleteIcon />
</IconButton>
</TableCell>
{/* <TableCell align="right">{row.metRequirements}</TableCell> */}
</TableRow>
)})}
</TableBody>
Expand Down
80 changes: 40 additions & 40 deletions frontend/src/views/DataViews/Data.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { SyntheticEvent, useState } from 'react'
import { Box, Tab, Tabs } from '@mui/material';
import { Box, Tab, Tabs, Button } from '@mui/material';
import { Container } from '@mui/system';
import CaseCollection from './CaseCollection';
import Medications from './Medications';
import MetRequirements from './MetRequirements';

function a11yProps(index: number) {
return {
Expand All @@ -10,58 +12,56 @@ function a11yProps(index: number) {
};
}
const Data = () => {

const [allData, setAllData] = useState([]);
const [tabIndex, setValue] = useState(0);

const handleChange = (event: SyntheticEvent, newValue: number) => {
setValue(newValue);
};



return (
<Container maxWidth="xl">
<Box
sx={{
width: '100%',
border: 1,
borderRadius: '5px',
borderWidth: 4,
borderColor: '#F1F3F4',
backgroundColor: '#E7EBEF'
}}
>
<Box sx={{ backgroundColor: '#F1F3F4', borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={tabIndex} onChange={handleChange} aria-label="basic tabs example" centered>
<Tab label="Rems Case Collection" {...a11yProps(0)} />
<Tab label="Etasu" {...a11yProps(1)} />
<Tab label="Other" {...a11yProps(2)} />
</Tabs>
</Box>

<Box>
<Box sx={{ padding: 2 }}>
{tabIndex === 0 && (
<Box>
<CaseCollection />
<div>
<Container maxWidth="xl">
<Box
sx={{
width: '100%',
border: 1,
borderRadius: '5px',
borderWidth: 4,
borderColor: '#F1F3F4',
backgroundColor: '#E7EBEF'
}}
>
<Box sx={{ backgroundColor: '#F1F3F4', borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={tabIndex} onChange={handleChange} aria-label="basic tabs example" centered>
<Tab label="Rems Case Collection" {...a11yProps(0)} />
<Tab label="Medications" {...a11yProps(1)} />
<Tab label="Met Requirements" {...a11yProps(2)} />
</Tabs>
</Box>
)}
{tabIndex === 1 && (

<Box>
<div>This is for etasu</div>
<Box sx={{ padding: 2 }}>
{tabIndex === 0 && (
<Box>
<CaseCollection />
</Box>
)}
{tabIndex === 1 && (
<Box>
<Medications />
</Box>
)}
{tabIndex === 2 && (
<Box>
<MetRequirements />
</Box>
)}
</Box>
)}
{tabIndex === 2 && (
<Box>
<div>This is for other</div>
</Box>
)}
</Box>
</Box>
</Box>

</Container>
</Container>
</div>
)

}
Expand Down
Loading

0 comments on commit accf432

Please sign in to comment.