Creates UserPrefsPlugin to query easily for user meta and set preferences. Tweaks sass color variables to match current layout.
This commit is contained in:
mateuswetah
parent
7dc3c35fa0
commit
8bff31cde0
|
|
@ -0,0 +1,2 @@
|
|||
{
|
||||
}
|
||||
|
|
@ -85,7 +85,8 @@ class Admin {
|
|||
}
|
||||
|
||||
$settings = [
|
||||
'root' => esc_url_raw( rest_url() ).'tainacan/v2',
|
||||
'root' => esc_url_raw( rest_url() ).'tainacan/v2',
|
||||
'root_wp_api' => esc_url_raw( rest_url() ),
|
||||
'nonce' => wp_create_nonce( 'wp_rest' ),
|
||||
'components' => $components,
|
||||
'i18n' => $tainacan_admin_i18n,
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@
|
|||
v-model="collectionsPerPage"
|
||||
@input="onChangeCollectionsPerPage"
|
||||
:disabled="collections.length <= 0">
|
||||
<option value="2">2 {{ $i18n.get('label_per_page') }}</option>
|
||||
<option value="10">10 {{ $i18n.get('label_per_page') }}</option>
|
||||
<option value="15">15 {{ $i18n.get('label_per_page') }}</option>
|
||||
<option value="20">20 {{ $i18n.get('label_per_page') }}</option>
|
||||
<option value="12">12 {{ $i18n.get('label_per_page') }}</option>
|
||||
<option value="24">24 {{ $i18n.get('label_per_page') }}</option>
|
||||
<option value="48">48 {{ $i18n.get('label_per_page') }}</option>
|
||||
<option value="96">96 {{ $i18n.get('label_per_page') }}</option>
|
||||
</b-select>
|
||||
|
||||
</b-field>
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
</router-link>
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column tabindex="0" label="Ações" width="110" :aria-label="$i18n.get('label_ações')">
|
||||
<b-table-column tabindex="0" label="Ações" width="80" :aria-label="$i18n.get('label_ações')">
|
||||
<!-- <a id="button-view" :aria-label="$i18n.get('label_button_view')" @click.prevent.stop="goToCollectionPage(props.row.id)"><b-icon icon="eye"></a> -->
|
||||
<a id="button-edit" :aria-label="$i18n.get('label_button_edit')" @click.prevent.stop="goToCollectionEditPage(props.row.id)"><b-icon icon="pencil"></a>
|
||||
<a id="button-delete" :aria-label="$i18n.get('label_button_delete')" @click.prevent.stop="deleteOneCollection(props.row.id)"><b-icon icon="delete"></a>
|
||||
|
|
@ -94,7 +94,7 @@ export default {
|
|||
isLoading: false,
|
||||
totalCollections: 0,
|
||||
page: 1,
|
||||
collectionsPerPage: 2
|
||||
collectionsPerPage: 12
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -107,13 +107,13 @@ export default {
|
|||
]),
|
||||
deleteOneCollection(collectionId) {
|
||||
this.$dialog.confirm({
|
||||
message: this.$i18n.get('info_warning_collection_deleted'),
|
||||
message: this.$i18n.get('info_warning_collection_delete'),
|
||||
onConfirm: () => {
|
||||
this.deleteCollection(collectionId).then(() => {
|
||||
this.loadCollections();
|
||||
this.$toast.open({
|
||||
duration: 3000,
|
||||
message: this.$i18n.get('info_collection_delete'),
|
||||
message: this.$i18n.get('info_collection_deleted'),
|
||||
position: 'is-bottom',
|
||||
type: 'is-secondary',
|
||||
queue: true
|
||||
|
|
@ -174,6 +174,7 @@ export default {
|
|||
},
|
||||
onChangeCollectionsPerPage(value) {
|
||||
this.collectionsPerPage = value;
|
||||
this.$userPrefs.set('items_per_page', value);
|
||||
this.loadCollections();
|
||||
},
|
||||
onPageChange(page) {
|
||||
|
|
@ -197,6 +198,15 @@ export default {
|
|||
return this.getCollections();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$userPrefs.get('items_per_page')
|
||||
.then((value) => {
|
||||
this.collectionsPerPage = value;
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$userPrefs.set('items_per_page', 12);
|
||||
});
|
||||
},
|
||||
mounted(){
|
||||
this.loadCollections();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,10 +24,10 @@
|
|||
v-model="itemsPerPage"
|
||||
@input="onChangeItemsPerPage"
|
||||
:disabled="items.length <= 0">
|
||||
<option value="2">2 {{ $i18n.get('label_per_page') }}</option>
|
||||
<option value="10">10 {{ $i18n.get('label_per_page') }}</option>
|
||||
<option value="15">15 {{ $i18n.get('label_per_page') }}</option>
|
||||
<option value="20">20 {{ $i18n.get('label_per_page') }}</option>
|
||||
<option value="12">12 {{ $i18n.get('label_per_page') }}</option>
|
||||
<option value="24">24 {{ $i18n.get('label_per_page') }}</option>
|
||||
<option value="48">48 {{ $i18n.get('label_per_page') }}</option>
|
||||
<option value="96">96 {{ $i18n.get('label_per_page') }}</option>
|
||||
</b-select>
|
||||
|
||||
</b-field>
|
||||
|
|
@ -110,7 +110,7 @@ export default {
|
|||
isLoading: false,
|
||||
totalItems: 0,
|
||||
page: 1,
|
||||
itemsPerPage: 2
|
||||
itemsPerPage: 12
|
||||
}
|
||||
},
|
||||
props: {
|
||||
|
|
@ -192,6 +192,7 @@ export default {
|
|||
},
|
||||
onChangeItemsPerPage(value) {
|
||||
this.itemsPerPage = value;
|
||||
this.$userPrefs.set('items_per_page', value);
|
||||
this.loadItems();
|
||||
},
|
||||
goToItemPage(itemId) {
|
||||
|
|
@ -221,6 +222,15 @@ export default {
|
|||
return this.getItems();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$userPrefs.get('items_per_page')
|
||||
.then((value) => {
|
||||
this.itemsPerPage = value;
|
||||
})
|
||||
.catch((error) => {
|
||||
this.$userPrefs.set('items_per_page', 12);
|
||||
});
|
||||
},
|
||||
mounted(){
|
||||
this.loadItems();
|
||||
this.fetchFields(this.collectionId).then((res) => {
|
||||
|
|
@ -237,7 +247,9 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@import "../scss/_variables.scss";
|
||||
|
||||
.table-thumb {
|
||||
max-height: 55px !important;
|
||||
|
|
|
|||
|
|
@ -65,14 +65,14 @@ export default {
|
|||
@import "../scss/_variables.scss";
|
||||
|
||||
#primary-menu {
|
||||
background-color: $primary-dark;
|
||||
background-color: $secondary;
|
||||
padding: 0px;
|
||||
-webkit-transition: max-width 0.2s linear; /* Safari */
|
||||
transition: max-width 0.2s linear;
|
||||
max-width: 222px;
|
||||
|
||||
.menu-header {
|
||||
background-color: $primary-darker;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
height: 62px;
|
||||
a { padding: 1em 2.5em }
|
||||
.icon {
|
||||
|
|
@ -92,7 +92,7 @@ export default {
|
|||
}
|
||||
.separator {
|
||||
height: 2px;
|
||||
background-color: $primary-darker;
|
||||
background-color: $separator-color;
|
||||
width: 100%;
|
||||
}
|
||||
li{
|
||||
|
|
@ -107,12 +107,12 @@ export default {
|
|||
transition: padding 0.2s linear;
|
||||
}
|
||||
a:hover {
|
||||
background-color: $primary-light;
|
||||
color: $secondary
|
||||
background-color: $primary;
|
||||
color: $tertiary
|
||||
}
|
||||
a.is-active {
|
||||
background-color: $primary;
|
||||
color: $secondary;
|
||||
color: $tertiary;
|
||||
}
|
||||
.menu-text {
|
||||
padding-left: 0.7em;
|
||||
|
|
@ -137,7 +137,10 @@ export default {
|
|||
opacity: 0;
|
||||
}
|
||||
}
|
||||
a{ padding: 1em 0.8em; }
|
||||
a {
|
||||
padding: 1em 0.8em;
|
||||
color: rgba(255,255,255,0.4);
|
||||
}
|
||||
.menu-text {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ export default {
|
|||
max-width: 180px;
|
||||
|
||||
.menu-header {
|
||||
background-color: $primary-dark;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
height: 62px;
|
||||
a { padding: 1em 1.2em; }
|
||||
.icon {
|
||||
|
|
@ -109,12 +109,12 @@ export default {
|
|||
transition: padding 0.3s linear;
|
||||
}
|
||||
a:hover {
|
||||
background-color: $primary-lighter;
|
||||
color: $secondary
|
||||
background-color: rgba(255,255,255,0.4);
|
||||
color: $tertiary;
|
||||
}
|
||||
a.is-active {
|
||||
background-color: $primary-light;
|
||||
color: $secondary;
|
||||
background-color: rgba(255,255,255,0.4);
|
||||
color: $tertiary;
|
||||
}
|
||||
.menu-text {
|
||||
padding-left: 0.7em;
|
||||
|
|
@ -132,7 +132,7 @@ export default {
|
|||
.menu-header { display: none;
|
||||
}
|
||||
.menu-text {
|
||||
display: none !important;
|
||||
padding-left: 0.3em !important;
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import AdminPage from '../admin.vue'
|
|||
import draggable from 'vuedraggable'
|
||||
import store from '../../js/store/store'
|
||||
import router from './router'
|
||||
import { I18NPlugin, RouterHelperPlugin } from './utilities';
|
||||
import { I18NPlugin, UserPrefsPlugin, RouterHelperPlugin } from './utilities';
|
||||
|
||||
// Configure and Register Plugins
|
||||
router.beforeEach((to, from, next) => {
|
||||
|
|
@ -26,6 +26,7 @@ router.beforeEach((to, from, next) => {
|
|||
next()
|
||||
});
|
||||
Vue.use(I18NPlugin);
|
||||
Vue.use(UserPrefsPlugin);
|
||||
Vue.use(RouterHelperPlugin);
|
||||
Vue.use(Buefy);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,11 @@
|
|||
import qs from 'qs';
|
||||
import axios from 'axios';
|
||||
|
||||
const wpApi = axios.create({
|
||||
baseURL: tainacan_plugin.root_wp_api
|
||||
});
|
||||
|
||||
wpApi.defaults.headers.common['X-WP-Nonce'] = tainacan_plugin.nonce;
|
||||
|
||||
// I18N PLUGIN - Allows access to Wordpress translation file.
|
||||
export const I18NPlugin = {};
|
||||
|
|
@ -13,6 +20,43 @@ I18NPlugin.install = function (Vue, options = {}) {
|
|||
|
||||
}
|
||||
|
||||
// USER PREFERENCES - Used to save key-value information for user settings of plugin
|
||||
export const UserPrefsPlugin = {};
|
||||
UserPrefsPlugin.install = function (Vue, options = {}) {
|
||||
|
||||
Vue.prototype.$userPrefs = {
|
||||
get(key) {
|
||||
return new Promise(( resolve, reject ) => {
|
||||
wpApi.get('/wp/v2/users/me/')
|
||||
.then( res => {
|
||||
if (res.data.meta.hasOwnProperty(key))
|
||||
resolve( res.data.key );
|
||||
else
|
||||
reject( { message: 'Key does not exists in user preference.', value: false} );
|
||||
})
|
||||
.catch(error => {
|
||||
reject( { message: error, value: false});
|
||||
});
|
||||
});
|
||||
},
|
||||
set(metakey, value) {
|
||||
let data = {
|
||||
'meta': { metakey: value }
|
||||
};
|
||||
return new Promise(( resolve, reject ) => {
|
||||
wpApi.post('/wp/v2/users/me/?context=edit&' + qs.stringify(data))
|
||||
.then( res => {
|
||||
resolve( res.data );
|
||||
})
|
||||
.catch(error => {
|
||||
reject( error );
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// ROUTER HELPER PLUGIN - Allows easy access to URL paths for entities
|
||||
export const RouterHelperPlugin = {};
|
||||
RouterHelperPlugin.install = function (Vue, options = {}) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Collections Page</h1>
|
||||
<router-link tag="button" class="button is-primary"
|
||||
<router-link tag="button" class="button is-secondary"
|
||||
:to="{ path: $routerHelper.getNewCollectionPath() }">
|
||||
{{ $i18n.get('new') + ' ' + $i18n.get('collection') }}
|
||||
</router-link>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>Items Page</h1>
|
||||
<router-link tag="button" class="button is-primary"
|
||||
<router-link tag="button" class="button is-secondary"
|
||||
:to="{ path: $routerHelper.getNewItemPath(collectionId) }">
|
||||
{{ $i18n.get('new') + ' ' + $i18n.get('item') }}
|
||||
</router-link>
|
||||
|
|
|
|||
|
|
@ -2,24 +2,35 @@
|
|||
@import "../../../node_modules/bulma/sass/utilities/_all.sass";
|
||||
|
||||
// Tainacan custom colors
|
||||
$primary: #7DB9C3;// #25a189;
|
||||
$primary: #2cb4c1;// #25a189;
|
||||
$primary-invert: findColorInvert($primary);
|
||||
$secondary: #1F2F56;
|
||||
$secondary-invert: findColorInvert($primary);
|
||||
|
||||
$secondary: #298596;
|
||||
$secondary-invert: findColorInvert($secondary);
|
||||
$tertiary: #1f2f56;
|
||||
$tertiary-invert: findColorInvert($tertiary);
|
||||
|
||||
$primary-light:#A5CDD7;
|
||||
$primary-lighter: lighten($primary-light, 15%);
|
||||
$primary-dark: #55A0AF;
|
||||
$primary-darker: darken($primary-dark, 5%);
|
||||
|
||||
$separator-color: #2a6e77;
|
||||
$gray: #898d8f;
|
||||
$gray-invert: findColorInvert($gray);
|
||||
$gray-light: #898d8f;
|
||||
$gray-light-invert: findColorInvert($gray-light);
|
||||
|
||||
// Setup $colors to use as bulma classes
|
||||
$colors: (
|
||||
"white": ($white, $black),
|
||||
"black": ($black, $white),
|
||||
"gray": ($gray, $gray-invert),
|
||||
"gray-light": ($gray-light, $gray-light-invert),
|
||||
"light": ($light, $light-invert),
|
||||
"dark": ($dark, $dark-invert),
|
||||
"primary": ($primary, $primary-invert),
|
||||
"secondary": ($secondary, $secondary-invert),
|
||||
"tertiary": ($secondary, $secondary-invert),
|
||||
"info": ($info, $info-invert),
|
||||
"success": ($success, $success-invert),
|
||||
"warning": ($warning, $warning-invert),
|
||||
|
|
|
|||
|
|
@ -6,6 +6,11 @@ $link: $primary;
|
|||
$link-invert: $primary-invert;
|
||||
$link-focus-border: $primary;
|
||||
|
||||
// Table
|
||||
$table-head-cell-color: $gray-light;
|
||||
$table-row-active-color: #e5e5e5;
|
||||
$table-head-cell-border-width: 0 0 1px;
|
||||
|
||||
// Bulma's modal (needs to be greather than taincan-admin-app
|
||||
$modal-z: 9999999;
|
||||
|
||||
|
|
@ -14,6 +19,9 @@ $modal-z: 9999999;
|
|||
@import "../../../node_modules/bulma/bulma.sass";
|
||||
@import "../../../node_modules/buefy/src/scss/buefy.scss";
|
||||
|
||||
// Roboto font
|
||||
$family-sans-serif: 'Roboto', sans-serif;
|
||||
|
||||
// Clears wordpress content
|
||||
body.tainacan-admin-page #adminmenumain, body.tainacan-admin-page #wpfooter, body.tainacan-admin-page #wp-auth-check-wrap {
|
||||
display: none;
|
||||
|
|
@ -31,6 +39,7 @@ body.tainacan-admin-page #adminmenumain, body.tainacan-admin-page #wpfooter, bod
|
|||
overflow-y: auto;
|
||||
height: 100%;
|
||||
margin: 0px !important;
|
||||
font-family: $family-sans-serif;
|
||||
}
|
||||
|
||||
/* Rules for sizing the icon. */
|
||||
|
|
@ -49,5 +58,5 @@ body.tainacan-admin-page #adminmenumain, body.tainacan-admin-page #wpfooter, bod
|
|||
|
||||
// Buefy notices (toast)
|
||||
.notices {
|
||||
z-index: 99999999 !important;
|
||||
z-index: 99999999 !important;
|
||||
}
|
||||
Loading…
Reference in New Issue