Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Persist date related parameters on report navigation

This commit is contained in:
Paul Sealock 2018-10-18 17:37:28 +13:00
parent a29799eb85
commit 240599c095
4 changed files with 72 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
plugins/woocommerce-admin/client/layout/controller.js
View File

@ -4,42 +4,48 @@
*/
import { Component, createElement } from '@wordpress/element';
import { parse } from 'qs';
import { find } from 'lodash';
import { find, omitBy, isUndefined, last } from 'lodash';
/**
* External dependencies
* Internal dependencies
*/
import Analytics from 'analytics';
import AnalyticsReport from 'analytics/report';
import Dashboard from 'dashboard';
import DevDocs from 'devdocs';
import { stringifyQuery } from 'lib/nav-utils';
const getPages = () => {
const pages = [
{
container: Dashboard,
path: '/',
wpMenu: 'toplevel_page_woocommerce',
wpOpenMenu: 'toplevel_page_woocommerce',
wpClosedMenu: 'toplevel_page_wc-admin--analytics',
},
{
container: Analytics,
path: '/analytics',
wpMenu: 'toplevel_page_wc-admin--analytics',
wpOpenMenu: 'toplevel_page_wc-admin--analytics',
wpClosedMenu: 'toplevel_page_woocommerce',
},
{
container: AnalyticsReport,
path: '/analytics/:report',
wpMenu: 'toplevel_page_wc-admin--analytics',
wpOpenMenu: 'toplevel_page_wc-admin--analytics',
wpClosedMenu: 'toplevel_page_woocommerce',
},
{
container: DevDocs,
path: '/devdocs',
wpMenu: 'toplevel_page_woocommerce',
wpOpenMenu: 'toplevel_page_woocommerce',
wpClosedMenu: 'toplevel_page_wc-admin--analytics',
},
{
container: DevDocs,
path: '/devdocs/:component',
wpMenu: 'toplevel_page_woocommerce',
wpOpenMenu: 'toplevel_page_woocommerce',
wpClosedMenu: 'toplevel_page_wc-admin--analytics',
},
];
@ -53,14 +59,39 @@ class Controller extends Component {
const search = this.props.location.search.substring( 1 );
const query = parse( search );
const page = find( getPages(), { path } );
window.wpNavMenuClassChange( page.wpMenu, this.props.location.pathname );
window.wpNavMenuUrlUpdate( page, query );
window.wpNavMenuClassChange( page );
return createElement( page.container, { params, path: url, pathMatch: path, query } );
}
}
// Update links in wp-admin menu to persist time related queries
window.wpNavMenuUrlUpdate = function( page, { period, compare, after, before } ) {
const timeRelatedQuery = omitBy( { period, compare, after, before }, isUndefined );
const search = stringifyQuery( timeRelatedQuery );
Array.from(
document.querySelectorAll( `#${ page.wpOpenMenu } a, #${ page.wpClosedMenu } a` )
).forEach( item => {
/**
* Example hrefs:
*
* http://example.com/wp-admin/admin.php?page=wc-admin#/analytics/orders?period=today&compare=previous_year
* http://example.com/wp-admin/admin.php?page=wc-admin#/?period=week&compare=previous_year
* http://example.com/wp-admin/admin.php?page=wc-admin
*/
if ( item.href.includes( 'wc-admin' ) && ! item.href.includes( 'devdocs' ) ) {
const url = item.href.split( 'wc-admin' );
const hashUrl = last( url );
const base = hashUrl.split( '?' )[ 0 ];
const href = `${ url[ 0 ] }wc-admin${ '#' === base[ 0 ] ? '' : '#/' }${ base }${ search }`;
item.href = href;
}
} );
};
// When the route changes, we need to update wp-admin's menu with the correct section & current link
window.wpNavMenuClassChange = function( menuClass, pathname ) {
const path = '/' === pathname ? '' : '#' + pathname;
window.wpNavMenuClassChange = function( page ) {
Array.from( document.getElementsByClassName( 'current' ) ).forEach( function( item ) {
item.classList.remove( 'current' );
} );
@ -72,17 +103,23 @@ window.wpNavMenuClassChange = function( menuClass, pathname ) {
submenu.classList.add( 'wp-not-current-submenu' );
submenu.classList.add( 'menu-top' );
Array.from(
document.querySelectorAll( `li > a[href$="admin.php?page=wc-admin${ path }"]` )
).forEach( function( item ) {
const currentItems = document.querySelectorAll( `li > a[href="${ window.location.href }"]` );
Array.from( currentItems ).forEach( function( item ) {
item.parentElement.classList.add( 'current' );
} );
const currentMenu = document.querySelector( '#' + menuClass );
const currentMenu = document.querySelector( '#' + page.wpOpenMenu );
currentMenu.classList.remove( 'wp-not-current-submenu' );
currentMenu.classList.add( 'wp-has-current-submenu' );
currentMenu.classList.add( 'wp-menu-open' );
currentMenu.classList.add( 'current' );
// Sometimes navigating from the subMenu to Dashboard does not close subMenu
const closedMenu = document.querySelector( '#' + page.wpClosedMenu );
closedMenu.classList.remove( 'wp-has-current-submenu' );
closedMenu.classList.remove( 'wp-menu-open' );
closedMenu.classList.add( 'wp-not-current-submenu' );
};
export { Controller, getPages };

10
plugins/woocommerce-admin/client/lib/date/index.js
View File

@ -7,6 +7,10 @@ import { find } from 'lodash';
import { __ } from '@wordpress/i18n';
import { getSettings, format as formatDate } from '@wordpress/date';
export const isoDateFormat = 'YYYY-MM-DD';
const DEFAULT_PERIOD = 'month';
const DEFAULT_COMPARE = 'previous_year';
/**
* DateValue Object
*
@ -27,8 +31,6 @@ import { getSettings, format as formatDate } from '@wordpress/date';
* @param {moment.Moment|null} before - If the period supplied is "custom", this is the before date
*/
export const isoDateFormat = 'YYYY-MM-DD';
export const presetValues = [
{ value: 'today', label: __( 'Today', 'wc-admin' ) },
{ value: 'yesterday', label: __( 'Yesterday', 'wc-admin' ) },
@ -258,8 +260,8 @@ function getDateValue( period, compare, after, before ) {
*/
export const getDateParamsFromQuery = ( { period, compare, after, before } ) => {
return {
period: period || 'today',
compare: compare || 'previous_period',
period: period || DEFAULT_PERIOD,
compare: compare || DEFAULT_COMPARE,
after: after ? moment( after ) : null,
before: before ? moment( before ) : null,
};

19
plugins/woocommerce-admin/client/lib/date/test/index.js
View File

@ -599,18 +599,25 @@ describe( 'getCurrentDates', () => {
it( 'should correctly apply default values', () => {
const query = {};
const today = moment().format( isoDateFormat );
const yesterday = moment()
.subtract( 1, 'day' )
const startOfMonth = moment()
.startOf( 'month' )
.format( isoDateFormat );
const startOfMonthYearAgo = moment()
.startOf( 'month' )
.subtract( 1, 'year' )
.format( isoDateFormat );
const todayLastYear = moment()
.subtract( 1, 'year' )
.format( isoDateFormat );
const currentDates = getCurrentDates( query );
// Ensure default period is 'today'
expect( currentDates.primary.after ).toBe( today );
// Ensure default period is 'month'
expect( currentDates.primary.after ).toBe( startOfMonth );
expect( currentDates.primary.before ).toBe( today );
// Ensure default compare is `previous_period`
expect( currentDates.secondary.after ).toBe( yesterday );
expect( currentDates.secondary.before ).toBe( yesterday );
expect( currentDates.secondary.after ).toBe( startOfMonthYearAgo );
expect( currentDates.secondary.before ).toBe( todayLastYear );
} );
} );

4
plugins/woocommerce-admin/client/lib/nav-utils/index.js
View File

@ -4,7 +4,7 @@
*/
import history from 'lib/history';
import { parse, stringify } from 'qs';
import { uniq } from 'lodash';
import { uniq, isEmpty } from 'lodash';
/**
* Returns a string with the site's wp-admin URL appended. JS version of `admin_url`.
@ -27,7 +27,7 @@ export const getPath = () => history.location.pathname;
* @param {Object} query parameters to be converted.
* @return {String} Query string.
*/
export const stringifyQuery = query => ( query ? '?' + stringify( query ) : '' );
export const stringifyQuery = query => ( isEmpty( query ) ? '' : '?' + stringify( query ) );
/**
* Get an array of IDs from a comma-separated query parameter.