Adds new wordpress translation plugin for using on roles. #274.

src/admin/class-tainacan-admin.php

@@ -73,8 +73,8 @@ class Admin {
 	}
 
 	function load_roles_page() {
-		add_action( 'roles_enqueue_scripts', array( &$this, 'add_roles_css' ), 90 );
-		add_action( 'roles_enqueue_scripts', array( &$this, 'add_roles_js' ), 90 );
+		add_action( 'admin_enqueue_scripts', array( &$this, 'add_roles_css' ), 90 );
+		add_action( 'admin_enqueue_scripts', array( &$this, 'add_roles_js' ), 90 );
 	}
 
 	function login_styles_reset( $style ) {
@@ -108,8 +108,13 @@ class Admin {
 
 		global $TAINACAN_BASE_URL;
 
-		wp_enqueue_script( 'tainacan-roles', $TAINACAN_BASE_URL . '/assets/roles-components.js', [], TAINACAN_VERSION, true );
-	
+		wp_enqueue_script( 'tainacan-roles', $TAINACAN_BASE_URL . '/assets/roles-components.js', ['underscore', 'wp-i18n'], TAINACAN_VERSION, true );
+		
+		$settings = $this->get_admin_js_localization_params();
+		wp_localize_script( 'tainacan-roles', 'tainacan_plugin', $settings );
+		wp_enqueue_script('underscore');
+		wp_enqueue_script('wp-i18n');
+
 		do_action('tainacan-enqueue-roles-scripts');
 	}
 

src/admin/js/roles-main.js

@@ -1,8 +1,13 @@
 import Vue from 'vue';
 import store from '../../js/store/store';
-import router from './router';
+import router from './roles-router';
+
+import { I18NPlugin } from './wp-i18n-plugin';
 
 import RolesPage from '../roles.vue';
+
+Vue.use(I18NPlugin);
+
 new Vue({
     el: '#tainacan-roles-app',
     store,

src/admin/js/roles-router.js

@@ -0,0 +1,20 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router'
+import qs from 'qs';
+
+Vue.use(VueRouter);
+
+const rolesRoutes = [];
+
+export default new VueRouter ({
+    rolesRoutes,
+    // set custom query resolver
+    parseQuery(query) {
+        return qs.parse(query);
+    },
+    stringifyQuery(query) {
+        let result = qs.stringify(query);
+
+        return result ? ('?' + result) : '';
+    }
+});

src/admin/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 __(key, keyContext, 'tainacan');
+        },
+        getWithNumber(keySingle, keyPlural, number) {
+            return __(keySingle, keyPlural, number, 'tainacan');
+        },
+        getWithNumberAndContext(keySingle, keyPlural, number, keyContext) {
+            return __(keySingle, keyPlural, number, keyContext, 'tainacan');
+        },
+    }
+
+};

src/admin/roles.vue

@@ -1,17 +1,18 @@
 <template>
-    <div id="tainacan-roles-app">
-        {{ pageTitle }}   
+    <div
+            id="tainacan-roles-app"
+            class="wrap">
+        <h1 class="wp-heading-inline">{{ $i18n.get('Roles') }}</h1>
+        <a class="page-title-action">
+            {{ $i18n.get('Add new role') }}
+        </a>
+        <hr class="wp-header-end">   
     </div> 
 </template>
 
 <script>
     export default { 
-        name: "RolesPage",
-        data() {
-            return {
-                pageTitle: 'Roles'
-            }
-        }
+        name: "RolesPage"
     }
 </script>
 

src/admin/scss/tainacan-roles.scss

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

webpack.config.js

@@ -7,7 +7,7 @@ module.exports = {
     entry: {
         user_search: './src/admin/js/theme-main.js',
         user_admin: './src/admin/js/main.js',
-        roles: './src/admin/js/main-roles.js',
+        roles: './src/admin/js/roles-main.js',
 
         gutenberg_terms_list: './src/gutenberg-blocks/tainacan-terms/terms-list/index.js',