Skip to content
This repository has been archived by the owner on Jan 9, 2023. It is now read-only.

Commit

Permalink
Merge pull request #2691 from codethechange/select_refactor
Browse files Browse the repository at this point in the history 
Select refactor
  • Loading branch information
@matteovivona
matteovivona committed Jun 11, 2021
2 parents a8bebb4 + cd26dcb commit 62a898c
Show file tree
Hide file tree
Showing 19 changed files with 354 additions and 452 deletions.
78 changes: 0 additions & 78 deletions src/__tests__/shared/components/input/SelectWithLabelFormGroup.test.tsx
View file

This file was deleted.

34 changes: 15 additions & 19 deletions src/imagings/requests/NewImagingRequest.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import { Typeahead, Label, Button, Alert, Column, Row } from '@hospitalrun/components'
import { Select, Typeahead, Label, Button, Alert, Column, Row } from '@hospitalrun/components'
import format from 'date-fns/format'
import React, { useState, useEffect } from 'react'
import { useSelector } from 'react-redux'
import { useHistory } from 'react-router-dom'

import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs'
import { useUpdateTitle } from '../../page-header/title/TitleContext'
import SelectWithLabelFormGroup, {
Option,
} from '../../shared/components/input/SelectWithLabelFormGroup'
import { SelectOption } from '../../shared/components/input/SelectOption'
import TextFieldWithLabelFormGroup from '../../shared/components/input/TextFieldWithLabelFormGroup'
import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
import PatientRepository from '../../shared/db/PatientRepository'
Expand All @@ -29,9 +27,9 @@ const NewImagingRequest = () => {
})
const [mutate] = useRequestImaging(user)
const [error, setError] = useState<ImagingRequestError>()
const [visitOption, setVisitOption] = useState([] as Option[])
const [visitOption, setVisitOption] = useState([] as SelectOption[])

const statusOptions: Option[] = [
const statusOptions: SelectOption[] = [
{ label: t('imagings.status.requested'), value: 'requested' },
{ label: t('imagings.status.completed'), value: 'completed' },
{ label: t('imagings.status.canceled'), value: 'canceled' },
Expand Down Expand Up @@ -65,7 +63,7 @@ const NewImagingRequest = () => {
const visits = patient.visits?.map((v) => ({
label: `${v.type} at ${format(new Date(v.startDateTime), 'yyyy-MM-dd hh:mm a')}`,
value: v.id,
})) as Option[]
})) as SelectOption[]

