Begins implementation of new reports page #483
This commit is contained in:
parent
6bb0640356
commit
4bb7aae467
|
@ -58,6 +58,15 @@ class Admin {
|
|||
array( &$this, 'roles_page' )
|
||||
);
|
||||
|
||||
$reports_page_suffix = add_submenu_page(
|
||||
$this->menu_slug,
|
||||
__('Reports', 'tainacan'),
|
||||
__('Reports', 'tainacan'),
|
||||
'read',
|
||||
'tainacan_reports',
|
||||
array( &$this, 'reports_page' )
|
||||
);
|
||||
|
||||
add_submenu_page(
|
||||
$this->menu_slug,
|
||||
__('Item Submission', 'tainacan'),
|
||||
|
@ -69,6 +78,7 @@ class Admin {
|
|||
|
||||
add_action( 'load-' . $page_suffix, array( &$this, 'load_admin_page' ) );
|
||||
add_action( 'load-' . $roles_page_suffix, array( &$this, 'load_roles_page' ) );
|
||||
add_action( 'load-' . $reports_page_suffix, array( &$this, 'load_reports_page' ) );
|
||||
}
|
||||
|
||||
function load_admin_page() {
|
||||
|
@ -82,6 +92,11 @@ class Admin {
|
|||
add_action( 'admin_enqueue_scripts', array( &$this, 'add_roles_js' ), 90 );
|
||||
}
|
||||
|
||||
function load_reports_page() {
|
||||
add_action( 'admin_enqueue_scripts', array( &$this, 'add_reports_css' ), 90 );
|
||||
add_action( 'admin_enqueue_scripts', array( &$this, 'add_reports_js' ), 90 );
|
||||
}
|
||||
|
||||
function login_styles_reset( $style ) {
|
||||
if ( strpos( $style, 'wp-admin-css' ) !== false ) {
|
||||
$style = null;
|
||||
|
@ -130,6 +145,33 @@ class Admin {
|
|||
echo "<div id='tainacan-roles-app'></div>";
|
||||
}
|
||||
|
||||
function add_reports_css() {
|
||||
global $TAINACAN_BASE_URL;
|
||||
|
||||
wp_enqueue_style( 'tainacan-reports-page', $TAINACAN_BASE_URL . '/assets/css/tainacan-reports.css', [], TAINACAN_VERSION );
|
||||
}
|
||||
|
||||
function add_reports_js() {
|
||||
|
||||
global $TAINACAN_BASE_URL;
|
||||
|
||||
wp_enqueue_script( 'tainacan-reports', $TAINACAN_BASE_URL . '/assets/js/reports.js', ['underscore', 'wp-i18n'], TAINACAN_VERSION, true );
|
||||
wp_set_script_translations('tainacan-reports', 'tainacan');
|
||||
|
||||
$settings = $this->get_admin_js_localization_params();
|
||||
wp_localize_script( 'tainacan-reports', 'tainacan_plugin', $settings );
|
||||
wp_enqueue_script('underscore');
|
||||
wp_enqueue_script('wp-i18n');
|
||||
|
||||
do_action('tainacan-enqueue-reports-scripts');
|
||||
}
|
||||
|
||||
function reports_page() {
|
||||
global $TAINACAN_BASE_URL;
|
||||
// TODO move it to a separate file and start the Vue project
|
||||
echo "<div id='tainacan-reports-app'></div>";
|
||||
}
|
||||
|
||||
function add_admin_css() {
|
||||
global $TAINACAN_BASE_URL;
|
||||
|
||||
|
|
|
@ -0,0 +1,31 @@
|
|||
import Vue from 'vue';
|
||||
import store from '../../admin/js/store/store';
|
||||
import router from './reports-router';
|
||||
import VTooltip from 'v-tooltip';
|
||||
import { Snackbar, Modal } from 'buefy';
|
||||
|
||||
// Vue Dev Tools!
|
||||
Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
|
||||
|
||||
import { I18NPlugin } from './wp-i18n-plugin';
|
||||
|
||||
import ReportsPage from '../reports.vue';
|
||||
|
||||
Vue.use(I18NPlugin);
|
||||
Vue.use(VTooltip);
|
||||
Vue.use(Snackbar);
|
||||
Vue.use(Modal);
|
||||
|
||||
// Changing title of pages
|
||||
router.beforeEach((to, from, next) => {
|
||||
document.title = to.meta.title;
|
||||
if (next() != undefined)
|
||||
next();
|
||||
});
|
||||
|
||||
new Vue({
|
||||
el: '#tainacan-reports-app',
|
||||
store,
|
||||
router,
|
||||
render: h => h(ReportsPage)
|
||||
});
|
|
@ -0,0 +1,29 @@
|
|||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router'
|
||||
import qs from 'qs';
|
||||
|
||||
import ReportsList from '../pages/reports-list.vue';
|
||||
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
const routes = [
|
||||
{ path: '/', redirect:'/reports' },
|
||||
{ path: '/reports', name: 'ReportsList', component: ReportsList, meta: { title: __('Tainacan Reports') } },
|
||||
|
||||
{ path: '*', redirect: '/'}
|
||||
];
|
||||
|
||||
export default new VueRouter ({
|
||||
routes,
|
||||
// set custom query resolver
|
||||
parseQuery(query) {
|
||||
return qs.parse(query);
|
||||
},
|
||||
stringifyQuery(query) {
|
||||
let result = qs.stringify(query);
|
||||
|
||||
return result ? ('?' + result) : '';
|
||||
}
|
||||
});
|
|
@ -0,0 +1,29 @@
|
|||
|
||||
const { __, _x, _n, _nx } = wp.i18n;
|
||||
|
||||
/**
|
||||
I18N PLUGIN - Allows access to Wordpress translation functions.
|
||||
__( '__', 'my-domain' );
|
||||
_x( '_x', '_x_context', 'my-domain' );
|
||||
_n( '_n_single', '_n_plural', number, 'my-domain' );
|
||||
_nx( '_nx_single', '_nx_plural', number, '_nx_context', 'my-domain' );
|
||||
**/
|
||||
export const I18NPlugin = {};
|
||||
I18NPlugin.install = function (Vue, options = {}) {
|
||||
|
||||
Vue.prototype.$i18n = {
|
||||
get(key) {
|
||||
return __(key, 'tainacan');
|
||||
},
|
||||
getWithContext(key, keyContext) {
|
||||
return _x(key, keyContext, 'tainacan');
|
||||
},
|
||||
getWithNumber(keySingle, keyPlural, number) {
|
||||
return _n(keySingle, keyPlural, number, 'tainacan');
|
||||
},
|
||||
getWithNumberAndContext(keySingle, keyPlural, number, keyContext) {
|
||||
return _nx(keySingle, keyPlural, number, keyContext, 'tainacan');
|
||||
},
|
||||
}
|
||||
|
||||
};
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1 class="wp-heading-inline">{{ $route.meta.title }}</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//import { mapActions, mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: "ReportsList",
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
|
@ -0,0 +1,118 @@
|
|||
<template>
|
||||
<div
|
||||
id="tainacan-reports-app"
|
||||
class="wrap">
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ReportsPage"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.tainacan_page_tainacan_reports #wpbody {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#tainacan-reports-app {
|
||||
margin-top: 42px;
|
||||
a:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.tainacan-reports-tooltip {
|
||||
display: block !important;
|
||||
z-index: 10000;
|
||||
max-width: 300px;
|
||||
|
||||
.tooltip-inner {
|
||||
background: black;
|
||||
padding: 0.35em 0.45em;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tooltip-arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
margin: 5px;
|
||||
border-color: black;
|
||||
z-index: 1;
|
||||
}
|
||||
&[x-placement^="top"] {
|
||||
margin-bottom: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 5px 0 5px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
bottom: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="bottom"] {
|
||||
margin-top: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 0 5px 5px 5px;
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
top: -5px;
|
||||
left: calc(50% - 5px);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="right"] {
|
||||
margin-left: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 5px 5px 0;
|
||||
border-left-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
left: -5px;
|
||||
top: calc(50% - 5px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[x-placement^="left"] {
|
||||
margin-right: 5px;
|
||||
|
||||
.tooltip-arrow {
|
||||
border-width: 5px 0 5px 5px;
|
||||
border-top-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
right: -5px;
|
||||
top: calc(50% - 5px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-hidden='true'] {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity .15s, visibility .15s;
|
||||
}
|
||||
|
||||
&[aria-hidden='false'] {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity .15s;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,3 @@
|
|||
#tainacan-reports-app {
|
||||
|
||||
}
|
|
@ -6,6 +6,7 @@ module.exports = {
|
|||
theme_search: './src/views/theme-search/js/theme-main.js',
|
||||
item_submission: './src/views/item-submission/js/item-submission-main.js',
|
||||
roles: './src/views/roles/js/roles-main.js',
|
||||
reports: './src/views/reports/js/reports-main.js',
|
||||
|
||||
block_terms_list: './src/views/gutenberg-blocks/tainacan-terms/terms-list/index.js',
|
||||
|
||||
|
|
Loading…
Reference in New Issue