Skip to content

Commit

Permalink
Fixed bug where the submissions table was not updated after submittin…
Browse files Browse the repository at this point in the history 
…g a form
  • Loading branch information
@jurbinan
jurbinan committed Dec 14, 2023
1 parent 71922f9 commit c19da6c
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 81 deletions.
14 changes: 7 additions & 7 deletions ui/src/components/form/FormGenerator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,8 +106,8 @@ const formReducer = (state, action) => {
export function FormGenerator({ formMetadata, root }) {

// State and context variables
const [lastDraftUpdate, setLastDraftUpdate] = useState(`Drafts-${new Date().toUTCString()}`)
const [lastSubmissionUpdate, setLastSubmissionUpdate] = useState(`Submissions-${new Date().toUTCString()}`)
const [lastDraftUpdate, setLastDraftUpdate] = useState(new Date())
const [lastSubmissionUpdate, setLastSubmissionUpdate] = useState(new Date())
const { patientIdentifier } = useContext(PatientIdentifierContext)
const { activeSubmission } = useContext(ActiveSubmissionContext)
const { patientFound } = useContext(PatientFoundContext)
Expand Down Expand Up @@ -297,7 +297,7 @@ export function FormGenerator({ formMetadata, root }) {
variables: { input: draftInfo },
onCompleted: () => {
alert('Draft saved')
setLastDraftUpdate(`Drafts-${new Date().toUTCString()}`)
setLastDraftUpdate(new Date())
}
})
}
Expand Down Expand Up @@ -333,9 +333,9 @@ export function FormGenerator({ formMetadata, root }) {
.catch(() => {
console.log('Could not connect user to submission')
})

setLastSubmissionUpdate(`Submissions-${new Date().toUTCString()}`)

alert('Form submitted!')
setLastSubmissionUpdate(new Date())
}
})
.catch((error) => {
Expand Down Expand Up @@ -458,15 +458,15 @@ export function FormGenerator({ formMetadata, root }) {
}
</Form.Group>
<DraftTable
key={`Drafts-${lastDraftUpdate}`}
key={`Drafts-${lastDraftUpdate.toUTCString()}`}
formID={formMetadata.form_id}
headers={tableHeaders}
patientIdentifier={patientIdentifier}
fillForm={fillForm}
setLastDraftUpdate={setLastDraftUpdate}
/>
<SubmissionTable
key={`Submissions-${lastSubmissionUpdate}`}
key={`Submissions-${lastSubmissionUpdate.toUTCString()}`}
formID={formMetadata.form_id}
formIDKeys={renderedFormIDFields.map((field) => field.name)}
headers={tableHeaders}
Expand Down
2 changes: 1 addition & 1 deletion ui/src/components/form/table/DraftTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const DraftTableContents = ({ drafts, headers, setLastDraftUpdate, fillForm }) =
},
onCompleted: () => {
alert('Draft deleted')
setLastDraftUpdate(new Date().toUTCString())
setLastDraftUpdate(new Date())
}
})
}
Expand Down
161 changes: 88 additions & 73 deletions ui/src/components/form/table/SubmissionTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ export function SubmissionTable({
} = useQuery(FindSubmissions, {
variables: {
where: submissionSearchInfo
}
},
fetchPolicy: "network-only"
})

