Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Extract workflow stats to atomation root component level

Browse Source 
[MAILPOET-4540]
This commit is contained in:
Jan Jakes
2022-10-18 15:27:53 +02:00
committed by David Remer
parent 1cc6d93717
commit c08813be1d
5 changed files with 57 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
mailpoet/assets/css/src/components/_automation_statistics.scss → mailpoet/assets/css/src/components-automation/_statistics.scss
View File

8
mailpoet/assets/css/src/mailpoet-automation-editor.scss
View File

@ -2,6 +2,13 @@
@import '../../../node_modules/@wordpress/edit-site/build-style/style'; @import '../../../node_modules/@wordpress/edit-site/build-style/style';
@import '../../../node_modules/@wordpress/block-editor/build-style/style'; // for inserter styles @import '../../../node_modules/@wordpress/block-editor/build-style/style'; // for inserter styles
@import 'settings/colors'; @import 'settings/colors';
// automation components
@import './components-automation/statistics';
// automation editor
@import './components-automation-editor/add-step-button'; @import './components-automation-editor/add-step-button';
@import './components-automation-editor/add-trigger'; @import './components-automation-editor/add-trigger';
@import './components-automation-editor/block-icon'; @import './components-automation-editor/block-icon';
@ -20,4 +27,3 @@
// integrations // integrations
@import './components-automation-integrations/mailpoet'; @import './components-automation-integrations/mailpoet';
@import './components/automation_statistics';

8
mailpoet/assets/css/src/mailpoet-automation.scss
View File

@ -1,8 +1,14 @@
@import '../../../node_modules/@woocommerce/components/build-style/style'; @import '../../../node_modules/@woocommerce/components/build-style/style';
@import 'settings/colors'; @import 'settings/colors';
// automation components
@import './components-automation/statistics';
// automation listing
@import './components-automation-listing/listing'; @import './components-automation-listing/listing';
@import './components-automation-listing/header'; @import './components-automation-listing/header';
@import './components-automation-listing/search'; @import './components-automation-listing/search';
@import './components-automation-listing/cells/actions'; @import './components-automation-listing/cells/actions';
@import './components-automation-listing/cells/status'; @import './components-automation-listing/cells/status';
@import './components/automation_statistics';

23
mailpoet/assets/js/src/automation/components/statistics/index.tsx Normal file
View File

@ -0,0 +1,23 @@
type Item = {
key: string;
label: string;
value: number;
};
type Props = {
items: Item[];
};
export function Statistics({ items }: Props): JSX.Element {
const intl = new Intl.NumberFormat();
return (
<ul className="mailpoet-automation-stats">
{items.map((item) => (
<li key={item.key} className="mailpoet-automation-stats-item">
<span className="mailpoet-automation-stats-label">{item.label}</span>
{intl.format(item.value)}
</li>
))}
</ul>
);
}

42
mailpoet/assets/js/src/automation/editor/components/workflow/statistics.tsx
View File

@ -1,6 +1,7 @@
import { useSelect } from '@wordpress/data'; import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { storeName } from '../../store'; import { storeName } from '../../store';
import { Statistics as BaseStatistics } from '../../../components/statistics';
export function Statistics(): JSX.Element { export function Statistics(): JSX.Element {
const { workflow } = useSelect( const { workflow } = useSelect(
@ -11,27 +12,24 @@ export function Statistics(): JSX.Element {
); );
return ( return (
<div> <BaseStatistics
<ul className="mailpoet-automation-stats"> items={[
<li className="mailpoet-automation-stats-item"> {
<span className="mailpoet-automation-stats-label"> key: 'entered',
{__('Total Entered', 'mailpoet')} label: __('Total Entered', 'mailpoet'),
</span> value: workflow.stats.totals.entered,
{new Intl.NumberFormat().format(workflow.stats.totals.entered)} },
</li> {
<li className="mailpoet-automation-stats-item"> key: 'processing',
<span className="mailpoet-automation-stats-label"> label: __('Total Processing', 'mailpoet'),
{__('Total Processing', 'mailpoet')} value: workflow.stats.totals.in_progress,
</span> },
{new Intl.NumberFormat().format(workflow.stats.totals.in_progress)} {
</li> key: 'exited',
<li className="mailpoet-automation-stats-item"> label: __('Total Exited', 'mailpoet'),
<span className="mailpoet-automation-stats-label"> value: workflow.stats.totals.exited,
{__('Total Exited', 'mailpoet')} },
</span> ]}
{new Intl.NumberFormat().format(workflow.stats.totals.exited)} />
</li>
</ul>
</div>
); );
} }