CRDCDH-1114 Submission Request Free-text Delimiter

src/components/Questionnaire/Repository.tsx

@@ -87,6 +87,7 @@ const Repository: FC<Props> = ({
         <TextInput
           id={idPrefix.concat(`repository-${index}-other-data-types-submitted`)}
           label="Other Data Type(s)"
+          tooltipText='Enter additional Data Types, separated by pipes ("|").'
           name={`study[repositories][${index}][otherDataTypesSubmitted]`}
           value={otherDataTypesSubmitted}
           placeholder="Other, specify as free text"

src/components/Questionnaire/ReviewDataListingProperty.tsx

@@ -42,6 +42,7 @@ type Props = {
   gridWidth?: GridWidth;
   hideLabel?: boolean;
   textTransform?: CSSProperties["textTransform"];
+  delimiter?: string;
 };
 
 const ReviewDataListingProperty: FC<Props> = ({
@@ -53,6 +54,7 @@ const ReviewDataListingProperty: FC<Props> = ({
   gridWidth,
   textTransform = "uppercase",
   hideLabel = false,
+  delimiter = ",",
 }) => {
   const [isMultiple, setIsMultiple] = useState(false);
 
@@ -61,15 +63,15 @@ const ReviewDataListingProperty: FC<Props> = ({
       return [];
     }
     if (typeof value === "string") {
-      const splitted = value.split(',').map((item) => item.trim()).filter((item) => item.length);
-      if (splitted.length > 1) {
+      const split = value.split(delimiter).map((item) => item.trim()).filter((item) => item.length);
+      if (split.length > 1) {
         setIsMultiple(true);
       }
-      return splitted;
+      return split;
     }
     setIsMultiple(true);
     return value?.map((item) => item.trim()).filter((item) => item.length);
-  }, [value, isList]);
+  }, [value, isList, delimiter]);
 
   return (
     <StyledGrid md={gridWidth || 6} xs={12} item>
@@ -102,7 +104,7 @@ const ReviewDataListingProperty: FC<Props> = ({
               id={idPrefix.concat(`-property-value-${idx}`)}
             >
               {' '}
-              {`${val}${idx !== displayValues.length - 1 ? "," : ""}`}
+              {val}
             </StyledValue>
           )) : (
             <StyledValue id={idPrefix.concat(`-property-value`)}>

src/content/questionnaire/sections/C.tsx

@@ -159,6 +159,7 @@ const FormSectionC: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
           id="section-c-other-cancer-types"
           key={`other_cancer_types_${cancerTypes?.toString()}`}
           label="Other cancer type(s)"
+          tooltipText='Enter additional Cancer Types, separated by pipes ("|").'
           labelStartAddornment={(
             <LabelCheckbox
               idPrefix="section-c-other-cancer-types-enabled"
@@ -180,6 +181,7 @@ const FormSectionC: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
         <TextInput
           id="section-c-pre-cancer-types"
           label="Pre-Cancer types (provide all that apply)"
+          tooltipText='Enter additional Pre-Cancer Types, separated by pipes ("|").'
           name="preCancerTypes"
           placeholder="Provide pre-cancer types"
           value={data.preCancerTypes}
@@ -206,6 +208,7 @@ const FormSectionC: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
         <TextInput
           id="section-c-other-species-of-subjects"
           label="Other Specie(s) involved"
+          tooltipText='Enter additional Species, separated by pipes ("|").'
           labelStartAddornment={(
             <LabelCheckbox
               idPrefix="section-c-other-cancer-types-enabled"

src/content/questionnaire/sections/D.tsx

@@ -341,7 +341,7 @@ const FormSectionD: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
           value={data.otherDataTypes}
           placeholder="Other Data Types (Specify)"
           gridWidth={12}
-          tooltipText="Data that do not fit in any of the other categories."
+          tooltipText='Data that do not fit in any of the other categories. Enter additional Data Types, separated by pipes ("|").'
           readOnly={readOnlyInputs}
           maxLength={200}
         />
@@ -418,7 +418,7 @@ const FormSectionD: FC<FormSectionProps> = ({ SectionOption, refs }: FormSection
             value={data.clinicalData.otherDataTypes}
             placeholder="Other clinical data types (Specify)"
             gridWidth={12}
-            tooltipText="If there are any additional types of data included with the study not already specified above, describe here."
+            tooltipText='If there are any additional types of data included with the study not already specified above, describe here. Enter additional Clinical Data Types, separated by pipes ("|").'
             readOnly={readOnlyInputs}
             maxLength={200}
           />

src/content/questionnaire/sections/Review.tsx

@@ -258,7 +258,7 @@ const FormSectionReview: FC<FormSectionProps> = ({
               valuePlacement="bottom"
               isList
             />
-            <ReviewDataListingProperty idPrefix={`review-repository-${idx}-other-data-types`} label="Other Data Type(s)" value={repository.otherDataTypesSubmitted} valuePlacement="bottom" isList />
+            <ReviewDataListingProperty idPrefix={`review-repository-${idx}-other-data-types`} label="Other Data Type(s)" value={repository.otherDataTypesSubmitted} valuePlacement="bottom" delimiter="|" isList />
           </ReviewDataListing>
         ))}
       </ReviewSection>
@@ -279,16 +279,16 @@ const FormSectionReview: FC<FormSectionProps> = ({
           description={SectionMetadata.C.sections.CANCER_TYPES.description}
         >
           <ReviewDataListingProperty idPrefix="review-cancer-types-cancer-types" label="Cancer types" value={data.cancerTypes} valuePlacement="bottom" isList />
-          <ReviewDataListingProperty idPrefix="review-cancer-types-other-cancer-types" label="Other cancer type(s)" value={data.otherCancerTypes} valuePlacement="bottom" isList />
-          <ReviewDataListingProperty idPrefix="review-cancer-types-pre-cancer-types" label="Pre-cancer types" value={data.preCancerTypes} valuePlacement="bottom" isList />
+          <ReviewDataListingProperty idPrefix="review-cancer-types-other-cancer-types" label="Other cancer type(s)" value={data.otherCancerTypes} valuePlacement="bottom" delimiter="|" isList />
+          <ReviewDataListingProperty idPrefix="review-cancer-types-pre-cancer-types" label="Pre-cancer types" value={data.preCancerTypes} valuePlacement="bottom" delimiter="|" isList />
         </ReviewDataListing>
 
         <ReviewDataListing
           idPrefix="review-subjects"
           title={SectionMetadata.C.sections.SUBJECTS.title}
         >
           <ReviewDataListingProperty idPrefix="review-subjects-species" label="Species of subjects" value={data.species} valuePlacement="bottom" isList />
-          <ReviewDataListingProperty idPrefix="review-subjects-other-species" label="Other Specie(s) involved" value={data.otherSpeciesOfSubjects} valuePlacement="bottom" isList />
+          <ReviewDataListingProperty idPrefix="review-subjects-other-species" label="Other Specie(s) involved" value={data.otherSpeciesOfSubjects} valuePlacement="bottom" delimiter="|" isList />
           <ReviewDataListingProperty idPrefix="review-subjects-number-of-subjects-included-in-the-submission" label="Number of subjects included in the submission" value={data.numberOfParticipants?.toString()} valuePlacement="bottom" />
         </ReviewDataListing>
       </ReviewSection>
@@ -315,7 +315,7 @@ const FormSectionReview: FC<FormSectionProps> = ({
           {data.dataTypes?.includes(DataTypes.imaging.name) && data.imagingDataDeIdentified !== null && (
             <ReviewDataListingProperty idPrefix="review-data-types-imaging-data-de-identified" label="Imaging Data de-identified" value={data.imagingDataDeIdentified ? "Yes" : "No"} />
           )}
-          <ReviewDataListingProperty idPrefix="review-data-types-other-data-types" gridWidth={12} label="Other Data types" value={data.otherDataTypes} valuePlacement="bottom" isList />
+          <ReviewDataListingProperty idPrefix="review-data-types-other-data-types" gridWidth={12} label="Other Data types" value={data.otherDataTypes} valuePlacement="bottom" delimiter="|" isList />
         </ReviewDataListing>
 
         {data.dataTypes?.includes(DataTypes.clinicalTrial.name) && (
@@ -330,7 +330,7 @@ const FormSectionReview: FC<FormSectionProps> = ({
             <ReviewDataListingProperty idPrefix="review-clinical-data-types-outcome-data" label={DataTypes.outcomeData.label} value={data.clinicalData?.dataTypes?.includes(DataTypes.outcomeData.name) ? "Yes" : "No"} />
             <ReviewDataListingProperty idPrefix="review-clinical-data-types-treatment-data" label={DataTypes.treatmentData.label} value={data.clinicalData?.dataTypes?.includes(DataTypes.treatmentData.name) ? "Yes" : "No"} />
             <ReviewDataListingProperty idPrefix="review-clinical-data-types-biospecimen-data" label={DataTypes.biospecimenData.label} value={data.clinicalData?.dataTypes?.includes(DataTypes.biospecimenData.name) ? "Yes" : "No"} />
-            <ReviewDataListingProperty idPrefix="review-clinical-data-types-other-clinical-data-types" gridWidth={12} label="Other Clinical Data types" value={data.clinicalData?.otherDataTypes?.split(",")} valuePlacement="bottom" isList />
+            <ReviewDataListingProperty idPrefix="review-clinical-data-types-other-clinical-data-types" gridWidth={12} label="Other Clinical Data types" value={data.clinicalData?.otherDataTypes} valuePlacement="bottom" delimiter="|" isList />
             <ReviewDataListingProperty idPrefix="review-clinical-data-types-additional-data-in-future" label="Additional Data in future" value={data.clinicalData?.futureDataTypes ? "Yes" : "No"} />
           </ReviewDataListing>
         )}