setVisitOption(visits)
} else {
Expand Down Expand Up @@ -154,17 +152,16 @@ const NewImagingRequest = () => {
</div>
</Column>
<Column>
<div className="visits">
<SelectWithLabelFormGroup
name="visit"
label={t('patient.visits.label')}
isRequired
isEditable={newImagingRequest.patient !== undefined}
<div className="visits" data-testid="visitSelect">
<Label text={t('patient.visits.label')} title="visit" isRequired />
<Select
id="visitSelect"
options={visitOption || []}
defaultSelected={defaultSelectedVisitsOption()}
onChange={(values) => {
onVisitChange(values[0])
}}
disabled={false}
/>
</div>
</Column>
Expand All @@ -180,17 +177,16 @@ const NewImagingRequest = () => {
value={newImagingRequest.type}
onChange={onImagingTypeChange}
/>
<div className="imaging-status">
<SelectWithLabelFormGroup
name="status"
label={t('imagings.imaging.status')}
<div className="imaging-status" data-testid="statusSelect">
<Label text={t('imagings.imaging.status')} title="status" isRequired />
<Select
id="statusSelect"
options={statusOptions}
isRequired
isEditable
defaultSelected={statusOptions.filter(
({ value }) => value === newImagingRequest.status,
)}
onChange={(values) => onStatusChange(values[0])}
disabled={false}
/>
</div>
<div className="form-group">
Expand Down
16 changes: 7 additions & 9 deletions src/incidents/list/ViewIncidents.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import { Button, Container, Row, Column } from '@hospitalrun/components'
import { Select, Label, Button, Container, Row, Column } from '@hospitalrun/components'
import React, { useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'

import { useButtonToolbarSetter } from '../../page-header/button-toolbar/ButtonBarProvider'
import { useUpdateTitle } from '../../page-header/title/TitleContext'
import SelectWithLabelFormGroup, {
Option,
} from '../../shared/components/input/SelectWithLabelFormGroup'
import { SelectOption } from '../../shared/components/input/SelectOption'
import useTranslator from '../../shared/hooks/useTranslator'
import IncidentFilter from '../IncidentFilter'
import ViewIncidentsTable from './ViewIncidentsTable'
Expand Down Expand Up @@ -39,7 +37,7 @@ const ViewIncidents = () => {
}
}, [setButtonToolBar, t, history])

const filterOptions: Option[] = Object.values(IncidentFilter).map((filter) => ({
const filterOptions: SelectOption[] = Object.values(IncidentFilter).map((filter) => ({
label: t(`incidents.status.${filter}`),
value: `${filter}`,
}))
Expand All @@ -48,13 +46,13 @@ const ViewIncidents = () => {
<Container>
<Row>
<Column md={3} lg={2}>
<SelectWithLabelFormGroup
name="type"
label={t('incidents.filterTitle')}
<Label text={t('incidents.filterTitle')} title="type" />
<Select
id="type"
options={filterOptions}
defaultSelected={filterOptions.filter(({ value }) => value === searchFilter)}
onChange={(values) => setSearchFilter(values[0] as IncidentFilter)}
isEditable
disabled={false}
/>
</Column>
</Row>
Expand Down
18 changes: 8 additions & 10 deletions src/labs/ViewLabs.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import { Button, Table, Container, Row, Column } from '@hospitalrun/components'
import { Select, Label, Button, Table, Container, Row, Column } from '@hospitalrun/components'
import format from 'date-fns/format'
import React, { useState, useEffect, useCallback } from 'react'
import { useSelector } from 'react-redux'
import { useHistory } from 'react-router-dom'

import { useButtonToolbarSetter } from '../page-header/button-toolbar/ButtonBarProvider'
import { useUpdateTitle } from '../page-header/title/TitleContext'
import SelectWithLabelFormGroup, {
Option,
} from '../shared/components/input/SelectWithLabelFormGroup'
import { SelectOption } from '../shared/components/input/SelectOption'
import TextInputWithLabelFormGroup from '../shared/components/input/TextInputWithLabelFormGroup'
import useDebounce from '../shared/hooks/useDebounce'
import useTranslator from '../shared/hooks/useTranslator'
Expand Down Expand Up @@ -70,7 +68,7 @@ const ViewLabs = () => {
setSearchText(event.target.value)
}

const filterOptions: Option[] = [
const filterOptions: SelectOption[] = [
{ label: t('labs.status.requested'), value: 'requested' },
{ label: t('labs.status.completed'), value: 'completed' },
{ label: t('labs.status.canceled'), value: 'canceled' },
Expand All @@ -81,13 +79,13 @@ const ViewLabs = () => {
<Container>
<Row>
<Column md={3} lg={2}>
<SelectWithLabelFormGroup
name="type"
label={t('labs.filterTitle')}
<Label title="type" text={t('labs.filterTitle')} />
<Select
id="type"
options={filterOptions}
defaultSelected={filterOptions.filter(({ value }) => value === searchFilter)}
onChange={(values) => setSearchFilter(values[0] as LabFilter)}
isEditable
defaultSelected={filterOptions.filter(({ value }) => value === searchFilter)}
disabled={false}
/>
</Column>
<Column>
Expand Down
30 changes: 18 additions & 12 deletions src/labs/requests/NewLabRequest.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,21 @@
import { Typeahead, Label, Button, Alert, Toast, Column, Row } from '@hospitalrun/components'
import {
Select,
Typeahead,
Label,
Button,
Alert,
Toast,
Column,
Row,
} from '@hospitalrun/components'
import format from 'date-fns/format'
import React, { useState, useEffect } from 'react'
import { useSelector } from 'react-redux'
import { useHistory } from 'react-router-dom'

import useAddBreadcrumbs from '../../page-header/breadcrumbs/useAddBreadcrumbs'
import { useUpdateTitle } from '../../page-header/title/TitleContext'
import SelectWithLabelFormGroup, {
Option,
} from '../../shared/components/input/SelectWithLabelFormGroup'
import { SelectOption } from '../../shared/components/input/SelectOption'
import TextFieldWithLabelFormGroup from '../../shared/components/input/TextFieldWithLabelFormGroup'
import TextInputWithLabelFormGroup from '../../shared/components/input/TextInputWithLabelFormGroup'
import PatientRepository from '../../shared/db/PatientRepository'
Expand All @@ -26,7 +33,7 @@ const NewLabRequest = () => {
const [mutate] = useRequestLab()
const [newNote, setNewNote] = useState('')
const [error, setError] = useState<LabError | undefined>(undefined)
const [visitOptions, setVisitOptions] = useState([] as Option[])
const [visitOptions, setVisitOptions] = useState([] as SelectOption[])

const updateTitle = useUpdateTitle()
useEffect(() => {
Expand Down Expand Up @@ -54,7 +61,7 @@ const NewLabRequest = () => {
const visits = patient.visits?.map((v) => ({
label: `${v.type} at ${format(new Date(v.startDateTime), 'yyyy-MM-dd hh:mm a')}`,
value: v.id,
})) as Option[]
})) as SelectOption[]

setVisitOptions(visits)
setNewLabRequest((previousNewLabRequest) => ({
Expand Down Expand Up @@ -145,17 +152,16 @@ const NewLabRequest = () => {
</div>
</Column>
<Column>
<div className="form-group">
<SelectWithLabelFormGroup
name="visit"
label={t('patient.visit')}
isRequired
isEditable={newLabRequest.patient !== undefined}
<div className="form-group" data-testid="visitSelect">
<Label text={t('patient.visit')} title="This is a required input" isRequired />
<Select
id="visit"
options={visitOptions || []}
defaultSelected={defaultSelectedVisitsOption()}
onChange={(values) => {
onVisitChange(values[0])
}}
disabled={false}
/>
</div>
</Column>
Expand Down

1 comment on commit 62a898c

@vercel
Copy link

@vercel vercel bot commented on 62a898c Jun 11, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.