if (submissionsLoading) {
Expand All @@ -46,11 +47,6 @@ export function SubmissionTable({

if (submissionsInfo.submissions.length === 0) return <></>

// regex to determine a date in the YYYY-MM-DD format
// It will also match anything after the YYYY-MM-DD match,
// so a date like "2023-02-01T05:00:00.000Z" (without the quotes) is a valid date
const re = /[12]\d{3}-((0[1-9])|(1[012]))-((0[1-9]|[12]\d)|(3[01]))\S*/m

return (
<>
<Divider hidden />
Expand All @@ -60,79 +56,98 @@ export function SubmissionTable({
SUBMISSIONS
</Header>
</Divider>
<Table fixed selectable aria-labelledby="header" striped>
<div style={{overflowX: 'auto', maxHeight: '500px', resize: 'vertical'}}>
<Table.Header>
<Table.Row>
{
Object.values(headers).map((header: any) => {
return <Table.HeaderCell key={header}>{toTitle(header)}</Table.HeaderCell>
})
}
</Table.Row>
</Table.Header>
<Table.Body>
<SubmissionTableContents
submissions={submissionsInfo.submissions}
idKeys={formIDKeys}
headers={headers}
fillForm={fillForm}
setActiveSubmission={setActiveSubmission}
patientIdentifier={patientIdentifier}
/>
</>
)
}

const SubmissionTableContents = ({ submissions, idKeys, headers, fillForm, setActiveSubmission, patientIdentifier }) => {

// regex to determine a date in the YYYY-MM-DD format
// It will also match anything after the YYYY-MM-DD match,
// so a date like "2023-02-01T05:00:00.000Z" (without the quotes) is a valid date
const re = /[12]\d{3}-((0[1-9])|(1[012]))-((0[1-9]|[12]\d)|(3[01]))\S*/m

return (
<Table fixed selectable aria-labelledby="header" striped>
<div style={{overflowX: 'auto', maxHeight: '500px', resize: 'vertical'}}>
<Table.Header>
<Table.Row>
{
submissionsInfo.submissions.map((submission: any) => {
const row: any = {}
submission.fields.forEach((field) => {
row[field["key"]] = field["value"]
})
Object.keys(submission.patient).forEach((key) =>{
row[key] = submission.patient[key]
})
const formData = {
patientID: patientIdentifier,
formIDs: formIDKeys.reduce((obj, key) => {
Object.values(headers).map((header: any) => {
return <Table.HeaderCell key={header}>{toTitle(header)}</Table.HeaderCell>
})
}
</Table.Row>
</Table.Header>
<Table.Body>
{
submissions.map((submission: any) => {
const row: any = {}
submission.fields.forEach((field) => {
row[field["key"]] = field["value"]
})
Object.keys(submission.patient).forEach((key) =>{
row[key] = submission.patient[key]
})
const formData = {
patientID: patientIdentifier,
formIDs: idKeys.reduce((obj, key) => {
return {
...obj,
[submission.fields[key]]: submission.fields['value']
}
}, {}),
fields: submission.fields
.filter((field) => !idKeys.includes(field['key']))
.reduce((obj, field) => {
return {
...obj,
[submission.fields[key]]: submission.fields['value']
[field['key']]: re.test(field['value'])
? new Date(field['value'])
: field['value']
}
}, {}),
fields: submission.fields
.filter((field) => !formIDKeys.includes(field['key']))
.reduce((obj, field) => {
return {
...obj,
[field['key']]: re.test(field['value'])
? new Date(field['value'])
: field['value']
}
}, {})
}
return (
<Table.Row key={submission.submission_id} onClick={() => { fillForm(formData); setActiveSubmission(submission) }}>
{
Object.keys(headers).map((key) => {
let value = row.hasOwnProperty(key) ? row[key]: ""
}, {})
}
return (
<Table.Row key={submission.submission_id} onClick={() => { fillForm(formData); setActiveSubmission(submission) }}>
{
Object.keys(headers).map((key) => {
let value = row.hasOwnProperty(key) ? row[key]: ""

const isDate = re.test(value)
const isDate = re.test(value)

if (isDate) {
value = toDateString(value)
} else if (Array.isArray(value)) {
value = (
<List>{
value.map(
(item) => <List.Item key={item}>{item}</List.Item>
)
}</List>)
}
if (isDate) {
value = toDateString(value)
} else if (Array.isArray(value)) {
value = (
<List>{
value.map(
(item) => <List.Item key={item}>{item}</List.Item>
)
}</List>)
}

return (
<Table.Cell key={`${submission.submission_id}-${key}-${value}`}>
{value}
</Table.Cell>
)
})
}
</Table.Row>
)
})
}
</Table.Body>
</div>
</Table>
</>
return (
<Table.Cell key={`${submission.submission_id}-${key}-${value}`}>
{value}
</Table.Cell>
)
})
}
</Table.Row>
)
})
}
</Table.Body>
</div>
</Table>
)
}

0 comments on commit c19da6c

Please sign in to comment.