Merge pull request woocommerce/woocommerce-admin#2194 from woocommerce/fix/dashboard-issues

Fix/dashboard issues
This commit is contained in:
Paul Sealock 2019-05-15 07:30:41 +12:00 committed by GitHub
commit d7d630558d
9 changed files with 90 additions and 64 deletions

View File

@ -46,3 +46,4 @@ The component will get the following props:
- `path` (string): The exact path for this view. - `path` (string): The exact path for this view.
- `query` (object): The query string for the current view, can be used to read current preferences for time periods or chart interval/type. - `query` (object): The query string for the current view, can be used to read current preferences for time periods or chart interval/type.
- `title` (string): Title of the section according to the default settings or the user preferences if they had made any modification. - `title` (string): Title of the section according to the default settings or the user preferences if they had made any modification.
- `controls` (react component): Controls to move a section up/down or remove it from view to be rendered inside the EllipsisMenu.

View File

@ -1,14 +0,0 @@
/** @format */
.woocommerce-section-controls {
border-top: $border-width solid $core-grey-light-500;
.dashicon {
margin: 0 $gap-smaller 0 0;
vertical-align: bottom;
}
.woocommerce-ellipsis-menu__item {
padding-bottom: 10px;
}
}

View File

@ -19,7 +19,7 @@ import { H, ReportFilters } from '@woocommerce/components';
*/ */
import './style.scss'; import './style.scss';
import defaultSections from './default-sections'; import defaultSections from './default-sections';
import Section from './components/section'; import Section from './section';
import withSelect from 'wc-api/with-select'; import withSelect from 'wc-api/with-select';
class CustomizableDashboard extends Component { class CustomizableDashboard extends Component {
@ -109,9 +109,23 @@ class CustomizableDashboard extends Component {
onMove( index, change ) { onMove( index, change ) {
const sections = [ ...this.state.sections ]; const sections = [ ...this.state.sections ];
const movedSection = sections.splice( index, 1 ).shift(); const movedSection = sections.splice( index, 1 ).shift();
sections.splice( index + change, 0, movedSection ); const newIndex = index + change;
this.updateSections( sections ); // Figure out the index of the skipped section.
const nextJumpedSectionIndex = change < 0 ? newIndex : newIndex - 1;
if (
sections[ nextJumpedSectionIndex ].isVisible || // Is the skipped section visible?
index === 0 || // Will this be the first element?
index === sections.length - 1 // Will this be the last element?
) {
// Yes, lets insert.
sections.splice( newIndex, 0, movedSection );
this.updateSections( sections );
} else {
// No, lets try the next one.
this.onMove( index, change + change );
}
} }
renderAddMore() { renderAddMore() {
@ -163,29 +177,34 @@ class CustomizableDashboard extends Component {
render() { render() {
const { query, path } = this.props; const { query, path } = this.props;
const { sections } = this.state; const { sections } = this.state;
const visibleSections = sections.filter( section => section.isVisible ); const visibleSectionKeys = sections
.filter( section => section.isVisible )
.map( section => section.key );
return ( return (
<Fragment> <Fragment>
<H>{ __( 'Customizable Dashboard', 'woocommerce-admin' ) }</H> <H>{ __( 'Customizable Dashboard', 'woocommerce-admin' ) }</H>
<ReportFilters query={ query } path={ path } /> <ReportFilters query={ query } path={ path } />
{ visibleSections.map( ( section, index ) => { { sections.map( ( section, index ) => {
return ( if ( section.isVisible ) {
<Section return (
component={ section.component } <Section
hiddenBlocks={ section.hiddenBlocks } component={ section.component }
key={ section.key } hiddenBlocks={ section.hiddenBlocks }
onChangeHiddenBlocks={ this.onChangeHiddenBlocks( section.key ) } key={ section.key }
onTitleUpdate={ this.onSectionTitleUpdate( section.key ) } onChangeHiddenBlocks={ this.onChangeHiddenBlocks( section.key ) }
path={ path } onTitleUpdate={ this.onSectionTitleUpdate( section.key ) }
query={ query } path={ path }
title={ section.title } query={ query }
onMove={ partial( this.onMove, index ) } title={ section.title }
onRemove={ this.toggleVisibility( section.key ) } onMove={ partial( this.onMove, index ) }
isFirst={ 0 === index } onRemove={ this.toggleVisibility( section.key ) }
isLast={ visibleSections.length === index + 1 } isFirst={ section.key === visibleSectionKeys[ 0 ] }
/> isLast={ section.key === visibleSectionKeys[ visibleSectionKeys.length - 1 ] }
); />
);
}
return null;
} ) } } ) }
{ this.renderAddMore() } { this.renderAddMore() }
</Fragment> </Fragment>

View File

@ -24,7 +24,6 @@ import ChartBlock from './block';
import { getChartFromKey, uniqCharts } from './config'; import { getChartFromKey, uniqCharts } from './config';
import withSelect from 'wc-api/with-select'; import withSelect from 'wc-api/with-select';
import './style.scss'; import './style.scss';
import SectionControls from 'dashboard/components/section-controls';
class DashboardCharts extends Component { class DashboardCharts extends Component {
constructor( props ) { constructor( props ) {
@ -57,6 +56,7 @@ class DashboardCharts extends Component {
onTitleChange, onTitleChange,
onToggleHiddenBlock, onToggleHiddenBlock,
titleInput, titleInput,
controls: Controls,
} = this.props; } = this.props;
return ( return (
@ -89,13 +89,15 @@ class DashboardCharts extends Component {
</MenuItem> </MenuItem>
); );
} ) } } ) }
<SectionControls { window.wcAdminFeatures[ 'analytics-dashboard/customizable' ] && (
onToggle={ onToggle } <Controls
onMove={ onMove } onToggle={ onToggle }
onRemove={ onRemove } onMove={ onMove }
isFirst={ isFirst } onRemove={ onRemove }
isLast={ isLast } isFirst={ isFirst }
/> isLast={ isLast }
/>
) }
</Fragment> </Fragment>
) } ) }
/> />

View File

@ -16,3 +16,16 @@
margin: 0; margin: 0;
} }
} }
.woocommerce-section-controls {
border-top: $border-width solid $core-grey-light-500;
.dashicon {
margin: 0 $gap-smaller 0 0;
vertical-align: bottom;
}
.woocommerce-ellipsis-menu__item {
padding-bottom: 10px;
}
}

