viaone-report-statement
Version:
A React component that sums two number.
311 lines (267 loc) • 9.31 kB
JavaScript
import React, { useState,Suspense,useEffect,useRef} from "react";
import Axios from "axios";
import moment from "moment";
// Use this function to translate
import { useTranslation,withTranslation } from "react-i18next";
import { validateDate} from "./utils/common/utils";
import MESSAGES from "./utils/config/messages";
import Loading from "./utils/common/loading";
import SearchStatement from "./components/SearchStatement";
import MessagesComponent from "./utils/common/messagesComponent";
import StatementResults from "./components/StatementResults";
let dateFrom = new Date();
let dateTo = new Date();
const StatementReport = props => {
// #region DataSets
const [data, setData] = useState([]); // All data from the query for the parameters
const [locationOptions, setLocationOption] = useState([]);
const locationParamRef = useRef();
const [alllocationsParam, setAllLocationsParam] = useState([]);
const [totalAmmount, setTotalAmount] = useState(0);
const [totalRecords, setTotalRecords] = useState(0);
const [balance, setBalanceAmount] = useState(0);
const [loading, setLoading] = useState(true);
const [showMessage, setShowMessage] = useState(false);
const [message, setMessage] = useState("");
const [typeMessage, setTypeMessage] = useState("");
const [nameBranch, setNameBranch] = useState("");
const [addressBranch, setAddressBranch] = useState("");
const [gbBranch, setgbBranch] = useState("");
// #endregion
const {
imgLoading,
userRol,
urlApi,
language,
languageURL,
i18n,
IdBranch,
viamericasLogo
} = props;
i18n.options.backend.loadPath = `${languageURL}/locales/{{lng}}/{{ns}}.json`;
if (language !== i18n.language) {
i18n.changeLanguage(language);
}
const { t } = useTranslation();
const updateMessage = (show, messageText, type) => {
setShowMessage(show);
setMessage(messageText);
setTypeMessage(type);
};
const configDropDown = () => {
console.log("userRol",userRol);
Axios.get(`${urlApi}/api/Report/getLocationByChain/${IdBranch}/${userRol}`).then(results => {
if (results.status === 200) {
const newValues = [
<option key={-1} value={-1}>
{" "}
{t("statementReport.all")}{" "}
</option>
];
const allLocations = [];
results.data.forEach((item, index) => {
const newKey = index;
newValues.push(
<option key={newKey} value={item.id_main_branch}>
{item.name_main_branch}
</option>
);
allLocations.push(item.id_main_branch);
setAllLocationsParam(allLocations.join(","));
setLocationOption(newValues);
});
}
});
setLoading(false);
};
const searchMetadata = () =>{
Axios.post(`${urlApi}/api/Report/GetMetadataStatement`, {
pIdBranch: IdBranch,
pDateFrom: `${moment(dateFrom).format(
"YYYY-MM-DD"
)} 00:00:00.000`,
pDateTo: `${moment(dateTo).format("YYYY-MM-DD")} 23:59:59.000`
})
.then(registers => {
if (registers.status === 200) {
if (registers.data.length > 0) {
registers.data.forEach(item => {
console.log(item.name_branch);
console.log(item.address1_branch);
setNameBranch(item.name_branch);
setAddressBranch(item.address1_branch);
});
}
} 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 searchData = args => {
console.log("args-1 - StatementReport",args);
let resultdata = { data: [] };
Axios.post(`${urlApi}/api/Report/StatementReport`, {
locationParam: locationParamRef.current.value === "-1" ? IdBranch : null,
fromDateParam: args.fromDateParam,
toDateParam: args.toDateParam,
gb_Branch: locationParamRef.current.value === "-1" ? null : args.locationParam
})
.then(result => {
if (result.status === 200)
{
if (result.data.length > 0) {
console.log("resultdata",JSON.stringify(result.data));
let amountTotal = 0;
let balanceG=0;
let id = 0;
const newData = [];
result.data.forEach(item => {
amountTotal += item.value >0 && item.countRows>0 ?parseFloat(item.value) : 0;
balanceG+=item.idProduct==="0" && item.countRows>0 ?parseFloat(item.runningBalance):0;
id += 1;
newData.push({
id,
idp:item.id,
product: item.product,
value: item.value,
countRows: item.countRows,
id_product: item.idProduct,
product_tag:item.product_tag
});
resultdata = { data: newData };
});
console.log("newData",newData,"resultdata",resultdata);
setTotalAmount(amountTotal);
setBalanceAmount(balanceG);
setData(newData);
setTotalRecords(result.data.length);
setLoading(false);
}
else {
setLoading(false);
updateMessage(
true,
MESSAGES.STATEMENT_REPORT_NO_FOUND.Message,
MESSAGES.STATEMENT_REPORT_NO_FOUND.Type
);
}
} else {
setLoading(false);
updateMessage(
true,
MESSAGES.STATEMENT_REPORT_ERROR.Message,
MESSAGES.STATEMENT_REPORT_NO_FOUND.Type
);
}
})
.catch(() => {
setLoading(false);
updateMessage(
true,
MESSAGES.STATEMENT_REPORT_ERROR.Message,
MESSAGES.STATEMENT_REPORT_ERROR.Type
);
});
};
const getDateFrom = date => {
dateFrom = date;
};
const getDateTo = date => {
dateTo = date;
};
useEffect(() => {
configDropDown();
}, []);
const handleClickSearch = e => {
e.preventDefault();
setLoading(true);
const locationParamR = locationParamRef.current.value;
console.log("selection",locationParamR);
setgbBranch(locationParamR);
const args = {
locationParam: locationParamR === "-1" ? alllocationsParam : locationParamR,
fromDateParam: `${moment(dateFrom).format("YYYY-MM-DD")} 00:00:00.000`,
toDateParam: `${moment(dateTo).format("YYYY-MM-DD")} 23:59:59.000`
};
const _dateValidation = validateDate(dateFrom, dateTo);
if (_dateValidation.valid) {
updateMessage(false, "", "");
searchData(args);
searchMetadata(args);
} else {
setLoading(false);
updateMessage(true, _dateValidation.message, _dateValidation.messageType);
}
};
const handleCloseMessage = () => {
updateMessage(false, "", "");
};
if (loading) {
return (
<Suspense fallback={<div>Loading...</div>}>
<Loading loadingImg={imgLoading} />
</Suspense>
);
}
const UserMessage = showMessage ? (
<MessagesComponent
message={message}
typeMessage={typeMessage}
handleCloseMessage={handleCloseMessage}
/>
) : (
""
);
return (
<Suspense fallback={<Loading loadingImg={imgLoading} />}>
{UserMessage}
<>
<SearchStatement
locationOptions={locationOptions}
locationParamRef={locationParamRef}
handleClickSearch={handleClickSearch}
language={language}
getDateFrom={getDateFrom}
getDateTo={getDateTo}
/>
{loading ? (
<Loading loadingImg={imgLoading} />
) : (
<StatementResults
data={data}
totalRecords={totalRecords}
totalAmmount={totalAmmount}
balance={balance}
dateTo={dateTo}
urlApi={urlApi}
fromDateParam={dateFrom}
toDateParam={dateTo}
setLoading={setLoading}
updateMessage={updateMessage}
nameBranch={nameBranch}
addressBranch={addressBranch}
IdBranch={IdBranch}
viamericasLogo={viamericasLogo}
t={t}
gbBranch={gbBranch}
alllocationsParam={alllocationsParam}
/>
)}
</>
</Suspense>
);
};
export default withTranslation()(StatementReport);