viam-compliance-deposit-ui/src/core/components/sarDeposit/sarDeposit.js

A React component for deposit sar alerts.

import React, { useState, useRef, useEffect } from 'react';
import { Row, Col } from 'react-bootstrap';
import { useForm } from 'react-hook-form';
import { Format } from '@viamericas/viam-utils';

import Filters from '../filters/filters';
import { IsNullOrEmpty } from '../../business/utils/validations';
import AlertComponent from '../../utils/alert';
import Detail from '../detail/detail';
import getAlertsDetection, {
  getList
} from '../../business/services/alert.service';
import { Options, StatusAlert } from '../../business/rules/commonRules';
import { downloadFileMO } from '../../business/rules/exportRules';

let params = {};

const SARDeposits = ({
  t,
  maxButtonsArea,
  numberOfRecordsByPageDefault,
  connecParam,
  language,
  setLoader,
  ux,
  user,
  option,
  iconTiffImage,
  iconImgNotFound
}) => {
  const [nroPag, setNroPag] = useState(1);
  const [regxPag, setRegxPag] = useState(numberOfRecordsByPageDefault);
  const firstUpdate = useRef(true);
  const [dataAlerts, setDataAlerts] = useState([]);
  const [show, setShow] = useState(false);

  const [sortInfo, setSortInfo] = useState({
    id: 'AlertId',
    sort: 'up'
  });

  const [errorPpal, setErrorPpal] = useState({
    isError: false,
    errorMessage: '',
    errorType: ''
  });

  const [errorDetail, setErrorDetail] = useState({
    isError: false,
    errorMessage: '',
    errorType: ''
  });

  let tittle = '';
  if (option === Options.AlertAnalysis) tittle = t('titleAlertAnalysis');
  else if (option === Options.AlertDecisioning)
    tittle = t('titleAlertDecisioning');
  else tittle = t('titleAlertFinished');

  const _dateFrom = new Date();
  _dateFrom.setMonth(_dateFrom.getMonth() - 3);

  let _statusId = '';

  if (option === Options.AlertAnalysis) _statusId = StatusAlert.PE;

  const frmDataFilters = {
    dateFrom: _dateFrom,
    dateTo: new Date(),
    alertId: null,
    moNumber: '',
    company: '',
    state: '',
    agentCode: '',
    amountFrom: null,
    amountTo: null,
    statusId: _statusId,
    containsRKL: false
  };

  const {
    register,
    control,
    handleSubmit,
    formState: { errors },
    watch,
    setValue,
    trigger
  } = useForm({
    defaultValues: frmDataFilters,
    validateCriteriaMode: 'all',
    mode: 'onChange',
    shouldFocusError: true,
    criteriaMode: 'all'
  });

  const retrieveData = async () => {
    setLoader(true);
    try {
      setDataAlerts([]);
      setErrorPpal({
        isError: false,
        errorMessage: '',
        errorType: ''
      });

      const _data = await getAlertsDetection({ connecParam, params });

      if (_data.data.data.length > 0) {
        setDataAlerts(_data.data.data);
      } else {
        setDataAlerts([]);
        setErrorPpal({
          isError: true,
          errorMessage: t('msgWithOutInformation'),
          errorType: 'warning'
        });
      }
      setLoader(false);
    } catch (error) {
      setLoader(false);

      setDataAlerts([]);

      setErrorPpal({
        isError: true,
        errorMessage: t('msgReportError'),
        errorType: 'danger'
      });
    }
  };

  const handleRetrieve = async data => {
    try {
      setLoader(true);
      setNroPag(1);

      const setParams = () => {
        let _dtFrom = data.dateFrom;
        let _dtTo = data.dateTo;

        if (!IsNullOrEmpty(data.dateFrom) && typeof data.dateFrom !== 'string')
          _dtFrom = Format.Txt.toDate(data.dateFrom);

        if (!IsNullOrEmpty(data.dateTo) && typeof data.dateTo !== 'string')
          _dtTo = Format.Txt.toDate(data.dateTo);

        return {
          pagination: {
            pageNumber: 1,
            pageRows: Number(regxPag)
          },
          filters: {
            dateFrom: _dtFrom,
            dateTo: _dtTo,
            alertId: Number(data.alertId),
            moNumber: data.moNumber,
            companyId: data.company,
            stateId: data.state,
            agentCode: data.agentCode,
            amountFrom: Number(data.amountFrom),
            amountTo: Number(data.amountTo),
            statusId: data.statusId,
            containsRKL: data.containsRKL,
            isExport: false,
            orderByColumnName: 'AlertId',
            orderType: true,
            option
          }
        };
      };

      params = setParams();

      retrieveData();
    } catch (error) {
      setLoader(false);
    }
  };

  const sortData = (id, sort) => {
    setSortInfo({
      id,
      sort
    });

    let sortNum = true;
    if (sort === 'up') sortNum = false;

    params.filters.orderByColumnName = id;
    params.filters.orderType = sortNum;

    retrieveData();
  };

  useEffect(() => {
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }

    params.pagination = {
      pageNumber: nroPag,
      pageRows: Number(regxPag)
    };

    retrieveData();
  }, [nroPag, regxPag]);

  useEffect(() => {
    const retrieveStatus = async () => {
      setLoader(true);
      try {
        setErrorPpal({
          isError: false,
          errorMessage: '',
          errorType: 'danger'
        });

        const _status = await getList({
          param: option,
          connecParam
        });

        if (_status.data.data.length > 0) {
          /*  setStatus(
            [
              {
                Id: '',
                Description: 'ALL',
                DetailId: 0,
                Step: option
              }
            ].concat(_status.data.data)
          ); */
        } else {
          setErrorPpal({
            isError: true,
            errorMessage: `Status filter: ${t('msgWithOutInformation')}`,
            errorType: 'warning'
          });
        }

        setLoader(false);
      } catch (error) {
        setLoader(false);

        setErrorPpal({
          isError: true,
          errorMessage: `Status filter: ${t('msgReportError')}`,
          errorType: 'danger'
        });
      }
    };

    retrieveStatus();
  }, []);

  const handleExport = async isExport => {
    setLoader(true);
    try {
      setErrorPpal({
        isError: false,
        errorMessage: '',
        errorType: ''
      });

      params.filters.isExport = isExport;

      const _data = await getAlertsDetection({ connecParam, params });

      if (_data.data.data.length > 0) {
        downloadFileMO(_data.data.data, t, option, params);
      } else {
        setErrorPpal({
          isError: true,
          errorMessage: t('msgWithOutInformation'),
          errorType: 'warning'
        });
      }
      setLoader(false);
    } catch (error) {
      setLoader(false);
      console.log('error::', error);

      setErrorPpal({
        isError: true,
        errorMessage: t('msgReportError'),
        errorType: 'danger'
      });
    }
  };

  return (
    <div className={ux.ppalContainer}>
      <header id='headerCSR'>
        <Row className={ux.ppalHeader}>
          <Col className={ux.headerIcon}>
            <span>
              {/* eslint-disable-next-line */}
              <i
                className={`${ux.icon} ${show ? ux.iconBars : ux.iconX}`}
                role='button'
                tabIndex={0}
                onClick={() => {
                  setShow(!show);
                }}
                onKeyPress={() => {
                  setShow(!show);
                }}
              />
            </span>
          </Col>
          <Col className={ux.tittlePpal}>{tittle}</Col>
        </Row>
      </header>
      <main className='pt-4'>
        <AlertComponent error={errorPpal} setError={setErrorPpal} />
        <Row className={ux.ppalBody}>
          <Col className={`${ux.filter.content} ${show && ux.filter.hidden}`}>
            <Filters
              handleRetrieve={handleRetrieve}
              t={t}
              language={language}
              ux={ux}
              connecParam={connecParam}
              setErrorPpal={setErrorPpal}
              setLoader={setLoader}
              register={register}
              errors={errors}
              handleSubmit={handleSubmit}
              watch={watch}
              setValue={setValue}
              control={control}
              option={option}
              trigger={trigger}
            />
          </Col>
          <Col
            className={`${ux.filter.info} ${
              show ? ux.filter.infoMax : ux.filter.infoMin
            }`}
          >
            <Detail
              sortInfo={sortInfo}
              dataAlerts={dataAlerts}
              ux={ux}
              t={t}
              maxButtonsArea={maxButtonsArea}
              user={user}
              setErrorPpal={setErrorPpal}
              nroPag={nroPag}
              connecParam={connecParam}
              setLoader={setLoader}
              retrieveData={retrieveData}
              handleExport={handleExport}
              errorDetail={errorDetail}
              setErrorDetail={setErrorDetail}
              sortData={sortData}
              regxPag={regxPag}
              setRegxPag={setRegxPag}
              setNroPag={setNroPag}
              option={option}
              iconTiffImage={iconTiffImage}
              iconImgNotFound={iconImgNotFound}
            />
          </Col>
        </Row>
      </main>
    </div>
  );
};

export default SARDeposits;