Remove Agenda Widget (https://github.com/woocommerce/woocommerce-admin/pull/216)
This commit is contained in:
Justin Shreve
GitHub
parent
0e0426e3cd
commit
b64d729f0a
|
|
@ -8,7 +8,6 @@ import { Component, Fragment } from '@wordpress/element';
|
||||||
/**
|
/**
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
*/
|
*/
|
||||||
import Agenda from './widgets/agenda';
|
|
||||||
import Header from 'layout/header';
|
import Header from 'layout/header';
|
||||||
import StorePerformance from './store-performance';
|
import StorePerformance from './store-performance';
|
||||||
import Charts from './charts';
|
import Charts from './charts';
|
||||||
|
|
@ -19,7 +18,6 @@ export default class Dashboard extends Component {
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<Header sections={ [ __( 'Dashboard', 'wc-admin' ) ] } />
|
<Header sections={ [ __( 'Dashboard', 'wc-admin' ) ] } />
|
||||||
<StorePerformance />
|
<StorePerformance />
|
||||||
<Agenda />
|
|
||||||
<Charts />
|
<Charts />
|
||||||
</Fragment>
|
</Fragment>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,82 +0,0 @@
|
||||||
Agenda
|
|
||||||
============
|
|
||||||
|
|
||||||
This widget displays agenda items for WooCommerce (i.e. orders that need fulfilled, reviews to moderate, etc).
|
|
||||||
|
|
||||||
An `Agenda` widget is made up of multiple `AgendaHeader` components, each with their own `AgendaItem`.
|
|
||||||
|
|
||||||
`Agenda` acts as a wrapper widget, and will be responsible for pulling in agenda data from the API.
|
|
||||||
|
|
||||||
`AgendaHeader` displays multiple `AgendaItem` child components. All `AgendaItem`s under an `AgendaHeader` should relate to the same task at hand (example: "Orders to fulfill"). Alternatively, a link can be passed and `AgendaHeader` will act as a link instead.
|
|
||||||
|
|
||||||
`AgendaItem` contains information to each individual item (i.e. order number, date, etc). It will output an action button for acting on each item.
|
|
||||||
|
|
||||||
## How to use `Agenda`:
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { Agenda } from 'dashboard/widgets/agenda';
|
|
||||||
|
|
||||||
render: function() {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Agenda />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## How to use `AgendaHeader` and `AgendaItem`:
|
|
||||||
|
|
||||||
```jsx
|
|
||||||
import { AgendaHeader } from 'dashboard/widgets/agenda/header';
|
|
||||||
import { AgendaItem } from 'dashboard/widgets/agenda/item';
|
|
||||||
import { getWpAdminLink } from 'lib/nav-utils';
|
|
||||||
import { noop } from 'lodash';
|
|
||||||
|
|
||||||
render: function() {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<AgendaHeader
|
|
||||||
count={ 2 }
|
|
||||||
title={ _n(
|
|
||||||
'Order needs to be fulfilled',
|
|
||||||
'Orders need to be fulfilled',
|
|
||||||
2,
|
|
||||||
'wc-admin'
|
|
||||||
) }
|
|
||||||
>
|
|
||||||
<AgendaItem onClick={ noop } actionLabel={ __( 'Fulfill', 'wc-admin' ) }>Order #99</AgendaItem>
|
|
||||||
<AgendaItem
|
|
||||||
href={ getWpAdminLink( '/edit.php?post_type=shop_order' ) }
|
|
||||||
actionLabel={ __( 'Fulfill', 'wc-admin' ) }
|
|
||||||
>
|
|
||||||
Order #101
|
|
||||||
</AgendaItem>
|
|
||||||
</AgendaHeader>
|
|
||||||
<AgendaHeader
|
|
||||||
count={ 1 }
|
|
||||||
title={ _n( 'Order awaiting payment', 'Orders awaiting payment', 1, 'wc-admin' ) }
|
|
||||||
href={ getWpAdminLink( '/edit.php?post_status=wc-pending&post_type=shop_order' ) }
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
## `AgendaHeader` Props
|
|
||||||
|
|
||||||
* `title` (required): A title that describes the associated agenda items.
|
|
||||||
* `count`: Number of agenda items that need taken care of.
|
|
||||||
* `children`: A list of AgendaItem components.
|
|
||||||
* `href`: If a href is passed, the AgendaHeader will not be expandable, and will instead link to the destination.
|
|
||||||
* `className`: Optional extra class name.
|
|
||||||
* `initialOpen` (default: false): Initial open status of the accordion (if not passing an href).
|
|
||||||
|
|
||||||
## `AgendaItem` Props
|
|
||||||
|
|
||||||
* `onClick`: A function called when the action button is clicked.
|
|
||||||
* `href`: A link when the action button is clicked.
|
|
||||||
* `actionLabel` (required): A string to be used for the action button.
|
|
||||||
* `className`: Optional extra class name.
|
|
||||||
* `children`: Information about the agenda item.
|
|
||||||
|
|
@ -1,107 +0,0 @@
|
||||||
/** @format */
|
|
||||||
/**
|
|
||||||
* External dependencies
|
|
||||||
*/
|
|
||||||
import classnames from 'classnames';
|
|
||||||
import { Component } from '@wordpress/element';
|
|
||||||
import { Dashicon, IconButton } from '@wordpress/components';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Internal dependencies
|
|
||||||
*/
|
|
||||||
import Count from 'components/count';
|
|
||||||
import { H, Section } from 'layout/section';
|
|
||||||
|
|
||||||
class AgendaHeader extends Component {
|
|
||||||
constructor( props ) {
|
|
||||||
super( ...arguments );
|
|
||||||
this.state = {
|
|
||||||
opened: props.initialOpen === undefined ? false : props.initialOpen,
|
|
||||||
};
|
|
||||||
this.toggle = this.toggle.bind( this );
|
|
||||||
}
|
|
||||||
|
|
||||||
toggle( event ) {
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
if ( this.props.opened === undefined ) {
|
|
||||||
this.setState( state => ( {
|
|
||||||
opened: ! state.opened,
|
|
||||||
} ) );
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( this.props.onToggle ) {
|
|
||||||
this.props.onToggle();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
renderLink() {
|
|
||||||
const { title, className, count, href } = this.props;
|
|
||||||
const classes = classnames( 'woocommerce-dashboard__agenda-group-wrapper', className );
|
|
||||||
|
|
||||||
return (
|
|
||||||
<a className={ classes } href={ href }>
|
|
||||||
<div className="woocommerce-dashboard__agenda-group-title is-link">
|
|
||||||
<H className="woocommerce-dashboard__agenda-group-label">
|
|
||||||
{ count && <Count count={ count } /> }
|
|
||||||
{ title }
|
|
||||||
</H>
|
|
||||||
<span className="woocommerce-dashboard__agenda-group-arrow">
|
|
||||||
<Dashicon icon="arrow-right-alt2" />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { title, children, opened, className, count, href } = this.props;
|
|
||||||
|
|
||||||
// Render a link instead of an accordion if `href` is passed.
|
|
||||||
if ( href ) {
|
|
||||||
return this.renderLink();
|
|
||||||
}
|
|
||||||
|
|
||||||
const isOpened = opened === undefined ? this.state.opened : opened;
|
|
||||||
const classes = classnames( 'woocommerce-dashboard__agenda-group-wrapper', className, {
|
|
||||||
'is-opened': isOpened,
|
|
||||||
} );
|
|
||||||
const icon = `arrow-${ isOpened ? 'up-alt2' : 'down-alt2' }`;
|
|
||||||
|
|
||||||
/* eslint-disable jsx-a11y/click-events-have-key-events */
|
|
||||||
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
|
||||||
return (
|
|
||||||
<div className={ classes }>
|
|
||||||
<div
|
|
||||||
onClick={ this.toggle }
|
|
||||||
className="woocommerce-dashboard__agenda-group-title is-accordion"
|
|
||||||
>
|
|
||||||
<H className="woocommerce-dashboard__agenda-group-label">
|
|
||||||
{ count && <Count count={ count } /> }
|
|
||||||
{ title }
|
|
||||||
</H>
|
|
||||||
<IconButton onClick={ this.toggle } aria-expanded={ isOpened } icon={ icon } />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{ isOpened &&
|
|
||||||
children && (
|
|
||||||
<Section className="woocommerce-dashboard__agenda-group-content">{ children }</Section>
|
|
||||||
) }
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
/* eslint-enable jsx-a11y/click-events-have-key-events */
|
|
||||||
/* eslint-enable jsx-a11y/no-static-element-interactions */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
AgendaHeader.propTypes = {
|
|
||||||
title: PropTypes.string.isRequired,
|
|
||||||
className: PropTypes.string,
|
|
||||||
count: PropTypes.number,
|
|
||||||
initialOpen: PropTypes.bool,
|
|
||||||
children: PropTypes.node,
|
|
||||||
href: PropTypes.string,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AgendaHeader;
|
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
/** @format */
|
|
||||||
/**
|
|
||||||
* External dependencies
|
|
||||||
*/
|
|
||||||
import { __, _n } from '@wordpress/i18n';
|
|
||||||
import { Component } from '@wordpress/element';
|
|
||||||
import { noop } from 'lodash';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Internal dependencies
|
|
||||||
*/
|
|
||||||
import AgendaHeader from './header';
|
|
||||||
import AgendaItem from './item';
|
|
||||||
import Card from 'components/card';
|
|
||||||
import { getAdminLink } from 'lib/nav-utils';
|
|
||||||
|
|
||||||
import './style.scss';
|
|
||||||
|
|
||||||
// TODO Hook up to API Data once agenda API is available
|
|
||||||
class Agenda extends Component {
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
title={ __( 'Your agenda', 'wc-admin' ) }
|
|
||||||
className="woocommerce-dashboard__agenda-card"
|
|
||||||
>
|
|
||||||
<AgendaHeader
|
|
||||||
count={ 2 }
|
|
||||||
title={ _n(
|
|
||||||
'Order needs to be fulfilled',
|
|
||||||
'Orders need to be fulfilled',
|
|
||||||
2,
|
|
||||||
'wc-admin'
|
|
||||||
) }
|
|
||||||
>
|
|
||||||
<AgendaItem onClick={ noop } actionLabel={ __( 'Fulfill', 'wc-admin' ) }>
|
|
||||||
Order #99
|
|
||||||
</AgendaItem>
|
|
||||||
<AgendaItem
|
|
||||||
href={ getAdminLink( '/edit.php?post_type=shop_order' ) }
|
|
||||||
actionLabel={ __( 'Fulfill', 'wc-admin' ) }
|
|
||||||
>
|
|
||||||
Order #101
|
|
||||||
</AgendaItem>
|
|
||||||
</AgendaHeader>
|
|
||||||
<AgendaHeader
|
|
||||||
count={ 1 }
|
|
||||||
title={ _n( 'Order awaiting payment', 'Orders awaiting payment', 1, 'wc-admin' ) }
|
|
||||||
href={ getAdminLink( '/edit.php?post_status=wc-pending&post_type=shop_order' ) }
|
|
||||||
/>
|
|
||||||
<AgendaHeader
|
|
||||||
title={ __( 'Extensions', 'wc-admin' ) }
|
|
||||||
href={ getAdminLink( '/admin.php?page=wc-addons' ) }
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Agenda;
|
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
/** @format */
|
|
||||||
/**
|
|
||||||
* External dependencies
|
|
||||||
*/
|
|
||||||
import { Button } from '@wordpress/components';
|
|
||||||
import classnames from 'classnames';
|
|
||||||
import { Component } from '@wordpress/element';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
class AgendaItem extends Component {
|
|
||||||
render() {
|
|
||||||
const { children, className, onClick, href, actionLabel } = this.props;
|
|
||||||
const classes = classnames( 'woocommerce-dashboard__agenda-item-wrapper', className );
|
|
||||||
|
|
||||||
const action = href !== undefined ? { href } : { onClick };
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={ classes }>
|
|
||||||
{ children && (
|
|
||||||
<div className="woocommerce-dashboard__agenda-item-content"> { children } </div>
|
|
||||||
) }
|
|
||||||
<Button
|
|
||||||
className="woocommerce-dashboard__agenda-item-action-button button-secondary"
|
|
||||||
{ ...action }
|
|
||||||
>
|
|
||||||
{ actionLabel }
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
AgendaItem.propTypes = {
|
|
||||||
onClick: PropTypes.func,
|
|
||||||
href: PropTypes.string,
|
|
||||||
actionLabel: PropTypes.string.isRequired,
|
|
||||||
className: PropTypes.string,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default AgendaItem;
|
|
||||||
|
|
@ -1,101 +0,0 @@
|
||||||
/** @format */
|
|
||||||
|
|
||||||
.woocommerce-dashboard__agenda-card .woocommerce-card__body {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.woocommerce-dashboard__agenda-group-wrapper {
|
|
||||||
background: #f9f9f9;
|
|
||||||
font-size: 13px;
|
|
||||||
text-decoration: none;
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
.woocommerce-dashboard__agenda-group-label {
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: normal;
|
|
||||||
|
|
||||||
.woocommerce-count {
|
|
||||||
border-color: $white;
|
|
||||||
background: $white;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.woocommerce-dashboard__agenda-group-content {
|
|
||||||
background: $white;
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.woocommerce-dashboard__agenda-group-title {
|
|
||||||
height: 60px;
|
|
||||||
padding: 20px 0px 0px 20px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
&.is-accordion {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.woocommerce-dashboard__agenda-group-label {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.woocommerce-dashboard__agenda-group-arrow,
|
|
||||||
.components-button {
|
|
||||||
position: relative;
|
|
||||||
padding: 16px;
|
|
||||||
outline: none;
|
|
||||||
width: 100%;
|
|
||||||
text-align: right;
|
|
||||||
border: none;
|
|
||||||
box-shadow: none;
|
|
||||||
color: #444;
|
|
||||||
}
|
|
||||||
|
|
||||||
.woocommerce-dashboard__agenda-group-arrow .dashicon,
|
|
||||||
.components-icon-button {
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.components-button:not(:disabled):focus,
|
|
||||||
.components-button:not(:disabled):hover {
|
|
||||||
box-shadow: none;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.components-button:not(:disabled):focus {
|
|
||||||
.dashicon {
|
|
||||||
box-shadow: inset 0 0 0 1px $gray-darken-10, inset 0 0 0 2px $white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-link {
|
|
||||||
a {
|
|
||||||
color: #444;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashicon {
|
|
||||||
position: absolute;
|
|
||||||
top: -18px;
|
|
||||||
right: 32px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.woocommerce-dashboard__agenda-item-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.woocommerce-dashboard__agenda-item-content {
|
|
||||||
max-width: 75%;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue