Begins implementation of new reports page #483

src/views/class-tainacan-admin.php

@@ -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;
 

src/views/reports/js/reports-main.js

@@ -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)
+});

src/views/reports/js/reports-router.js

@@ -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) : '';
+    }
+});

src/views/reports/js/wp-i18n-plugin.js

@@ -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');
+        },
+    }
+
+};

src/views/reports/pages/reports-list.vue

@@ -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>

src/views/reports/reports.vue

@@ -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>

src/views/reports/tainacan-reports.scss

@@ -0,0 +1,3 @@
+#tainacan-reports-app {
+    
+}

webpack.common.js

@@ -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',