feat: rendering the comment field on the production items on the PDF

bcgov · Oct 13, 2020 · cd1cfb2 · cd1cfb2
1 parent b175e78
commit cd1cfb2
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 43 deletions.
diff --git a/app/containers/Applications/ApplicationDetailsPdf.tsx b/app/containers/Applications/ApplicationDetailsPdf.tsx
@@ -56,6 +56,8 @@ const styles = StyleSheet.create({
 });
 
 const CUSTOM_FIELDS = {
+  ProblemReportField: (props) =>
+    props.formData ? <Text>{`\ncomments: ${props.formData}`}</Text> : null,
   StringField: (props) => <Text>{props.formData ?? '[Not Entered]'}</Text>,
   emissionSource: (props) => (
     <Text style={{fontSize: 13}}>
@@ -149,30 +151,34 @@ export const ApplicationDetailsPdf: React.FunctionComponent<Props> = (
             </Column>
           </Row>
 
-          {formResults.map(({node}) => (
-            <View key={node.formJsonByFormId.name} style={styles.formFields}>
-              <Text style={{borderBottom: 1, paddingBottom: 10, fontSize: 16}}>
-                {'\n'}
-                {node.formJsonByFormId.name}
-              </Text>
-              <JsonSchemaForm
-                omitExtraData
-                ArrayFieldTemplate={PdfArrayFieldTemplate}
-                FieldTemplate={PdfFieldTemplate}
-                ObjectFieldTemplate={PdfObjectFieldTemplate}
-                showErrorList={false}
-                fields={CUSTOM_FIELDS}
-                schema={node.formJsonByFormId.formJson.schema}
-                uiSchema={node.formJsonByFormId.formJson.uiSchema}
-                formData={node.formResult}
-                tagName={'VIEW' as any}
-                widgets={customWidget}
-                formContext={{query}}
-              >
-                <View />
-              </JsonSchemaForm>
-            </View>
-          ))}
+          {formResults.map(({node}) => {
+            return (
+              <View key={node.formJsonByFormId.name} style={styles.formFields}>
+                <Text
+                  style={{borderBottom: 1, paddingBottom: 10, fontSize: 16}}
+                >
+                  {'\n'}
+                  {node.formJsonByFormId.name}
+                </Text>
+                <JsonSchemaForm
+                  omitExtraData
+                  ArrayFieldTemplate={PdfArrayFieldTemplate}
+                  FieldTemplate={PdfFieldTemplate}
+                  ObjectFieldTemplate={PdfObjectFieldTemplate}
+                  showErrorList={false}
+                  fields={CUSTOM_FIELDS}
+                  schema={node.formJsonByFormId.formJson.schema}
+                  uiSchema={node.formJsonByFormId.formJson.uiSchema}
+                  formData={node.formResult}
+                  tagName={'VIEW' as any}
+                  widgets={customWidget}
+                  formContext={{query}}
+                >
+                  <View />
+                </JsonSchemaForm>
+              </View>
+            );
+          })}
         </Body>
         <Text
           fixed

diff --git a/app/containers/Pdf/PdfFieldTemplate.tsx b/app/containers/Pdf/PdfFieldTemplate.tsx
@@ -10,27 +10,31 @@ const styles = StyleSheet.create({
 const PdfFieldTemplate: React.FunctionComponent<FieldTemplateProps> = (
   props
 ) => {
+  const getLocalLabel = (props: FieldTemplateProps) => {
+    if (props.label === 'comments') {
+      return null;
+    } // taken care of by the custom field.
+    if (props.label === 'gases' || props.label === 'sourceTypeName')
+      return null;
+
+    if (props.classNames.includes('field-object'))
+      return (
+        <Text
+          style={{fontSize: 15, letterSpacing: 2}}
+        >{`\n\n${props.label}: `}</Text>
+      );
+
+    return <Text>{`\n${props.label}: `}</Text>;
+  };
+
+  const localChildren = props.children ? (
+    <Text style={styles.fields}>{props.children}</Text>
+  ) : null;
+
   return (
     <>
-      {props.label && (
-        <View style={styles.label}>
-          {/* In order to properly display gas labels we need to check:
-          if label has 'field-object' class then add two new lines and style as subtitle
-          otherwise just add one new line
-          */}
-          {props.label === 'gases' ||
-          props.label === 'sourceTypeName' ? null : props.classNames.includes(
-              'field-object'
-            ) ? (
-            <Text style={{fontSize: 15, letterSpacing: 2}}>
-              {`\n\n${props.label}: `}
-            </Text>
-          ) : (
-            <Text>{`\n${props.label}: `}</Text>
-          )}
-        </View>
-      )}
-      {props.children && <Text style={styles.fields}>{props.children}</Text>}
+      {props.label && <View style={styles.label}>{getLocalLabel(props)}</View>}
+      {localChildren}
     </>
   );
 };

diff --git a/app/containers/Pdf/PdfProductionFieldsTemplate.tsx b/app/containers/Pdf/PdfProductionFieldsTemplate.tsx
@@ -16,6 +16,13 @@ export const PdfProductionFieldsTemplate: React.FunctionComponent<Props> = ({
       <Text style={{fontSize: 15, letterSpacing: 2}}>
         {'\n'}Production:{'\n'}
       </Text>
+      {formData.comments ? (
+        <Text style={{marginBottom: 2, marginTop: 2}}>
+          {`comments: ${formData.comments}`}
+          {'\n'}
+        </Text>
+      ) : null}
+
       <Text>
         Product or Service:{' '}
         {formData.productRowId