Skip to content

Commit

Permalink
get appointment by id
Browse files Browse the repository at this point in the history
  • Loading branch information
@divija-zemoso
divija-zemoso committed Sep 28, 2022
1 parent e3e4472 commit f014fab
Show file tree
Hide file tree
Showing 10 changed files with 318 additions and 140 deletions.
28 changes: 24 additions & 4 deletions src/patients/visits/FilterPatientModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@ import React, { useState } from 'react'
import { Label, Modal, Select } from '@hospitalrun/components'
import useTranslator from '../../shared/hooks/useTranslator'
import { Button } from 'react-bootstrap'
import { appointmentTypes } from '../../scheduling/appointments/constants/Appointment'
import {
appointmentStatus,
appointmentTypes,
} from '../../scheduling/appointments/constants/Appointment'
// import { getAllPatients } from '../../scheduling/appointments/service/Patients'

interface Props {
show: boolean
Expand All @@ -11,13 +15,21 @@ interface Props {
}

const FilterPatientModal = ({ show, onCloseButtonClick, onFieldChange }: Props) => {
// const func = () => {
// console.log('ALL PATIENTS DATA', getAllPatients())
// }

// useEffect(() => {
// func()
// }, [])

const { t } = useTranslator()

const [patientId, setpatientId] = useState('')
const [patientStatus, setPatientStatus] = useState('')
const [appointmentType, setappointmentType] = useState('')

const clearValues = () => {
setpatientId('')
setPatientStatus('')
setappointmentType('')
}

Expand All @@ -32,9 +44,17 @@ const FilterPatientModal = ({ show, onCloseButtonClick, onFieldChange }: Props)
onChange={(values) => setappointmentType(values[0])}
/>
</div>
<div className="form-group">
<Label text="Status" title="Status" />
<Select
id="status"
options={appointmentStatus}
onChange={(values) => setPatientStatus(values[0])}
/>
</div>
<Button
onClick={() => {
onFieldChange && onFieldChange(patientId, appointmentType)
onFieldChange && onFieldChange(patientStatus, appointmentType)
clearValues()
onCloseButtonClick()
}}
Expand Down
102 changes: 70 additions & 32 deletions src/scheduling/appointments/AppointmentDetailForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,32 @@
import { Select, Typeahead, Label, Alert } from '@hospitalrun/components'
// import { Select, Typeahead, Label, Alert } from '@hospitalrun/components'
import { Select, Label, Alert } from '@hospitalrun/components'
import React from 'react'

import DateTimePickerWithLabelFormGroup from '../../shared/components/input/DateTimePickerWithLabelFormGroup'
import { SelectOption } from '../../shared/components/input/SelectOption'
import TextFieldWithLabelFormGroup from '../../shared/components/input/TextFieldWithLabelFormGroup'
// import { SelectOption } from '../../shared/components/input/SelectOption'
import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
import PatientRepository from '../../shared/db/PatientRepository'
// import TextFieldWithLabelFormGroup from '../../shared/components/input/TextFieldWithLabelFormGroup'
// import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
// import PatientRepository from '../../shared/db/PatientRepository'
import useTranslator from '../../shared/hooks/useTranslator'
import Appointment from '../../shared/model/Appointment'
import Patient from '../../shared/model/Patient'
// import { Appointment } from './ViewAppointments'
import { appointmentTypes, appointmentStatus } from '../appointments/constants/Appointment'

export interface Appointment {
appointmentType: {
text: string
}
participant: {
actor: {
reference: string
}
}[]
id: string
start: Date
minutesDuration: number
status: string
}

interface Props {
appointment: Appointment
Expand All @@ -22,19 +40,24 @@ const AppointmentDetailForm = (props: Props) => {
const { onFieldChange, appointment, patient, isEditable, error } = props
const { t } = useTranslator()

const patientName: string = String(patient)

const onDateChange = (date: Date, fieldName: string) =>
onFieldChange && onFieldChange(fieldName, date.toISOString())

const onInputElementChange = (event: React.ChangeEvent<HTMLInputElement>, fieldName: string) =>
onFieldChange && onFieldChange(fieldName, event.target.value)
// const onInputElementChange = (event: React.ChangeEvent<HTMLInputElement>, fieldName: string) =>
// onFieldChange && onFieldChange(fieldName, event.target.value)

// const typeOptions: SelectOption[] = [
// { label: t('scheduling.appointment.types.checkup'), value: 'checkup' },
// { label: t('scheduling.appointment.types.emergency'), value: 'emergency' },
// { label: t('scheduling.appointment.types.followUp'), value: 'follow up' },
// { label: t('scheduling.appointment.types.routine'), value: 'routine' },
// { label: t('scheduling.appointment.types.walkIn'), value: 'walk in' },
// ]

const typeOptions: SelectOption[] = [
{ label: t('scheduling.appointment.types.checkup'), value: 'checkup' },
{ label: t('scheduling.appointment.types.emergency'), value: 'emergency' },
{ label: t('scheduling.appointment.types.followUp'), value: 'follow up' },
{ label: t('scheduling.appointment.types.routine'), value: 'routine' },
{ label: t('scheduling.appointment.types.walkIn'), value: 'walk in' },
]
var end = new Date(appointment.start)
end.setMinutes(end.getMinutes() + appointment.minutesDuration)

return (
<>
Expand All @@ -47,10 +70,10 @@ const AppointmentDetailForm = (props: Props) => {
isRequired
text={t('scheduling.appointment.patient')}
/>
<Typeahead
{/* <Typeahead
id="patientTypeahead"
disabled={!isEditable || patient !== undefined}
value={patient?.fullName}
value={patient}
placeholder={t('scheduling.appointment.patient')}
onChange={(p: Patient[]) =>
onFieldChange && p[0] && onFieldChange('patient', p[0].id)
Expand All @@ -60,6 +83,11 @@ const AppointmentDetailForm = (props: Props) => {
renderMenuItemChildren={(p: Patient) => <div>{`${p.fullName} (${p.code})`}</div>}
isInvalid={!!error?.patient}
feedback={t(error?.patient)}
/> */}
<TextInputWithLabelFormGroup
name="patientName"
value={patientName}
isEditable={isEditable}
/>
</div>
</div>
Expand All @@ -69,11 +97,7 @@ const AppointmentDetailForm = (props: Props) => {
<DateTimePickerWithLabelFormGroup
name="startDate"
label={t('scheduling.appointment.startDate')}
value={
appointment.startDateTime && appointment.startDateTime.length > 0
? new Date(appointment.startDateTime)
: undefined
}
value={appointment.start ? new Date(appointment.start) : undefined}
isEditable={isEditable}
isInvalid={error?.startDateTime}
feedback={t(error?.startDateTime)}
Expand All @@ -86,19 +110,15 @@ const AppointmentDetailForm = (props: Props) => {
<DateTimePickerWithLabelFormGroup
name="endDate"
label={t('scheduling.appointment.endDate')}
value={
appointment.endDateTime && appointment.endDateTime.length > 0
? new Date(appointment.endDateTime)
: undefined
}
value={appointment.start ? end : undefined}
isEditable={isEditable}
onChange={(date: Date) => {
onDateChange(date, 'endDateTime')
}}
/>
</div>
</div>
<div className="row">
{/* <div className="row">
<div className="col">
<TextInputWithLabelFormGroup
name="location"
Expand All @@ -110,22 +130,40 @@ const AppointmentDetailForm = (props: Props) => {
}}
/>
</div>
</div>
</div> */}
<div className="row">
<div className="col">
<div className="form-group" data-testid="typeSelect">
<Label text={t('scheduling.appointment.type')} title="type" />
<Select
id="type"
options={typeOptions}
defaultSelected={typeOptions.filter(({ value }) => value === appointment.type)}
onChange={(values) => onFieldChange && onFieldChange('type', values[0])}
options={appointmentTypes}
defaultSelected={appointmentTypes.filter(
({ value }) => value === appointment.appointmentType.text,
)}
// onChange={(values) => onFieldChange && onFieldChange('type', values[0])}
disabled={!isEditable}
/>
</div>
</div>
</div>
<div className="row">
<div className="col">
<div className="form-group" data-testid="typeSelect">
<Label text="Status" title="Status" />
<Select
id="status"
options={appointmentStatus}
defaultSelected={appointmentStatus.filter(
({ value }) => value === appointment.status,
)}
// onChange={(values) => onFieldChange && onFieldChange('type', values[0])}
disabled={!isEditable}
/>
</div>
</div>
</div>
{/* <div className="row">
<div className="col">
<div className="form-group">
<TextFieldWithLabelFormGroup
Expand All @@ -139,7 +177,7 @@ const AppointmentDetailForm = (props: Props) => {
/>
</div>
</div>
</div>
</div> */}
</>
)
}
Expand Down
27 changes: 15 additions & 12 deletions src/scheduling/appointments/ViewAppointments.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import { useUpdateTitle } from '../../page-header/title/TitleContext'
import FilterPatientModal from '../../patients/visits/FilterPatientModal'
import Loading from '../../shared/components/Loading'
import useTranslator from '../../shared/hooks/useTranslator'
import { getAppointment, getPatientNameById } from './service/Appointments'
import { getAppointment } from './service/Appointments'
import { getPatientNameById } from './service/Patients'

interface Event {
id: string
Expand All @@ -18,9 +19,10 @@ interface Event {
title: string
allDay: boolean
type: string
status: string
}

interface Appointment {
export interface Appointment {
resource: {
appointmentType: {
text: string
Expand Down Expand Up @@ -54,14 +56,13 @@ const ViewAppointments = () => {
useAddBreadcrumbs(breadcrumbs, true)
const [showFilter, setshowFilter] = useState(false)

const [patientId, setpatientId] = useState('')
const [patientStatus, setpatientStatus] = useState('')
const [appointmentType, setappointmentType] = useState('')

const func = async () => {
setAppointment(await getAppointment())
setIsLoading(false)
console.log('appointment data', await getAppointment())
console.log('patient data', await getPatientNameById(140998131777537))
}

useEffect(() => {
Expand Down Expand Up @@ -92,7 +93,7 @@ const ViewAppointments = () => {
outlined
color="success"
onClick={() => {
setpatientId('')
setpatientStatus('')
setappointmentType('')
}}
>
Expand All @@ -108,7 +109,9 @@ const ViewAppointments = () => {
useEffect(() => {
if (appointments) {
appointments.map(async (appointment: Appointment) => {
const patientName = await getPatientNameById(140998131777537)
const patientName = await getPatientNameById(
parseInt(String(appointment.resource.participant[0].actor.reference.substr(8))),
)
console.log('minutes duration: ', appointment.resource.minutesDuration)
var end = new Date(appointment.resource.start)
end.setMinutes(end.getMinutes() + appointment.resource.minutesDuration)
Expand All @@ -135,15 +138,15 @@ const ViewAppointments = () => {
}

return (
<div>
<div style={{ cursor: 'pointer' }}>
<Calendar
events={
appointmentType.length !== 0 && patientId.length !== 0
appointmentType.length !== 0 && patientStatus.length !== 0
? events.filter(
(event) => event.patient === patientId && event.type === appointmentType,
(event) => event.status === patientStatus && event.type === appointmentType,
)
: patientId.length !== 0
? events.filter((event) => event.patient === patientId)
: patientStatus.length !== 0
? events.filter((event) => event.status === patientStatus)
: appointmentType.length !== 0
? events.filter((event) => event.type === appointmentType)
: events
Expand All @@ -158,7 +161,7 @@ const ViewAppointments = () => {
show={showFilter}
onCloseButtonClick={() => setshowFilter(false)}
onFieldChange={(patientId: any, type: any) => {
setpatientId(patientId)
setpatientStatus(patientId)
setappointmentType(type)
}}
/>
Expand Down
5 changes: 5 additions & 0 deletions src/scheduling/appointments/constants/Appointment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,8 @@ export const appointmentTypes: SelectOption[] = [
{ label: 'Physical Exam', value: 'Physical Exam' },
{ label: 'Office Flu Only', value: 'Office Flu Only' },
]

export const appointmentStatus: SelectOption[] = [
{ label: 'Scheduled', value: 'Scheduled' },
{ label: 'Confirmed', value: 'Confirmed' },
]
Loading

0 comments on commit f014fab

Please sign in to comment.