Generating configurations for reports creation; COUNTRY=cambodia (#892)

Co-authored-by: Eric Boucher <[email protected]> Co-authored-by: Amit W <[email protected]>
WFP-VAM · Jul 13, 2023 · cfdafd4 · cfdafd4
1 parent 650bfa2
commit cfdafd4
Show file tree

Hide file tree

Showing 36 changed files with 514 additions and 176 deletions.
diff --git a/frontend/src/components/Common/ReportDialog/ReportDocLegend.tsx b/frontend/src/components/Common/ReportDialog/ReportDocLegend.tsx
@@ -49,7 +49,7 @@ const ReportDocLegend = memo(({ theme, title, definition }: LegendProps) => {
   const renderedDefinitions = useMemo(() => {
     return definition.map(item => {
       return (
-        <View key={item.value} style={styles.legendContent}>
+        <View key={item.value as string} style={styles.legendContent}>
           <View style={item.style} />
           <Text style={[styles.legendText]}>{item.value}</Text>
         </View>

diff --git a/frontend/src/components/Common/ReportDialog/index.tsx b/frontend/src/components/Common/ReportDialog/index.tsx
@@ -27,16 +27,16 @@ import {
 } from 'context/analysisResultStateSlice';
 import { Column, ExposedPopulationResult } from 'utils/analysis-utils';
 import LoadingBlinkingDots from 'components/Common/LoadingBlinkingDots';
+import { ReportType } from 'config/types';
 import ReportDoc from './reportDoc';
-import { ReportType } from './types';
 
 type Format = 'png' | 'jpeg';
 
 const ReportDialog = memo(
   ({
     classes,
     open,
-    reportType,
+    reportConfig,
     handleClose,
     tableData,
     columns,
@@ -50,7 +50,7 @@ const ReportDialog = memo(
       analysisResultSelector,
     ) as ExposedPopulationResult;
 
-    const eventDate = useMemo(() => {
+    const reportDate = useMemo(() => {
       return analysisResult?.date
         ? moment(new Date(analysisResult?.date)).format('YYYY-MM-DD')
         : '';
@@ -106,14 +106,9 @@ const ReportDialog = memo(
               t={t}
               exposureLegendDefinition={analysisResult?.legend ?? []}
               theme={theme}
-              reportType={reportType}
-              tableName="Population Exposure"
               tableShowTotal
-              eventName={
-                reportType === ReportType.Storm
-                  ? `Storm Report (${eventDate})`
-                  : `Flood Report (${eventDate})`
-              }
+              reportTitle={`${t(reportConfig.title)} ${reportDate}`}
+              reportConfig={reportConfig}
               mapImage={mapImage}
               tableData={tableData}
               columns={columns}
@@ -124,9 +119,9 @@ const ReportDialog = memo(
     }, [
       analysisResult,
       columns,
-      eventDate,
       mapImage,
-      reportType,
+      reportConfig,
+      reportDate,
       t,
       tableData,
       theme,
@@ -177,14 +172,9 @@ const ReportDialog = memo(
                 t={t}
                 exposureLegendDefinition={analysisResult?.legend ?? []}
                 theme={theme}
-                reportType={reportType}
-                tableName="Population Exposure"
+                reportTitle={`${t(reportConfig.title)} ${reportDate}`}
+                reportConfig={reportConfig}
                 tableShowTotal
-                eventName={
-                  reportType === ReportType.Storm
-                    ? `Storm Report (${eventDate})`
-                    : `Flood Report (${eventDate})`
-                }
                 mapImage={mapImage}
                 tableData={tableData}
                 columns={columns}
@@ -200,22 +190,21 @@ const ReportDialog = memo(
       analysisResult,
       classes.actionButton,
       columns,
-      eventDate,
       getPDFName,
       mapImage,
       renderedLoadingButtonText,
-      reportType,
+      reportConfig,
+      reportDate,
       t,
       tableData,
       theme,
     ]);
 
-    // The report type text
-    const reportTypeText = useMemo(() => {
-      return reportType === ReportType.Storm
-        ? 'Storm impact Report'
-        : 'Flood Report';
-    }, [reportType]);
+    const renderedSignatureText = useMemo(() => {
+      return reportConfig?.signatureText
+        ? t(reportConfig.signatureText)
+        : t('PRISM automated report');
+    }, [reportConfig, t]);
 
     return (
       <Dialog
@@ -234,7 +223,7 @@ const ReportDialog = memo(
             >
               <ArrowBack />
             </IconButton>
-            <span className={classes.titleText}>{t(reportTypeText)}</span>
+            <span className={classes.titleText}>{t(reportConfig.title)}</span>
           </div>
         </DialogTitle>
         <DialogContent
@@ -248,9 +237,7 @@ const ReportDialog = memo(
           {renderedPdfViewer}
         </DialogContent>
         <DialogActions className={classes.actions}>
-          <span className={classes.signature}>
-            {t('P R I S M automated report')}
-          </span>
+          <span className={classes.signature}>{renderedSignatureText}</span>
           {renderedDownloadPdfButton}
         </DialogActions>
       </Dialog>
@@ -312,7 +299,7 @@ const styles = (theme: Theme) =>
 
 export interface ReportProps extends WithStyles<typeof styles> {
   open: boolean;
-  reportType: ReportType;
+  reportConfig: ReportType;
   handleClose: () => void;
   tableData: AnalysisTableRow[];
   columns: Column[];