diff --git a/src/components/EarningsTable/EarningsTable.js b/src/components/EarningsTable/EarningsTable.js index 6ea3bfe34..cd50eaacb 100644 --- a/src/components/EarningsTable/EarningsTable.js +++ b/src/components/EarningsTable/EarningsTable.js @@ -7,7 +7,6 @@ import { } from 'utilities'; import CustomTableFilter from 'components/common/CustomTableFilter/CustomTableFilter'; import CustomTableItemDetails from 'components/common/CustomTableItemDetails/CustomTableItemDetails'; - /** * @constant * @name earningTableMetaData @@ -68,6 +67,8 @@ const prepareRows = (rows) => rows.map((row) => { return { ...row, + csv_start_date: row.consolidation_period_start, + csv_end_date: row.consolidation_period_end, consolidation_period_start: covertDateStringToHumanReadableFormat( row.consolidation_period_start, 'mmm d, yyyy' @@ -94,7 +95,7 @@ const prepareRows = (rows) => function EarningsTable() { // state for earnings table const [earnings, setEarnings] = useState([]); - const [activeDateRageString, setActiveDateRageString] = useState(''); + const [activeDateRangeString, setActiveDateRangeString] = useState(''); const [filter, setFilter] = useState({}); const [page, setPage] = useState(0); const [isLoading, setIsLoading] = useState(false); @@ -136,9 +137,9 @@ function EarningsTable() { filter?.start_date, filter?.end_date ); - setActiveDateRageString(dateRangeString); + setActiveDateRangeString(dateRangeString); } else { - setActiveDateRageString(''); + setActiveDateRangeString(''); } getEarnings(); @@ -151,7 +152,7 @@ function EarningsTable() { sortBy={sortBy} rows={earnings} isLoading={isLoading} - activeDateRage={activeDateRageString} + activeDateRange={activeDateRangeString} setRowsPerPage={setEarningsPerPage} rowsPerPage={earningsPerPage} setSortBy={setSortBy} @@ -181,12 +182,13 @@ function EarningsTable() { setIsMainFilterOpen={setIsDateFilterOpen} /> } - rowDetails={selectedEarning ? ( - setSelectedEarning(null)} - refreshData={getEarnings} - /> + rowDetails={ + selectedEarning ? ( + setSelectedEarning(null)} + refreshData={getEarnings} + /> ) : null } actionButtonType="export" diff --git a/src/components/common/CustomTable/CustomTable.js b/src/components/common/CustomTable/CustomTable.js index 3856da8ed..cc4cd7c4e 100644 --- a/src/components/common/CustomTable/CustomTable.js +++ b/src/components/common/CustomTable/CustomTable.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import Table from '@material-ui/core/Table'; import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; @@ -20,6 +20,7 @@ import Avatar from '@material-ui/core/Avatar'; import TablePagination from '@material-ui/core/TablePagination'; import Typography from '@material-ui/core/Typography'; import useStyles from './CustomTable.styles'; +import dateFormat from 'dateformat'; /** * @function @@ -78,7 +79,7 @@ ImportAction.defaultProps = { * @param {function} props.openMainFilter - opens main filter when called * @param {function} props.onSelectFile - callback function to be called when file is selected * @param {string} props.headerTitle - title of the table - * @param {string} props.activeDateRage - string representing the active date range (i.e. 'Oct 1 - Oct 5') in the date filter button + * @param {string} props.activeDateRange - string representing the active date range (i.e. 'Oct 1 - Oct 5') in the date filter button * @param {Array} props.data - data to be exported * * @returns {React.Component} @@ -90,10 +91,32 @@ function CustomTableHeader(props) { data, openDateFilter, openMainFilter, - activeDateRage, + activeDateRange, onSelectFile, } = props; const classes = useStyles(); + const [csvFileNameSuffix, setCsvFileNameSuffix] = useState(''); + + useEffect(() => { + if (!data || data.length == 0) return; + const consolidationPeriodStarts = data.map( + (row) => new Date(row.csv_start_date) + ); + const consolidationPeriodEnds = data.map( + (row) => new Date(row.csv_end_date) + ); + const minPeriodStart = consolidationPeriodStarts.reduce( + (pStart1, pStart2) => { + return pStart1 > pStart2 ? pStart2 : pStart1; + } + ); + const maxPeriodEnd = consolidationPeriodEnds.reduce((pEnd1, pEnd2) => { + return pEnd1 > pEnd2 ? pEnd1 : pEnd2; + }); + const minCsvStartDate = dateFormat(new Date(minPeriodStart), 'yyyy-mm-dd'); + const maxCsvEndDate = dateFormat(new Date(maxPeriodEnd), 'yyyy-mm-dd'); + setCsvFileNameSuffix(`${minCsvStartDate}_to_${maxCsvEndDate}`); + }, [data]); const dataToExport = data.map( ({ @@ -135,7 +158,7 @@ function CustomTableHeader(props) {