View File

@ -19,7 +19,6 @@ import { EllipsisMenu, MenuItem, MenuTitle, SectionHeader } from '@woocommerce/c
*/ */
import Leaderboard from 'analytics/components/leaderboard'; import Leaderboard from 'analytics/components/leaderboard';
import withSelect from 'wc-api/with-select'; import withSelect from 'wc-api/with-select';
import SectionControls from 'dashboard/components/section-controls';
import './style.scss'; import './style.scss';
class Leaderboards extends Component { class Leaderboards extends Component {
@ -51,6 +50,7 @@ class Leaderboards extends Component {
onTitleChange, onTitleChange,
onToggleHiddenBlock, onToggleHiddenBlock,
titleInput, titleInput,
controls: Controls,
} = this.props; } = this.props;
const { rowsPerTable } = this.state; const { rowsPerTable } = this.state;
@ -97,13 +97,15 @@ class Leaderboards extends Component {
} ) ) } } ) ) }
onChange={ this.setRowsPerTable } onChange={ this.setRowsPerTable }
/> />
<SectionControls { window.wcAdminFeatures[ 'analytics-dashboard/customizable' ] && (
onToggle={ onToggle } <Controls
onMove={ onMove } onToggle={ onToggle }
onRemove={ onRemove } onMove={ onMove }
isFirst={ isFirst } onRemove={ onRemove }
isLast={ isLast } isFirst={ isFirst }
/> isLast={ isLast }
/>
) }
</Fragment> </Fragment>
) } ) }
/> />

View File

@ -10,7 +10,6 @@ import { Component } from '@wordpress/element';
* Internal dependencies * Internal dependencies
*/ */
import { MenuItem } from '@woocommerce/components'; import { MenuItem } from '@woocommerce/components';
import './style.scss';
class SectionControls extends Component { class SectionControls extends Component {
constructor( props ) { constructor( props ) {
@ -36,10 +35,6 @@ class SectionControls extends Component {
render() { render() {
const { onRemove, isFirst, isLast } = this.props; const { onRemove, isFirst, isLast } = this.props;
if ( ! window.wcAdminFeatures[ 'analytics-dashboard/customizable' ] ) {
return null;
}
return ( return (
<div className="woocommerce-section-controls"> <div className="woocommerce-section-controls">
{ ! isFirst && ( { ! isFirst && (

View File

@ -5,6 +5,11 @@
import { Component } from '@wordpress/element'; import { Component } from '@wordpress/element';
import { xor } from 'lodash'; import { xor } from 'lodash';
/**
* Internal dependencies
*/
import SectionControls from './section-controls';
export default class Section extends Component { export default class Section extends Component {
constructor( props ) { constructor( props ) {
super( props ); super( props );
@ -57,6 +62,7 @@ export default class Section extends Component {
onTitleBlur={ this.onTitleBlur } onTitleBlur={ this.onTitleBlur }
onToggleHiddenBlock={ this.onToggleHiddenBlock } onToggleHiddenBlock={ this.onToggleHiddenBlock }
titleInput={ titleInput } titleInput={ titleInput }
controls={ SectionControls }
{ ...props } { ...props }
/> />
</div> </div>

View File

@ -31,7 +31,6 @@ import {
SummaryNumber, SummaryNumber,
} from '@woocommerce/components'; } from '@woocommerce/components';
import withSelect from 'wc-api/with-select'; import withSelect from 'wc-api/with-select';
import SectionControls from 'dashboard/components/section-controls';
import './style.scss'; import './style.scss';
class StorePerformance extends Component { class StorePerformance extends Component {
@ -47,6 +46,7 @@ class StorePerformance extends Component {
onTitleChange, onTitleChange,
onToggleHiddenBlock, onToggleHiddenBlock,
titleInput, titleInput,
controls: Controls,
} = this.props; } = this.props;
return ( return (
@ -83,13 +83,15 @@ class StorePerformance extends Component {
</MenuItem> </MenuItem>
); );
} ) } } ) }
<SectionControls { window.wcAdminFeatures[ 'analytics-dashboard/customizable' ] && (
onToggle={ onToggle } <Controls
onMove={ onMove } onToggle={ onToggle }
onRemove={ onRemove } onMove={ onMove }
isFirst={ isFirst } onRemove={ onRemove }
isLast={ isLast } isFirst={ isFirst }
/> isLast={ isLast }
/>
) }
</Fragment> </Fragment>
) } ) }
/> />