Skip to content

Commit

Permalink
Merge pull request #119 from advanced-computer-lab-2023/ui-fixes
Browse files Browse the repository at this point in the history 
UI fixes
  • Loading branch information
@amir-awad
amir-awad authored Dec 16, 2023
2 parents ed19d1e + 67fb8ae commit 18c62f2
Show file tree
Hide file tree
Showing 15 changed files with 501 additions and 353 deletions.
4 changes: 2 additions & 2 deletions client/src/layout/MainLayout/Sidebar/MenuList/doctor-menu-items/pages.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,15 +68,15 @@ const pages = {
},
{
id: 'ListOfPatients',
title: 'My Patients',
title: 'Patients',
type: 'item',
icon: icons.IconStethoscope,
url: '/doctor/pages/my-patients',
target: false,
},
{
id: 'add-available-slots',
title: 'Add Available Slots',
title: 'Available Slots',
type: 'item',
icon: icons.IconStethoscope,
url: '/doctor/pages/add-available-slots',
Expand Down
18 changes: 15 additions & 3 deletions client/src/pages/Appointment/AppointmentOptions/AppointmentDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
import HelpCenterIcon from '@mui/icons-material/HelpCenter';
import StyleIcon from '@mui/icons-material/Style';
import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
import { useTheme } from '@mui/material/styles';
import Swal from 'sweetalert2';
import '../../../assets/css/swalStyle.css';
import { clinicAxios, communicationAxios } from 'pages/utilities/AxiosConfig';
Expand All @@ -23,6 +24,8 @@ const AppointmentDetails = ({
setSelectedAppointment,
handleAppoinmentUpdate
}) => {
const theme = useTheme();
console.log('theme = ', theme);
const { chats, setChats } = useChat();
const { user } = useUserContext();
const [cannotCompleteOrCancel, setCannotCompleteOrCancel] = useState(false);
Expand Down Expand Up @@ -231,8 +234,17 @@ const AppointmentDetails = ({
<div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
<Button
variant='contained'
color='error'
sx = {{ marginTop: '3em', width: '15em' }}
color= 'inherit'
sx = {{
color: '#FFFFFF',
marginTop: '3em',
width: '15em',
backgroundColor: '#BE001C',
':hover': {
backgroundColor: '#BE001C',
boxShadow: '0 2px 14px 0 rgb(32 40 45 / 8%)',
},
}}
onClick={handleCancelConfirmation}
disabled={cannotCompleteOrCancel}
>
Expand All @@ -243,7 +255,7 @@ const AppointmentDetails = ({
&&
<Button
variant='contained'
color='success'
color='secondary'
sx = {{ marginTop: '3em', width: '15em' }}
onClick={handleCompleteConfirmation}
disabled={cannotCompleteOrCancel}
Expand Down
74 changes: 46 additions & 28 deletions client/src/pages/DoctorAddAvailableSlots/AddAvailableSlots.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,36 +74,54 @@ const DoctorAddAvailableSlots = () => {


return(
<>
<DateSelector selectedDate={selectedDate} handleSelectedDate={handleSelectedDate} />

<TimeSelector selectedTime={selectedTime} handleSelectedTime={handleSelectedTime} />

<Typography marginLeft={
'10px'
} variant="caption" display="block" gutterBottom>
Note: The slot duration is 1 hour
</Typography>

<Button variant="contained" color="primary" sx={{
margin: '10px',

}}
onClick={ onClick }
disabled={isButtonDisabled} >
Add New Slot
</Button>
{/*add header to the Table */}
<>
<div style={{ display: 'flex', justifyContent: 'space-around' }}>
<section>
<Typography
marginLeft={ '10px' }
fontSize={20}
variant="caption"
display="block"
gutterBottom
>
My available slots
</Typography>
<AvailableSlotsTable availableSlots={availableSlots}/>
</section>
<section style={{ marginTop: '5em' }}>
<section style={{ display: 'flex', flexDirection: 'column' }}>
<DateSelector selectedDate={selectedDate} handleSelectedDate={handleSelectedDate} />
<TimeSelector selectedTime={selectedTime} handleSelectedTime={handleSelectedTime} />
</section>

<Typography marginLeft={
'10px'
}
fontSize={20}
variant="caption" display="block" gutterBottom>
The available slots
</Typography>
<section style={{ marginLeft: '0.6em' }}>
<Button
variant="contained"
color="primary"
sx={{ margin: '10px' }}
onClick={ onClick }
disabled={isButtonDisabled}
>
Add New Slot
</Button>
<Typography
marginLeft={'10px'}
variant="caption"
display="block"
gutterBottom
>
Kindly note that the slot duration is 1 hour
</Typography>
</section>
</section>

<AvailableSlotsTable availableSlots={availableSlots}/>


</div>



</>
) ;
};
Expand Down
89 changes: 54 additions & 35 deletions client/src/pages/DoctorAddAvailableSlots/AvailableSlotsTable.js
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,61 @@

import React from 'react';
import React, { useState } from 'react';
import { useTheme } from '@mui/material/styles';
import { getDay, getTime } from '../../utils/DateFormatter.js';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';





import TablePagination from '@mui/material/TablePagination';
const LIMIT_PER_PAGE = 4;

const availableSlotsTable = ({ availableSlots } ) => {

const theme = useTheme();
const [page, setPage] = useState(0);
const handleChangePage = (event, newPage) => {
console.log(newPage);
setPage(newPage);
console.log(availableSlots.slice(newPage*LIMIT_PER_PAGE, newPage*LIMIT_PER_PAGE + LIMIT_PER_PAGE));
};
const randomNumberInRange = (min, max) => {
return Math.floor(Math.random()
* (max - min + 1)) + min;
};
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>From</TableCell>
<TableCell>Until</TableCell>
</TableRow>
</TableHead>
<TableBody>
{Array.isArray(availableSlots) &&
availableSlots.map((slot) => (
<TableRow key={slot.from}>
<TableCell>
{new Date(slot.from).toLocaleString()}
</TableCell>
<TableCell>
{new Date(slot.until).toLocaleString()}
</TableCell>
</TableRow>

))}

</TableBody>
</Table>


</TableContainer>
<>
<TableContainer component={Paper}>
<Table>
<TableHead sx={{ backgroundColor: theme.palette.secondary.light }}>
<TableRow>
<TableCell>From</TableCell>
<TableCell>Until</TableCell>
</TableRow>
</TableHead>
<TableBody>
{Array.isArray(availableSlots) &&
availableSlots
.slice(page*LIMIT_PER_PAGE, page*LIMIT_PER_PAGE + LIMIT_PER_PAGE)
.map((slot) => (
<TableRow hover key={() => randomNumberInRange(1e7, 2e7)}>
<TableCell>
{`${getDay(slot.from)} at ${getTime(slot.from)}`}
</TableCell>
<TableCell>
{`${getDay(slot.until)} at ${getTime(slot.until)}`}
</TableCell>
</TableRow>
))}

</TableBody>
</Table>


</TableContainer>
<TablePagination
rowsPerPageOptions={LIMIT_PER_PAGE}
rowsPerPage={LIMIT_PER_PAGE}
count={availableSlots.length}
page={page}
onPageChange={handleChangePage}
/>
</>

);
};

Expand Down
16 changes: 13 additions & 3 deletions client/src/pages/Doctors/DoctorCard.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import { ListItemButton, ListItemText, ListItemAvatar } from '@mui/material';
import {
ListItemButton,
ListItemText,
ListItemAvatar,
} from '@mui/material';
import DoctorIcon from '../../assets/images/icons/DoctorIcon.png';
import { calcPrice } from '../../utils/PriceCalculator.js';

import DoctorPrice from './DoctorPrice.js';

const DoctorCard = ({ doctor, setSelectedDoctor, loggedInPatientHealthPackage }) => {
const price = calcPrice(doctor.hourlyRate, loggedInPatientHealthPackage && loggedInPatientHealthPackage.doctorDiscount);
Expand All @@ -24,7 +28,13 @@ const DoctorCard = ({ doctor, setSelectedDoctor, loggedInPatientHealthPackage })
maxHeight: '3em',
}}
/>
<ListItemText sx={{ paddingLeft: '2%' }} primary={`$${price}`} />
<ListItemText sx={{ paddingLeft: '2%' }}>
<DoctorPrice
priceBeforeDiscount={doctor.hourlyRate}
priceAfterDiscount={price}
margin={5}
/>
</ListItemText>
</ListItemButton>
);
};
Expand Down
13 changes: 10 additions & 3 deletions client/src/pages/Doctors/DoctorDetailsHeader.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import { Typography } from '@mui/material';
import { calcPrice } from '../../utils/PriceCalculator.js';
import DoctorPrice from './DoctorPrice.js';
import DoctorIcon from '../../assets/images/icons/DoctorIcon.png';
import CoronavirusIcon from '@mui/icons-material/Coronavirus';
import WorkIcon from '@mui/icons-material/Work';
import SchoolIcon from '@mui/icons-material/School';
import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
import PaidIcon from '@mui/icons-material/Paid';


const DoctorDetailsHeader = ({ selectedDoctor, loggedInPatientHealthPackage }) => {
const price = calcPrice(selectedDoctor.hourlyRate, loggedInPatientHealthPackage && loggedInPatientHealthPackage.doctorDiscount);
return (
<>
<div
Expand Down Expand Up @@ -44,9 +47,13 @@ const DoctorDetailsHeader = ({ selectedDoctor, loggedInPatientHealthPackage }) =
</Typography>
</div>
<div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row' }}>
<AttachMoneyIcon style={{ marginRight: '0.4em' }}/>
<PaidIcon style={{ marginRight: '0.4em' }}/>
<Typography variant='body1'>
{`${calcPrice(selectedDoctor.hourlyRate, loggedInPatientHealthPackage.doctorDiscount)}`}
<DoctorPrice
priceBeforeDiscount={selectedDoctor.hourlyRate}
priceAfterDiscount={price}
margin={10}
/>
</Typography>
</div>
</div>
Expand Down
40 changes: 40 additions & 0 deletions client/src/pages/Doctors/DoctorPrice.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { Typography } from '@mui/material';
const DoctorPrice = ({
priceBeforeDiscount,
priceAfterDiscount,
margin
}) => {
return (
<>
{
priceAfterDiscount < priceBeforeDiscount ? (
<div style={{ display: 'flex' }}>
<Typography
variant="h5"
color="text.secondary"
sx={{ textDecoration: 'line-through' }}
>
{`$${priceBeforeDiscount}`}
</Typography>
<Typography
variant="h4"
color="text.primary"
sx={{ marginLeft: `${margin}%` }}
>
{`$${priceAfterDiscount}`}
</Typography>
</div>
) : (
<Typography
variant="h4"
color="text.primary"
>
{`$${priceAfterDiscount}`}
</Typography>
)
}
</>
);
};

export default DoctorPrice;
Loading

0 comments on commit 18c62f2

Please sign in to comment.