From c38004bf9285a6cc53c36150754bd659130e5998 Mon Sep 17 00:00:00 2001 From: kumikokashii Date: Tue, 23 Jun 2020 16:52:43 -0700 Subject: [PATCH] feat: apply select component changes --- package.json | 2 +- src/components/PageComponent.tsx | 9 +-- src/components/input/LanguageSelector.tsx | 23 +++---- .../input/SelectWithLableFormGroup.tsx | 46 +++++++------ src/incidents/list/ViewIncidents.tsx | 24 +++---- src/labs/ViewLabs.tsx | 41 ++++-------- src/patients/ContactInfo.tsx | 13 ++-- src/patients/GeneralInformation.tsx | 34 +++++----- src/patients/care-plans/CarePlanForm.tsx | 64 ++++++++++++------- .../appointments/AppointmentDetailForm.tsx | 27 ++++---- 10 files changed, 141 insertions(+), 142 deletions(-) diff --git a/package.json b/package.json index dcc3afefaf..46c32a9b73 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "private": false, "license": "MIT", "dependencies": { - "@hospitalrun/components": "~1.6.0", + "@hospitalrun/components": "~1.14.1", "@reduxjs/toolkit": "~1.4.0", "@types/escape-string-regexp": "~2.0.1", "@types/pouchdb-find": "~6.3.4", diff --git a/src/components/PageComponent.tsx b/src/components/PageComponent.tsx index 2c7716a755..1d7654837b 100644 --- a/src/components/PageComponent.tsx +++ b/src/components/PageComponent.tsx @@ -18,7 +18,6 @@ const PageComponent = ({ pageNumber, setPreviousPageRequest, setNextPageRequest, - onPageSizeChange, }: any) => { const { t } = useTranslation() @@ -48,13 +47,7 @@ const PageComponent = ({ {t('actions.page')} {pageNumber}
- + - - {options.map((option) => ( - - ))} - + />
) } SelectWithLabelFormGroup.defaultProps = { - value: '', + placeholder: '-- Choose --', } export default SelectWithLabelFormGroup +export type { Option } diff --git a/src/incidents/list/ViewIncidents.tsx b/src/incidents/list/ViewIncidents.tsx index 4cb0213561..4fe6d09a5f 100644 --- a/src/incidents/list/ViewIncidents.tsx +++ b/src/incidents/list/ViewIncidents.tsx @@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next' import { useDispatch, useSelector } from 'react-redux' import { useHistory } from 'react-router-dom' -import SelectWithLabelFormGroup from '../../components/input/SelectWithLableFormGroup' +import SelectWithLabelFormGroup, { Option } from '../../components/input/SelectWithLableFormGroup' import Incident from '../../model/Incident' import { useButtonToolbarSetter } from '../../page-header/ButtonBarProvider' import useTitle from '../../page-header/useTitle' @@ -48,11 +48,7 @@ const ViewIncidents = () => { history.push(`incidents/${incident.id}`) } - const onFilterChange = (event: React.ChangeEvent) => { - setSearchFilter(event.target.value as IncidentFilter) - } - - const filterOptions = Object.values(IncidentFilter).map((filter) => ({ + const filterOptions: Option[] = Object.values(IncidentFilter).map((filter) => ({ label: t(`incidents.status.${filter}`), value: `${filter}`, })) @@ -63,11 +59,11 @@ const ViewIncidents = () => {
value === searchFilter)} + onChange={(values) => setSearchFilter(values[0] as IncidentFilter)} + isEditable />
@@ -86,9 +82,15 @@ const ViewIncidents = () => { {incidents.map((incident: Incident) => ( onTableRowClick(incident)} key={incident.id}> {incident.code} - {format(new Date(incident.date), 'yyyy-MM-dd hh:mm a')} + + {incident.date ? format(new Date(incident.date), 'yyyy-MM-dd hh:mm a') : ''} + {incident.reportedBy} - {format(new Date(incident.reportedOn), 'yyyy-MM-dd hh:mm a')} + + {incident.reportedOn + ? format(new Date(incident.reportedOn), 'yyyy-MM-dd hh:mm a') + : ''} + {incident.status} ))} diff --git a/src/labs/ViewLabs.tsx b/src/labs/ViewLabs.tsx index 8587ae4739..c8a724d240 100644 --- a/src/labs/ViewLabs.tsx +++ b/src/labs/ViewLabs.tsx @@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next' import { useSelector, useDispatch } from 'react-redux' import { useHistory } from 'react-router-dom' -import SelectWithLabelFormGroup from '../components/input/SelectWithLableFormGroup' +import SelectWithLabelFormGroup, { Option } from '../components/input/SelectWithLableFormGroup' import TextInputWithLabelFormGroup from '../components/input/TextInputWithLabelFormGroup' import useDebounce from '../hooks/debounce' import Lab from '../model/Lab' @@ -15,7 +15,7 @@ import useTitle from '../page-header/useTitle' import { RootState } from '../store' import { searchLabs } from './labs-slice' -type filter = 'requested' | 'completed' | 'canceled' | 'all' +type LabFilter = 'requested' | 'completed' | 'canceled' | 'all' const ViewLabs = () => { const { t } = useTranslation() @@ -26,7 +26,7 @@ const ViewLabs = () => { const { permissions } = useSelector((state: RootState) => state.user) const dispatch = useDispatch() const { labs, isLoading } = useSelector((state: RootState) => state.labs) - const [searchFilter, setSearchFilter] = useState('all') + const [searchFilter, setSearchFilter] = useState('all') const [searchText, setSearchText] = useState('') const debouncedSearchText = useDebounce(searchText, 500) @@ -50,15 +50,6 @@ const ViewLabs = () => { return buttons }, [permissions, history, t]) - const setFilter = (filter: string) => - filter === 'requested' - ? 'requested' - : filter === 'completed' - ? 'completed' - : filter === 'canceled' - ? 'canceled' - : 'all' - useEffect(() => { dispatch(searchLabs(debouncedSearchText, searchFilter)) }, [dispatch, debouncedSearchText, searchFilter]) @@ -76,21 +67,24 @@ const ViewLabs = () => { history.push(`/labs/${lab.id}`) } - const onSelectChange = (event: React.ChangeEvent) => { - setSearchFilter(setFilter(event.target.value)) - } - const onSearchBoxChange = (event: React.ChangeEvent) => { setSearchText(event.target.value) } + const filterOptions: Option[] = [ + { label: t('labs.status.requested'), value: 'requested' }, + { label: t('labs.status.completed'), value: 'completed' }, + { label: t('labs.status.canceled'), value: 'canceled' }, + { label: t('labs.filter.all'), value: 'all' }, + ] + const listBody = ( {labs.map((lab) => ( onTableRowClick(lab)} key={lab.id}> {lab.code} {lab.type} - {format(new Date(lab.requestedOn), 'yyyy-MM-dd hh:mm a')} + {lab.requestedOn ? format(new Date(lab.requestedOn), 'yyyy-MM-dd hh:mm a') : ''} {lab.status} ))} @@ -103,18 +97,11 @@ const ViewLabs = () => {
value === searchFilter)} + onChange={(values) => setSearchFilter(values[0] as LabFilter)} isEditable - options={[ - { label: t('labs.status.requested'), value: 'requested' }, - { label: t('labs.status.completed'), value: 'completed' }, - { label: t('labs.status.canceled'), value: 'canceled' }, - { label: t('labs.filter.all'), value: 'all' }, - ]} - onChange={(event: React.ChangeEvent) => { - onSelectChange(event) - }} />
diff --git a/src/patients/ContactInfo.tsx b/src/patients/ContactInfo.tsx index d6d491352c..7d3a9be3de 100644 --- a/src/patients/ContactInfo.tsx +++ b/src/patients/ContactInfo.tsx @@ -2,7 +2,7 @@ import { Spinner, Row, Column, Icon } from '@hospitalrun/components' import React, { useEffect, ReactElement } from 'react' import { useTranslation } from 'react-i18next' -import SelectWithLabelFormGroup from '../components/input/SelectWithLableFormGroup' +import SelectWithLabelFormGroup, { Option } from '../components/input/SelectWithLableFormGroup' import TextFieldWithLabelFormGroup from '../components/input/TextFieldWithLabelFormGroup' import TextInputWithLabelFormGroup from '../components/input/TextInputWithLabelFormGroup' import { ContactInfoPiece } from '../model/ContactInformation' @@ -30,7 +30,7 @@ const ContactInfo = (props: Props): ReactElement => { } }, [data, onChange]) - const typeOptions = Object.values(ContactInfoTypes).map((value) => ({ + const typeOptions: Option[] = Object.values(ContactInfoTypes).map((value) => ({ label: t(`patient.contactInfoType.options.${value}`), value: `${value}`, })) @@ -53,9 +53,8 @@ const ContactInfo = (props: Props): ReactElement => { } const Component = componentList[component] - const onTypeChange = (event: React.ChangeEvent, index: number) => { + const onTypeChange = (newType: string, index: number) => { if (onChange) { - const newType = event.currentTarget.value const currentContact = { ...data[index], type: newType } const newContacts = [...data] newContacts.splice(index, 1, currentContact) @@ -83,10 +82,10 @@ const ContactInfo = (props: Props): ReactElement => { onTypeChange(event, i)} + defaultSelected={typeOptions.filter(({ value }) => value === entry.type)} + onChange={(values) => onTypeChange(values[0], i)} + isEditable={isEditable} /> diff --git a/src/patients/GeneralInformation.tsx b/src/patients/GeneralInformation.tsx index eca1ea70a2..decafea491 100644 --- a/src/patients/GeneralInformation.tsx +++ b/src/patients/GeneralInformation.tsx @@ -4,7 +4,7 @@ import React, { ReactElement } from 'react' import { useTranslation } from 'react-i18next' import DatePickerWithLabelFormGroup from '../components/input/DatePickerWithLabelFormGroup' -import SelectWithLabelFormGroup from '../components/input/SelectWithLableFormGroup' +import SelectWithLabelFormGroup, { Option } from '../components/input/SelectWithLableFormGroup' import TextInputWithLabelFormGroup from '../components/input/TextInputWithLabelFormGroup' import { ContactInfoPiece } from '../model/ContactInformation' import Patient from '../model/Patient' @@ -59,6 +59,18 @@ const GeneralInformation = (props: Props): ReactElement => { onFieldChange('isApproximateDateOfBirth', checked) } + const sexOptions: Option[] = [ + { label: t('sex.male'), value: 'male' }, + { label: t('sex.female'), value: 'female' }, + { label: t('sex.other'), value: 'other' }, + { label: t('sex.unknown'), value: 'unknown' }, + ] + + const typeOptions: Option[] = [ + { label: t('patient.types.charity'), value: 'charity' }, + { label: t('patient.types.private'), value: 'private' }, + ] + return (
@@ -115,28 +127,20 @@ const GeneralInformation = (props: Props): ReactElement => { value === patient.sex)} + onChange={(values) => onFieldChange('sex', values[0])} isEditable={isEditable} - options={[ - { label: t('sex.male'), value: 'male' }, - { label: t('sex.female'), value: 'female' }, - { label: t('sex.other'), value: 'other' }, - { label: t('sex.unknown'), value: 'unknown' }, - ]} - onChange={(event) => onFieldChange('sex', event.currentTarget.value)} />
value === patient.type)} + onChange={(values) => onFieldChange('type', values[0])} isEditable={isEditable} - options={[ - { label: t('patient.types.charity'), value: 'charity' }, - { label: t('patient.types.private'), value: 'private' }, - ]} - onChange={(event) => onFieldChange('type', event.currentTarget.value)} />
diff --git a/src/patients/care-plans/CarePlanForm.tsx b/src/patients/care-plans/CarePlanForm.tsx index 6a5a24e7d9..be517b45c7 100644 --- a/src/patients/care-plans/CarePlanForm.tsx +++ b/src/patients/care-plans/CarePlanForm.tsx @@ -1,9 +1,9 @@ import { Alert, Column, Row } from '@hospitalrun/components' -import React from 'react' +import React, { useState } from 'react' import { useTranslation } from 'react-i18next' import DatePickerWithLabelFormGroup from '../../components/input/DatePickerWithLabelFormGroup' -import SelectWithLabelFormGroup from '../../components/input/SelectWithLableFormGroup' +import SelectWithLabelFormGroup, { Option } from '../../components/input/SelectWithLableFormGroup' import TextFieldWithLabelFormGroup from '../../components/input/TextFieldWithLabelFormGroup' import TextInputWithLabelFormGroup from '../../components/input/TextInputWithLabelFormGroup' import CarePlan, { CarePlanIntent, CarePlanStatus } from '../../model/CarePlan' @@ -32,6 +32,10 @@ const CarePlanForm = (props: Props) => { const { t } = useTranslation() const { patient, carePlan, carePlanError, disabled, onChange } = props + const [condition, setCondition] = useState(carePlan.diagnosisId) + const [status, setStatus] = useState(carePlan.status) + const [intent, setIntent] = useState(carePlan.intent) + const onFieldChange = (name: string, value: string | CarePlanStatus | CarePlanIntent) => { if (onChange) { const newCarePlan = { @@ -42,6 +46,13 @@ const CarePlanForm = (props: Props) => { } } + const conditionOptions: Option[] = + patient.diagnoses?.map((d) => ({ label: d.name, value: d.id })) || [] + + const statusOptions: Option[] = Object.values(CarePlanStatus).map((v) => ({ label: v, value: v })) + + const intentOptions: Option[] = Object.values(CarePlanIntent).map((v) => ({ label: v, value: v })) + return (
{carePlanError?.message && } @@ -75,44 +86,51 @@ const CarePlanForm = (props: Props) => { + {/* add feedback in next round */} value === condition)} + onChange={(values) => { + onFieldChange('diagnosisId', values[0]) + setCondition(values[0]) + }} isEditable={!disabled} - onChange={(event) => onFieldChange('diagnosisId', event.currentTarget.value)} - options={patient.diagnoses?.map((d) => ({ label: d.name, value: d.id })) || []} + isInvalid={!!carePlanError?.condition} /> value === status)} + onChange={(values) => { + onFieldChange('status', values[0]) + setStatus(values[0] as CarePlanStatus) + }} isEditable={!disabled} - options={Object.values(CarePlanStatus).map((v) => ({ label: v, value: v }))} - onChange={(event) => onFieldChange('status', event.currentTarget.value)} + isInvalid={!!carePlanError?.status} /> value === intent)} + onChange={(values) => { + onFieldChange('intent', values[0]) + setIntent(values[0] as CarePlanIntent) + }} isEditable={!disabled} - options={Object.values(CarePlanIntent).map((v) => ({ label: v, value: v }))} - onChange={(event) => onFieldChange('intent', event.currentTarget.value)} + isInvalid={!!carePlanError?.intent} /> diff --git a/src/scheduling/appointments/AppointmentDetailForm.tsx b/src/scheduling/appointments/AppointmentDetailForm.tsx index 612291ad3b..a43b591c47 100644 --- a/src/scheduling/appointments/AppointmentDetailForm.tsx +++ b/src/scheduling/appointments/AppointmentDetailForm.tsx @@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next' import PatientRepository from '../../clients/db/PatientRepository' import DateTimePickerWithLabelFormGroup from '../../components/input/DateTimePickerWithLabelFormGroup' -import SelectWithLabelFormGroup from '../../components/input/SelectWithLableFormGroup' +import SelectWithLabelFormGroup, { Option } from '../../components/input/SelectWithLableFormGroup' import TextFieldWithLabelFormGroup from '../../components/input/TextFieldWithLabelFormGroup' import TextInputWithLabelFormGroup from '../../components/input/TextInputWithLabelFormGroup' import Appointment from '../../model/Appointment' @@ -22,15 +22,20 @@ const AppointmentDetailForm = (props: Props) => { const { onFieldChange, appointment, patient, isEditable, error } = props const { t } = useTranslation() - const onSelectChange = (event: React.ChangeEvent, fieldName: string) => - onFieldChange && onFieldChange(fieldName, event.target.value) - const onDateChange = (date: Date, fieldName: string) => onFieldChange && onFieldChange(fieldName, date.toISOString()) const onInputElementChange = (event: React.ChangeEvent, fieldName: string) => onFieldChange && onFieldChange(fieldName, event.target.value) + const typeOptions: Option[] = [ + { 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' }, + ] + return ( <> {error?.message && } @@ -112,18 +117,10 @@ const AppointmentDetailForm = (props: Props) => { value === appointment.type)} + onChange={(values) => onFieldChange && onFieldChange('type', values[0])} isEditable={isEditable} - options={[ - { 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' }, - ]} - onChange={(event: React.ChangeEvent) => { - onSelectChange(event, 'type') - }} />