Skip to content

Commit

Permalink
feat: Admin payment reports (#117)
Browse files Browse the repository at this point in the history
* Enhance: integrated vue date range picker package

* Enhance: select2 JS integration

* Enhance: Vue Chart JS integration

* Added helper js function for getting custom date ranges and day js date format

* Added missing chart-js and vue-chart-js packages

* Improved date helper functions

* Fixed console error generated by date helper functions

* Included package-lock.json file

* Updated date js date format for long month names

* Localized admin url
  • Loading branch information
devAsadNur authored Dec 27, 2022
1 parent 51036dc commit b3d7a55
Show file tree
Hide file tree
Showing 8 changed files with 220 additions and 23 deletions.
1 change: 1 addition & 0 deletions assets/css/select2.min.css

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions assets/js/select2.min.js

Large diffs are not rendered by default.

29 changes: 19 additions & 10 deletions assets/src/utils/Bootstrap.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ import Multiselect from 'vue-multiselect'
import Modal from './components/Modal.vue'
import Switches from './components/Switches.vue'
import "vue-multiselect/dist/vue-multiselect.min.css"
import * as VueChartJS from 'vue-chartjs'

import * as Date_Helper from './date-helper';
window.Date_Helper = Date_Helper;

import dayjs from 'dayjs';
window.dayjs = dayjs;
Expand All @@ -28,6 +32,9 @@ Vue.use(VueDatePicker, {
lang: 'en'
});

import DateRangePicker from 'vue2-daterange-picker';
import 'vue2-daterange-picker/dist/vue2-daterange-picker.css';

Vue.directive( 'tooltip', VTooltip )
Vue.directive( 'close-popover', VClosePopover )
Vue.component( 'v-popover', VPopover )
Expand Down Expand Up @@ -73,16 +80,18 @@ window.wepos_get_lib = function( lib ) {

export const EventBus = new Vue();

window.weLo_ = _;
window.wepos._ = _;
window.wepos.api = new API_Helper();
window.wepos.libs['Vue'] = Vue;
window.wepos.libs['Router'] = Router;
window.wepos.libs['Vuex'] = Vuex;
window.wepos.libs['TextEditor'] = TextEditor;
window.wepos.libs['EventBus'] = EventBus;
window.wepos.libs['Modal'] = Modal;
window.wepos.libs['Switches'] = Switches;
window.weLo_ = _;
window.wepos._ = _;
window.wepos.api = new API_Helper();
window.wepos.libs['Vue'] = Vue;
window.wepos.libs['Router'] = Router;
window.wepos.libs['Vuex'] = Vuex;
window.wepos.libs['TextEditor'] = TextEditor;
window.wepos.libs['EventBus'] = EventBus;
window.wepos.libs['Modal'] = Modal;
window.wepos.libs['Switches'] = Switches;
window.wepos.libs['DateRangePicker'] = DateRangePicker;
window.wepos.libs['VueChartJS'] = VueChartJS;

// WordPress Hooks
import { createHooks } from '@wordpress/hooks';
Expand Down
123 changes: 123 additions & 0 deletions assets/src/utils/date-helper.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
/**
* Get DayJS supported date format.
*
* @since WEPOS_LITE_SINCE
*
* @param {string} dateFormat The date format to convert
*
* @return {string} DayJS supported date format
*/
export function wepos_get_dayjs_date_format( dateFormat = wepos.wp_date_format ) {
let formatMap = {
// Day
d: 'DD',
D: 'ddd',
j: 'D',
// Month
F: 'MMM',
m: 'MM',
M: 'MMM',
n: 'M',
// Year
Y: 'YYYY',
y: 'YY'
}

let dayJsDateFormat = '';

for ( let i = 0; i < dateFormat.length; i++ ) {
const char = dateFormat[i];

dayJsDateFormat += formatMap[char] ? formatMap[char] : char;
}

return dayJsDateFormat;
}

/**
* Get date range picker supported date format.
*
* @since WEPOS_LITE_SINCE
*
* @param {string} dateFormat The date format to convert
*
* @return {string} Date range picker supported date format
*/
export function wepos_get_daterange_picker_date_format( dateFormat = wepos.wp_date_format ) {
let formatMap = {
// Day
d: 'dd',
D: 'ddd',
j: 'd',
// Month
F: 'mmmm',
m: 'mm',
M: 'mmm',
n: 'm',
// Year
Y: 'yyyy',
y: 'yy'
}

let dateRangePickerFormat = '';

for ( let i = 0; i < dateFormat.length; i++ ) {
const char = dateFormat[i];

dateRangePickerFormat += formatMap[char] ? formatMap[char] : char;
}

return dateRangePickerFormat;
}

/**
* Get custom date ranges.
*
* @since WEPOS_LITE_SINCE
*
* @param {string} dateContext The date context
*
* @return {array} Date range
*/
export function wepos_get_custom_date_ranges( dateContext = "this year" ) {
let dateRange = [];

switch ( dateContext ) {
case "today":
dateRange["start"] = dayjs().startOf('day').toDate();
dateRange["end"] = dayjs().endOf('day').toDate();
break;

case "yesterday":
dateRange["start"] = dayjs().subtract( 1, 'days' ).startOf( 'day' ).toDate();
dateRange["end"] = dayjs().subtract( 1, 'days' ).endOf( 'day' ).toDate();
break;

case "this week":
dateRange["start"] = dayjs().startOf( 'week' ).toDate();
dateRange["end"] = dayjs().endOf( 'week' ).toDate();
break;

case "this month":
dateRange["start"] = dayjs().startOf( 'month' ).toDate();
dateRange["end"] = dayjs().endOf( 'month' ).toDate();
break;

case "this quarter":
dateRange["start"] = dayjs().startOf( 'quarter' ).toDate();
dateRange["end"] = dayjs().endOf( 'quarter' ).toDate();
break;

case "last month":
dateRange["start"] = dayjs().subtract( 1, 'months' ).startOf( 'month' ).toDate();
dateRange["end"] = dayjs().subtract( 1, 'months' ).endOf( 'month' ).toDate();
break;

case "this year":
default:
dateRange["start"] = dayjs().startOf( 'year' ).toDate();
dateRange["end"] = dayjs().endOf( 'year' ).toDate();
}

return dateRange;
}
2 changes: 2 additions & 0 deletions includes/Admin/Admin.php
Original file line number Diff line number Diff line change
Expand Up @@ -69,10 +69,12 @@ public function enqueue_scripts() {
wp_enqueue_style( 'wepos-style' );
wp_enqueue_style( 'wepos-bootstrap' );
wp_enqueue_style( 'wepos-admin' );
wp_enqueue_style( 'wepos-select2' );

wp_enqueue_script( 'wepos-tinymce-plugin' );
wp_enqueue_script( 'wepos-vendor' );
wp_enqueue_script( 'wepos-blockui' );
wp_enqueue_script( 'wepos-select2' );

wp_enqueue_script( 'wepos-bootstrap' );
do_action( 'wepos_load_admin_scripts' );
Expand Down
15 changes: 14 additions & 1 deletion includes/Assets.php
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,11 @@ public function get_scripts() {
'version' => filemtime( WEPOS_PATH . '/assets/js/vendor'. $prefix .'.js' ),
'in_footer' => true
],
'wepos-select2' => [
'src' => WEPOS_ASSETS . '/js/select2.min.js',
'version' => filemtime( WEPOS_PATH . '/assets/js/select2.min.js' ),
'in_footer' => true
],
'wepos-bootstrap' => [
'src' => WEPOS_ASSETS . '/js/bootstrap'. $prefix .'.js',
'deps' => $dependency,
Expand Down Expand Up @@ -165,6 +170,9 @@ public function get_styles() {
'deps' => array(),
'version' => time()
],
'wepos-select2' => [
'src' => WEPOS_ASSETS . '/css/select2.min.css'
],
];

return $styles;
Expand All @@ -178,12 +186,14 @@ public function enqueue_all_scripts() {
wp_enqueue_style( 'wepos-style' );
wp_enqueue_style( 'wepos-bootstrap' );
wp_enqueue_style( 'wepos-frontend' );
wp_enqueue_style( 'wepos-select2' );

// Load scripts
wp_enqueue_script( 'wepos-blockui' );
wp_enqueue_script( 'wepos-accounting' );
wp_enqueue_script( 'wepos-vendor' );
wp_enqueue_script( 'wepos-bootstrap' );
wp_enqueue_script( 'wepos-select2' );

do_action( 'wepos_load_forntend_scripts' );

Expand Down Expand Up @@ -219,6 +229,7 @@ public function register_localize() {
'currency_format_thousand_sep' => esc_attr( wc_get_price_thousand_separator() ),
'currency_format' => esc_attr( str_replace( array( '%1$s', '%2$s' ), array( '%s', '%v' ), get_woocommerce_price_format() ) ), // For accounting JS
'rounding_precision' => wc_get_rounding_precision(),
'admin_url' => get_admin_url(),
'assets_url' => WEPOS_ASSETS,
'placeholder_image' => wc_placeholder_img_src(),
'ajax_loader' => WEPOS_ASSETS . '/images/spinner-2x.gif',
Expand All @@ -227,7 +238,9 @@ public function register_localize() {
'countries' => WC()->countries->get_countries(),
'states' => WC()->countries->get_states(),
'current_user_id' => get_current_user_id(),
'home_url' => home_url()
'home_url' => home_url(),
'wp_date_format' => get_option( 'date_format' ),
'wp_time_format' => get_option( 'time_format' ),
] );

wp_localize_script( 'wepos-vendor', 'wepos', $localize_data );
Expand Down
67 changes: 56 additions & 11 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,19 @@
"dependencies": {
"@mathieustan/vue-datepicker": "^0.2.11",
"@wordpress/hooks": "^3.14.0",
"chart.js": "^2.9.4",
"dayjs": "^1.11.4",
"lodash": "^4.17.21",
"v-hotkey": "^0.9.0",
"v-tooltip": "^2.0.0-rc.33",
"vue": "^2.7.8",
"vue-chartjs": "^3.5.1",
"vue-js-popover": "^1.2.1",
"vue-mugen-scroll": "^0.2.6",
"vue-multiselect": "^2.1.6",
"vue-resize": "^1.0.1",
"vue-router": "^3.5.4",
"vue-sweetalert2": "^5.0.5",
"vue2-daterange-picker": "^0.6.8",
"vuex": "^3.6.2"
},
"devDependencies": {
Expand Down

0 comments on commit b3d7a55

Please sign in to comment.