CM-729: added individual upload history dialog (#49)

* CM-729: added individual upload history dialog * CM-729: added adjustments to the frontend
openimis · Feb 22, 2024 · b7faace · b7faace
1 parent 0bfffae
commit b7faace
Show file tree

Hide file tree

Showing 9 changed files with 423 additions and 9 deletions.
diff --git a/src/actions.js b/src/actions.js
@@ -22,6 +22,7 @@ const ENROLLMENT_SUMMARY_FULL_PROJECTION = () => [
   'numberOfIndividualsAssignedToProgramme',
   'numberOfIndividualsNotAssignedToProgramme',
   'numberOfIndividualsAssignedToSelectedProgramme',
+  'numberOfIndividualsToUpload',
 ];
 
 export function fetchWorkflows() {
@@ -72,6 +73,13 @@ const GROUP_HISTORY_FULL_PROJECTION = GROUP_FULL_PROJECTION.filter(
   (item) => item !== 'head {firstName, lastName}',
 );
 
+const UPLOAD_HISTORY_FULL_PROJECTION = () => [
+  'id',
+  'uuid',
+  'workflow',
+  'dataUpload {uuid, dateCreated, dateUpdated, sourceName, sourceType, status, error }',
+];
+
 export function fetchIndividualEnrollmentSummary(params) {
   const payload = formatQuery(
     'individualEnrollmentSummary',
@@ -116,6 +124,11 @@ export function fetchGroupHistory(params) {
   return graphql(payload, ACTION_TYPE.SEARCH_GROUP_HISTORY);
 }
 
+export function fetchUploadHistory(params) {
+  const payload = formatPageQueryWithCount('individualDataUploadHistory', params, UPLOAD_HISTORY_FULL_PROJECTION());
+  return graphql(payload, ACTION_TYPE.GET_INDIVIDUAL_UPLOAD_HISTORY);
+}
+
 export function deleteIndividual(individual, clientMutationLabel) {
   const individualUuids = `ids: ["${individual?.id}"]`;
   const mutation = formatMutation('deleteIndividual', individualUuids, clientMutationLabel);

diff --git a/src/components/CollapsableErrorList.js b/src/components/CollapsableErrorList.js
@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { injectIntl } from 'react-intl';
+import ExpandLess from '@material-ui/icons/ExpandLess';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+import {
+  formatMessage,
+} from '@openimis/fe-core';
+import {
+  ListItem,
+  ListItemText,
+  Collapse,
+} from '@material-ui/core';
+import { withTheme, withStyles } from '@material-ui/core/styles';
+
+const styles = (theme) => ({
+  item: theme.paper.item,
+});
+
+function CollapsableErrorList({
+  intl,
+  errors,
+}) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const handleOpen = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  if (!errors || !Object.keys(errors).length) {
+    return (
+      <ListItem>
+        <ListItemText primary={formatMessage(
+          intl,
+          'socialProtection',
+          'benefitPlan.benefitPlanBeneficiaries.uploadHistoryTable.errorNone',
+        )}
+        />
+      </ListItem>
+    );
+  }
+
+  return (
+    <>
+      <ListItem button onClick={handleOpen}>
+        <ListItemText primary={formatMessage(
+          intl,
+          'socialProtection',
+          'benefitPlan.benefitPlanBeneficiaries.uploadHistoryTable.error',
+        )}
+        />
+        {isExpanded ? <ExpandLess /> : <ExpandMore />}
+      </ListItem>
+      <Collapse in={isExpanded} timeout="auto" unmountOnExit>
+        { JSON.stringify(errors) }
+      </Collapse>
+    </>
+  );
+}
+
+export default injectIntl(
+  withTheme(
+    withStyles(styles)(CollapsableErrorList),
+  ),
+);
diff --git a/src/components/dialogs/AdvancedCriteriaForm.js b/src/components/dialogs/AdvancedCriteriaForm.js
@@ -264,7 +264,7 @@ function AdvancedCriteriaForm({
         </div>
         <Divider />
         <Grid container spacing={2}>
-          <Grid item xs={4}>
+          <Grid item xs={6}>
             <Paper elevation={3} style={{ padding: '20px' }}>
               <Typography variant="h6" gutterBottom>
                 {formatMessage(intl, 'individual', 'individual.enrollment.totalNumberOfIndividuals')}
@@ -274,7 +274,7 @@ function AdvancedCriteriaForm({
               </Typography>
             </Paper>
           </Grid>
-          <Grid item xs={4}>
+          <Grid item xs={6}>
             <Paper elevation={3} style={{ padding: '20px' }}>
               <Typography variant="h6" gutterBottom>
                 {formatMessage(intl, 'individual', 'individual.enrollment.numberOfSelectedIndividuals')}
@@ -284,7 +284,7 @@ function AdvancedCriteriaForm({
               </Typography>
             </Paper>
           </Grid>
-          <Grid item xs={4}>
+          <Grid item xs={6}>
             <Paper elevation={3} style={{ padding: '20px' }}>
               <Typography variant="h6" gutterBottom>
                 {formatMessage(intl, 'individual', 'individual.enrollment.numberOfIndividualsAssignedToProgramme')}
@@ -294,7 +294,7 @@ function AdvancedCriteriaForm({
               </Typography>
             </Paper>
           </Grid>
-          <Grid item xs={4}>
+          <Grid item xs={6}>
             <Paper elevation={3} style={{ padding: '20px' }}>
               <Typography variant="h6" gutterBottom>
                 {formatMessage(intl, 'individual', 'individual.enrollment.numberOfIndividualsNotAssignedToProgramme')}
@@ -304,7 +304,7 @@ function AdvancedCriteriaForm({
               </Typography>
             </Paper>
           </Grid>
-          <Grid item xs={4}>
+          <Grid item xs={6}>
             <Paper elevation={3} style={{ padding: '20px' }}>
               <Typography variant="h6" gutterBottom>
                 {/* eslint-disable-next-line max-len */}
@@ -315,6 +315,17 @@ function AdvancedCriteriaForm({
               </Typography>
             </Paper>
           </Grid>
+          <Grid item xs={6}>
+            <Paper elevation={3} style={{ padding: '20px' }}>
+              <Typography variant="h6" gutterBottom>
+                {/* eslint-disable-next-line max-len */}
+                {formatMessage(intl, 'individual', 'individual.enrollment.numberOfIndividualsToBeUploaded')}
+              </Typography>
+              <Typography variant="body1">
+                {enrollmentSummary.numberOfIndividualsToUpload}
+              </Typography>
+            </Paper>
+          </Grid>
         </Grid>
         <Grid container spacing={4}>
           <Grid item xs={5} />