CM-508: add modal with files

src/components/payroll/PayrollSearcherApproved.js

@@ -1,7 +1,6 @@
 import React, { useRef, useEffect } from 'react';
 import { connect, useSelector } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import Button from '@material-ui/core/Button';
 
 import {
   Searcher,
@@ -18,6 +17,7 @@ import {
 } from '../../constants';
 import { fetchPayrolls } from '../../actions';
 import PaymentApproveForPaymentSummary from './dialogs/PaymentApproveForPaymentSummary';
+import PayrollReconciliationFilesDialog from './dialogs/PayrollReconciliationFilesDialog';
 
 function PayrollSearcherApproved({
   fetchingPayrolls,
@@ -33,7 +33,7 @@ function PayrollSearcherApproved({
 }) {
   const history = useHistory();
   const modulesManager = useModulesManager();
-  const { formatMessage, formatMessageWithValues } = useTranslations(MODULE_NAME, modulesManager);
+  const { formatMessageWithValues } = useTranslations(MODULE_NAME, modulesManager);
   const rights = useSelector((store) => store.core.user.i_user.rights ?? []);
 
   const prevSubmittingMutationRef = useRef();
@@ -94,16 +94,11 @@ function PayrollSearcherApproved({
       ? `${payroll.status}` : ''),
     (payroll) => (payroll.paymentMethod
       ? `${payroll.paymentMethod}` : ''),
-    // eslint-disable-next-line no-unused-vars
     (payroll) => (
-      <Button
-        onClick={() => {}}
-        variant="contained"
-        color="primary"
-        className={classes.button}
-      >
-        {formatMessage('payroll.viewReconciliationFiles')}
-      </Button>
+      <PayrollReconciliationFilesDialog
+        classes={classes}
+        payroll={payroll}
+      />
     ),
     (payroll) => (
       <PaymentApproveForPaymentSummary

src/components/payroll/PayrollSearcherReconciled.js

@@ -18,6 +18,7 @@ import {
 } from '../../constants';
 import { fetchPayrolls } from '../../actions';
 import PaymentReconciliationSummaryDialog from './dialogs/PaymentReconciliationSummaryDialog';
+import PayrollReconciliationFilesDialog from './dialogs/PayrollReconciliationFilesDialog';
 
 function PayrollSearcherReconciled({
   fetchingPayrolls,
@@ -94,16 +95,11 @@ function PayrollSearcherReconciled({
       ? `${payroll.status}` : ''),
     (payroll) => (payroll.paymentMethod
       ? `${payroll.paymentMethod}` : ''),
-    // eslint-disable-next-line no-unused-vars
     (payroll) => (
-      <Button
-        onClick={() => {}}
-        variant="contained"
-        color="primary"
-        className={classes.button}
-      >
-        {formatMessage('payroll.viewReconciliationFiles')}
-      </Button>
+      <PayrollReconciliationFilesDialog
+        classes={classes}
+        payroll={payroll}
+      />
     ),
     (payroll) => (
       <PaymentReconciliationSummaryDialog

src/components/payroll/dialogs/PayrollReconciliationFilesDialog.js

@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import {
+  useTranslations,
+  useModulesManager,
+} from '@openimis/fe-core';
+import PayrollPaymentFilesSearcher from '../PayrollPaymentFilesSearcher';
+import { MODULE_NAME } from '../../../constants';
+
+function PayrollReconciliationFilesDialog({
+  payroll, classes,
+}) {
+  const modulesManager = useModulesManager();
+  const rights = useSelector((state) => state.core?.user?.i_user?.rights ?? []);
+  const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+
+  return (
+    <>
+      <Button
+        onClick={handleOpen}
+        variant="contained"
+        color="primary"
+        className={classes.button}
+      >
+        {formatMessage('payroll.viewReconciliationFiles')}
+      </Button>
+      <Dialog
+        open={isOpen}
+        onClose={handleClose}
+        PaperProps={{
+          style: {
+            width: 600,
+            maxWidth: 1000,
+          },
+        }}
+      >
+        <form noValidate>
+          <DialogContent>
+            <PayrollPaymentFilesSearcher
+              module="payroll"
+              payrollUuid={payroll?.id}
+              rights={rights}
+              showFilters={false}
+            />
+          </DialogContent>
+          <DialogActions
+            style={{
+              display: 'inline',
+              paddingLeft: '10px',
+              marginTop: '25px',
+              marginBottom: '15px',
+            }}
+          >
+            <div style={{ maxWidth: '1000px' }}>
+              <div style={{ float: 'right' }}>
+                <Button
+                  onClick={handleClose}
+                  variant="outlined"
+                  autoFocus
+                  style={{
+                    margin: '0 16px',
+                    marginBottom: '15px',
+                  }}
+                >
+                  {formatMessage('payroll.summary.close')}
+                </Button>
+              </div>
+            </div>
+          </DialogActions>
+        </form>
+      </Dialog>
+    </>
+  );
+}
+
+export default PayrollReconciliationFilesDialog;