From 32b40d8aea403434e9478c81fbdf97704d45bfa0 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Tue, 21 Apr 2020 21:08:36 -0500 Subject: [PATCH 01/49] init --- pwa/src/App.tsx | 10 ++++++++++ pwa/src/components/DiagnosisForm.test.tsx | 0 pwa/src/components/DiagnosisForm.tsx | 10 ++++++++++ pwa/src/scss/DiagnosisForm.scss | 0 4 files changed, 20 insertions(+) create mode 100644 pwa/src/components/DiagnosisForm.test.tsx create mode 100644 pwa/src/components/DiagnosisForm.tsx create mode 100644 pwa/src/scss/DiagnosisForm.scss diff --git a/pwa/src/App.tsx b/pwa/src/App.tsx index ac918e3..2d5ef4e 100644 --- a/pwa/src/App.tsx +++ b/pwa/src/App.tsx @@ -5,6 +5,7 @@ import Login from './components/Login' import LandingPage from './components/LandingPage' import Wrapper from './Wrapper' import PatientInfoForm from './components/PatientInfoForm' +import DiagnosisForm from './components/DiagnosisForm' import './scss/App.scss' import './antd-mobile.css' @@ -28,6 +29,15 @@ const App: React.FunctionComponent = () => { + + + + + diff --git a/pwa/src/components/DiagnosisForm.test.tsx b/pwa/src/components/DiagnosisForm.test.tsx new file mode 100644 index 0000000..e69de29 diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx new file mode 100644 index 0000000..b63f092 --- /dev/null +++ b/pwa/src/components/DiagnosisForm.tsx @@ -0,0 +1,10 @@ +import React, { ReactElement, useState } from "react"; +import {} from "antd-mobile"; +import "../scss/DiagnosisForm.scss"; + +export default function Form(): ReactElement { + return ( + <> + + ) +} \ No newline at end of file diff --git a/pwa/src/scss/DiagnosisForm.scss b/pwa/src/scss/DiagnosisForm.scss new file mode 100644 index 0000000..e69de29 From 00669a3e4e41b55d9058887b4d1f399dfa693fc7 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Tue, 21 Apr 2020 21:52:13 -0500 Subject: [PATCH 02/49] created json format for form fields --- pwa/src/components/DiagnosisFields.json | 414 ++++++++++++++++++++++++ pwa/src/components/DiagnosisForm.tsx | 25 ++ 2 files changed, 439 insertions(+) create mode 100644 pwa/src/components/DiagnosisFields.json diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json new file mode 100644 index 0000000..38437d8 --- /dev/null +++ b/pwa/src/components/DiagnosisFields.json @@ -0,0 +1,414 @@ +{ + "diagnoses" : [ + { + "name":"Asthma", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Allergies", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Anemia", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Malnutrition", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Depression", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Diabetes", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"", + "group-title":"Eye", + "group":[ + "Ptergium", + "Cataract", + "Dry Eye", + "Conjuntivitis" + ], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Fever", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Possible Malaria", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Filariasis", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"", + "group-title":"Intestinal", + "group":[ + "Gastritis", + "GERD", + "Gastroenteritis", + "Dysentery", + "Possible Cholera" + ], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Headache", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Hernia", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"Hernia Type", + "radio-buttons":[ + "Inguinal", + "Umbilical", + "Both" + ] + + }, + "text-input-title":"" + }, + { + "name":"", + "group-title":"Cardiovascular", + "group":[ + "Hypertension", + "Stroke", + "Angina", + "CHF" + ], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Musculoskeletal Pain", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Otitis", + "group-title":"", + "group":[ + "Pneumonia", + "Sinusitis" + ], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + "Right", + "Left", + "Both" + ] + }, + "text-input-title":"" + }, + { + "name":"URI", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + }, + "text-input-title":"" + }, + { + "name":"Pregnancy", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"Weeks", + "text-input-type":"number" + }, + { + "name":"", + "group-title":"Dermatological", + "group":[ + "Atopic Derm", + "Fungal", + "Scabies", + "Impetigo", + "Tinea Capitus (kerion)" + ], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Possible STD", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Possible TB", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Possible Parasites", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"UTI", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Vaginal", + "group-title":"", + "group":[ + "Vaginitis", + "Candidal", + "Trich", + "BV" + ], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Needs to see Dentist", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Needs to see Eye Doctor", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Surgical candidate", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"Other Diagnosis" + }, + { + "name":"", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"Diagnoses Comments" + } + ] +} \ No newline at end of file diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index b63f092..81c65c9 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -2,9 +2,34 @@ import React, { ReactElement, useState } from "react"; import {} from "antd-mobile"; import "../scss/DiagnosisForm.scss"; +/* + +Diagnosis Fields are stored in DiagnosisFields.json in the format: + +{ + "diagnoses" : [ + { + "name":"", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + } + ] +} +*/ + export default function Form(): ReactElement { + return ( <> + ) } \ No newline at end of file From e6db3995360697c23bb8640cd9c8e87ba163236f Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Wed, 22 Apr 2020 11:13:36 -0500 Subject: [PATCH 03/49] populated form with diagnosis name --- pwa/src/components/DiagnosisFields.json | 433 ++++++++++-------------- pwa/src/components/DiagnosisForm.tsx | 36 +- 2 files changed, 208 insertions(+), 261 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index 38437d8..e0bbaa2 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -1,144 +1,114 @@ { - "diagnoses" : [ + "diagnoses": [ { - "name":"Asthma", - "group-title":"", - "group":[], + "name": "Asthma", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Allergies", - "group-title":"", - "group":[], + "name": "Allergies", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Anemia", - "group-title":"", - "group":[], + "name": "Anemia", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Malnutrition", - "group-title":"", - "group":[], + "name": "Malnutrition", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Depression", - "group-title":"", - "group":[], + "name": "Depression", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Diabetes", - "group-title":"", - "group":[], + "name": "Diabetes", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"", - "group-title":"Eye", - "group":[ + "name": "", + "group-title": "Eye", + "group": [ "Ptergium", "Cataract", "Dry Eye", "Conjuntivitis" ], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Fever", - "group-title":"", - "group":[], + "name": "Fever", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Possible Malaria", - "group-title":"", - "group":[], + "name": "Possible Malaria", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Filariasis", - "group-title":"", - "group":[], + "name": "Filariasis", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"", - "group-title":"Intestinal", - "group":[ + "name": "", + "group-title": "Intestinal", + "group": [ "Gastritis", "GERD", "Gastroenteritis", @@ -146,120 +116,102 @@ "Possible Cholera" ], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Headache", - "group-title":"", - "group":[], + "name": "Headache", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Hernia", - "group-title":"", - "group":[], + "name": "Hernia", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"Hernia Type", - "radio-buttons":[ + "radio-buttons-title": "Hernia Type", + "radio-buttons": [ "Inguinal", "Umbilical", "Both" ] - }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"", - "group-title":"Cardiovascular", - "group":[ + "name": "", + "group-title": "Cardiovascular", + "group": [ "Hypertension", "Stroke", "Angina", "CHF" ], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Musculoskeletal Pain", - "group-title":"", - "group":[], + "name": "Musculoskeletal Pain", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Otitis", - "group-title":"", - "group":[ + "name": "Otitis", + "group-title": "", + "group": [ "Pneumonia", "Sinusitis" ], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ + "radio-buttons-title": "", + "radio-buttons": [ "Right", "Left", "Both" ] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"URI", - "group-title":"", - "group":[], + "name": "URI", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Pregnancy", - "group-title":"", - "group":[], + "name": "Pregnancy", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"Weeks", - "text-input-type":"number" + "text-input-title": "Weeks", + "text-input-type": "number" }, { - "name":"", - "group-title":"Dermatological", - "group":[ + "name": "", + "group-title": "Dermatological", + "group": [ "Atopic Derm", "Fungal", "Scabies", @@ -267,148 +219,115 @@ "Tinea Capitus (kerion)" ], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Possible STD", - "group-title":"", - "group":[], + "name": "Possible STD", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Possible TB", - "group-title":"", - "group":[], + "name": "Possible TB", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Possible Parasites", - "group-title":"", - "group":[], + "name": "Possible Parasites", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"UTI", - "group-title":"", - "group":[], + "name": "UTI", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Vaginal", - "group-title":"", - "group":[ + "name": "Vaginal", + "group-title": "", + "group": [ "Vaginitis", "Candidal", "Trich", "BV" ], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Needs to see Dentist", - "group-title":"", - "group":[], + "name": "Needs to see Dentist", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Needs to see Eye Doctor", - "group-title":"", - "group":[], + "name": "Needs to see Eye Doctor", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Surgical candidate", - "group-title":"", - "group":[], + "name": "Surgical candidate", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"", - "group-title":"", - "group":[], + "name": "", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"Other Diagnosis" + "text-input-title": "Other Diagnosis" }, { - "name":"", - "group-title":"", - "group":[], + "name": "", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"Diagnoses Comments" + "text-input-title": "Diagnoses Comments" } ] } \ No newline at end of file diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 81c65c9..84cda51 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -1,6 +1,10 @@ import React, { ReactElement, useState } from "react"; -import {} from "antd-mobile"; +import { List, Checkbox, Flex } from 'antd-mobile'; import "../scss/DiagnosisForm.scss"; +import * as data from './DiagnosisFields.json'; + +const CheckboxItem = Checkbox.CheckboxItem; +const AgreeItem = Checkbox.AgreeItem; /* @@ -24,12 +28,36 @@ Diagnosis Fields are stored in DiagnosisFields.json in the format: ] } */ +// var diagnosisFields = require('./DiagnosisFields.json'); +// import * as data from './DiagnosisFields.json'; + +var diagnosisFields = data.diagnoses; + +var fieldComponents = []; + +function createFields() { + diagnosisFields.forEach((diagnosisField) => { + // Create the corresponding element and push it to the array of fields + }); +} export default function Form(): ReactElement { return ( - <> +
- + 'CheckboxItem demo'}> + {diagnosisFields.map((i) => ( + // TOOD: how do I add conditionals here? + + {i.name} + + ))} + +
) -} \ No newline at end of file +} From b4f617b184af4edfe7663cdbff9ec36658bfaa4b Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Wed, 22 Apr 2020 11:50:10 -0500 Subject: [PATCH 04/49] added conditional rendering --- pwa/src/components/DiagnosisFields.json | 12 +++++------ pwa/src/components/DiagnosisForm.tsx | 28 +++++++++---------------- 2 files changed, 16 insertions(+), 24 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index e0bbaa2..f48c918 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -61,7 +61,7 @@ "text-input-title": "" }, { - "name": "", + "group-title": "Eye", "group": [ "Ptergium", @@ -106,7 +106,7 @@ "text-input-title": "" }, { - "name": "", + "group-title": "Intestinal", "group": [ "Gastritis", @@ -146,7 +146,7 @@ "text-input-title": "" }, { - "name": "", + "group-title": "Cardiovascular", "group": [ "Hypertension", @@ -209,7 +209,7 @@ "text-input-type": "number" }, { - "name": "", + "group-title": "Dermatological", "group": [ "Atopic Derm", @@ -310,7 +310,7 @@ "text-input-title": "" }, { - "name": "", + "group-title": "", "group": [], "radio-buttons": { @@ -320,7 +320,7 @@ "text-input-title": "Other Diagnosis" }, { - "name": "", + "group-title": "", "group": [], "radio-buttons": { diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 84cda51..23d27d9 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -4,7 +4,6 @@ import "../scss/DiagnosisForm.scss"; import * as data from './DiagnosisFields.json'; const CheckboxItem = Checkbox.CheckboxItem; -const AgreeItem = Checkbox.AgreeItem; /* @@ -28,19 +27,9 @@ Diagnosis Fields are stored in DiagnosisFields.json in the format: ] } */ -// var diagnosisFields = require('./DiagnosisFields.json'); -// import * as data from './DiagnosisFields.json'; var diagnosisFields = data.diagnoses; -var fieldComponents = []; - -function createFields() { - diagnosisFields.forEach((diagnosisField) => { - // Create the corresponding element and push it to the array of fields - }); -} - export default function Form(): ReactElement { return ( @@ -49,13 +38,16 @@ export default function Form(): ReactElement { 'CheckboxItem demo'}> {diagnosisFields.map((i) => ( // TOOD: how do I add conditionals here? - - {i.name} - + // i.e. `if (i.name != null){}` + ((i.name == null) ? <> : + + {i.name} + + ) ))} From 2bbde92542e1f0a113ad8c6e5fe9dd746b36bc90 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Wed, 22 Apr 2020 12:55:25 -0500 Subject: [PATCH 05/49] removed empty fields --- pwa/src/components/DiagnosisFields.json | 238 +++--------------------- pwa/src/components/DiagnosisForm.tsx | 27 +-- 2 files changed, 42 insertions(+), 223 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index f48c918..1f92d07 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -1,112 +1,42 @@ { "diagnoses": [ { - "name": "Asthma", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Asthma" }, { - "name": "Allergies", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Allergies" }, { - "name": "Anemia", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Anemia" }, { - "name": "Malnutrition", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Malnutrition" }, { - "name": "Depression", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Depression" }, { - "name": "Diabetes", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Diabetes" }, { - "group-title": "Eye", "group": [ "Ptergium", "Cataract", "Dry Eye", "Conjuntivitis" - ], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + ] }, { - "name": "Fever", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Fever" }, { - "name": "Possible Malaria", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Possible Malaria" }, { - "name": "Filariasis", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Filariasis" }, { - "group-title": "Intestinal", "group": [ "Gastritis", @@ -114,27 +44,13 @@ "Gastroenteritis", "Dysentery", "Possible Cholera" - ], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + ] }, { - "name": "Headache", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Headache" }, { "name": "Hernia", - "group-title": "", - "group": [], "radio-buttons": { "radio-buttons-title": "Hernia Type", "radio-buttons": [ @@ -142,33 +58,19 @@ "Umbilical", "Both" ] - }, - "text-input-title": "" + } }, { - "group-title": "Cardiovascular", "group": [ "Hypertension", "Stroke", "Angina", "CHF" - ], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + ] }, { - "name": "Musculoskeletal Pain", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Musculoskeletal Pain" }, { "name": "Otitis", @@ -184,32 +86,17 @@ "Left", "Both" ] - }, - "text-input-title": "" + } }, { - "name": "URI", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "URI" }, { "name": "Pregnancy", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, "text-input-title": "Weeks", "text-input-type": "number" }, { - "group-title": "Dermatological", "group": [ "Atopic Derm", @@ -217,52 +104,19 @@ "Scabies", "Impetigo", "Tinea Capitus (kerion)" - ], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + ] }, { - "name": "Possible STD", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Possible STD" }, { - "name": "Possible TB", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Possible TB" }, { - "name": "Possible Parasites", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Possible Parasites" }, { - "name": "UTI", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "UTI" }, { "name": "Vaginal", @@ -272,61 +126,21 @@ "Candidal", "Trich", "BV" - ], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + ] }, { - "name": "Needs to see Dentist", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Needs to see Dentist" }, { - "name": "Needs to see Eye Doctor", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Needs to see Eye Doctor" }, { - "name": "Surgical candidate", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Surgical candidate" }, { - - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, "text-input-title": "Other Diagnosis" }, { - - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, "text-input-title": "Diagnoses Comments" } ] diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 23d27d9..3144337 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -1,5 +1,5 @@ import React, { ReactElement, useState } from "react"; -import { List, Checkbox, Flex } from 'antd-mobile'; +import { List, Checkbox, TextareaItem } from 'antd-mobile'; import "../scss/DiagnosisForm.scss"; import * as data from './DiagnosisFields.json'; @@ -35,20 +35,25 @@ export default function Form(): ReactElement { return (
- 'CheckboxItem demo'}> - {diagnosisFields.map((i) => ( - // TOOD: how do I add conditionals here? - // i.e. `if (i.name != null){}` - ((i.name == null) ? <> : + 'Patient Diagnosis'}> + {diagnosisFields.map((field) => ( + ((field.name == null) ? <> : - {i.name} + {field.name} ) - ))} + + // ((field["text-input-title"] == null) ? null : + // field["text-input-title"]}> + // + // + // ) + + ))}
) From 40911da1d0b770a600fa2647c5bb06cfc98e733c Mon Sep 17 00:00:00 2001 From: Ben Mitchinson Date: Wed, 22 Apr 2020 13:51:08 -0500 Subject: [PATCH 06/49] pushing jsx to an array --- pwa/src/components/DiagnosisForm.tsx | 58 ++++++++++++++++------------ 1 file changed, 34 insertions(+), 24 deletions(-) diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 3144337..7a43bc1 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -1,9 +1,9 @@ -import React, { ReactElement, useState } from "react"; -import { List, Checkbox, TextareaItem } from 'antd-mobile'; -import "../scss/DiagnosisForm.scss"; -import * as data from './DiagnosisFields.json'; +import React, { ReactElement, useState } from 'react' +import { List, Checkbox, TextareaItem } from 'antd-mobile' +import '../scss/DiagnosisForm.scss' +import * as data from './DiagnosisFields.json' -const CheckboxItem = Checkbox.CheckboxItem; +const CheckboxItem = Checkbox.CheckboxItem /* @@ -28,32 +28,42 @@ Diagnosis Fields are stored in DiagnosisFields.json in the format: } */ -var diagnosisFields = data.diagnoses; +var diagnosisFields = data.diagnoses export default function Form(): ReactElement { - return (
- 'Patient Diagnosis'}> - {diagnosisFields.map((field) => ( - ((field.name == null) ? <> : - - {field.name} - - ) + {diagnosisFields.map((field) => { + const formElements: ReactElement[] = [] - // ((field["text-input-title"] == null) ? null : - // field["text-input-title"]}> - // - // - // ) + if (field.name != null) { + formElements.push( + + {field.name} + , + ) + } - ))} + if (field['text-input-title'] != null) { + formElements.push( + field['text-input-title']} + > + + , + ) + } + + return <> {formElements} + })}
) From 7e23263d552c8c7f3065a81d23280d2be386d316 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Wed, 22 Apr 2020 16:12:02 -0500 Subject: [PATCH 07/49] added groups --- pwa/src/components/DiagnosisFields.json | 3 +-- pwa/src/components/DiagnosisForm.tsx | 28 ++++++++++++++++++++++--- 2 files changed, 26 insertions(+), 5 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index 1f92d07..187804e 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -119,8 +119,7 @@ "name": "UTI" }, { - "name": "Vaginal", - "group-title": "", + "group-title": "Vaginal", "group": [ "Vaginitis", "Candidal", diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 7a43bc1..5807dac 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -1,5 +1,5 @@ import React, { ReactElement, useState } from 'react' -import { List, Checkbox, TextareaItem } from 'antd-mobile' +import { List, Checkbox, TextareaItem, WhiteSpace } from 'antd-mobile' import '../scss/DiagnosisForm.scss' import * as data from './DiagnosisFields.json' @@ -41,8 +41,8 @@ export default function Form(): ReactElement { formElements.push( {field.name} , @@ -62,6 +62,28 @@ export default function Form(): ReactElement { ) } + if (field.group != null) { + if(field["group-title"] != null){ + formElements.push( + field['group-title']} + > + + ) + } + field.group.forEach((ele) => { + formElements.push( + + {ele} + ) + + }) + formElements.push() + } + return <> {formElements} })} From 7719672d1d9dc6692a4a4ea3a2e48023d330e4e1 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Wed, 22 Apr 2020 16:17:38 -0500 Subject: [PATCH 08/49] added actual grouping and list headers for groups --- pwa/src/components/DiagnosisForm.tsx | 28 +++++++++++++++++----------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 5807dac..f707741 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -33,7 +33,7 @@ var diagnosisFields = data.diagnoses export default function Form(): ReactElement { return (
- 'Patient Diagnosis'}> + {/* 'Patient Diagnosis'}> */} {diagnosisFields.map((field) => { const formElements: ReactElement[] = [] @@ -63,16 +63,11 @@ export default function Form(): ReactElement { } if (field.group != null) { - if(field["group-title"] != null){ - formElements.push( - field['group-title']} - > - - ) - } + const groupElements: ReactElement[] = [] + + // add each group element to the internalElement arrat field.group.forEach((ele) => { - formElements.push( + groupElements.push( ) }) + + // Render the entire list with the internal elements + if(field["group-title"] != null){ + formElements.push( + field['group-title']} + >{groupElements} + + ) + } + formElements.push() } return <> {formElements} })} - + {/* */}
) } From 31fb6c87b489d9e6eb657959a564cfcb9ca13ffd Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Thu, 23 Apr 2020 11:14:18 -0500 Subject: [PATCH 09/49] added id fields to data json --- pwa/src/components/DiagnosisFields.json | 144 ++++++++++++++-------- pwa/src/components/DiagnosisForm.test.tsx | 8 ++ pwa/src/components/DiagnosisForm.tsx | 97 +++++++-------- 3 files changed, 145 insertions(+), 104 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index 187804e..67c6e59 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -1,146 +1,186 @@ { "diagnoses": [ { - "name": "Asthma" + "name": "Asthma", + "id": "asthma" }, { - "name": "Allergies" + "name": "Allergies", + "id": "allergies" }, { - "name": "Anemia" + "name": "Anemia", + "id": "anemia" }, { - "name": "Malnutrition" + "name": "Malnutrition", + "id": "malnutrition" }, { - "name": "Depression" + "name": "Depression", + "id": "depression" }, { - "name": "Diabetes" + "name": "Diabetes", + "id": "diabetes" }, { "group-title": "Eye", "group": [ - "Ptergium", - "Cataract", - "Dry Eye", - "Conjuntivitis" + { + "name": "Ptergium", + "id": "ptergium" + }, + { + "name": "Cataract", + "id": "cataract" + }, + { + "name": "Dry Eye", + "id": "dry-eye" + }, + { + "name": "Conjuntivitis", + "id": "conjuntivitis" + } ] }, { - "name": "Fever" + "name": "Fever", + "id": "fever" }, { - "name": "Possible Malaria" + "name": "Possible Malaria", + "id": "malaria" }, { - "name": "Filariasis" + "name": "Filariasis", + "id": "filariasis" }, { + "id": "intestinal", "group-title": "Intestinal", "group": [ - "Gastritis", - "GERD", - "Gastroenteritis", - "Dysentery", - "Possible Cholera" + { "name": "Gastritis", "id": "gastritis" }, + { "name": "GERD", "id": "gerd" }, + { "name": "Gastroenteritis", "id": "gastroenteritis" }, + { "name": "Dysentery", "id": "dysentery" }, + { "name": "Possible Cholera", "id": "cholera" } ] }, { - "name": "Headache" + "name": "Headache", + "id": "headache" }, { "name": "Hernia", + "id": "hernia", "radio-buttons": { "radio-buttons-title": "Hernia Type", "radio-buttons": [ - "Inguinal", - "Umbilical", - "Both" + { "name": "Inguinal", "id": "inguinal" }, + { "name": "Umbilical", "id": "umbilical" }, + { "name": "Both", "id": "both" } ] } }, { + "id": "cardiovascular", "group-title": "Cardiovascular", "group": [ - "Hypertension", - "Stroke", - "Angina", - "CHF" + { "name": "Hypertension", "id": "hypertension" }, + { "name": "Stroke", "id": "stroke" }, + { "name": "Angina", "id": "angina" }, + { "name": "CHF", "id": "chf" } ] }, { - "name": "Musculoskeletal Pain" + "name": "Musculoskeletal Pain", + "id": "musculoskeletal" }, { "name": "Otitis", + "id": "otitis", "group-title": "", "group": [ - "Pneumonia", - "Sinusitis" + { "name": "Pneumonia", "id": "pneumonia" }, + { "name": "Sinusitis", "id": "sinusitis" } ], "radio-buttons": { "radio-buttons-title": "", "radio-buttons": [ - "Right", - "Left", - "Both" + { "name": "Right", "id": "right" }, + { "name": "Left", "id": "left" }, + { "name": "Both", "id": "both" } ] } }, { - "name": "URI" + "name": "URI", + "id": "uri" }, { "name": "Pregnancy", + "id": "pregnancy", "text-input-title": "Weeks", "text-input-type": "number" }, { "group-title": "Dermatological", + "id": "dermatological", "group": [ - "Atopic Derm", - "Fungal", - "Scabies", - "Impetigo", - "Tinea Capitus (kerion)" + { "name": "Atopic Derm", "id": "atopic-derm" }, + { "name": "Fungal", "id": "fungal" }, + { "name": "Scabies", "id": "scabies" }, + { "name": "Impetigo", "id": "Impetigo" }, + { "name": "Tinea Capitus (kerion)", "id": "tinea-capitus" } ] }, { - "name": "Possible STD" + "name": "Possible STD", + "id": "std" }, { - "name": "Possible TB" + "name": "Possible TB", + "id": "tb" }, { - "name": "Possible Parasites" + "name": "Possible Parasites", + "id": "parasites" }, { - "name": "UTI" + "name": "UTI", + "id": "uti" }, { "group-title": "Vaginal", + "id": "vaginal", "group": [ - "Vaginitis", - "Candidal", - "Trich", - "BV" + { "name": "Vaginitis", "id": "vaginitis" }, + { "name": "Candidal", "id": "candidal" }, + { "name": "Trich", "id": "trich" }, + { "name": "BV", "id": "bv" } ] }, { - "name": "Needs to see Dentist" + "name": "Needs to see Dentist", + "id": "dentist" }, { - "name": "Needs to see Eye Doctor" + "name": "Needs to see Eye Doctor", + "id": "eye-doctor" }, { - "name": "Surgical candidate" + "name": "Surgical candidate", + "id": "surgical-candidate" }, { - "text-input-title": "Other Diagnosis" + "text-input-title": "Other Diagnosis", + "id": "other-diagnosis" }, { - "text-input-title": "Diagnoses Comments" + "text-input-title": "Diagnoses Comments", + "id": "comments" } ] -} \ No newline at end of file +} diff --git a/pwa/src/components/DiagnosisForm.test.tsx b/pwa/src/components/DiagnosisForm.test.tsx index e69de29..424037c 100644 --- a/pwa/src/components/DiagnosisForm.test.tsx +++ b/pwa/src/components/DiagnosisForm.test.tsx @@ -0,0 +1,8 @@ +import React from "react"; +import { render, fireEvent } from "@testing-library/react"; +import DiagnosisForm from "./DiagnosisForm"; + +test("renders the form", async () => { + const dom = render(); + expect(dom.getByTestId("diagnosis-form-wrapper")).toBeTruthy(); + }); \ No newline at end of file diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index f707741..f86fab5 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -28,71 +28,64 @@ Diagnosis Fields are stored in DiagnosisFields.json in the format: } */ -var diagnosisFields = data.diagnoses +const diagnosisFields = data.diagnoses -export default function Form(): ReactElement { +export default function DiagnosisForm(): ReactElement { return ( -
- {/* 'Patient Diagnosis'}> */} - {diagnosisFields.map((field) => { - const formElements: ReactElement[] = [] +
+ {diagnosisFields.map((field) => { + const formElements: ReactElement[] = [] - if (field.name != null) { - formElements.push( - - {field.name} + if (field.name != null) { + formElements.push( + + {field.name} + , + ) + } + + if (field['text-input-title'] != null) { + formElements.push( + field['text-input-title']}> + + , + ) + } + + if (field.group != null) { + const groupElements: ReactElement[] = [] + + // add each group element to the internalElement arrat + field.group.forEach((ele: any) => { + groupElements.push( + + {ele.name} , ) - } + }) - if (field['text-input-title'] != null) { + // Render the entire list with the internal elements + if (field['group-title'] != null) { formElements.push( - field['text-input-title']} - > - + field['group-title']}> + {groupElements} , ) } - if (field.group != null) { - const groupElements: ReactElement[] = [] + formElements.push() + } - // add each group element to the internalElement arrat - field.group.forEach((ele) => { - groupElements.push( - - {ele} - ) + // TODO - Radio + if (field['radio-buttons'] != null) { + } - }) - - // Render the entire list with the internal elements - if(field["group-title"] != null){ - formElements.push( - field['group-title']} - >{groupElements} - - ) - } - - formElements.push() - } - - return <> {formElements} - })} - {/* */} + return <> {formElements} + })}
) } From ea313a1defb7e17a0a5ffa8d5ddd28463598e3f2 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Thu, 23 Apr 2020 12:50:25 -0500 Subject: [PATCH 10/49] implemented radio buttons, needs improvement --- pwa/src/components/DiagnosisFields.json | 28 +++++++++++++++++++++---- pwa/src/components/DiagnosisForm.tsx | 27 +++++++++++++++++------- 2 files changed, 44 insertions(+), 11 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index 67c6e59..4934d85 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -101,11 +101,31 @@ { "name": "Otitis", "id": "otitis", + "radio-buttons": { + "radio-buttons-title": "", + "radio-buttons": [ + { "name": "Right", "id": "right" }, + { "name": "Left", "id": "left" }, + { "name": "Both", "id": "both" } + ] + } + }, + { + "name": "Pneumonia", + "id": "pneumonia", + "radio-buttons": { + "radio-buttons-title": "", + "radio-buttons": [ + { "name": "Right", "id": "right" }, + { "name": "Left", "id": "left" }, + { "name": "Both", "id": "both" } + ] + } + }, + { + "name": "Sinusitis", + "id": "sinusitis", "group-title": "", - "group": [ - { "name": "Pneumonia", "id": "pneumonia" }, - { "name": "Sinusitis", "id": "sinusitis" } - ], "radio-buttons": { "radio-buttons-title": "", "radio-buttons": [ diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index f86fab5..9361d72 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -1,9 +1,10 @@ import React, { ReactElement, useState } from 'react' -import { List, Checkbox, TextareaItem, WhiteSpace } from 'antd-mobile' +import { List, Checkbox, TextareaItem, WhiteSpace, Radio } from 'antd-mobile' import '../scss/DiagnosisForm.scss' import * as data from './DiagnosisFields.json' const CheckboxItem = Checkbox.CheckboxItem +const RadioItem = Radio.RadioItem /* @@ -47,11 +48,7 @@ export default function DiagnosisForm(): ReactElement { if (field['text-input-title'] != null) { formElements.push( field['text-input-title']}> - + , ) } @@ -80,8 +77,24 @@ export default function DiagnosisForm(): ReactElement { formElements.push() } - // TODO - Radio + // TODO: radio buttons displayed this way are indented badly if (field['radio-buttons'] != null) { + { + field['radio-buttons']['radio-buttons'].map((i) => + formElements.push( + setSex(i.value)} + > + {i.name} + , + ), + ) + } } return <> {formElements} From 9f118c75eb1cf76c1a3749d228ebd100a4e9a315 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Thu, 23 Apr 2020 12:50:59 -0500 Subject: [PATCH 11/49] updating package-lock based on results of npm audit fix --- pwa/package-lock.json | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/pwa/package-lock.json b/pwa/package-lock.json index b930bb7..2b703c0 100644 --- a/pwa/package-lock.json +++ b/pwa/package-lock.json @@ -2198,9 +2198,9 @@ }, "dependencies": { "acorn": { - "version": "6.4.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.0.tgz", - "integrity": "sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw==" + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz", + "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==" } } }, @@ -7825,9 +7825,9 @@ }, "dependencies": { "acorn": { - "version": "6.4.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.0.tgz", - "integrity": "sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw==" + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz", + "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==" }, "jsdom": { "version": "14.1.0", @@ -8766,9 +8766,9 @@ }, "dependencies": { "acorn": { - "version": "5.7.3", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz", - "integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==" + "version": "5.7.4", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.4.tgz", + "integrity": "sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==" } } }, From 6a0714b01d81bacb30549318c6fa42e4b070b0ac Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Thu, 23 Apr 2020 13:26:30 -0500 Subject: [PATCH 12/49] removed option for radio buttons from the form, changed to checkboxes --- pwa/src/components/DiagnosisFields.json | 58 +++++++++---------------- pwa/src/components/DiagnosisForm.tsx | 20 --------- 2 files changed, 21 insertions(+), 57 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index 4934d85..73838e4 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -73,16 +73,12 @@ "id": "headache" }, { - "name": "Hernia", + "group-title": "Hernia", "id": "hernia", - "radio-buttons": { - "radio-buttons-title": "Hernia Type", - "radio-buttons": [ - { "name": "Inguinal", "id": "inguinal" }, - { "name": "Umbilical", "id": "umbilical" }, - { "name": "Both", "id": "both" } - ] - } + "group": [ + { "name": "Inguinal", "id": "inguinal" }, + { "name": "Umbilical", "id": "umbilical" } + ] }, { "id": "cardiovascular", @@ -99,41 +95,29 @@ "id": "musculoskeletal" }, { - "name": "Otitis", + "group-title": "Otitis", "id": "otitis", - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [ - { "name": "Right", "id": "right" }, - { "name": "Left", "id": "left" }, - { "name": "Both", "id": "both" } - ] - } + "group": [ + { "name": "Right", "id": "right" }, + { "name": "Left", "id": "left" } + ] }, { - "name": "Pneumonia", + "group-title": "Pneumonia", "id": "pneumonia", - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [ - { "name": "Right", "id": "right" }, - { "name": "Left", "id": "left" }, - { "name": "Both", "id": "both" } - ] - } + + "group": [ + { "name": "Right", "id": "right" }, + { "name": "Left", "id": "left" } + ] }, { - "name": "Sinusitis", "id": "sinusitis", - "group-title": "", - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [ - { "name": "Right", "id": "right" }, - { "name": "Left", "id": "left" }, - { "name": "Both", "id": "both" } - ] - } + "group-title": "Sinusitis", + "group": [ + { "name": "Right", "id": "right" }, + { "name": "Left", "id": "left" } + ] }, { "name": "URI", diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 9361d72..59650a6 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -77,26 +77,6 @@ export default function DiagnosisForm(): ReactElement { formElements.push() } - // TODO: radio buttons displayed this way are indented badly - if (field['radio-buttons'] != null) { - { - field['radio-buttons']['radio-buttons'].map((i) => - formElements.push( - setSex(i.value)} - > - {i.name} - , - ), - ) - } - } - return <> {formElements} })}
From 436949acf944ee74c37fe9104e2327de34b5a68e Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Fri, 24 Apr 2020 04:47:43 -0500 Subject: [PATCH 13/49] updated JSON format --- pwa/src/components/DiagnosisFields.json | 5 +++++ pwa/src/components/DiagnosisForm.tsx | 28 ++++++++++++------------- 2 files changed, 18 insertions(+), 15 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index 73838e4..8d2ee42 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -90,6 +90,11 @@ { "name": "CHF", "id": "chf" } ] }, + { + "name": "Healthy", + "id": "healthy" + }, + { "name": "Musculoskeletal Pain", "id": "musculoskeletal" diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 59650a6..5299f23 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -1,10 +1,9 @@ -import React, { ReactElement, useState } from 'react' -import { List, Checkbox, TextareaItem, WhiteSpace, Radio } from 'antd-mobile' +import React, { ReactElement } from 'react' +import { List, Checkbox, TextareaItem, WhiteSpace } from 'antd-mobile' import '../scss/DiagnosisForm.scss' import * as data from './DiagnosisFields.json' const CheckboxItem = Checkbox.CheckboxItem -const RadioItem = Radio.RadioItem /* @@ -13,18 +12,17 @@ Diagnosis Fields are stored in DiagnosisFields.json in the format: { "diagnoses" : [ { - "name":"", - "group-title":"", - "group":[], - "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - - }, - "text-input-title":"" - } + "name": "Name", + "id": "id", + "text-input-title": "Title", + "text-input-type": "type" (i.e. number) + "group-title": "Group Title", + "group": [ + { "name": "Name1", "id": "id1" }, + { "name": "Name2", "id": "id2" } + ] + }, + {...} ] } */ From d012d1626011083ccd22b9b60b7d694e7198c822 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Fri, 24 Apr 2020 04:56:41 -0500 Subject: [PATCH 14/49] test skeleton --- pwa/src/components/DiagnosisForm.test.tsx | 56 ++++++++++++++++++++--- 1 file changed, 49 insertions(+), 7 deletions(-) diff --git a/pwa/src/components/DiagnosisForm.test.tsx b/pwa/src/components/DiagnosisForm.test.tsx index 424037c..ec05c54 100644 --- a/pwa/src/components/DiagnosisForm.test.tsx +++ b/pwa/src/components/DiagnosisForm.test.tsx @@ -1,8 +1,50 @@ -import React from "react"; -import { render, fireEvent } from "@testing-library/react"; -import DiagnosisForm from "./DiagnosisForm"; +import React from 'react' +import { render, fireEvent } from '@testing-library/react' +import DiagnosisForm from './DiagnosisForm' -test("renders the form", async () => { - const dom = render(); - expect(dom.getByTestId("diagnosis-form-wrapper")).toBeTruthy(); - }); \ No newline at end of file +/* + +Diagnosis Fields are stored in DiagnosisFields.json in the format: + +{ + "diagnoses" : [ + { + "name": "Name", + "id": "id", + "text-input-title": "Title", + "text-input-type": "type" (i.e. number) + "group-title": "Group Title", + "group": [ + { "name": "Name1", "id": "id1" }, + { "name": "Name2", "id": "id2" } + ] + }, + {...} + ] +} +*/ + +test('renders the form', async () => { + const dom = render() + expect(dom.getByTestId('diagnosis-form-wrapper')).toBeTruthy() +}) + +test('renders each diagnoses.name data field as a checkbox', () => {}) + +test(' each diagnoses.name data is able to be checked/unchecked', () => {}) + +test('finds and element with each id in the DOM', () => {}) + +test('renders each diagnoses.text-input-title data field as a text entry field', () => {}) + +test('each diagnoses.text-input-title data field is able to recieve text input', () => {}) + +test('renders each diagnoses.group-title data field as a header', () => {}) + +test('renders each diagnoses.group entry in the same list element', () => {}) + +test('renders each diagnoses.[el].name data field as a checkbox', () => {}) + +test(' each diagnoses.[el].name data is able to be checked/unchecked', () => {}) + +test('finds and element with each group.[el].id in the DOM', () => {}) From d6cf17e46244718e60f246b7cc7c3ae97ac09dde Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Fri, 24 Apr 2020 06:10:19 -0500 Subject: [PATCH 15/49] added tests --- pwa/src/components/DiagnosisForm.test.tsx | 31 ++++++++++++++++++++--- pwa/src/components/DiagnosisForm.tsx | 23 ++++++++++++++--- 2 files changed, 47 insertions(+), 7 deletions(-) diff --git a/pwa/src/components/DiagnosisForm.test.tsx b/pwa/src/components/DiagnosisForm.test.tsx index ec05c54..c1696ed 100644 --- a/pwa/src/components/DiagnosisForm.test.tsx +++ b/pwa/src/components/DiagnosisForm.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { render, fireEvent } from '@testing-library/react' +import { render, fireEvent, getByTestId } from '@testing-library/react' import DiagnosisForm from './DiagnosisForm' /* @@ -24,14 +24,39 @@ Diagnosis Fields are stored in DiagnosisFields.json in the format: } */ +import * as data from './DiagnosisFields.json' +const diagnosisFields = data.diagnoses + test('renders the form', async () => { const dom = render() expect(dom.getByTestId('diagnosis-form-wrapper')).toBeTruthy() }) -test('renders each diagnoses.name data field as a checkbox', () => {}) +test('renders each diagnoses.name data field', () => { + const { getByText } = render() -test(' each diagnoses.name data is able to be checked/unchecked', () => {}) + diagnosisFields.forEach((diagnosis) => { + if (diagnosis.name != null) { + const re = new RegExp(diagnosis.name, 'gi') + const field = getByText(re) + expect(field).toBeInTheDocument() + } + }) +}) + +test(' each diagnoses.name has a corresponding checkbox and is able to be checked/unchecked', () => { + const { getByText, getByTestId } = render() + + diagnosisFields.forEach((diagnosis) => { + if (diagnosis.name != null) { + const re = new RegExp(diagnosis.id, 'gi') + const field = getByTestId(re) + expect(field).toHaveClass('am-checkbox-item') + + // TODO: ensure it can be checked /unchecked + } + }) +}) test('finds and element with each id in the DOM', () => {}) diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 5299f23..db8babb 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -37,7 +37,11 @@ export default function DiagnosisForm(): ReactElement { if (field.name != null) { formElements.push( - + {field.name} , ) @@ -46,7 +50,11 @@ export default function DiagnosisForm(): ReactElement { if (field['text-input-title'] != null) { formElements.push( field['text-input-title']}> - + , ) } @@ -57,7 +65,11 @@ export default function DiagnosisForm(): ReactElement { // add each group element to the internalElement arrat field.group.forEach((ele: any) => { groupElements.push( - + {ele.name} , ) @@ -66,7 +78,10 @@ export default function DiagnosisForm(): ReactElement { // Render the entire list with the internal elements if (field['group-title'] != null) { formElements.push( - field['group-title']}> + field['group-title']} + data-testid={field.id} + > {groupElements} , ) From e17fa713a6abcb9069f6c725a49377c92d70ef63 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Fri, 24 Apr 2020 11:46:02 -0500 Subject: [PATCH 16/49] more tests --- pwa/src/components/DiagnosisFields.json | 5 +++-- pwa/src/components/DiagnosisForm.test.tsx | 16 +++++++++++--- pwa/src/components/DiagnosisForm.tsx | 26 +++++++++++++++++------ 3 files changed, 35 insertions(+), 12 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index 8d2ee42..e6d16b1 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -132,6 +132,7 @@ "name": "Pregnancy", "id": "pregnancy", "text-input-title": "Weeks", + "text-input-id": "pregnancy-weeks", "text-input-type": "number" }, { @@ -185,11 +186,11 @@ }, { "text-input-title": "Other Diagnosis", - "id": "other-diagnosis" + "text-input-id": "other-diagnosis" }, { "text-input-title": "Diagnoses Comments", - "id": "comments" + "text-input-id": "comments" } ] } diff --git a/pwa/src/components/DiagnosisForm.test.tsx b/pwa/src/components/DiagnosisForm.test.tsx index c1696ed..4a53cde 100644 --- a/pwa/src/components/DiagnosisForm.test.tsx +++ b/pwa/src/components/DiagnosisForm.test.tsx @@ -45,7 +45,7 @@ test('renders each diagnoses.name data field', () => { }) test(' each diagnoses.name has a corresponding checkbox and is able to be checked/unchecked', () => { - const { getByText, getByTestId } = render() + const { getByTestId } = render() diagnosisFields.forEach((diagnosis) => { if (diagnosis.name != null) { @@ -58,9 +58,19 @@ test(' each diagnoses.name has a corresponding checkbox and is able to be checke }) }) -test('finds and element with each id in the DOM', () => {}) +test('renders each diagnoses.text-input-title data field as a text entry field', () => { + const { getByTestId } = render() -test('renders each diagnoses.text-input-title data field as a text entry field', () => {}) + diagnosisFields.forEach((diagnosis) => { + if (diagnosis['text-input-title'] != null) { + const re = new RegExp(diagnosis['text-input-id'], 'gi') + const field = getByTestId(re) + expect(field).toBeInTheDocument() + // TODO: + //expect(field).toHaveClass('textarea') + } + }) +}) test('each diagnoses.text-input-title data field is able to recieve text input', () => {}) diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index db8babb..6a22e68 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -1,5 +1,5 @@ import React, { ReactElement } from 'react' -import { List, Checkbox, TextareaItem, WhiteSpace } from 'antd-mobile' +import { List, Checkbox, InputItem, WhiteSpace } from 'antd-mobile' import '../scss/DiagnosisForm.scss' import * as data from './DiagnosisFields.json' @@ -47,13 +47,25 @@ export default function DiagnosisForm(): ReactElement { ) } - if (field['text-input-title'] != null) { + if ( + field['text-input-title'] != null && + field['text-input-id'] != null + ) { formElements.push( field['text-input-title']}> - , ) @@ -62,7 +74,7 @@ export default function DiagnosisForm(): ReactElement { if (field.group != null) { const groupElements: ReactElement[] = [] - // add each group element to the internalElement arrat + // add each group element to the internalElement array field.group.forEach((ele: any) => { groupElements.push( Date: Fri, 24 Apr 2020 15:21:49 -0500 Subject: [PATCH 17/49] trying to click a checkbox --- pwa/src/components/DiagnosisForm.test.tsx | 42 +++++++++++++++++------ 1 file changed, 32 insertions(+), 10 deletions(-) diff --git a/pwa/src/components/DiagnosisForm.test.tsx b/pwa/src/components/DiagnosisForm.test.tsx index 4a53cde..8aa5011 100644 --- a/pwa/src/components/DiagnosisForm.test.tsx +++ b/pwa/src/components/DiagnosisForm.test.tsx @@ -1,5 +1,10 @@ import React from 'react' -import { render, fireEvent, getByTestId } from '@testing-library/react' +import { + render, + fireEvent, + getByTestId, + queryByTestId, +} from '@testing-library/react' import DiagnosisForm from './DiagnosisForm' /* @@ -45,15 +50,32 @@ test('renders each diagnoses.name data field', () => { }) test(' each diagnoses.name has a corresponding checkbox and is able to be checked/unchecked', () => { - const { getByTestId } = render() + const { getByTestId, getByText } = render() diagnosisFields.forEach((diagnosis) => { - if (diagnosis.name != null) { + if (diagnosis.name != null && diagnosis.id != null) { + // const dom = render() const re = new RegExp(diagnosis.id, 'gi') - const field = getByTestId(re) - expect(field).toHaveClass('am-checkbox-item') + // const checkboxItem = dom.queryByTestId(re) + const checkboxItem = getByTestId(re) + expect(checkboxItem).toHaveClass('am-checkbox-item') // TODO: ensure it can be checked /unchecked + // TOTO / help: not sure what to element to click in order to actually trigger the checkbox being checked + // This is very similar to the radio button tests in PatientInfoForm + + const checkBox = checkboxItem.getElementsByTagName('span')[0] + expect(checkBox).not.toHaveClass('am-checkbox-checked') + + // none of these seem to make the checkbox be checked + fireEvent.click(checkboxItem) + fireEvent.click(checkBox) + const checkBoxInner = checkboxItem.getElementsByClassName( + 'am-checkbox-inner', + )[0] + fireEvent.click(checkBoxInner) + fireEvent.click(getByText(diagnosis.name)) + expect(checkBox).toHaveClass('am-checkbox-checked') } }) }) @@ -62,18 +84,18 @@ test('renders each diagnoses.text-input-title data field as a text entry field', const { getByTestId } = render() diagnosisFields.forEach((diagnosis) => { - if (diagnosis['text-input-title'] != null) { + if ( + diagnosis['text-input-title'] != null && + diagnosis['text-input-title'] != null + ) { const re = new RegExp(diagnosis['text-input-id'], 'gi') const field = getByTestId(re) expect(field).toBeInTheDocument() - // TODO: - //expect(field).toHaveClass('textarea') + // TODO: ensure that this is a text field } }) }) -test('each diagnoses.text-input-title data field is able to recieve text input', () => {}) - test('renders each diagnoses.group-title data field as a header', () => {}) test('renders each diagnoses.group entry in the same list element', () => {}) From dc761ae9ce5625c1ac9f67381ce061c8fecd8234 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Fri, 24 Apr 2020 15:51:41 -0500 Subject: [PATCH 18/49] more tests, some TODOs --- pwa/src/components/DiagnosisFields.json | 12 ++-- pwa/src/components/DiagnosisForm.test.tsx | 69 ++++++++++++++--------- 2 files changed, 47 insertions(+), 34 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index e6d16b1..6c474d2 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -103,8 +103,8 @@ "group-title": "Otitis", "id": "otitis", "group": [ - { "name": "Right", "id": "right" }, - { "name": "Left", "id": "left" } + { "name": "Right", "id": "otitis-right" }, + { "name": "Left", "id": "otitis-left" } ] }, { @@ -112,16 +112,16 @@ "id": "pneumonia", "group": [ - { "name": "Right", "id": "right" }, - { "name": "Left", "id": "left" } + { "name": "Right", "id": "pneumonia-right" }, + { "name": "Left", "id": "pneumonia-left" } ] }, { "id": "sinusitis", "group-title": "Sinusitis", "group": [ - { "name": "Right", "id": "right" }, - { "name": "Left", "id": "left" } + { "name": "Right", "id": "sinusitis-right" }, + { "name": "Left", "id": "sinusitis-left" } ] }, { diff --git a/pwa/src/components/DiagnosisForm.test.tsx b/pwa/src/components/DiagnosisForm.test.tsx index 8aa5011..ce15a9d 100644 --- a/pwa/src/components/DiagnosisForm.test.tsx +++ b/pwa/src/components/DiagnosisForm.test.tsx @@ -1,10 +1,5 @@ import React from 'react' -import { - render, - fireEvent, - getByTestId, - queryByTestId, -} from '@testing-library/react' +import { render, fireEvent } from '@testing-library/react' import DiagnosisForm from './DiagnosisForm' /* @@ -51,31 +46,27 @@ test('renders each diagnoses.name data field', () => { test(' each diagnoses.name has a corresponding checkbox and is able to be checked/unchecked', () => { const { getByTestId, getByText } = render() - diagnosisFields.forEach((diagnosis) => { if (diagnosis.name != null && diagnosis.id != null) { - // const dom = render() const re = new RegExp(diagnosis.id, 'gi') - // const checkboxItem = dom.queryByTestId(re) const checkboxItem = getByTestId(re) expect(checkboxItem).toHaveClass('am-checkbox-item') // TODO: ensure it can be checked /unchecked - // TOTO / help: not sure what to element to click in order to actually trigger the checkbox being checked + // TODO: (help) not sure what to element to click in order to actually trigger the checkbox being checked // This is very similar to the radio button tests in PatientInfoForm - const checkBox = checkboxItem.getElementsByTagName('span')[0] - expect(checkBox).not.toHaveClass('am-checkbox-checked') - - // none of these seem to make the checkbox be checked - fireEvent.click(checkboxItem) - fireEvent.click(checkBox) - const checkBoxInner = checkboxItem.getElementsByClassName( - 'am-checkbox-inner', - )[0] - fireEvent.click(checkBoxInner) - fireEvent.click(getByText(diagnosis.name)) - expect(checkBox).toHaveClass('am-checkbox-checked') + // const checkBox = checkboxItem.getElementsByTagName('span')[0] + // expect(checkBox).not.toHaveClass('am-checkbox-checked') + // // none of these seem to make the checkbox be checked + // fireEvent.click(checkboxItem) + // fireEvent.click(checkBox) + // const checkBoxInner = checkboxItem.getElementsByClassName( + // 'am-checkbox-inner', + // )[0] + // fireEvent.click(checkBoxInner) + // fireEvent.click(getByText(diagnosis.name)) + // expect(checkBox).toHaveClass('am-checkbox-checked') } }) }) @@ -96,12 +87,34 @@ test('renders each diagnoses.text-input-title data field as a text entry field', }) }) -test('renders each diagnoses.group-title data field as a header', () => {}) +test('renders each diagnoses.group-title data field as a header', () => { + const { getByText } = render() + diagnosisFields.forEach((diagnosis) => { + if (diagnosis['group-title'] != null && diagnosis.group != null) { + const re = new RegExp(`\^${diagnosis['group-title']}\$`, 'gi') + const field = getByText(re) + expect(field).toBeInTheDocument() + expect(field).toHaveClass('am-list-header') + } + }) +}) -test('renders each diagnoses.group entry in the same list element', () => {}) +test('renders each diagnoses.group entry in the same list element', () => { + // TODO +}) -test('renders each diagnoses.[el].name data field as a checkbox', () => {}) +test('renders each diagnoses.[el] as a checkbox', () => { + const { getByTestId } = render() + diagnosisFields.forEach((diagnosis) => { + if (diagnosis.group != null) { + diagnosis.group.forEach((groupElement) => { + const re = new RegExp(groupElement.id, 'gi') + const field = getByTestId(re) + expect(field).toBeInTheDocument() + expect(field).toHaveClass('am-checkbox-item') -test(' each diagnoses.[el].name data is able to be checked/unchecked', () => {}) - -test('finds and element with each group.[el].id in the DOM', () => {}) + // TODO: ensure it can be checked / unchecked + }) + } + }) +}) From 8ac543bc761c5436fac65986a750067c71acee35 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Fri, 24 Apr 2020 19:43:57 -0500 Subject: [PATCH 19/49] fixed checkbox tests --- pwa/src/components/DiagnosisForm.test.tsx | 27 +++++++++-------------- pwa/src/components/DiagnosisForm.tsx | 1 + 2 files changed, 12 insertions(+), 16 deletions(-) diff --git a/pwa/src/components/DiagnosisForm.test.tsx b/pwa/src/components/DiagnosisForm.test.tsx index ce15a9d..2cd9906 100644 --- a/pwa/src/components/DiagnosisForm.test.tsx +++ b/pwa/src/components/DiagnosisForm.test.tsx @@ -52,21 +52,13 @@ test(' each diagnoses.name has a corresponding checkbox and is able to be checke const checkboxItem = getByTestId(re) expect(checkboxItem).toHaveClass('am-checkbox-item') - // TODO: ensure it can be checked /unchecked - // TODO: (help) not sure what to element to click in order to actually trigger the checkbox being checked - // This is very similar to the radio button tests in PatientInfoForm - - // const checkBox = checkboxItem.getElementsByTagName('span')[0] - // expect(checkBox).not.toHaveClass('am-checkbox-checked') - // // none of these seem to make the checkbox be checked - // fireEvent.click(checkboxItem) - // fireEvent.click(checkBox) - // const checkBoxInner = checkboxItem.getElementsByClassName( - // 'am-checkbox-inner', - // )[0] - // fireEvent.click(checkBoxInner) - // fireEvent.click(getByText(diagnosis.name)) - // expect(checkBox).toHaveClass('am-checkbox-checked') + const checkBox = checkboxItem.getElementsByTagName('span')[0] + expect(checkBox).not.toHaveClass('am-checkbox-checked') + const checkBoxInput = checkboxItem.getElementsByClassName( + 'am-checkbox-input', + )[0] + fireEvent.click(checkBoxInput) + expect(checkBox).toHaveClass('am-checkbox-checked') } }) }) @@ -100,7 +92,10 @@ test('renders each diagnoses.group-title data field as a header', () => { }) test('renders each diagnoses.group entry in the same list element', () => { - // TODO + // TODO: + // get the list element that contains one of the group id's + // get the elements contained in the list + // ensure that each of the group elements is in the list }) test('renders each diagnoses.[el] as a checkbox', () => { diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 6a22e68..8552589 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -56,6 +56,7 @@ export default function DiagnosisForm(): ReactElement { Date: Fri, 24 Apr 2020 21:01:47 -0500 Subject: [PATCH 20/49] removed TODOs --- pwa/src/components/DiagnosisForm.test.tsx | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/pwa/src/components/DiagnosisForm.test.tsx b/pwa/src/components/DiagnosisForm.test.tsx index 2cd9906..b77c03f 100644 --- a/pwa/src/components/DiagnosisForm.test.tsx +++ b/pwa/src/components/DiagnosisForm.test.tsx @@ -74,7 +74,7 @@ test('renders each diagnoses.text-input-title data field as a text entry field', const re = new RegExp(diagnosis['text-input-id'], 'gi') const field = getByTestId(re) expect(field).toBeInTheDocument() - // TODO: ensure that this is a text field + expect(field).toHaveAttribute('type', 'text') } }) }) @@ -98,17 +98,25 @@ test('renders each diagnoses.group entry in the same list element', () => { // ensure that each of the group elements is in the list }) -test('renders each diagnoses.[el] as a checkbox', () => { +test('renders each diagnoses.[el] as a checkbox that can be checked/unchecked', () => { const { getByTestId } = render() diagnosisFields.forEach((diagnosis) => { if (diagnosis.group != null) { diagnosis.group.forEach((groupElement) => { const re = new RegExp(groupElement.id, 'gi') - const field = getByTestId(re) - expect(field).toBeInTheDocument() - expect(field).toHaveClass('am-checkbox-item') + const groupCheckboxItem = getByTestId(re) + expect(groupCheckboxItem).toBeInTheDocument() + expect(groupCheckboxItem).toHaveClass('am-checkbox-item') - // TODO: ensure it can be checked / unchecked + const checkBox = groupCheckboxItem.getElementsByTagName( + 'span', + )[0] + expect(checkBox).not.toHaveClass('am-checkbox-checked') + const checkBoxInput = groupCheckboxItem.getElementsByClassName( + 'am-checkbox-input', + )[0] + fireEvent.click(checkBoxInput) + expect(checkBox).toHaveClass('am-checkbox-checked') }) } }) From b9f2da6c3012fc66976f82f8ab4cfc31215366b7 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Fri, 24 Apr 2020 21:18:12 -0500 Subject: [PATCH 21/49] finished testing --- pwa/src/components/DiagnosisFields.json | 2 +- pwa/src/components/DiagnosisForm.test.tsx | 22 ++++++++++++++----- pwa/src/components/DiagnosisForm.tsx | 26 ++++++++++++----------- 3 files changed, 32 insertions(+), 18 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index 6c474d2..65f0755 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -25,6 +25,7 @@ "id": "diabetes" }, { + "id": "eye", "group-title": "Eye", "group": [ { @@ -110,7 +111,6 @@ { "group-title": "Pneumonia", "id": "pneumonia", - "group": [ { "name": "Right", "id": "pneumonia-right" }, { "name": "Left", "id": "pneumonia-left" } diff --git a/pwa/src/components/DiagnosisForm.test.tsx b/pwa/src/components/DiagnosisForm.test.tsx index b77c03f..ba30fa6 100644 --- a/pwa/src/components/DiagnosisForm.test.tsx +++ b/pwa/src/components/DiagnosisForm.test.tsx @@ -45,7 +45,7 @@ test('renders each diagnoses.name data field', () => { }) test(' each diagnoses.name has a corresponding checkbox and is able to be checked/unchecked', () => { - const { getByTestId, getByText } = render() + const { getByTestId } = render() diagnosisFields.forEach((diagnosis) => { if (diagnosis.name != null && diagnosis.id != null) { const re = new RegExp(diagnosis.id, 'gi') @@ -92,10 +92,22 @@ test('renders each diagnoses.group-title data field as a header', () => { }) test('renders each diagnoses.group entry in the same list element', () => { - // TODO: - // get the list element that contains one of the group id's - // get the elements contained in the list - // ensure that each of the group elements is in the list + const { getByTestId } = render() + diagnosisFields.forEach((diagnosis) => { + if (diagnosis.group != null && diagnosis.id != null) { + // get the list by diagnosis.id + const re = new RegExp(`\^${diagnosis.id}\$`, 'gi') + const field = getByTestId(re) + expect(field).toBeInTheDocument() + expect(field).toHaveClass('am-list') + + // For each element in the group, ensure it is contained in the list + diagnosis.group.forEach((groupElement) => { + const el = getByTestId(groupElement.id) + expect(field).toContainElement(el) + }) + } + }) }) test('renders each diagnoses.[el] as a checkbox that can be checked/unchecked', () => { diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 8552589..7a35d57 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -58,12 +58,12 @@ export default function DiagnosisForm(): ReactElement { data-testid={field['text-input-id']} key={field['text-input-id']} type={ - field['text-input-type'] == 'number' + field['text-input-type'] === 'number' ? 'number' : 'text' } maxLength={ - field['text-input-id'] == 'pregnancy-weeks' + field['text-input-id'] === 'pregnancy-weeks' ? 2 : null } @@ -77,19 +77,21 @@ export default function DiagnosisForm(): ReactElement { // add each group element to the internalElement array field.group.forEach((ele: any) => { - groupElements.push( - - {ele.name} - , - ) + if (ele.id != null && ele.name != null) { + groupElements.push( + + {ele.name} + , + ) + } }) // Render the entire list with the internal elements - if (field['group-title'] != null) { + if (field['group-title'] != null && field.id !== null) { formElements.push( field['group-title']} From 2b1ff92b86c85edcb6dc5eda12ee86c25c3e7549 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Tue, 21 Apr 2020 21:08:36 -0500 Subject: [PATCH 22/49] init --- pwa/src/App.tsx | 10 ++++++++++ pwa/src/components/DiagnosisForm.test.tsx | 0 pwa/src/components/DiagnosisForm.tsx | 10 ++++++++++ pwa/src/scss/DiagnosisForm.scss | 0 4 files changed, 20 insertions(+) create mode 100644 pwa/src/components/DiagnosisForm.test.tsx create mode 100644 pwa/src/components/DiagnosisForm.tsx create mode 100644 pwa/src/scss/DiagnosisForm.scss diff --git a/pwa/src/App.tsx b/pwa/src/App.tsx index ac918e3..2d5ef4e 100644 --- a/pwa/src/App.tsx +++ b/pwa/src/App.tsx @@ -5,6 +5,7 @@ import Login from './components/Login' import LandingPage from './components/LandingPage' import Wrapper from './Wrapper' import PatientInfoForm from './components/PatientInfoForm' +import DiagnosisForm from './components/DiagnosisForm' import './scss/App.scss' import './antd-mobile.css' @@ -28,6 +29,15 @@ const App: React.FunctionComponent = () => { + + + + + diff --git a/pwa/src/components/DiagnosisForm.test.tsx b/pwa/src/components/DiagnosisForm.test.tsx new file mode 100644 index 0000000..e69de29 diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx new file mode 100644 index 0000000..b63f092 --- /dev/null +++ b/pwa/src/components/DiagnosisForm.tsx @@ -0,0 +1,10 @@ +import React, { ReactElement, useState } from "react"; +import {} from "antd-mobile"; +import "../scss/DiagnosisForm.scss"; + +export default function Form(): ReactElement { + return ( + <> + + ) +} \ No newline at end of file diff --git a/pwa/src/scss/DiagnosisForm.scss b/pwa/src/scss/DiagnosisForm.scss new file mode 100644 index 0000000..e69de29 From 777126c1c7df4f03c26925ffbbb8ebb883a5613c Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Tue, 21 Apr 2020 21:52:13 -0500 Subject: [PATCH 23/49] created json format for form fields --- pwa/src/components/DiagnosisFields.json | 414 ++++++++++++++++++++++++ pwa/src/components/DiagnosisForm.tsx | 25 ++ 2 files changed, 439 insertions(+) create mode 100644 pwa/src/components/DiagnosisFields.json diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json new file mode 100644 index 0000000..38437d8 --- /dev/null +++ b/pwa/src/components/DiagnosisFields.json @@ -0,0 +1,414 @@ +{ + "diagnoses" : [ + { + "name":"Asthma", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Allergies", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Anemia", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Malnutrition", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Depression", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Diabetes", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"", + "group-title":"Eye", + "group":[ + "Ptergium", + "Cataract", + "Dry Eye", + "Conjuntivitis" + ], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Fever", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Possible Malaria", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Filariasis", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"", + "group-title":"Intestinal", + "group":[ + "Gastritis", + "GERD", + "Gastroenteritis", + "Dysentery", + "Possible Cholera" + ], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Headache", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Hernia", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"Hernia Type", + "radio-buttons":[ + "Inguinal", + "Umbilical", + "Both" + ] + + }, + "text-input-title":"" + }, + { + "name":"", + "group-title":"Cardiovascular", + "group":[ + "Hypertension", + "Stroke", + "Angina", + "CHF" + ], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Musculoskeletal Pain", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Otitis", + "group-title":"", + "group":[ + "Pneumonia", + "Sinusitis" + ], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + "Right", + "Left", + "Both" + ] + }, + "text-input-title":"" + }, + { + "name":"URI", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + }, + "text-input-title":"" + }, + { + "name":"Pregnancy", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"Weeks", + "text-input-type":"number" + }, + { + "name":"", + "group-title":"Dermatological", + "group":[ + "Atopic Derm", + "Fungal", + "Scabies", + "Impetigo", + "Tinea Capitus (kerion)" + ], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Possible STD", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Possible TB", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Possible Parasites", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"UTI", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Vaginal", + "group-title":"", + "group":[ + "Vaginitis", + "Candidal", + "Trich", + "BV" + ], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Needs to see Dentist", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Needs to see Eye Doctor", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"Surgical candidate", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + }, + { + "name":"", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"Other Diagnosis" + }, + { + "name":"", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"Diagnoses Comments" + } + ] +} \ No newline at end of file diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index b63f092..81c65c9 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -2,9 +2,34 @@ import React, { ReactElement, useState } from "react"; import {} from "antd-mobile"; import "../scss/DiagnosisForm.scss"; +/* + +Diagnosis Fields are stored in DiagnosisFields.json in the format: + +{ + "diagnoses" : [ + { + "name":"", + "group-title":"", + "group":[], + "radio-buttons": { + "radio-buttons-title":"", + "radio-buttons":[ + + ] + + }, + "text-input-title":"" + } + ] +} +*/ + export default function Form(): ReactElement { + return ( <> + ) } \ No newline at end of file From a83c589c4ad33082542d94f051c00f847c0bda3f Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Wed, 22 Apr 2020 11:13:36 -0500 Subject: [PATCH 24/49] populated form with diagnosis name --- pwa/src/components/DiagnosisFields.json | 433 ++++++++++-------------- pwa/src/components/DiagnosisForm.tsx | 36 +- 2 files changed, 208 insertions(+), 261 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index 38437d8..e0bbaa2 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -1,144 +1,114 @@ { - "diagnoses" : [ + "diagnoses": [ { - "name":"Asthma", - "group-title":"", - "group":[], + "name": "Asthma", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Allergies", - "group-title":"", - "group":[], + "name": "Allergies", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Anemia", - "group-title":"", - "group":[], + "name": "Anemia", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Malnutrition", - "group-title":"", - "group":[], + "name": "Malnutrition", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Depression", - "group-title":"", - "group":[], + "name": "Depression", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Diabetes", - "group-title":"", - "group":[], + "name": "Diabetes", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"", - "group-title":"Eye", - "group":[ + "name": "", + "group-title": "Eye", + "group": [ "Ptergium", "Cataract", "Dry Eye", "Conjuntivitis" ], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Fever", - "group-title":"", - "group":[], + "name": "Fever", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Possible Malaria", - "group-title":"", - "group":[], + "name": "Possible Malaria", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Filariasis", - "group-title":"", - "group":[], + "name": "Filariasis", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"", - "group-title":"Intestinal", - "group":[ + "name": "", + "group-title": "Intestinal", + "group": [ "Gastritis", "GERD", "Gastroenteritis", @@ -146,120 +116,102 @@ "Possible Cholera" ], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Headache", - "group-title":"", - "group":[], + "name": "Headache", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Hernia", - "group-title":"", - "group":[], + "name": "Hernia", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"Hernia Type", - "radio-buttons":[ + "radio-buttons-title": "Hernia Type", + "radio-buttons": [ "Inguinal", "Umbilical", "Both" ] - }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"", - "group-title":"Cardiovascular", - "group":[ + "name": "", + "group-title": "Cardiovascular", + "group": [ "Hypertension", "Stroke", "Angina", "CHF" ], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Musculoskeletal Pain", - "group-title":"", - "group":[], + "name": "Musculoskeletal Pain", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Otitis", - "group-title":"", - "group":[ + "name": "Otitis", + "group-title": "", + "group": [ "Pneumonia", "Sinusitis" ], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ + "radio-buttons-title": "", + "radio-buttons": [ "Right", "Left", "Both" ] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"URI", - "group-title":"", - "group":[], + "name": "URI", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Pregnancy", - "group-title":"", - "group":[], + "name": "Pregnancy", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"Weeks", - "text-input-type":"number" + "text-input-title": "Weeks", + "text-input-type": "number" }, { - "name":"", - "group-title":"Dermatological", - "group":[ + "name": "", + "group-title": "Dermatological", + "group": [ "Atopic Derm", "Fungal", "Scabies", @@ -267,148 +219,115 @@ "Tinea Capitus (kerion)" ], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Possible STD", - "group-title":"", - "group":[], + "name": "Possible STD", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Possible TB", - "group-title":"", - "group":[], + "name": "Possible TB", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Possible Parasites", - "group-title":"", - "group":[], + "name": "Possible Parasites", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"UTI", - "group-title":"", - "group":[], + "name": "UTI", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Vaginal", - "group-title":"", - "group":[ + "name": "Vaginal", + "group-title": "", + "group": [ "Vaginitis", "Candidal", "Trich", "BV" ], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Needs to see Dentist", - "group-title":"", - "group":[], + "name": "Needs to see Dentist", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Needs to see Eye Doctor", - "group-title":"", - "group":[], + "name": "Needs to see Eye Doctor", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"Surgical candidate", - "group-title":"", - "group":[], + "name": "Surgical candidate", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"" + "text-input-title": "" }, { - "name":"", - "group-title":"", - "group":[], + "name": "", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"Other Diagnosis" + "text-input-title": "Other Diagnosis" }, { - "name":"", - "group-title":"", - "group":[], + "name": "", + "group-title": "", + "group": [], "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - + "radio-buttons-title": "", + "radio-buttons": [] }, - "text-input-title":"Diagnoses Comments" + "text-input-title": "Diagnoses Comments" } ] } \ No newline at end of file diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 81c65c9..84cda51 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -1,6 +1,10 @@ import React, { ReactElement, useState } from "react"; -import {} from "antd-mobile"; +import { List, Checkbox, Flex } from 'antd-mobile'; import "../scss/DiagnosisForm.scss"; +import * as data from './DiagnosisFields.json'; + +const CheckboxItem = Checkbox.CheckboxItem; +const AgreeItem = Checkbox.AgreeItem; /* @@ -24,12 +28,36 @@ Diagnosis Fields are stored in DiagnosisFields.json in the format: ] } */ +// var diagnosisFields = require('./DiagnosisFields.json'); +// import * as data from './DiagnosisFields.json'; + +var diagnosisFields = data.diagnoses; + +var fieldComponents = []; + +function createFields() { + diagnosisFields.forEach((diagnosisField) => { + // Create the corresponding element and push it to the array of fields + }); +} export default function Form(): ReactElement { return ( - <> +
- + 'CheckboxItem demo'}> + {diagnosisFields.map((i) => ( + // TOOD: how do I add conditionals here? + + {i.name} + + ))} + +
) -} \ No newline at end of file +} From ab1d42f30d9839df94df034618f8ed54af3d1730 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Wed, 22 Apr 2020 11:50:10 -0500 Subject: [PATCH 25/49] added conditional rendering --- pwa/src/components/DiagnosisFields.json | 12 +++++------ pwa/src/components/DiagnosisForm.tsx | 28 +++++++++---------------- 2 files changed, 16 insertions(+), 24 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index e0bbaa2..f48c918 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -61,7 +61,7 @@ "text-input-title": "" }, { - "name": "", + "group-title": "Eye", "group": [ "Ptergium", @@ -106,7 +106,7 @@ "text-input-title": "" }, { - "name": "", + "group-title": "Intestinal", "group": [ "Gastritis", @@ -146,7 +146,7 @@ "text-input-title": "" }, { - "name": "", + "group-title": "Cardiovascular", "group": [ "Hypertension", @@ -209,7 +209,7 @@ "text-input-type": "number" }, { - "name": "", + "group-title": "Dermatological", "group": [ "Atopic Derm", @@ -310,7 +310,7 @@ "text-input-title": "" }, { - "name": "", + "group-title": "", "group": [], "radio-buttons": { @@ -320,7 +320,7 @@ "text-input-title": "Other Diagnosis" }, { - "name": "", + "group-title": "", "group": [], "radio-buttons": { diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 84cda51..23d27d9 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -4,7 +4,6 @@ import "../scss/DiagnosisForm.scss"; import * as data from './DiagnosisFields.json'; const CheckboxItem = Checkbox.CheckboxItem; -const AgreeItem = Checkbox.AgreeItem; /* @@ -28,19 +27,9 @@ Diagnosis Fields are stored in DiagnosisFields.json in the format: ] } */ -// var diagnosisFields = require('./DiagnosisFields.json'); -// import * as data from './DiagnosisFields.json'; var diagnosisFields = data.diagnoses; -var fieldComponents = []; - -function createFields() { - diagnosisFields.forEach((diagnosisField) => { - // Create the corresponding element and push it to the array of fields - }); -} - export default function Form(): ReactElement { return ( @@ -49,13 +38,16 @@ export default function Form(): ReactElement { 'CheckboxItem demo'}> {diagnosisFields.map((i) => ( // TOOD: how do I add conditionals here? - - {i.name} - + // i.e. `if (i.name != null){}` + ((i.name == null) ? <> : + + {i.name} + + ) ))} From f450a99a92037aae7697c859dada769f6ac22a44 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Wed, 22 Apr 2020 12:55:25 -0500 Subject: [PATCH 26/49] removed empty fields --- pwa/src/components/DiagnosisFields.json | 238 +++--------------------- pwa/src/components/DiagnosisForm.tsx | 27 +-- 2 files changed, 42 insertions(+), 223 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index f48c918..1f92d07 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -1,112 +1,42 @@ { "diagnoses": [ { - "name": "Asthma", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Asthma" }, { - "name": "Allergies", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Allergies" }, { - "name": "Anemia", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Anemia" }, { - "name": "Malnutrition", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Malnutrition" }, { - "name": "Depression", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Depression" }, { - "name": "Diabetes", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Diabetes" }, { - "group-title": "Eye", "group": [ "Ptergium", "Cataract", "Dry Eye", "Conjuntivitis" - ], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + ] }, { - "name": "Fever", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Fever" }, { - "name": "Possible Malaria", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Possible Malaria" }, { - "name": "Filariasis", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Filariasis" }, { - "group-title": "Intestinal", "group": [ "Gastritis", @@ -114,27 +44,13 @@ "Gastroenteritis", "Dysentery", "Possible Cholera" - ], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + ] }, { - "name": "Headache", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Headache" }, { "name": "Hernia", - "group-title": "", - "group": [], "radio-buttons": { "radio-buttons-title": "Hernia Type", "radio-buttons": [ @@ -142,33 +58,19 @@ "Umbilical", "Both" ] - }, - "text-input-title": "" + } }, { - "group-title": "Cardiovascular", "group": [ "Hypertension", "Stroke", "Angina", "CHF" - ], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + ] }, { - "name": "Musculoskeletal Pain", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Musculoskeletal Pain" }, { "name": "Otitis", @@ -184,32 +86,17 @@ "Left", "Both" ] - }, - "text-input-title": "" + } }, { - "name": "URI", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "URI" }, { "name": "Pregnancy", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, "text-input-title": "Weeks", "text-input-type": "number" }, { - "group-title": "Dermatological", "group": [ "Atopic Derm", @@ -217,52 +104,19 @@ "Scabies", "Impetigo", "Tinea Capitus (kerion)" - ], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + ] }, { - "name": "Possible STD", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Possible STD" }, { - "name": "Possible TB", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Possible TB" }, { - "name": "Possible Parasites", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Possible Parasites" }, { - "name": "UTI", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "UTI" }, { "name": "Vaginal", @@ -272,61 +126,21 @@ "Candidal", "Trich", "BV" - ], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + ] }, { - "name": "Needs to see Dentist", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Needs to see Dentist" }, { - "name": "Needs to see Eye Doctor", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Needs to see Eye Doctor" }, { - "name": "Surgical candidate", - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, - "text-input-title": "" + "name": "Surgical candidate" }, { - - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, "text-input-title": "Other Diagnosis" }, { - - "group-title": "", - "group": [], - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [] - }, "text-input-title": "Diagnoses Comments" } ] diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 23d27d9..3144337 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -1,5 +1,5 @@ import React, { ReactElement, useState } from "react"; -import { List, Checkbox, Flex } from 'antd-mobile'; +import { List, Checkbox, TextareaItem } from 'antd-mobile'; import "../scss/DiagnosisForm.scss"; import * as data from './DiagnosisFields.json'; @@ -35,20 +35,25 @@ export default function Form(): ReactElement { return (
- 'CheckboxItem demo'}> - {diagnosisFields.map((i) => ( - // TOOD: how do I add conditionals here? - // i.e. `if (i.name != null){}` - ((i.name == null) ? <> : + 'Patient Diagnosis'}> + {diagnosisFields.map((field) => ( + ((field.name == null) ? <> : - {i.name} + {field.name} ) - ))} + + // ((field["text-input-title"] == null) ? null : + // field["text-input-title"]}> + // + // + // ) + + ))}
) From 717d0cff8ce82e529ca084c8867b2a8fd633e594 Mon Sep 17 00:00:00 2001 From: Ben Mitchinson Date: Wed, 22 Apr 2020 13:51:08 -0500 Subject: [PATCH 27/49] pushing jsx to an array --- pwa/src/components/DiagnosisForm.tsx | 58 ++++++++++++++++------------ 1 file changed, 34 insertions(+), 24 deletions(-) diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 3144337..7a43bc1 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -1,9 +1,9 @@ -import React, { ReactElement, useState } from "react"; -import { List, Checkbox, TextareaItem } from 'antd-mobile'; -import "../scss/DiagnosisForm.scss"; -import * as data from './DiagnosisFields.json'; +import React, { ReactElement, useState } from 'react' +import { List, Checkbox, TextareaItem } from 'antd-mobile' +import '../scss/DiagnosisForm.scss' +import * as data from './DiagnosisFields.json' -const CheckboxItem = Checkbox.CheckboxItem; +const CheckboxItem = Checkbox.CheckboxItem /* @@ -28,32 +28,42 @@ Diagnosis Fields are stored in DiagnosisFields.json in the format: } */ -var diagnosisFields = data.diagnoses; +var diagnosisFields = data.diagnoses export default function Form(): ReactElement { - return (
- 'Patient Diagnosis'}> - {diagnosisFields.map((field) => ( - ((field.name == null) ? <> : - - {field.name} - - ) + {diagnosisFields.map((field) => { + const formElements: ReactElement[] = [] - // ((field["text-input-title"] == null) ? null : - // field["text-input-title"]}> - // - // - // ) + if (field.name != null) { + formElements.push( + + {field.name} + , + ) + } - ))} + if (field['text-input-title'] != null) { + formElements.push( + field['text-input-title']} + > + + , + ) + } + + return <> {formElements} + })}
) From 5107220a745d65c9c5621e9feec1e1cc4aacc329 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Wed, 22 Apr 2020 16:12:02 -0500 Subject: [PATCH 28/49] added groups --- pwa/src/components/DiagnosisFields.json | 3 +-- pwa/src/components/DiagnosisForm.tsx | 28 ++++++++++++++++++++++--- 2 files changed, 26 insertions(+), 5 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index 1f92d07..187804e 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -119,8 +119,7 @@ "name": "UTI" }, { - "name": "Vaginal", - "group-title": "", + "group-title": "Vaginal", "group": [ "Vaginitis", "Candidal", diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 7a43bc1..5807dac 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -1,5 +1,5 @@ import React, { ReactElement, useState } from 'react' -import { List, Checkbox, TextareaItem } from 'antd-mobile' +import { List, Checkbox, TextareaItem, WhiteSpace } from 'antd-mobile' import '../scss/DiagnosisForm.scss' import * as data from './DiagnosisFields.json' @@ -41,8 +41,8 @@ export default function Form(): ReactElement { formElements.push( {field.name} , @@ -62,6 +62,28 @@ export default function Form(): ReactElement { ) } + if (field.group != null) { + if(field["group-title"] != null){ + formElements.push( + field['group-title']} + > + + ) + } + field.group.forEach((ele) => { + formElements.push( + + {ele} + ) + + }) + formElements.push() + } + return <> {formElements} })} From 8a1b4f56290981e15eef203f49afd10c932f9aa6 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Wed, 22 Apr 2020 16:17:38 -0500 Subject: [PATCH 29/49] added actual grouping and list headers for groups --- pwa/src/components/DiagnosisForm.tsx | 28 +++++++++++++++++----------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 5807dac..f707741 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -33,7 +33,7 @@ var diagnosisFields = data.diagnoses export default function Form(): ReactElement { return (
- 'Patient Diagnosis'}> + {/* 'Patient Diagnosis'}> */} {diagnosisFields.map((field) => { const formElements: ReactElement[] = [] @@ -63,16 +63,11 @@ export default function Form(): ReactElement { } if (field.group != null) { - if(field["group-title"] != null){ - formElements.push( - field['group-title']} - > - - ) - } + const groupElements: ReactElement[] = [] + + // add each group element to the internalElement arrat field.group.forEach((ele) => { - formElements.push( + groupElements.push( ) }) + + // Render the entire list with the internal elements + if(field["group-title"] != null){ + formElements.push( + field['group-title']} + >{groupElements} + + ) + } + formElements.push() } return <> {formElements} })} - + {/* */}
) } From 416328c2e00ad9cbbd7f74f2ac24b82bf8f1ad9f Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Thu, 23 Apr 2020 11:14:18 -0500 Subject: [PATCH 30/49] added id fields to data json --- pwa/src/components/DiagnosisFields.json | 144 ++++++++++++++-------- pwa/src/components/DiagnosisForm.test.tsx | 8 ++ pwa/src/components/DiagnosisForm.tsx | 97 +++++++-------- 3 files changed, 145 insertions(+), 104 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index 187804e..67c6e59 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -1,146 +1,186 @@ { "diagnoses": [ { - "name": "Asthma" + "name": "Asthma", + "id": "asthma" }, { - "name": "Allergies" + "name": "Allergies", + "id": "allergies" }, { - "name": "Anemia" + "name": "Anemia", + "id": "anemia" }, { - "name": "Malnutrition" + "name": "Malnutrition", + "id": "malnutrition" }, { - "name": "Depression" + "name": "Depression", + "id": "depression" }, { - "name": "Diabetes" + "name": "Diabetes", + "id": "diabetes" }, { "group-title": "Eye", "group": [ - "Ptergium", - "Cataract", - "Dry Eye", - "Conjuntivitis" + { + "name": "Ptergium", + "id": "ptergium" + }, + { + "name": "Cataract", + "id": "cataract" + }, + { + "name": "Dry Eye", + "id": "dry-eye" + }, + { + "name": "Conjuntivitis", + "id": "conjuntivitis" + } ] }, { - "name": "Fever" + "name": "Fever", + "id": "fever" }, { - "name": "Possible Malaria" + "name": "Possible Malaria", + "id": "malaria" }, { - "name": "Filariasis" + "name": "Filariasis", + "id": "filariasis" }, { + "id": "intestinal", "group-title": "Intestinal", "group": [ - "Gastritis", - "GERD", - "Gastroenteritis", - "Dysentery", - "Possible Cholera" + { "name": "Gastritis", "id": "gastritis" }, + { "name": "GERD", "id": "gerd" }, + { "name": "Gastroenteritis", "id": "gastroenteritis" }, + { "name": "Dysentery", "id": "dysentery" }, + { "name": "Possible Cholera", "id": "cholera" } ] }, { - "name": "Headache" + "name": "Headache", + "id": "headache" }, { "name": "Hernia", + "id": "hernia", "radio-buttons": { "radio-buttons-title": "Hernia Type", "radio-buttons": [ - "Inguinal", - "Umbilical", - "Both" + { "name": "Inguinal", "id": "inguinal" }, + { "name": "Umbilical", "id": "umbilical" }, + { "name": "Both", "id": "both" } ] } }, { + "id": "cardiovascular", "group-title": "Cardiovascular", "group": [ - "Hypertension", - "Stroke", - "Angina", - "CHF" + { "name": "Hypertension", "id": "hypertension" }, + { "name": "Stroke", "id": "stroke" }, + { "name": "Angina", "id": "angina" }, + { "name": "CHF", "id": "chf" } ] }, { - "name": "Musculoskeletal Pain" + "name": "Musculoskeletal Pain", + "id": "musculoskeletal" }, { "name": "Otitis", + "id": "otitis", "group-title": "", "group": [ - "Pneumonia", - "Sinusitis" + { "name": "Pneumonia", "id": "pneumonia" }, + { "name": "Sinusitis", "id": "sinusitis" } ], "radio-buttons": { "radio-buttons-title": "", "radio-buttons": [ - "Right", - "Left", - "Both" + { "name": "Right", "id": "right" }, + { "name": "Left", "id": "left" }, + { "name": "Both", "id": "both" } ] } }, { - "name": "URI" + "name": "URI", + "id": "uri" }, { "name": "Pregnancy", + "id": "pregnancy", "text-input-title": "Weeks", "text-input-type": "number" }, { "group-title": "Dermatological", + "id": "dermatological", "group": [ - "Atopic Derm", - "Fungal", - "Scabies", - "Impetigo", - "Tinea Capitus (kerion)" + { "name": "Atopic Derm", "id": "atopic-derm" }, + { "name": "Fungal", "id": "fungal" }, + { "name": "Scabies", "id": "scabies" }, + { "name": "Impetigo", "id": "Impetigo" }, + { "name": "Tinea Capitus (kerion)", "id": "tinea-capitus" } ] }, { - "name": "Possible STD" + "name": "Possible STD", + "id": "std" }, { - "name": "Possible TB" + "name": "Possible TB", + "id": "tb" }, { - "name": "Possible Parasites" + "name": "Possible Parasites", + "id": "parasites" }, { - "name": "UTI" + "name": "UTI", + "id": "uti" }, { "group-title": "Vaginal", + "id": "vaginal", "group": [ - "Vaginitis", - "Candidal", - "Trich", - "BV" + { "name": "Vaginitis", "id": "vaginitis" }, + { "name": "Candidal", "id": "candidal" }, + { "name": "Trich", "id": "trich" }, + { "name": "BV", "id": "bv" } ] }, { - "name": "Needs to see Dentist" + "name": "Needs to see Dentist", + "id": "dentist" }, { - "name": "Needs to see Eye Doctor" + "name": "Needs to see Eye Doctor", + "id": "eye-doctor" }, { - "name": "Surgical candidate" + "name": "Surgical candidate", + "id": "surgical-candidate" }, { - "text-input-title": "Other Diagnosis" + "text-input-title": "Other Diagnosis", + "id": "other-diagnosis" }, { - "text-input-title": "Diagnoses Comments" + "text-input-title": "Diagnoses Comments", + "id": "comments" } ] -} \ No newline at end of file +} diff --git a/pwa/src/components/DiagnosisForm.test.tsx b/pwa/src/components/DiagnosisForm.test.tsx index e69de29..424037c 100644 --- a/pwa/src/components/DiagnosisForm.test.tsx +++ b/pwa/src/components/DiagnosisForm.test.tsx @@ -0,0 +1,8 @@ +import React from "react"; +import { render, fireEvent } from "@testing-library/react"; +import DiagnosisForm from "./DiagnosisForm"; + +test("renders the form", async () => { + const dom = render(); + expect(dom.getByTestId("diagnosis-form-wrapper")).toBeTruthy(); + }); \ No newline at end of file diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index f707741..f86fab5 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -28,71 +28,64 @@ Diagnosis Fields are stored in DiagnosisFields.json in the format: } */ -var diagnosisFields = data.diagnoses +const diagnosisFields = data.diagnoses -export default function Form(): ReactElement { +export default function DiagnosisForm(): ReactElement { return ( -
- {/* 'Patient Diagnosis'}> */} - {diagnosisFields.map((field) => { - const formElements: ReactElement[] = [] +
+ {diagnosisFields.map((field) => { + const formElements: ReactElement[] = [] - if (field.name != null) { - formElements.push( - - {field.name} + if (field.name != null) { + formElements.push( + + {field.name} + , + ) + } + + if (field['text-input-title'] != null) { + formElements.push( + field['text-input-title']}> + + , + ) + } + + if (field.group != null) { + const groupElements: ReactElement[] = [] + + // add each group element to the internalElement arrat + field.group.forEach((ele: any) => { + groupElements.push( + + {ele.name} , ) - } + }) - if (field['text-input-title'] != null) { + // Render the entire list with the internal elements + if (field['group-title'] != null) { formElements.push( - field['text-input-title']} - > - + field['group-title']}> + {groupElements} , ) } - if (field.group != null) { - const groupElements: ReactElement[] = [] + formElements.push() + } - // add each group element to the internalElement arrat - field.group.forEach((ele) => { - groupElements.push( - - {ele} - ) + // TODO - Radio + if (field['radio-buttons'] != null) { + } - }) - - // Render the entire list with the internal elements - if(field["group-title"] != null){ - formElements.push( - field['group-title']} - >{groupElements} - - ) - } - - formElements.push() - } - - return <> {formElements} - })} - {/* */} + return <> {formElements} + })}
) } From 1cb9f52ae0cf9b97ff4f748335dfb527908f5bf4 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Thu, 23 Apr 2020 12:50:25 -0500 Subject: [PATCH 31/49] implemented radio buttons, needs improvement --- pwa/src/components/DiagnosisFields.json | 28 +++++++++++++++++++++---- pwa/src/components/DiagnosisForm.tsx | 27 +++++++++++++++++------- 2 files changed, 44 insertions(+), 11 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index 67c6e59..4934d85 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -101,11 +101,31 @@ { "name": "Otitis", "id": "otitis", + "radio-buttons": { + "radio-buttons-title": "", + "radio-buttons": [ + { "name": "Right", "id": "right" }, + { "name": "Left", "id": "left" }, + { "name": "Both", "id": "both" } + ] + } + }, + { + "name": "Pneumonia", + "id": "pneumonia", + "radio-buttons": { + "radio-buttons-title": "", + "radio-buttons": [ + { "name": "Right", "id": "right" }, + { "name": "Left", "id": "left" }, + { "name": "Both", "id": "both" } + ] + } + }, + { + "name": "Sinusitis", + "id": "sinusitis", "group-title": "", - "group": [ - { "name": "Pneumonia", "id": "pneumonia" }, - { "name": "Sinusitis", "id": "sinusitis" } - ], "radio-buttons": { "radio-buttons-title": "", "radio-buttons": [ diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index f86fab5..9361d72 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -1,9 +1,10 @@ import React, { ReactElement, useState } from 'react' -import { List, Checkbox, TextareaItem, WhiteSpace } from 'antd-mobile' +import { List, Checkbox, TextareaItem, WhiteSpace, Radio } from 'antd-mobile' import '../scss/DiagnosisForm.scss' import * as data from './DiagnosisFields.json' const CheckboxItem = Checkbox.CheckboxItem +const RadioItem = Radio.RadioItem /* @@ -47,11 +48,7 @@ export default function DiagnosisForm(): ReactElement { if (field['text-input-title'] != null) { formElements.push( field['text-input-title']}> - + , ) } @@ -80,8 +77,24 @@ export default function DiagnosisForm(): ReactElement { formElements.push() } - // TODO - Radio + // TODO: radio buttons displayed this way are indented badly if (field['radio-buttons'] != null) { + { + field['radio-buttons']['radio-buttons'].map((i) => + formElements.push( + setSex(i.value)} + > + {i.name} + , + ), + ) + } } return <> {formElements} From 41f952e504959c88241539da6b99bb5131dd5616 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Thu, 23 Apr 2020 12:50:59 -0500 Subject: [PATCH 32/49] updating package-lock based on results of npm audit fix --- pwa/package-lock.json | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/pwa/package-lock.json b/pwa/package-lock.json index b930bb7..2b703c0 100644 --- a/pwa/package-lock.json +++ b/pwa/package-lock.json @@ -2198,9 +2198,9 @@ }, "dependencies": { "acorn": { - "version": "6.4.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.0.tgz", - "integrity": "sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw==" + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz", + "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==" } } }, @@ -7825,9 +7825,9 @@ }, "dependencies": { "acorn": { - "version": "6.4.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.0.tgz", - "integrity": "sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw==" + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz", + "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==" }, "jsdom": { "version": "14.1.0", @@ -8766,9 +8766,9 @@ }, "dependencies": { "acorn": { - "version": "5.7.3", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz", - "integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==" + "version": "5.7.4", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.4.tgz", + "integrity": "sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==" } } }, From 8f24ff081bee23ebb2ee7269c256ecd0842f2b9f Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Thu, 23 Apr 2020 13:26:30 -0500 Subject: [PATCH 33/49] removed option for radio buttons from the form, changed to checkboxes --- pwa/src/components/DiagnosisFields.json | 58 +++++++++---------------- pwa/src/components/DiagnosisForm.tsx | 20 --------- 2 files changed, 21 insertions(+), 57 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index 4934d85..73838e4 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -73,16 +73,12 @@ "id": "headache" }, { - "name": "Hernia", + "group-title": "Hernia", "id": "hernia", - "radio-buttons": { - "radio-buttons-title": "Hernia Type", - "radio-buttons": [ - { "name": "Inguinal", "id": "inguinal" }, - { "name": "Umbilical", "id": "umbilical" }, - { "name": "Both", "id": "both" } - ] - } + "group": [ + { "name": "Inguinal", "id": "inguinal" }, + { "name": "Umbilical", "id": "umbilical" } + ] }, { "id": "cardiovascular", @@ -99,41 +95,29 @@ "id": "musculoskeletal" }, { - "name": "Otitis", + "group-title": "Otitis", "id": "otitis", - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [ - { "name": "Right", "id": "right" }, - { "name": "Left", "id": "left" }, - { "name": "Both", "id": "both" } - ] - } + "group": [ + { "name": "Right", "id": "right" }, + { "name": "Left", "id": "left" } + ] }, { - "name": "Pneumonia", + "group-title": "Pneumonia", "id": "pneumonia", - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [ - { "name": "Right", "id": "right" }, - { "name": "Left", "id": "left" }, - { "name": "Both", "id": "both" } - ] - } + + "group": [ + { "name": "Right", "id": "right" }, + { "name": "Left", "id": "left" } + ] }, { - "name": "Sinusitis", "id": "sinusitis", - "group-title": "", - "radio-buttons": { - "radio-buttons-title": "", - "radio-buttons": [ - { "name": "Right", "id": "right" }, - { "name": "Left", "id": "left" }, - { "name": "Both", "id": "both" } - ] - } + "group-title": "Sinusitis", + "group": [ + { "name": "Right", "id": "right" }, + { "name": "Left", "id": "left" } + ] }, { "name": "URI", diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 9361d72..59650a6 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -77,26 +77,6 @@ export default function DiagnosisForm(): ReactElement { formElements.push() } - // TODO: radio buttons displayed this way are indented badly - if (field['radio-buttons'] != null) { - { - field['radio-buttons']['radio-buttons'].map((i) => - formElements.push( - setSex(i.value)} - > - {i.name} - , - ), - ) - } - } - return <> {formElements} })}
From a94ec1b811a6b5a94af0fcc8804a2c97aacefa22 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Fri, 24 Apr 2020 04:47:43 -0500 Subject: [PATCH 34/49] updated JSON format --- pwa/src/components/DiagnosisFields.json | 5 +++++ pwa/src/components/DiagnosisForm.tsx | 28 ++++++++++++------------- 2 files changed, 18 insertions(+), 15 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index 73838e4..8d2ee42 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -90,6 +90,11 @@ { "name": "CHF", "id": "chf" } ] }, + { + "name": "Healthy", + "id": "healthy" + }, + { "name": "Musculoskeletal Pain", "id": "musculoskeletal" diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 59650a6..5299f23 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -1,10 +1,9 @@ -import React, { ReactElement, useState } from 'react' -import { List, Checkbox, TextareaItem, WhiteSpace, Radio } from 'antd-mobile' +import React, { ReactElement } from 'react' +import { List, Checkbox, TextareaItem, WhiteSpace } from 'antd-mobile' import '../scss/DiagnosisForm.scss' import * as data from './DiagnosisFields.json' const CheckboxItem = Checkbox.CheckboxItem -const RadioItem = Radio.RadioItem /* @@ -13,18 +12,17 @@ Diagnosis Fields are stored in DiagnosisFields.json in the format: { "diagnoses" : [ { - "name":"", - "group-title":"", - "group":[], - "radio-buttons": { - "radio-buttons-title":"", - "radio-buttons":[ - - ] - - }, - "text-input-title":"" - } + "name": "Name", + "id": "id", + "text-input-title": "Title", + "text-input-type": "type" (i.e. number) + "group-title": "Group Title", + "group": [ + { "name": "Name1", "id": "id1" }, + { "name": "Name2", "id": "id2" } + ] + }, + {...} ] } */ From 32027335eebb40e7d2c68500ec26c8b2ea43cc77 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Fri, 24 Apr 2020 04:56:41 -0500 Subject: [PATCH 35/49] test skeleton --- pwa/src/components/DiagnosisForm.test.tsx | 56 ++++++++++++++++++++--- 1 file changed, 49 insertions(+), 7 deletions(-) diff --git a/pwa/src/components/DiagnosisForm.test.tsx b/pwa/src/components/DiagnosisForm.test.tsx index 424037c..ec05c54 100644 --- a/pwa/src/components/DiagnosisForm.test.tsx +++ b/pwa/src/components/DiagnosisForm.test.tsx @@ -1,8 +1,50 @@ -import React from "react"; -import { render, fireEvent } from "@testing-library/react"; -import DiagnosisForm from "./DiagnosisForm"; +import React from 'react' +import { render, fireEvent } from '@testing-library/react' +import DiagnosisForm from './DiagnosisForm' -test("renders the form", async () => { - const dom = render(); - expect(dom.getByTestId("diagnosis-form-wrapper")).toBeTruthy(); - }); \ No newline at end of file +/* + +Diagnosis Fields are stored in DiagnosisFields.json in the format: + +{ + "diagnoses" : [ + { + "name": "Name", + "id": "id", + "text-input-title": "Title", + "text-input-type": "type" (i.e. number) + "group-title": "Group Title", + "group": [ + { "name": "Name1", "id": "id1" }, + { "name": "Name2", "id": "id2" } + ] + }, + {...} + ] +} +*/ + +test('renders the form', async () => { + const dom = render() + expect(dom.getByTestId('diagnosis-form-wrapper')).toBeTruthy() +}) + +test('renders each diagnoses.name data field as a checkbox', () => {}) + +test(' each diagnoses.name data is able to be checked/unchecked', () => {}) + +test('finds and element with each id in the DOM', () => {}) + +test('renders each diagnoses.text-input-title data field as a text entry field', () => {}) + +test('each diagnoses.text-input-title data field is able to recieve text input', () => {}) + +test('renders each diagnoses.group-title data field as a header', () => {}) + +test('renders each diagnoses.group entry in the same list element', () => {}) + +test('renders each diagnoses.[el].name data field as a checkbox', () => {}) + +test(' each diagnoses.[el].name data is able to be checked/unchecked', () => {}) + +test('finds and element with each group.[el].id in the DOM', () => {}) From 90352817be0c84daa7728506cc97fcc9136685b2 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Fri, 24 Apr 2020 06:10:19 -0500 Subject: [PATCH 36/49] added tests --- pwa/src/components/DiagnosisForm.test.tsx | 31 ++++++++++++++++++++--- pwa/src/components/DiagnosisForm.tsx | 23 ++++++++++++++--- 2 files changed, 47 insertions(+), 7 deletions(-) diff --git a/pwa/src/components/DiagnosisForm.test.tsx b/pwa/src/components/DiagnosisForm.test.tsx index ec05c54..c1696ed 100644 --- a/pwa/src/components/DiagnosisForm.test.tsx +++ b/pwa/src/components/DiagnosisForm.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { render, fireEvent } from '@testing-library/react' +import { render, fireEvent, getByTestId } from '@testing-library/react' import DiagnosisForm from './DiagnosisForm' /* @@ -24,14 +24,39 @@ Diagnosis Fields are stored in DiagnosisFields.json in the format: } */ +import * as data from './DiagnosisFields.json' +const diagnosisFields = data.diagnoses + test('renders the form', async () => { const dom = render() expect(dom.getByTestId('diagnosis-form-wrapper')).toBeTruthy() }) -test('renders each diagnoses.name data field as a checkbox', () => {}) +test('renders each diagnoses.name data field', () => { + const { getByText } = render() -test(' each diagnoses.name data is able to be checked/unchecked', () => {}) + diagnosisFields.forEach((diagnosis) => { + if (diagnosis.name != null) { + const re = new RegExp(diagnosis.name, 'gi') + const field = getByText(re) + expect(field).toBeInTheDocument() + } + }) +}) + +test(' each diagnoses.name has a corresponding checkbox and is able to be checked/unchecked', () => { + const { getByText, getByTestId } = render() + + diagnosisFields.forEach((diagnosis) => { + if (diagnosis.name != null) { + const re = new RegExp(diagnosis.id, 'gi') + const field = getByTestId(re) + expect(field).toHaveClass('am-checkbox-item') + + // TODO: ensure it can be checked /unchecked + } + }) +}) test('finds and element with each id in the DOM', () => {}) diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 5299f23..db8babb 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -37,7 +37,11 @@ export default function DiagnosisForm(): ReactElement { if (field.name != null) { formElements.push( - + {field.name} , ) @@ -46,7 +50,11 @@ export default function DiagnosisForm(): ReactElement { if (field['text-input-title'] != null) { formElements.push( field['text-input-title']}> - + , ) } @@ -57,7 +65,11 @@ export default function DiagnosisForm(): ReactElement { // add each group element to the internalElement arrat field.group.forEach((ele: any) => { groupElements.push( - + {ele.name} , ) @@ -66,7 +78,10 @@ export default function DiagnosisForm(): ReactElement { // Render the entire list with the internal elements if (field['group-title'] != null) { formElements.push( - field['group-title']}> + field['group-title']} + data-testid={field.id} + > {groupElements} , ) From f5bb768c0e8dd542468b0fbbefed6ed817cbdf83 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Fri, 24 Apr 2020 11:46:02 -0500 Subject: [PATCH 37/49] more tests --- pwa/src/components/DiagnosisFields.json | 5 +++-- pwa/src/components/DiagnosisForm.test.tsx | 16 +++++++++++--- pwa/src/components/DiagnosisForm.tsx | 26 +++++++++++++++++------ 3 files changed, 35 insertions(+), 12 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index 8d2ee42..e6d16b1 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -132,6 +132,7 @@ "name": "Pregnancy", "id": "pregnancy", "text-input-title": "Weeks", + "text-input-id": "pregnancy-weeks", "text-input-type": "number" }, { @@ -185,11 +186,11 @@ }, { "text-input-title": "Other Diagnosis", - "id": "other-diagnosis" + "text-input-id": "other-diagnosis" }, { "text-input-title": "Diagnoses Comments", - "id": "comments" + "text-input-id": "comments" } ] } diff --git a/pwa/src/components/DiagnosisForm.test.tsx b/pwa/src/components/DiagnosisForm.test.tsx index c1696ed..4a53cde 100644 --- a/pwa/src/components/DiagnosisForm.test.tsx +++ b/pwa/src/components/DiagnosisForm.test.tsx @@ -45,7 +45,7 @@ test('renders each diagnoses.name data field', () => { }) test(' each diagnoses.name has a corresponding checkbox and is able to be checked/unchecked', () => { - const { getByText, getByTestId } = render() + const { getByTestId } = render() diagnosisFields.forEach((diagnosis) => { if (diagnosis.name != null) { @@ -58,9 +58,19 @@ test(' each diagnoses.name has a corresponding checkbox and is able to be checke }) }) -test('finds and element with each id in the DOM', () => {}) +test('renders each diagnoses.text-input-title data field as a text entry field', () => { + const { getByTestId } = render() -test('renders each diagnoses.text-input-title data field as a text entry field', () => {}) + diagnosisFields.forEach((diagnosis) => { + if (diagnosis['text-input-title'] != null) { + const re = new RegExp(diagnosis['text-input-id'], 'gi') + const field = getByTestId(re) + expect(field).toBeInTheDocument() + // TODO: + //expect(field).toHaveClass('textarea') + } + }) +}) test('each diagnoses.text-input-title data field is able to recieve text input', () => {}) diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index db8babb..6a22e68 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -1,5 +1,5 @@ import React, { ReactElement } from 'react' -import { List, Checkbox, TextareaItem, WhiteSpace } from 'antd-mobile' +import { List, Checkbox, InputItem, WhiteSpace } from 'antd-mobile' import '../scss/DiagnosisForm.scss' import * as data from './DiagnosisFields.json' @@ -47,13 +47,25 @@ export default function DiagnosisForm(): ReactElement { ) } - if (field['text-input-title'] != null) { + if ( + field['text-input-title'] != null && + field['text-input-id'] != null + ) { formElements.push( field['text-input-title']}> - , ) @@ -62,7 +74,7 @@ export default function DiagnosisForm(): ReactElement { if (field.group != null) { const groupElements: ReactElement[] = [] - // add each group element to the internalElement arrat + // add each group element to the internalElement array field.group.forEach((ele: any) => { groupElements.push( Date: Fri, 24 Apr 2020 15:21:49 -0500 Subject: [PATCH 38/49] trying to click a checkbox --- pwa/src/components/DiagnosisForm.test.tsx | 42 +++++++++++++++++------ 1 file changed, 32 insertions(+), 10 deletions(-) diff --git a/pwa/src/components/DiagnosisForm.test.tsx b/pwa/src/components/DiagnosisForm.test.tsx index 4a53cde..8aa5011 100644 --- a/pwa/src/components/DiagnosisForm.test.tsx +++ b/pwa/src/components/DiagnosisForm.test.tsx @@ -1,5 +1,10 @@ import React from 'react' -import { render, fireEvent, getByTestId } from '@testing-library/react' +import { + render, + fireEvent, + getByTestId, + queryByTestId, +} from '@testing-library/react' import DiagnosisForm from './DiagnosisForm' /* @@ -45,15 +50,32 @@ test('renders each diagnoses.name data field', () => { }) test(' each diagnoses.name has a corresponding checkbox and is able to be checked/unchecked', () => { - const { getByTestId } = render() + const { getByTestId, getByText } = render() diagnosisFields.forEach((diagnosis) => { - if (diagnosis.name != null) { + if (diagnosis.name != null && diagnosis.id != null) { + // const dom = render() const re = new RegExp(diagnosis.id, 'gi') - const field = getByTestId(re) - expect(field).toHaveClass('am-checkbox-item') + // const checkboxItem = dom.queryByTestId(re) + const checkboxItem = getByTestId(re) + expect(checkboxItem).toHaveClass('am-checkbox-item') // TODO: ensure it can be checked /unchecked + // TOTO / help: not sure what to element to click in order to actually trigger the checkbox being checked + // This is very similar to the radio button tests in PatientInfoForm + + const checkBox = checkboxItem.getElementsByTagName('span')[0] + expect(checkBox).not.toHaveClass('am-checkbox-checked') + + // none of these seem to make the checkbox be checked + fireEvent.click(checkboxItem) + fireEvent.click(checkBox) + const checkBoxInner = checkboxItem.getElementsByClassName( + 'am-checkbox-inner', + )[0] + fireEvent.click(checkBoxInner) + fireEvent.click(getByText(diagnosis.name)) + expect(checkBox).toHaveClass('am-checkbox-checked') } }) }) @@ -62,18 +84,18 @@ test('renders each diagnoses.text-input-title data field as a text entry field', const { getByTestId } = render() diagnosisFields.forEach((diagnosis) => { - if (diagnosis['text-input-title'] != null) { + if ( + diagnosis['text-input-title'] != null && + diagnosis['text-input-title'] != null + ) { const re = new RegExp(diagnosis['text-input-id'], 'gi') const field = getByTestId(re) expect(field).toBeInTheDocument() - // TODO: - //expect(field).toHaveClass('textarea') + // TODO: ensure that this is a text field } }) }) -test('each diagnoses.text-input-title data field is able to recieve text input', () => {}) - test('renders each diagnoses.group-title data field as a header', () => {}) test('renders each diagnoses.group entry in the same list element', () => {}) From 93ea9bacd7f816384b420731bdcbc2de7f0cc851 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Fri, 24 Apr 2020 15:51:41 -0500 Subject: [PATCH 39/49] more tests, some TODOs --- pwa/src/components/DiagnosisFields.json | 12 ++-- pwa/src/components/DiagnosisForm.test.tsx | 69 ++++++++++++++--------- 2 files changed, 47 insertions(+), 34 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index e6d16b1..6c474d2 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -103,8 +103,8 @@ "group-title": "Otitis", "id": "otitis", "group": [ - { "name": "Right", "id": "right" }, - { "name": "Left", "id": "left" } + { "name": "Right", "id": "otitis-right" }, + { "name": "Left", "id": "otitis-left" } ] }, { @@ -112,16 +112,16 @@ "id": "pneumonia", "group": [ - { "name": "Right", "id": "right" }, - { "name": "Left", "id": "left" } + { "name": "Right", "id": "pneumonia-right" }, + { "name": "Left", "id": "pneumonia-left" } ] }, { "id": "sinusitis", "group-title": "Sinusitis", "group": [ - { "name": "Right", "id": "right" }, - { "name": "Left", "id": "left" } + { "name": "Right", "id": "sinusitis-right" }, + { "name": "Left", "id": "sinusitis-left" } ] }, { diff --git a/pwa/src/components/DiagnosisForm.test.tsx b/pwa/src/components/DiagnosisForm.test.tsx index 8aa5011..ce15a9d 100644 --- a/pwa/src/components/DiagnosisForm.test.tsx +++ b/pwa/src/components/DiagnosisForm.test.tsx @@ -1,10 +1,5 @@ import React from 'react' -import { - render, - fireEvent, - getByTestId, - queryByTestId, -} from '@testing-library/react' +import { render, fireEvent } from '@testing-library/react' import DiagnosisForm from './DiagnosisForm' /* @@ -51,31 +46,27 @@ test('renders each diagnoses.name data field', () => { test(' each diagnoses.name has a corresponding checkbox and is able to be checked/unchecked', () => { const { getByTestId, getByText } = render() - diagnosisFields.forEach((diagnosis) => { if (diagnosis.name != null && diagnosis.id != null) { - // const dom = render() const re = new RegExp(diagnosis.id, 'gi') - // const checkboxItem = dom.queryByTestId(re) const checkboxItem = getByTestId(re) expect(checkboxItem).toHaveClass('am-checkbox-item') // TODO: ensure it can be checked /unchecked - // TOTO / help: not sure what to element to click in order to actually trigger the checkbox being checked + // TODO: (help) not sure what to element to click in order to actually trigger the checkbox being checked // This is very similar to the radio button tests in PatientInfoForm - const checkBox = checkboxItem.getElementsByTagName('span')[0] - expect(checkBox).not.toHaveClass('am-checkbox-checked') - - // none of these seem to make the checkbox be checked - fireEvent.click(checkboxItem) - fireEvent.click(checkBox) - const checkBoxInner = checkboxItem.getElementsByClassName( - 'am-checkbox-inner', - )[0] - fireEvent.click(checkBoxInner) - fireEvent.click(getByText(diagnosis.name)) - expect(checkBox).toHaveClass('am-checkbox-checked') + // const checkBox = checkboxItem.getElementsByTagName('span')[0] + // expect(checkBox).not.toHaveClass('am-checkbox-checked') + // // none of these seem to make the checkbox be checked + // fireEvent.click(checkboxItem) + // fireEvent.click(checkBox) + // const checkBoxInner = checkboxItem.getElementsByClassName( + // 'am-checkbox-inner', + // )[0] + // fireEvent.click(checkBoxInner) + // fireEvent.click(getByText(diagnosis.name)) + // expect(checkBox).toHaveClass('am-checkbox-checked') } }) }) @@ -96,12 +87,34 @@ test('renders each diagnoses.text-input-title data field as a text entry field', }) }) -test('renders each diagnoses.group-title data field as a header', () => {}) +test('renders each diagnoses.group-title data field as a header', () => { + const { getByText } = render() + diagnosisFields.forEach((diagnosis) => { + if (diagnosis['group-title'] != null && diagnosis.group != null) { + const re = new RegExp(`\^${diagnosis['group-title']}\$`, 'gi') + const field = getByText(re) + expect(field).toBeInTheDocument() + expect(field).toHaveClass('am-list-header') + } + }) +}) -test('renders each diagnoses.group entry in the same list element', () => {}) +test('renders each diagnoses.group entry in the same list element', () => { + // TODO +}) -test('renders each diagnoses.[el].name data field as a checkbox', () => {}) +test('renders each diagnoses.[el] as a checkbox', () => { + const { getByTestId } = render() + diagnosisFields.forEach((diagnosis) => { + if (diagnosis.group != null) { + diagnosis.group.forEach((groupElement) => { + const re = new RegExp(groupElement.id, 'gi') + const field = getByTestId(re) + expect(field).toBeInTheDocument() + expect(field).toHaveClass('am-checkbox-item') -test(' each diagnoses.[el].name data is able to be checked/unchecked', () => {}) - -test('finds and element with each group.[el].id in the DOM', () => {}) + // TODO: ensure it can be checked / unchecked + }) + } + }) +}) From 19d70476e719a8e424c052e61f22d649a37e3022 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Fri, 24 Apr 2020 19:43:57 -0500 Subject: [PATCH 40/49] fixed checkbox tests --- pwa/src/components/DiagnosisForm.test.tsx | 27 +++++++++-------------- pwa/src/components/DiagnosisForm.tsx | 1 + 2 files changed, 12 insertions(+), 16 deletions(-) diff --git a/pwa/src/components/DiagnosisForm.test.tsx b/pwa/src/components/DiagnosisForm.test.tsx index ce15a9d..2cd9906 100644 --- a/pwa/src/components/DiagnosisForm.test.tsx +++ b/pwa/src/components/DiagnosisForm.test.tsx @@ -52,21 +52,13 @@ test(' each diagnoses.name has a corresponding checkbox and is able to be checke const checkboxItem = getByTestId(re) expect(checkboxItem).toHaveClass('am-checkbox-item') - // TODO: ensure it can be checked /unchecked - // TODO: (help) not sure what to element to click in order to actually trigger the checkbox being checked - // This is very similar to the radio button tests in PatientInfoForm - - // const checkBox = checkboxItem.getElementsByTagName('span')[0] - // expect(checkBox).not.toHaveClass('am-checkbox-checked') - // // none of these seem to make the checkbox be checked - // fireEvent.click(checkboxItem) - // fireEvent.click(checkBox) - // const checkBoxInner = checkboxItem.getElementsByClassName( - // 'am-checkbox-inner', - // )[0] - // fireEvent.click(checkBoxInner) - // fireEvent.click(getByText(diagnosis.name)) - // expect(checkBox).toHaveClass('am-checkbox-checked') + const checkBox = checkboxItem.getElementsByTagName('span')[0] + expect(checkBox).not.toHaveClass('am-checkbox-checked') + const checkBoxInput = checkboxItem.getElementsByClassName( + 'am-checkbox-input', + )[0] + fireEvent.click(checkBoxInput) + expect(checkBox).toHaveClass('am-checkbox-checked') } }) }) @@ -100,7 +92,10 @@ test('renders each diagnoses.group-title data field as a header', () => { }) test('renders each diagnoses.group entry in the same list element', () => { - // TODO + // TODO: + // get the list element that contains one of the group id's + // get the elements contained in the list + // ensure that each of the group elements is in the list }) test('renders each diagnoses.[el] as a checkbox', () => { diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 6a22e68..8552589 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -56,6 +56,7 @@ export default function DiagnosisForm(): ReactElement { Date: Fri, 24 Apr 2020 21:01:47 -0500 Subject: [PATCH 41/49] removed TODOs --- pwa/src/components/DiagnosisForm.test.tsx | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/pwa/src/components/DiagnosisForm.test.tsx b/pwa/src/components/DiagnosisForm.test.tsx index 2cd9906..b77c03f 100644 --- a/pwa/src/components/DiagnosisForm.test.tsx +++ b/pwa/src/components/DiagnosisForm.test.tsx @@ -74,7 +74,7 @@ test('renders each diagnoses.text-input-title data field as a text entry field', const re = new RegExp(diagnosis['text-input-id'], 'gi') const field = getByTestId(re) expect(field).toBeInTheDocument() - // TODO: ensure that this is a text field + expect(field).toHaveAttribute('type', 'text') } }) }) @@ -98,17 +98,25 @@ test('renders each diagnoses.group entry in the same list element', () => { // ensure that each of the group elements is in the list }) -test('renders each diagnoses.[el] as a checkbox', () => { +test('renders each diagnoses.[el] as a checkbox that can be checked/unchecked', () => { const { getByTestId } = render() diagnosisFields.forEach((diagnosis) => { if (diagnosis.group != null) { diagnosis.group.forEach((groupElement) => { const re = new RegExp(groupElement.id, 'gi') - const field = getByTestId(re) - expect(field).toBeInTheDocument() - expect(field).toHaveClass('am-checkbox-item') + const groupCheckboxItem = getByTestId(re) + expect(groupCheckboxItem).toBeInTheDocument() + expect(groupCheckboxItem).toHaveClass('am-checkbox-item') - // TODO: ensure it can be checked / unchecked + const checkBox = groupCheckboxItem.getElementsByTagName( + 'span', + )[0] + expect(checkBox).not.toHaveClass('am-checkbox-checked') + const checkBoxInput = groupCheckboxItem.getElementsByClassName( + 'am-checkbox-input', + )[0] + fireEvent.click(checkBoxInput) + expect(checkBox).toHaveClass('am-checkbox-checked') }) } }) From 983a49a55c8606605a1c45237c344c19e136ed48 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Fri, 24 Apr 2020 21:18:12 -0500 Subject: [PATCH 42/49] finished testing --- pwa/src/components/DiagnosisFields.json | 2 +- pwa/src/components/DiagnosisForm.test.tsx | 22 ++++++++++++++----- pwa/src/components/DiagnosisForm.tsx | 26 ++++++++++++----------- 3 files changed, 32 insertions(+), 18 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index 6c474d2..65f0755 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -25,6 +25,7 @@ "id": "diabetes" }, { + "id": "eye", "group-title": "Eye", "group": [ { @@ -110,7 +111,6 @@ { "group-title": "Pneumonia", "id": "pneumonia", - "group": [ { "name": "Right", "id": "pneumonia-right" }, { "name": "Left", "id": "pneumonia-left" } diff --git a/pwa/src/components/DiagnosisForm.test.tsx b/pwa/src/components/DiagnosisForm.test.tsx index b77c03f..ba30fa6 100644 --- a/pwa/src/components/DiagnosisForm.test.tsx +++ b/pwa/src/components/DiagnosisForm.test.tsx @@ -45,7 +45,7 @@ test('renders each diagnoses.name data field', () => { }) test(' each diagnoses.name has a corresponding checkbox and is able to be checked/unchecked', () => { - const { getByTestId, getByText } = render() + const { getByTestId } = render() diagnosisFields.forEach((diagnosis) => { if (diagnosis.name != null && diagnosis.id != null) { const re = new RegExp(diagnosis.id, 'gi') @@ -92,10 +92,22 @@ test('renders each diagnoses.group-title data field as a header', () => { }) test('renders each diagnoses.group entry in the same list element', () => { - // TODO: - // get the list element that contains one of the group id's - // get the elements contained in the list - // ensure that each of the group elements is in the list + const { getByTestId } = render() + diagnosisFields.forEach((diagnosis) => { + if (diagnosis.group != null && diagnosis.id != null) { + // get the list by diagnosis.id + const re = new RegExp(`\^${diagnosis.id}\$`, 'gi') + const field = getByTestId(re) + expect(field).toBeInTheDocument() + expect(field).toHaveClass('am-list') + + // For each element in the group, ensure it is contained in the list + diagnosis.group.forEach((groupElement) => { + const el = getByTestId(groupElement.id) + expect(field).toContainElement(el) + }) + } + }) }) test('renders each diagnoses.[el] as a checkbox that can be checked/unchecked', () => { diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 8552589..7a35d57 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -58,12 +58,12 @@ export default function DiagnosisForm(): ReactElement { data-testid={field['text-input-id']} key={field['text-input-id']} type={ - field['text-input-type'] == 'number' + field['text-input-type'] === 'number' ? 'number' : 'text' } maxLength={ - field['text-input-id'] == 'pregnancy-weeks' + field['text-input-id'] === 'pregnancy-weeks' ? 2 : null } @@ -77,19 +77,21 @@ export default function DiagnosisForm(): ReactElement { // add each group element to the internalElement array field.group.forEach((ele: any) => { - groupElements.push( - - {ele.name} - , - ) + if (ele.id != null && ele.name != null) { + groupElements.push( + + {ele.name} + , + ) + } }) // Render the entire list with the internal elements - if (field['group-title'] != null) { + if (field['group-title'] != null && field.id !== null) { formElements.push( field['group-title']} From 3197b229929bb40c992e71084d6e3cd667482fba Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Mon, 27 Apr 2020 09:43:53 -0500 Subject: [PATCH 43/49] reordered imports & variable declarations --- pwa/src/components/DiagnosisForm.test.tsx | 2 +- pwa/src/components/DiagnosisForm.tsx | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/pwa/src/components/DiagnosisForm.test.tsx b/pwa/src/components/DiagnosisForm.test.tsx index ba30fa6..767f94a 100644 --- a/pwa/src/components/DiagnosisForm.test.tsx +++ b/pwa/src/components/DiagnosisForm.test.tsx @@ -1,6 +1,7 @@ import React from 'react' import { render, fireEvent } from '@testing-library/react' import DiagnosisForm from './DiagnosisForm' +import * as data from './DiagnosisFields.json' /* @@ -24,7 +25,6 @@ Diagnosis Fields are stored in DiagnosisFields.json in the format: } */ -import * as data from './DiagnosisFields.json' const diagnosisFields = data.diagnoses test('renders the form', async () => { diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 7a35d57..9a50aea 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -3,8 +3,6 @@ import { List, Checkbox, InputItem, WhiteSpace } from 'antd-mobile' import '../scss/DiagnosisForm.scss' import * as data from './DiagnosisFields.json' -const CheckboxItem = Checkbox.CheckboxItem - /* Diagnosis Fields are stored in DiagnosisFields.json in the format: @@ -27,6 +25,7 @@ Diagnosis Fields are stored in DiagnosisFields.json in the format: } */ +const CheckboxItem = Checkbox.CheckboxItem const diagnosisFields = data.diagnoses export default function DiagnosisForm(): ReactElement { From bcb6367f3ab4bdd1cb4089f51311a383e696553d Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Mon, 27 Apr 2020 09:50:58 -0500 Subject: [PATCH 44/49] removed left/right option for sinusitis and pneumonia --- pwa/src/components/DiagnosisFields.json | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index 65f0755..2c9a060 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -109,20 +109,12 @@ ] }, { - "group-title": "Pneumonia", - "id": "pneumonia", - "group": [ - { "name": "Right", "id": "pneumonia-right" }, - { "name": "Left", "id": "pneumonia-left" } - ] + "name": "Pneumonia", + "id": "pneumonia" }, { "id": "sinusitis", - "group-title": "Sinusitis", - "group": [ - { "name": "Right", "id": "sinusitis-right" }, - { "name": "Left", "id": "sinusitis-left" } - ] + "name": "Sinusitis" }, { "name": "URI", From 084c8b054b9883b62569255fa586b9971622de57 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Mon, 27 Apr 2020 10:17:29 -0500 Subject: [PATCH 45/49] added styling to add matching whitespace to end of lists --- pwa/src/components/DiagnosisForm.tsx | 4 ++++ pwa/src/scss/DiagnosisForm.scss | 5 +++++ 2 files changed, 9 insertions(+) diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 9a50aea..44b6593 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -97,6 +97,10 @@ export default function DiagnosisForm(): ReactElement { data-testid={field.id} > {groupElements} + , ) } diff --git a/pwa/src/scss/DiagnosisForm.scss b/pwa/src/scss/DiagnosisForm.scss index e69de29..3ee4ed2 100644 --- a/pwa/src/scss/DiagnosisForm.scss +++ b/pwa/src/scss/DiagnosisForm.scss @@ -0,0 +1,5 @@ +#diagnosis-form-wrapper { + .list-whitespace { + background-color: #f5f5f9; + } +} From 2130d5903dd48f38ddf9cbcd0d6ee5f360346ce6 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Mon, 27 Apr 2020 10:20:18 -0500 Subject: [PATCH 46/49] added styling to add matching whitespace to end of lists --- pwa/src/components/DiagnosisForm.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 44b6593..3c027b6 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -104,8 +104,6 @@ export default function DiagnosisForm(): ReactElement { , ) } - - formElements.push() } return <> {formElements} From 0b8f032476aceda60b087470575bccd6a37397e0 Mon Sep 17 00:00:00 2001 From: Ben Mitchinson Date: Mon, 27 Apr 2020 20:33:53 -0500 Subject: [PATCH 47/49] max-length in json --- pwa/src/components/DiagnosisFields.json | 3 ++- pwa/src/components/DiagnosisForm.tsx | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index 2c9a060..dcec7f6 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -125,7 +125,8 @@ "id": "pregnancy", "text-input-title": "Weeks", "text-input-id": "pregnancy-weeks", - "text-input-type": "number" + "text-input-type": "number", + "max-length": 2 }, { "group-title": "Dermatological", diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 3c027b6..f041cc6 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -62,8 +62,8 @@ export default function DiagnosisForm(): ReactElement { : 'text' } maxLength={ - field['text-input-id'] === 'pregnancy-weeks' - ? 2 + field['max-length'] + ? field['max-length'] : null } /> From d9c2aa1712fc3cf8ed066dd981f4668f9af8ef25 Mon Sep 17 00:00:00 2001 From: Ben Mitchinson Date: Mon, 27 Apr 2020 20:44:50 -0500 Subject: [PATCH 48/49] comment update --- pwa/src/components/DiagnosisFields.json | 4 ++-- pwa/src/components/DiagnosisForm.tsx | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/pwa/src/components/DiagnosisFields.json b/pwa/src/components/DiagnosisFields.json index dcec7f6..7c43993 100644 --- a/pwa/src/components/DiagnosisFields.json +++ b/pwa/src/components/DiagnosisFields.json @@ -124,9 +124,9 @@ "name": "Pregnancy", "id": "pregnancy", "text-input-title": "Weeks", - "text-input-id": "pregnancy-weeks", "text-input-type": "number", - "max-length": 2 + "max-length": 2, + "text-input-id": "pregnancy-weeks" }, { "group-title": "Dermatological", diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index f041cc6..549833e 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -13,7 +13,9 @@ Diagnosis Fields are stored in DiagnosisFields.json in the format: "name": "Name", "id": "id", "text-input-title": "Title", + "text-input-id": "id" for `id` and `data-testid` attributes "text-input-type": "type" (i.e. number) + "max-length": 3 "group-title": "Group Title", "group": [ { "name": "Name1", "id": "id1" }, From 2dcac548c332c4d95e1b5805fc5233d924bbcdd1 Mon Sep 17 00:00:00 2001 From: Meghan McLaughlin Date: Tue, 28 Apr 2020 21:45:09 -0500 Subject: [PATCH 49/49] added list wrapper to individual checkboxes --- pwa/src/components/DiagnosisForm.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/pwa/src/components/DiagnosisForm.tsx b/pwa/src/components/DiagnosisForm.tsx index 549833e..a242d96 100644 --- a/pwa/src/components/DiagnosisForm.tsx +++ b/pwa/src/components/DiagnosisForm.tsx @@ -38,13 +38,15 @@ export default function DiagnosisForm(): ReactElement { if (field.name != null) { formElements.push( - - {field.name} - , + + + {field.name} + + , ) }