woocommerce/plugins/woocommerce-admin/client/analytics/report/stock/table.js

213 lines
4.6 KiB
JavaScript

/**
* External dependencies
*/
import { __, _n, _x } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { decodeEntities } from '@wordpress/html-entities';
/**
* WooCommerce dependencies
*/
import { Link } from '@woocommerce/components';
import { getNewPath, getPersistedQuery } from '@woocommerce/navigation';
import { formatValue } from '@woocommerce/number';
import { getAdminLink, getSetting } from '@woocommerce/wc-admin-settings';
/**
* Internal dependencies
*/
import ReportTable from 'analytics/components/report-table';
import { isLowStock } from './utils';
import { CurrencyContext } from 'lib/currency-context';
const stockStatuses = getSetting( 'stockStatuses', {} );
class StockReportTable extends Component {
constructor() {
super();
this.getHeadersContent = this.getHeadersContent.bind( this );
this.getRowsContent = this.getRowsContent.bind( this );
this.getSummary = this.getSummary.bind( this );
}
getHeadersContent() {
return [
{
label: __( 'Product / Variation', 'woocommerce-admin' ),
key: 'title',
required: true,
isLeftAligned: true,
isSortable: true,
},
{
label: __( 'SKU', 'woocommerce-admin' ),
key: 'sku',
isSortable: true,
},
{
label: __( 'Status', 'woocommerce-admin' ),
key: 'stock_status',
isSortable: true,
defaultSort: true,
},
{
label: __( 'Stock', 'woocommerce-admin' ),
key: 'stock_quantity',
isSortable: true,
},
];
}
getRowsContent( products ) {
const { query } = this.props;
const persistedQuery = getPersistedQuery( query );
return products.map( ( product ) => {
const {
id,
manage_stock: manageStock,
parent_id: parentId,
sku,
stock_quantity: stockQuantity,
stock_status: stockStatus,
low_stock_amount: lowStockAmount,
} = product;
const name = decodeEntities( product.name );
const productDetailLink = getNewPath(
persistedQuery,
'/analytics/products',
{
filter: 'single_product',
products: parentId || id,
}
);
const nameLink = (
<Link href={ productDetailLink } type="wc-admin">
{ name }
</Link>
);
const editProductLink = getAdminLink(
'post.php?action=edit&post=' + ( parentId || id )
);
const stockStatusLink = isLowStock(
stockStatus,
stockQuantity,
lowStockAmount
) ? (
<Link href={ editProductLink } type="wp-admin">
{ _x(
'Low',
'Indication of a low quantity',
'woocommerce-admin'
) }
</Link>
) : (
<Link href={ editProductLink } type="wp-admin">
{ stockStatuses[ stockStatus ] }
</Link>
);
return [
{
display: nameLink,
value: name,
},
{
display: sku,
value: sku,
},
{
display: stockStatusLink,
value: stockStatus,
},
{
display: manageStock
? formatValue(
this.context.getCurrencyConfig(),
'number',
stockQuantity
)
: __( 'N/A', 'woocommerce-admin' ),
value: stockQuantity,
},
];
} );
}
getSummary( totals ) {
const {
products = 0,
outofstock = 0,
lowstock = 0,
instock = 0,
onbackorder = 0,
} = totals;
const currency = this.context.getCurrencyConfig();
return [
{
label: _n(
'product',
'products',
products,
'woocommerce-admin'
),
value: formatValue( currency, 'number', products ),
},
{
label: __( 'out of stock', outofstock, 'woocommerce-admin' ),
value: formatValue( currency, 'number', outofstock ),
},
{
label: __( 'low stock', lowstock, 'woocommerce-admin' ),
value: formatValue( 'currency, number', lowstock ),
},
{
label: __( 'on backorder', onbackorder, 'woocommerce-admin' ),
value: formatValue( currency, 'number', onbackorder ),
},
{
label: __( 'in stock', instock, 'woocommerce-admin' ),
value: formatValue( currency, 'number', instock ),
},
];
}
render() {
const { advancedFilters, filters, query } = this.props;
return (
<ReportTable
endpoint="stock"
getHeadersContent={ this.getHeadersContent }
getRowsContent={ this.getRowsContent }
getSummary={ this.getSummary }
summaryFields={ [
'products',
'outofstock',
'lowstock',
'instock',
'onbackorder',
] }
query={ query }
tableQuery={ {
orderby: query.orderby || 'stock_status',
order: query.order || 'asc',
type: query.type || 'all',
} }
title={ __( 'Stock', 'woocommerce-admin' ) }
filters={ filters }
advancedFilters={ advancedFilters }
/>
);
}
}
StockReportTable.contextType = CurrencyContext;
export default StockReportTable;