viaone-report-statement/src/core/components/StatementResults.js

A React component that sums two number.

import React, { useState, useEffect } from "react";
import ViaTable from "@viamericas/viam-viatable-reports";
import moment from "moment";
import Axios from "axios";
import MESSAGES from "../utils/config/messages";
import { formatter } from "../utils/common/utils";
import { getProductName} from "../utils/common/Constants";
import DetailsTable from "./DetailsTable";
import TemplatesHeadDetails from "../utils/config/TemplatesHeadDetails";
import TemplateFieldsDetails from "../utils/config/TemplateFieldsDetails";

const StatementResults = props => {
  const {
    data,
    totalRecords,
    // totalAmmount,
    balance,
    dateTo,
    urlApi,
    fromDateParam,
    toDateParam,
    setLoading,
    updateMessage,
    nameBranch,
    addressBranch,
    IdBranch,
    viamericasLogo,
    t,
    gbBranch,
    // alllocationsParam
  } = props;

  const widthArr = [40, 30, 10, 20];
  const [componentes, setComponentes] = useState([]);
  const [componentesTwo, setComponentesTwo] = useState([]);
  const [dataDetails, setDataDetails] = useState([]);
  const [idPositionViaTable, setIdPositionViaTable] = useState(null);
  const [ComponentActive, setComponent] = useState(0);
  const [ComponentProduct, setProduct] = useState(0);
  // const [alllocationsParam, setAllLocationsParam] = useState([]);
  const [totalRecordsDetails, setTotalRecords] = useState(0);
  const [ProductName, setProductName] = useState('');
  const [tableDebit, setTableDebit] = useState([]);
  const [tableCredit, setTableCredit] = useState([]);
  const [tableDebitIds, setTableDebitIds] = useState([]);
  const [tableCreditIds, setTableCreditIds] = useState([]);
  // const [tablePrintDetail, setTablePrintDetail] = useState([]);
  const [MontoDia, setTotalDia] = useState(0);
  const [subtotalNegative, setSubtotalNegative] = useState(0);
  const [SubtotalPositive, setSubtotalPositive] = useState(0);
  const [Acum, setAcumulado] = useState(0);


  

  // console.log("alllocationsParam",alllocationsParam);
  const arrtableOne = [];
  const arrtableTwo = [];
  const arrtableThree = [];
  const arrtableFour = [];
  let subtotalnegative = 0;
  let subtotalpositive = 0;
  let TotalDia = 0;
  let totalAcumulado=0;
  let TotalFinal=0;
  

  // Reading data returned from statementReport and grouping by tables
  const main = () =>{
   
    data.forEach(x => {
      if (
       //  x.value > 0 ||
        // (!x.product.includes("CREDITOS Y AJUSTES") &&
        //   !x.product.includes("CANCELADOS") &&
        //   !x.product.includes("ANULADOS") &&
        //   !x.product.includes("PROCESADOS") &&
        //   !x.product.includes("COMISIONES") &&
        //   !x.product.includes("DEPOSITOS") &&
        //   !x.product.includes("BALANCE"))
        (!x.product_tag.includes("CREDITS") &&
          !x.product_tag.includes("CANCEL") &&
          !x.product_tag.includes("PROCESSED") &&
          !x.product_tag.includes("COMISSION") &&
          !x.product_tag.includes("DEPOSIT") &&
          !x.product_tag.includes("BALANCE"))
          // ||   x.value === 0
      ) {
        subtotalpositive += parseFloat(x.value);
        arrtableThree.push([
          x.product,
          x.idp,
          x.id_product,
          x.countRows
        ])
  
        arrtableOne.push([
          // x.product,
          t('statementReport.'.concat(x.product_tag)),
          parseFloat(x.value).toFixed(2),
          x.countRows,
          parseFloat(x.value) > 0 || x.countRows >0 ? <button type="button" className="fas fa-angle-up text-orange">{t("statementReport.tableHeadSeeMore")}</button>: ""
        ]);
       
      }
      else if(x.product.includes("BALANCE")){
        console.log("balance");
  
      }
      else {
        subtotalnegative +=  parseFloat(x.value)<0 ?parseFloat(x.value) * -1:parseFloat(x.value);
        // parseFloat(x.value)<0 ?parseFloat(x.value) * -1:parseFloat(x.value);
        arrtableFour.push([
          x.product,
          x.idp,
          x.id_product,
          x.countRows
        ]);
        arrtableTwo.push([
          // x.product,
          t('statementReport.'.concat(x.product_tag)),
          parseFloat(x.value)>0?parseFloat(x.value).toFixed(2):(parseFloat(x.value) *-1).toFixed(2),
          x.countRows,
          parseFloat(x.value) > 0 || x.countRows >0 ? <button type="button" className="fas fa-angle-up text-orange">{t("statementReport.tableHeadSeeMore")}</button>: ""
        ]);
      }
    });

    setTableDebit(arrtableOne);
    setTableCredit(arrtableTwo);
    setTableDebitIds(arrtableThree);
    setTableCreditIds(arrtableFour);
  
    TotalDia = (subtotalnegative - subtotalpositive);

    
    if((TotalDia===0)||(TotalDia > 0))
    {
       TotalFinal=TotalDia;
    }
    else{
      TotalFinal=TotalDia*-1;
    }
    setTotalDia(TotalFinal);
    subtotalnegative= subtotalnegative>=0   ? subtotalnegative : subtotalnegative*-1;
    console.log("subtotalnegative",subtotalnegative);
    totalAcumulado= parseFloat(TotalDia*-1)+parseFloat(balance);
    console.log("TotalDia",parseFloat(TotalDia*-1),"balance",balance,"totalAcumulado",totalAcumulado,"-->",parseFloat(TotalDia)+parseFloat(balance));
    setAcumulado(totalAcumulado);
    setSubtotalNegative(subtotalnegative);
    setSubtotalPositive(subtotalpositive);


  };
  
  useEffect(() => {

    main();

  }, []);


  const setDetailObject = datar => {

    const checkTemplateDetails = TemplatesHeadDetails(ComponentProduct,t);

    const result=TemplateFieldsDetails(datar,ComponentProduct);
    console.log("voy a mostrar esta data",result);
    

    const item = {
      position: idPositionViaTable,
      component: (
        <div>
        <DetailsTable
        headers={checkTemplateDetails}
        data={result}
        totalRecordsDetails={totalRecordsDetails}
        ProductName={ProductName}
          />
        </div>
      )
    };

    if(ComponentActive === 1)
    {
      setComponentes([item]);
    }
    if(ComponentActive === 2)
    {
      setComponentesTwo([item]);
    }
  };

  const seeDetail = (idproduct, idp) => {
    Axios.post(`${urlApi}/api/Report/DetailStatementReport`, {
      locationParam:  gbBranch === "-1" ? IdBranch : null,
      fromDateParam: `${moment(fromDateParam).format(
        "YYYY-MM-DD"
      )} 00:00:00.000`,
      toDateParam: `${moment(toDateParam).format("YYYY-MM-DD")} 23:59:59.000`,
      gb_Branch: gbBranch === "-1" ? null : gbBranch,
      Id_product: idproduct,
      id: idp
    })
      .then(registers => {
        if (registers.status === 200) {
          if (registers.data.length > 0) {

            let id = 0;
            let detailCount=0;
            const newData = [];

            registers.data.forEach(item => {
              id += 1;
              detailCount+= item.trNumber!== null? 1 : 0;

              newData.push({
                id,
                trnNumber: item.trNumber,
                date: item.date,
                transDescription: item.transDescription,
                country: item.country,
                amount: item.amount,
                agencyFees: item.agencyFees,
                fees: item.fees,
                viaTasa: item.viaTasa,
                toBeDeposit: item.toBeDeposit,
                credits: item.credits
              });
            });
            setLoading(false);
            setTotalRecords(detailCount);
            setProductName(getProductName(idproduct));
            setDataDetails(newData);
           
          }
        } else {
          setLoading(false);
          updateMessage(
            true,
            MESSAGES.STATEMENT_REPORT_ERROR.Message,
            MESSAGES.STATEMENT_REPORT_ERROR.Type
          );
        }
      })
      .catch(() => {
        setLoading(false);
        updateMessage(
          true,
          MESSAGES.STATEMENT_REPORT_ERROR.Message,
          MESSAGES.STATEMENT_REPORT_ERROR.Type
        );
      });
  };

  
  // const seeDetailPrintTest = async(idproducts) => {
  //   console.log("entre a test",idproducts);
  //   let resultdata = { data: [] };
  //   await Axios.post(`${urlApi}/api/Report/AllDetailStatementReport`, {
  //     locationParam: IdBranch,
  //     fromDateParam: `${moment(fromDateParam).format(
  //       "YYYY-MM-DD"
  //     )} 00:00:00.000`,
  //     toDateParam: `${moment(toDateParam).format("YYYY-MM-DD")} 23:59:59.000`,
  //     IdsProducts: idproducts
  //   })
  //     .then(registers => {
  //       if (registers.status === 200) {
  //         if (registers.data.length > 0) {
  //           console.log("resultdatattessss",registers.data);

  //           let id = 0;
  //           const newData = [];
  

  //           registers.data.forEach(item => {
  //             id += 1;

  //             newData.push({
  //               id,
  //               trnNumber: item.trNumber,
  //               date: item.date,
  //               transDescription: item.transDescription,
  //               country: item.country,
  //               amount: item.amount,
  //               agencyFees: item.agencyFees,
  //               fees: item.fees,
  //               viaTasa: item.viaTasa,
  //               toBeDeposit: item.toBeDeposit,
  //               credits: item.credits,
  //               sortOrder:item.sortOrder,
  //               idtable:item.id
  //             });

             
  //           });
  //           resultdata = { data: newData };
  //           console.log("resultdata test,",resultdata);
  //           setTablePrintDetail(resultdata);
          
  //         }
  //       } else {
  //         setLoading(false);
  //         updateMessage(
  //           true,
  //           MESSAGES.BATCH_REPORT_ERROR.Message,
  //           MESSAGES.BATCH_REPORT_ERROR.Type
  //         );
  //       }
  //     })
  //     .catch(() => {
  //       setLoading(false);
  //       updateMessage(
  //         true,
  //         MESSAGES.BATCH_REPORT_ERROR.Message,
  //         MESSAGES.BATCH_REPORT_ERROR.Type
  //       );
  //     });
  //     return resultdata;
  // };


  const seeDetailPrint = async(idproduct, idp) => {
    let resultdata = { data: [] };
    await Axios.post(`${urlApi}/api/Report/DetailStatementReport`, {
      locationParam:  gbBranch === "-1" ? IdBranch : null,
      fromDateParam: `${moment(fromDateParam).format(
        "YYYY-MM-DD"
      )} 00:00:00.000`,
      toDateParam: `${moment(toDateParam).format("YYYY-MM-DD")} 23:59:59.000`,
      gb_Branch: gbBranch === "-1" ? null : gbBranch,
      Id_product: idproduct,
      id: idp
    })
      .then(registers => {
        if (registers.status === 200) {
          if (registers.data.length > 0) {

            let id = 0;
            const newData = [];
  

            registers.data.forEach(item => {
              id += 1;

              newData.push({
                id,
                trnNumber: item.trNumber,
                date: item.date,
                transDescription: item.transDescription,
                country: item.country,
                amount: item.amount,
                agencyFees: item.agencyFees,
                fees: item.fees,
                viaTasa: item.viaTasa,
                toBeDeposit: item.toBeDeposit,
                credits: item.credits
              });

             
            });
            resultdata = { data: newData };
            setProductName(getProductName(idproduct));
            console.log("ProductName",ProductName,"idproduct",idproduct);
          console.log("resultdatadetail",resultdata);

          }
        } else {
          setLoading(false);
          updateMessage(
            true,
            MESSAGES.STATEMENT_REPORT_ERROR.Message,
            MESSAGES.STATEMENT_REPORT_ERROR.Type
          );
        }
      })
      .catch(() => {
        setLoading(false);
        updateMessage(
          true,
          MESSAGES.STATEMENT_REPORT_ERROR.Message,
          MESSAGES.STATEMENT_REPORT_ERROR.Type
        );
      });
      return resultdata;
  };


  const TransformData = dataArray => {
    setDetailObject(dataArray);
  };

  useEffect(() => {
    if (dataDetails.length > 0) {
      console.log("effect",totalRecordsDetails);
      const json = JSON.parse(JSON.stringify(dataDetails));
      TransformData(json);
    }
  }, [dataDetails]);


  const seeMore = id => {    
    const index = componentes.findIndex(element => element.position === id);

    if (index !== -1) {
        tableDebit[id][3]=<button type="button" className="fas fa-angle-up text-orange">{t("statementReport.tableHeadSeeMore")}</button>;
        const list = componentes.filter(element => element.position !== id);
        setComponentes(list);
      } else {
        tableDebit[id][3]=<button type="button" className="fas fa-angle-down text-orange">{t("statementReport.tableHeadSeeLess")}</button>;
        setIdPositionViaTable(id);
        setComponent(1);
        setProduct(tableDebitIds[id][2]);
        seeDetail(tableDebitIds[id][2], tableDebitIds[id][1]);

    }
    setTableDebit(tableDebit);
  };

  const seeMoreTwo = id => {
      tableCredit[id][3]=<button type="button" className="fas fa-angle-up text-orange">{t("statementReport.tableHeadSeeMore")}</button>;  
      const index = componentesTwo.findIndex(element => element.position === id);
    if (index !== -1) {
        const list = componentesTwo.filter(element => element.position !== id);
        setComponentesTwo(list);
    } else {
        // agregar el elemento
        tableCredit[id][3]=<button type="button" className="fas fa-angle-down text-orange">{t("statementReport.tableHeadSeeLess")}</button>;  
        setIdPositionViaTable(id);
        setComponent(2);
        setProduct(tableCreditIds[id][2]);
        seeDetail(tableCreditIds[id][2], tableCreditIds[id][1]);

    }
    setTableCredit(tableCredit);

  };

  const GettingLocations = async () => {
  const allLocations = [];

  await Promise.all(tableDebit.map(async (item) => {  
    if(item[3]>0)
    {
      allLocations.push(item[2]);
    }
  }));

  await Promise.all(tableCreditIds.map(async (item) => {  
    if(item[3]>0)
    {
      allLocations.push(item[2]);
    }
  }));


  console.log("Locations",allLocations.join(","));
    return allLocations.join(",");
  // setAllLocationsParam(allLocations.join(","));

  };

  const tableHead = [
    {
      title: t("statementReport.description"),
      class:"detail-export-c",
    },
    {
      title: t("statementReport.amount"),
      class:"detail-export-c",
    },
    {
      title:  t("statementReport.quantity"),
      class:"detail-export-c",
    },
    {
      title:  "",
      class:"detail-export-c",
      seeMore: id => {
        seeMore(id);
      }
    },
  ];


  const tableHeadTwo = [
    {
      title: t("statementReport.description"),
      class:"detail-export-c",
    },
    {
      title: t("statementReport.amount"),
      class:"detail-export-c",
    },
    {
      title:  t("statementReport.quantity"),
      class:"detail-export-c",
    },
    {
      title: "",
      class:"detail-export-c",
      seeMore: id => {
        seeMoreTwo(id);
      }
    },
  ];

  const printDetails = async () => {

    const ifmcontentstoprint = (
      <iframe
        id="ifmcontentstoprint"
        title="Recepit"
        className="printFrame"
        style={{ display: "none" }}
        data-test="iframe-component"
      >
        {" "}
      </iframe>
    );

    let newWin = ifmcontentstoprint.contentWindow;

        newWin = window.open("");
        newWin.document.write(`
        <table>
        <tr>
        <img className="center" src=${viamericasLogo} alt="Viamericas"/>
        </tr>
        <tr>
        <center><h2>${t("statementReport.titleMain")}</h2></center>
        <center><p>${nameBranch},${addressBranch}</p></center>
        <center><h3> ${`${moment(fromDateParam).format("MM-DD-YYYY")}`}</h3> </center>
        </tr>
        <tr>
        <p align="right">
         ${t("statementReport.totalDay")} ${`${moment(dateTo).format("MM-DD-YYYY")}`}:
         ${formatter.format(MontoDia)}</p>
        
         <p align="right">${t("statementReport.balancePrevious")} ${balance<0?`( ${formatter.format(balance*-1)})`:formatter.format(balance)}</p>
        
         <p align="right">${t("statementReport.balanceAccumulated")}: ${Acum<0?`(${formatter.format(Acum*-1)})`:formatter.format(Acum)}</p>
         <center><h2>${t("statementReport.resume")}</h2></center>
         </tr>
        </table>
        <table className='table' border='1px' cellPadding='1' style="width:100%">

        <center><h3 style="background:#539DC2">${t("statementReport.debits")}</h3><center>
        <tr>
          <th>${t("statementReport.product")}</th>
          <th>${t("statementReport.amount")}</th>
          <th>${t("statementReport.quantity")}</th>
        </tr>
        `)

  await Promise.all(tableDebit.map(async (item) => {  
                newWin.document.write(
                  `
                <tr><td>${item[0]}</td><td>${item[1]}</td><td>${item[2]}</td></tr>
                `
                );
              }));

      newWin.document.write(`
            </table><table className='table' border='1px' cellPadding='1' style="width:100%">
            <center><h4>${t("statementReport.subtotal")}: ${formatter.format(SubtotalPositive)}</h4></center>
            <center><h3 style="background:#539DC2">${t("statementReport.credits")}</h3></center>
            <tr>
            <th>${t("statementReport.product")}</th>
            <th>${t("statementReport.amount")}</th>
            <th>${t("statementReport.quantity")}</th>
            </tr>
      `)

    await Promise.all(tableCredit.map(async (item) => {
              newWin.document.write(
                  ` <tr><td>${item[0]}</td><td>${item[1]}</td><td>${item[2]}</td></tr>`
                );
              }));

        newWin.document.write(`
        </table>
        <center><h4>${t("statementReport.subtotal")}:  ${formatter.format(subtotalNegative)}</h4></center><br/>

        `)

   

      await Promise.all(tableDebitIds.map(async (ids) => {
        if(ids[3]>0)
        {
              const detail= await seeDetailPrint(ids[2],ids[1]); 
              const checkTemplateDetails = TemplatesHeadDetails(ids[2],t);
              const Product=getProductName(ids[2]);
              const result=TemplateFieldsDetails(detail.data,ids[2]);

              newWin.document.write(`<center><p style="font-weight: bold;background:#539DC2"">${Product}:</p></center>
              <table className='table' border='1px' cellPadding='1' style="width:100%"><tr>
              `)
            
              checkTemplateDetails.forEach(item => {
              newWin.document.write(
                `<th>${item.title}</th>`
              );
            });
            newWin.document.write(
              `</tr>`
            );
            result.forEach(itemdetail =>{

              newWin.document.write(
                `<tr>`
              );
              itemdetail.forEach(item => {
                if(item!==null)
                {
                  newWin.document.write(
                    `
                    <td>${item}</td>`
                  );
                }
                else
                {
                  newWin.document.write( `
                  <td></td>` );
                }
              });

              newWin.document.write(
                `</tr>`
              );
            
              });

              newWin.document.write(`
              </table><br/>
            `)
        }
      }));


      await Promise.all(tableCreditIds.map(async (IdsCredits) => {
        if(IdsCredits[3]>0)
        {
                      const detail= await seeDetailPrint(IdsCredits[2],IdsCredits[1]); 
              const checkTemplateDetails = TemplatesHeadDetails(IdsCredits[2],t);
              const Product=getProductName(IdsCredits[2]);
              const result=TemplateFieldsDetails(detail.data,IdsCredits[2]);
                            
              newWin.document.write(`<center><p style="font-weight: bold;background:#539DC2"">${Product}:</p></center>
              <table className='table' border='1px' cellPadding='1' style="width:100%"><tr>
              `)
            
              checkTemplateDetails.forEach(item => {
              newWin.document.write(
                `<th>${item.title}</th>`
              );
            });
            newWin.document.write(
              `</tr>`
            );
            result.forEach(itemdetail =>{

              newWin.document.write(
                `<tr>`
              );
              itemdetail.forEach(item => {
                if(item!==null)
                {
                  newWin.document.write(
                    `
                    <td>${item}</td>`
                  );
                }
                else
                {
                  newWin.document.write( `
                  <td></td>` );
                }
              });

              newWin.document.write(
                `</tr>`
              );
            
              });

              newWin.document.write(`
              </table><br/>
            `)
        }
      }));
      newWin.document.write(`
      </table>
    `)

      newWin.document.close();
      newWin.focus();
      setTimeout(() => {
        newWin.print();
        newWin.close();
      }, 1000);
  };
  

  const handlePrintGeneral = async () => {

  GettingLocations().then(todo => {
    console.log("result locations",todo);

})

//    seeDetailPrintTest('3,12').then(todo => {
//     console.log("result detailtest",todo);
// })

   printDetails();
  };

  return (
    
    <> 
      {tableDebit.length > 0 || tableCredit.length > 0 ? (
        <div>
        <div>
        <img className="center" src={viamericasLogo} alt="Viamericas"/>
        <br/>
        <p className="detail-header-principal-bold">{nameBranch},{addressBranch}</p>
        <h1 className="detail-header-principal-bold">{t("statementReport.titleMain")}</h1>
        <h2 className="detail-header-principal-bold"> {`${moment(fromDateParam).format("YYYY-MM-DD")}`}</h2>
        </div>
        <div>
        <p className="detail-balance-principal-bold">
        {t("statementReport.totalDay")}: {`${moment(dateTo).format("MM-DD-YYYY")}`}:{" "}
        {formatter.format(MontoDia)}
      </p>
        <p className="detail-balance-principal-bold">{t("statementReport.balancePrevious")}: {balance<0?`( ${formatter.format(balance*-1)})`:formatter.format(balance)}</p>
        <p className="detail-balance-principal-bold">
        {t("statementReport.balanceAccumulated")}: {Acum<0?`(${formatter.format(Acum*-1)})`:formatter.format(Acum)}
        </p>
      </div>
          <div>
            <h1 className="detail-header-principal">{t("statementReport.resume")}</h1>
          </div>
          <h2 className="detail-header-sec-principal">{t("statementReport.debits")}</h2>
          <ViaTable
            headers={tableHead}
            data={tableDebit}
            components={componentes}
            widthArr={widthArr}
          />
          <h3 className="detail-header-sec">{t("statementReport.subtotal")}: {formatter.format(SubtotalPositive)}</h3>
          <br/>
          <div>
            <h2 className="detail-header-sec-principal">{t("statementReport.credits")}</h2>
          </div>
          <ViaTable
            headers={tableHeadTwo}
            data={tableCredit}
            components={componentesTwo}
            widthArr={widthArr}
          />
          <h3 className="detail-header-sec">{t("statementReport.subtotal")}:  {formatter.format(subtotalNegative)}</h3>
          <div className="row">
          <div className="report-total col-12">
            <p>
              <span className="detail-button-export">{totalRecords} {t("statementReport.tableHeadItems")}</span>
            </p>
            <button className="btn btn-primary lato-font form-control-lg button-right"
              type="button"
              onClick={() => {
                handlePrintGeneral();
              }}
              disabled={!totalRecords > 0}
            >
            <i className="far fa-save" /> {t("statementReport.tableHeadPrint")}
            </button>
          </div>
        </div>
        </div>
      ) : null}

    </>
  );
};

export default StatementResults;