woocommerce/plugins/woocommerce-admin/client/analytics/components/report-table/index.js

611 lines
15 KiB
JavaScript

/**
* External dependencies
*/
import { CheckboxControl, Button } from '@wordpress/components';
import { applyFilters } from '@wordpress/hooks';
import { Fragment, useRef, useState } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import { focus } from '@wordpress/dom';
import { withDispatch } from '@wordpress/data';
import { get, noop, partial, uniq } from 'lodash';
import { __ } from '@wordpress/i18n';
import classnames from 'classnames';
import PropTypes from 'prop-types';
/**
* WooCommerce dependencies
*/
import { CompareButton, Search, TableCard } from '@woocommerce/components';
import DownloadIcon from './download-icon';
import {
getIdsFromQuery,
getSearchWords,
onQueryChange,
updateQueryString,
} from '@woocommerce/navigation';
import {
downloadCSVFile,
generateCSVDataFromTable,
generateCSVFileName,
} from '@woocommerce/csv-export';
import { SETTINGS_STORE_NAME, useUserPreferences } from '@woocommerce/data';
/**
* Internal dependencies
*/
import ReportError from 'analytics/components/report-error';
import { getReportChartData, getReportTableData } from 'wc-api/reports/utils';
import { QUERY_DEFAULTS } from 'wc-api/constants';
import withSelect from 'wc-api/with-select';
import { extendTableData } from './utils';
import { recordEvent } from 'lib/tracks';
import './style.scss';
const TABLE_FILTER = 'woocommerce_admin_report_table';
const ReportTable = ( props ) => {
const {
getHeadersContent,
getRowsContent,
getSummary,
isRequesting,
primaryData,
tableData,
endpoint,
// These props are not used in the render function, but are destructured
// so they are not included in the `tableProps` variable.
// eslint-disable-next-line no-unused-vars
itemIdField,
// eslint-disable-next-line no-unused-vars
tableQuery,
compareBy,
searchBy,
labels = {},
...tableProps
} = props;
// Pull these props out separately because they need to be included in tableProps.
const { query, columnPrefsKey } = props;
const { items, query: reportQuery } = tableData;
const initialSelectedRows = query.filter
? getIdsFromQuery( query[ compareBy ] )
: [];
const [ selectedRows, setSelectedRows ] = useState( initialSelectedRows );
const scrollPointRef = useRef( null );
const { updateUserPreferences, ...userData } = useUserPreferences();
// Bail early if we've encountered an error.
const isError = tableData.isError || primaryData.isError;
if ( isError ) {
return <ReportError isError />;
}
let userPrefColumns = [];
if ( columnPrefsKey ) {
userPrefColumns =
userData && userData[ columnPrefsKey ]
? userData[ columnPrefsKey ]
: userPrefColumns;
}
const onColumnsChange = ( shownColumns, toggledColumn ) => {
const columns = getHeadersContent().map( ( header ) => header.key );
const hiddenColumns = columns.filter(
( column ) => ! shownColumns.includes( column )
);
if ( columnPrefsKey ) {
const userDataFields = {
[ columnPrefsKey ]: hiddenColumns,
};
updateUserPreferences( userDataFields );
}
if ( toggledColumn ) {
const eventProps = {
report: endpoint,
column: toggledColumn,
status: shownColumns.includes( toggledColumn ) ? 'on' : 'off',
};
recordEvent( 'analytics_table_header_toggle', eventProps );
}
};
const onPageChange = ( newPage, source ) => {
scrollPointRef.current.scrollIntoView();
const tableElement = scrollPointRef.current.nextSibling.querySelector(
'.woocommerce-table__table'
);
const focusableElements = focus.focusable.find( tableElement );
if ( focusableElements.length ) {
focusableElements[ 0 ].focus();
}
if ( source ) {
if ( source === 'goto' ) {
recordEvent( 'analytics_table_go_to_page', {
report: endpoint,
page: newPage,
} );
} else {
recordEvent( 'analytics_table_page_click', {
report: endpoint,
direction: source,
} );
}
}
};
const trackTableSearch = () => {
// @todo: decide if this should only fire for new tokens (not any/all changes).
recordEvent( 'analytics_table_filter', { report: endpoint } );
};
const onSort = ( key, direction ) => {
onQueryChange( 'sort' )( key, direction );
const eventProps = {
report: endpoint,
column: key,
direction,
};
recordEvent( 'analytics_table_sort', eventProps );
};
const filterShownHeaders = ( headers, hiddenKeys ) => {
// If no user preferences, set visibilty based on column default.
if ( ! hiddenKeys ) {
return headers.map( ( header ) => ( {
...header,
visible: header.required || ! header.hiddenByDefault,
} ) );
}
// Set visibilty based on user preferences.
return headers.map( ( header ) => ( {
...header,
visible: header.required || ! hiddenKeys.includes( header.key ),
} ) );
};
const onClickDownload = () => {
const { initiateReportExport, title } = props;
const params = Object.assign( {}, query );
const { data, totalResults } = items;
let downloadType = 'browser';
// Delete unnecessary items from filename.
delete params.extended_info;
if ( params.search ) {
delete params[ searchBy ];
}
if ( data && data.length === totalResults ) {
downloadCSVFile(
generateCSVFileName( title, params ),
generateCSVDataFromTable(
getHeadersContent(),
getRowsContent( data )
)
);
} else {
downloadType = 'email';
initiateReportExport( endpoint, title, reportQuery );
}
recordEvent( 'analytics_table_download', {
report: endpoint,
rows: totalResults,
downloadType,
} );
};
const onCompare = () => {
const { compareParam } = props;
if ( compareBy ) {
onQueryChange( 'compare' )(
compareBy,
compareParam,
selectedRows.join( ',' )
);
}
};
const onSearchChange = ( values ) => {
const { baseSearchQuery, compareParam } = props;
// A comma is used as a separator between search terms, so we want to escape
// any comma they contain.
const searchTerms = values.map( ( v ) =>
v.label.replace( ',', '%2C' )
);
if ( searchTerms.length ) {
updateQueryString( {
filter: undefined,
[ compareParam ]: undefined,
[ searchBy ]: undefined,
...baseSearchQuery,
search: uniq( searchTerms ).join( ',' ),
} );
} else {
updateQueryString( {
search: undefined,
} );
}
trackTableSearch();
};
const selectAllRows = ( checked ) => {
const { ids } = props;
setSelectedRows( checked ? ids : [] );
};
const selectRow = ( i, checked ) => {
const { ids } = props;
if ( checked ) {
setSelectedRows( uniq( [ ids[ i ], ...selectedRows ] ) );
} else {
const index = selectedRows.indexOf( ids[ i ] );
setSelectedRows( [
...selectedRows.slice( 0, index ),
...selectedRows.slice( index + 1 ),
] );
}
};
const getCheckbox = ( i ) => {
const { ids = [] } = props;
const isChecked = selectedRows.indexOf( ids[ i ] ) !== -1;
return {
display: (
<CheckboxControl
onChange={ partial( selectRow, i ) }
checked={ isChecked }
/>
),
value: false,
};
};
const getAllCheckbox = () => {
const { ids = [] } = props;
const hasData = ids.length > 0;
const isAllChecked = hasData && ids.length === selectedRows.length;
return {
cellClassName: 'is-checkbox-column',
key: 'compare',
label: (
<CheckboxControl
onChange={ selectAllRows }
aria-label={ __( 'Select All' ) }
checked={ isAllChecked }
disabled={ ! hasData }
/>
),
required: true,
};
};
const isLoading =
isRequesting || tableData.isRequesting || primaryData.isRequesting;
const totals = get( primaryData, [ 'data', 'totals' ], {} );
const totalResults = items.totalResults;
const downloadable = totalResults > 0;
// Search words are in the query string, not the table query.
const searchWords = getSearchWords( query );
const searchedLabels = searchWords.map( ( v ) => ( {
key: v,
label: v,
} ) );
/**
* Filter report table.
*
* Enables manipulation of data used to create a report table.
*
* @param {Object} reportTableData - data used to create the table.
* @param {string} reportTableData.endpoint - table api endpoint.
* @param {Array} reportTableData.headers - table headers data.
* @param {Array} reportTableData.rows - table rows data.
* @param {Object} reportTableData.totals - total aggregates for request.
* @param {Array} reportTableData.summary - summary numbers data.
* @param {Object} reportTableData.items - response from api requerst.
*/
const filteredTableProps = applyFilters( TABLE_FILTER, {
endpoint,
headers: getHeadersContent(),
rows: getRowsContent( items.data ),
totals,
summary: getSummary ? getSummary( totals, totalResults ) : null,
items,
} );
let { headers, rows } = filteredTableProps;
const { summary } = filteredTableProps;
// Add in selection for comparisons.
if ( compareBy ) {
rows = rows.map( ( row, i ) => {
return [ getCheckbox( i ), ...row ];
} );
headers = [ getAllCheckbox(), ...headers ];
}
// Hide any headers based on user prefs, if loaded.
const filteredHeaders = filterShownHeaders( headers, userPrefColumns );
const className = classnames( 'woocommerce-report-table', {
'has-compare': !! compareBy,
'has-search': !! searchBy,
} );
return (
<Fragment>
<div
className="woocommerce-report-table__scroll-point"
ref={ scrollPointRef }
aria-hidden
/>
<TableCard
className={ className }
actions={ [
compareBy && (
<CompareButton
key="compare"
className="woocommerce-table__compare"
count={ selectedRows.length }
helpText={
labels.helpText ||
__(
'Check at least two items below to compare',
'woocommerce-admin'
)
}
onClick={ onCompare }
disabled={ ! downloadable }
>
{ labels.compareButton ||
__( 'Compare', 'woocommerce-admin' ) }
</CompareButton>
),
searchBy && (
<Search
allowFreeTextSearch={ true }
inlineTags
key="search"
onChange={ onSearchChange }
placeholder={
labels.placeholder ||
__( 'Search by item name', 'woocommerce-admin' )
}
selected={ searchedLabels }
showClearButton={ true }
type={ searchBy }
disabled={ ! downloadable }
/>
),
downloadable && (
<Button
key="download"
className="woocommerce-table__download-button"
disabled={ isLoading }
onClick={ onClickDownload }
>
<DownloadIcon />
<span className="woocommerce-table__download-button__label">
{ labels.downloadButton ||
__( 'Download', 'woocommerce-admin' ) }
</span>
</Button>
),
] }
headers={ filteredHeaders }
isLoading={ isLoading }
onQueryChange={ onQueryChange }
onColumnsChange={ onColumnsChange }
onSort={ onSort }
onPageChange={ onPageChange }
rows={ rows }
rowsPerPage={
parseInt( reportQuery.per_page, 10 ) ||
QUERY_DEFAULTS.pageSize
}
summary={ summary }
totalRows={ totalResults }
{ ...tableProps }
/>
</Fragment>
);
};
ReportTable.propTypes = {
/**
* Pass in query parameters to be included in the path when onSearch creates a new url.
*/
baseSearchQuery: PropTypes.object,
/**
* The string to use as a query parameter when comparing row items.
*/
compareBy: PropTypes.string,
/**
* Url query parameter compare function operates on
*/
compareParam: PropTypes.string,
/**
* The key for user preferences settings for column visibility.
*/
columnPrefsKey: PropTypes.string,
/**
* The endpoint to use in API calls to populate the table rows and summary.
* For example, if `taxes` is provided, data will be fetched from the report
* `taxes` endpoint (ie: `/wc-analytics/reports/taxes` and `/wc/v4/reports/taxes/stats`).
* If the provided endpoint doesn't exist, an error will be shown to the user
* with `ReportError`.
*/
endpoint: PropTypes.string,
/**
* Name of the methods available via `select( 'wc-api' )` that will be used to
* load more data for table items. If omitted, no call will be made and only
* the data returned by the reports endpoint will be used.
*/
extendItemsMethodNames: PropTypes.shape( {
getError: PropTypes.string,
isRequesting: PropTypes.string,
load: PropTypes.string,
} ),
/**
* A function that returns the headers object to build the table.
*/
getHeadersContent: PropTypes.func.isRequired,
/**
* A function that returns the rows array to build the table.
*/
getRowsContent: PropTypes.func.isRequired,
/**
* A function that returns the summary object to build the table.
*/
getSummary: PropTypes.func,
/**
* The name of the property in the item object which contains the id.
*/
itemIdField: PropTypes.string,
/**
* Custom labels for table header actions.
*/
labels: PropTypes.shape( {
compareButton: PropTypes.string,
downloadButton: PropTypes.string,
helpText: PropTypes.string,
placeholder: PropTypes.string,
} ),
/**
* Primary data of that report. If it's not provided, it will be automatically
* loaded via the provided `endpoint`.
*/
primaryData: PropTypes.object,
/**
* The string to use as a query parameter when searching row items.
*/
searchBy: PropTypes.string,
/**
* List of fields used for summary numbers. (Reduces queries)
*/
summaryFields: PropTypes.arrayOf( PropTypes.string ),
/**
* Table data of that report. If it's not provided, it will be automatically
* loaded via the provided `endpoint`.
*/
tableData: PropTypes.object.isRequired,
/**
* Properties to be added to the query sent to the report table endpoint.
*/
tableQuery: PropTypes.object,
/**
* String to display as the title of the table.
*/
title: PropTypes.string.isRequired,
};
ReportTable.defaultProps = {
primaryData: {},
tableData: {
items: {
data: [],
totalResults: 0,
},
query: {},
},
tableQuery: {},
compareParam: 'filter',
downloadable: false,
onSearch: noop,
baseSearchQuery: {},
};
export default compose(
withSelect( ( select, props ) => {
const {
endpoint,
getSummary,
isRequesting,
itemIdField,
query,
tableData,
tableQuery,
filters,
advancedFilters,
summaryFields,
} = props;
if (
isRequesting ||
( query.search &&
! ( query[ endpoint ] && query[ endpoint ].length ) )
) {
return {};
}
const { woocommerce_default_date_range: defaultDateRange } = select(
SETTINGS_STORE_NAME
).getSetting( 'wc_admin', 'wcAdminSettings' );
// Variations and Category charts are powered by the /reports/products/stats endpoint.
const chartEndpoint = [ 'variations', 'categories' ].includes(
endpoint
)
? 'products'
: endpoint;
const primaryData = getSummary
? getReportChartData( {
endpoint: chartEndpoint,
dataType: 'primary',
query,
select,
filters,
advancedFilters,
tableQuery,
defaultDateRange,
fields: summaryFields,
} )
: {};
const queriedTableData =
tableData ||
getReportTableData( {
endpoint,
query,
select,
tableQuery,
filters,
advancedFilters,
defaultDateRange,
} );
const extendedTableData = extendTableData(
select,
props,
queriedTableData
);
return {
primaryData,
ids: itemIdField
? extendedTableData.items.data.map(
( item ) => item[ itemIdField ]
)
: [],
tableData: extendedTableData,
query: { ...tableQuery, ...query },
};
} ),
withDispatch( ( dispatch ) => {
const { initiateReportExport } = dispatch( 'wc-api' );
return {
initiateReportExport,
};
} )
)( ReportTable );