#1428 | webapp changes to introduce new concept datatype ImageV2

Author: ombhardwajj

src/adminApp/components/CreateEditFilters.js

@@ -16,7 +16,18 @@ import { AvniFormLabel } from "../../common/components/AvniFormLabel";
 import { AvniTextField } from "../../common/components/AvniTextField";
 import ErrorMessageUtil from "../../common/utils/ErrorMessageUtil";
 
-const nonSupportedTypes = ["Duration", "Image", "Video", "Subject", "Location", "PhoneNumber", "GroupAffiliation", "Audio", "File"];
+const nonSupportedTypes = [
+  "Duration",
+  "Image",
+  "ImageV2",
+  "Video",
+  "Subject",
+  "Location",
+  "PhoneNumber",
+  "GroupAffiliation",
+  "Audio",
+  "File"
+];
 export const CreateEditFilters = ({
   omitTableData,
   selectedFilter,

src/dataEntryApp/components/FormElement.js

@@ -32,6 +32,7 @@ const elements = {
   Notes: NotesFormElement,
   NA: div,
   Image: MediaFormElement,
+  ImageV2: MediaFormElement,
   Video: MediaFormElement,
   Audio: MediaFormElement,
   File: MediaFormElement,

src/formDesigner/common/constants.js

@@ -17,30 +17,14 @@ class FormTypeInfo {
 
 export const FormTypeEntities = {
   IndividualProfile: new FormTypeInfo("IndividualProfile", "Subject registration", "individual"),
-  SubjectEnrolmentEligibility: new FormTypeInfo(
-    "SubjectEnrolmentEligibility",
-    "Subject enrolment eligibility",
-    "individual"
-  ),
-  ManualProgramEnrolmentEligibility: new FormTypeInfo(
-    "ManualProgramEnrolmentEligibility",
-    "Manual enrolment eligibility",
-    "individual"
-  ),
+  SubjectEnrolmentEligibility: new FormTypeInfo("SubjectEnrolmentEligibility", "Subject enrolment eligibility", "individual"),
+  ManualProgramEnrolmentEligibility: new FormTypeInfo("ManualProgramEnrolmentEligibility", "Manual enrolment eligibility", "individual"),
   ProgramEnrolment: new FormTypeInfo("ProgramEnrolment", "Program enrolment", "programEnrolment"),
   ProgramExit: new FormTypeInfo("ProgramExit", "Program exit", "programEnrolment"),
   ProgramEncounter: new FormTypeInfo("ProgramEncounter", "Program encounter", "programEncounter"),
-  ProgramEncounterCancellation: new FormTypeInfo(
-    "ProgramEncounterCancellation",
-    "Program encounter cancellation",
-    "programEncounter"
-  ),
+  ProgramEncounterCancellation: new FormTypeInfo("ProgramEncounterCancellation", "Program encounter cancellation", "programEncounter"),
   Encounter: new FormTypeInfo("Encounter", "Encounter", "encounter"),
-  IndividualEncounterCancellation: new FormTypeInfo(
-    "IndividualEncounterCancellation",
-    "Individual Encounter Cancellation",
-    "encounter"
-  ),
+  IndividualEncounterCancellation: new FormTypeInfo("IndividualEncounterCancellation", "Individual Encounter Cancellation", "encounter"),
   ChecklistItem: new FormTypeInfo("ChecklistItem", "Check list item", "checklistItem"),
   Location: new FormTypeInfo("Location", "Location"),
   Task: new FormTypeInfo("Task", "Task", "task"),
@@ -54,24 +38,15 @@ export const FormTypeEntities = {
   },
 
   isForProgramEncounter(formTypeInfo) {
-    return (
-      formTypeInfo === FormTypeEntities.ProgramEncounterCancellation ||
-      formTypeInfo === FormTypeEntities.ProgramEncounter
-    );
+    return formTypeInfo === FormTypeEntities.ProgramEncounterCancellation || formTypeInfo === FormTypeEntities.ProgramEncounter;
   },
 
   isForProgramEnrolment(formTypeInfo) {
-    return (
-      formTypeInfo === FormTypeEntities.ProgramEnrolment ||
-      formTypeInfo === FormTypeEntities.ProgramExit
-    );
+    return formTypeInfo === FormTypeEntities.ProgramEnrolment || formTypeInfo === FormTypeEntities.ProgramExit;
   },
 
   isForSubjectEncounter(formTypeInfo) {
-    return (
-      formTypeInfo === FormTypeEntities.Encounter ||
-      formTypeInfo === FormTypeEntities.IndividualEncounterCancellation
-    );
+    return formTypeInfo === FormTypeEntities.Encounter || formTypeInfo === FormTypeEntities.IndividualEncounterCancellation;
   }
 };
 
@@ -100,6 +75,7 @@ export const inlineConceptDataType = _.sortBy([
   "Time",
   "Duration",
   "Image",
+  "ImageV2",
   "Id",
   "Video",
   "Subject",

src/formDesigner/components/FormElement.js

@@ -130,6 +130,7 @@ export const dataTypeIcons = {
   Text: <TextFieldsIcon />,
   Notes: <NoteIcon />,
   Image: <ImageIcon />,
+  ImageV2: <ImageIcon />,
   DateTime: <DateRangeIcon />,
   Time: <QueryBuilderIcon />,
   Duration: <TimerIcon />,
@@ -172,22 +173,11 @@ function FormElement(props) {
       TransitionProps={{ mountOnEnter: true, unmountOnExit: true }}
       expanded={props.formElementData.expanded}
       className={props.formElementData.error ? classes.rootError : classes.root}
-      onChange={event =>
-        props.handleGroupElementChange(
-          props.groupIndex,
-          "expanded",
-          !props.formElementData.expanded,
-          props.index
-        )
-      }
+      onChange={event => props.handleGroupElementChange(props.groupIndex, "expanded", !props.formElementData.expanded, props.index)}
       onMouseEnter={() => setDragElement(true)}
       onMouseLeave={() => setDragElement(false)}
     >
-      <ExpansionPanelSummary
-        aria-controls={panel + "bh-content"}
-        id={panel + "bh-header"}
-        {...props.dragHandleProps}
-      >
+      <ExpansionPanelSummary aria-controls={panel + "bh-content"} id={panel + "bh-header"} {...props.dragHandleProps}>
         <Grid container direction={"row"}>
           <Grid container item alignItems={"center"} justify={"center"}>
             <DragHandler />
@@ -201,6 +191,7 @@ function FormElement(props) {
                   "Text",
                   "Notes",
                   "Image",
+                  "ImageV2",
                   "DateTime",
                   "Time",
                   "Duration",
@@ -223,11 +214,7 @@ function FormElement(props) {
                 )}
                 {props.formElementData.concept.dataType === "Coded" && (
                   <div className={classes.iconDataType}>
-                    <Tooltip
-                      title={
-                        props.formElementData.concept.dataType + " : " + props.formElementData.type
-                      }
-                    >
+                    <Tooltip title={props.formElementData.concept.dataType + " : " + props.formElementData.type}>
                       {dataTypeIcons["concept"][props.formElementData.type]}
                     </Tooltip>
                   </div>
@@ -236,9 +223,7 @@ function FormElement(props) {
             </Grid>
             <Grid item sm={10} style={{ paddingTop: "10px" }}>
               <Typography component={"span"} className={classes.heading}>
-                <span className={classes.expandIcon}>
-                  {props.formElementData.expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
-                </span>
+                <span className={classes.expandIcon}>{props.formElementData.expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}</span>
                 <InputLabel
                   name={"name" + panel}
                   style={{ display: "inline-block" }}
@@ -254,11 +239,7 @@ function FormElement(props) {
               <IconButton aria-label="delete" onClick={handleDelete} disabled={disableFormElement}>
                 <DeleteIcon />
               </IconButton>
-              <ToolTip
-                toolTipKey={"APP_DESIGNER_FORM_ELEMENT_NAME"}
-                onHover
-                displayPosition={"bottom"}
-              />
+              <ToolTip toolTipKey={"APP_DESIGNER_FORM_ELEMENT_NAME"} onHover displayPosition={"bottom"} />
             </Grid>
           </Grid>
         </Grid>

src/formDesigner/components/FormElementDetails.js

@@ -74,7 +74,7 @@ export const BackButton = props => {
   );
 };
 
-export const multiSelectFormElementConceptDataTypes = ["Coded", "Subject", "Image", "Video", "File", "Encounter"];
+export const multiSelectFormElementConceptDataTypes = ["Coded", "Subject", "Image", "ImageV2", "Video", "File", "Encounter"];
 
 function FormElementDetails({ userInfo, ...props }) {
   const classes = useStyles();
@@ -488,7 +488,7 @@ function FormElementDetails({ userInfo, ...props }) {
             index={props.index}
           />
         )}
-        {props.formElementData.concept.dataType === "Image" && (
+        {(props.formElementData.concept.dataType === "Image" || props.formElementData.concept.dataType === "ImageV2") && (
           <Grid container item sm={12}>
             <Grid item sm={3}>
               <TextField

src/formDesigner/components/ImageV2Concept.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { AvniSwitch } from "../../common/components/AvniSwitch";
+
+export const ImageV2Concept = ({ onKeyValueChange, checked }) => {
+  const onChange = event => onKeyValueChange({ key: "captureLocationInformation", value: event.target.checked }, 0);
+  return (
+    <div style={{ marginTop: 10, marginBottom: 10 }}>
+      <AvniSwitch
+        checked={checked}
+        onChange={onChange}
+        name="Capture Location Information"
+        toolTipKey={"APP_DESIGNER_CAPTURE_LOCATION_INFORMATION"}
+      />
+    </div>
+  );
+};

src/formDesigner/views/CreateEditConcept.js

@@ -29,6 +29,7 @@ import { SubjectConcept } from "../components/SubjectConcept";
 import { PhoneNumberConcept } from "../components/PhoneNumberConcept";
 import { EncounterConcept } from "../components/EncounterConcept";
 import { connect } from "react-redux";
+import { ImageV2Concept } from "../components/ImageV2Concept";
 
 export const moveUp = (conceptAnswers, index) => {
   if (index === 0) return conceptAnswers;
@@ -125,6 +126,7 @@ class CreateEditConcept extends Component {
         "highestAddressLevelTypeUUID",
         "subjectTypeUUID",
         "verifyPhoneNumber",
+        "captureLocationInformation",
         "encounterTypeUUID",
         "encounterScope",
         "encounterIdentifier"
@@ -687,6 +689,18 @@ class CreateEditConcept extends Component {
       }
     }
 
+    if (this.state.dataType === "ImageV2") {
+      const locationInformationKey = find(this.state.keyValues, ({ key, value }) => key === "captureLocationInformation");
+      if (locationInformationKey) {
+        dataType = <ImageV2Concept onKeyValueChange={this.onKeyValueChange} checked={locationInformationKey.value} />;
+      } else {
+        this.setState(prevState => ({
+          ...prevState,
+          keyValues: [{ key: "captureLocationInformation", value: false }]
+        }));
+      }
+    }
+
     return (
       <Box boxShadow={2} p={2} bgcolor="background.paper">
         <DocumentationContainer filename={"Concept.md"}>