tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Transform the EventBusSearch in a plugin that is now binded to each Vue instance (both theme and admin), but with separate Store and Router options. Criates a routerTheme instance, as admin router deals with more things that are needed on theme.

This commit is contained in:
Mateus Machado Luna 2018-04-18 08:26:42 -03:00
parent 7a326b4a0e
commit e255b0385c
15 changed files with 281 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/admin/components/lists/fields-list.vue
View File

@ -154,7 +154,6 @@ export default {
return this.getFieldTypes(); return this.getFieldTypes();
}, },
set(value) { set(value) {
console.log("OIEEE")
return this.updateFieldTypes(value); return this.updateFieldTypes(value);
} }
}, },

2
src/admin/components/lists/items-list.vue
View File

@ -106,7 +106,6 @@ export default {
message: this.$i18n.get('info_warning_item_delete'), message: this.$i18n.get('info_warning_item_delete'),
onConfirm: () => { onConfirm: () => {
this.deleteItem(itemId).then(() => { this.deleteItem(itemId).then(() => {
this.loadItems();
this.$toast.open({ this.$toast.open({
duration: 3000, duration: 3000,
message: this.$i18n.get('info_item_deleted'), message: this.$i18n.get('info_item_deleted'),
@ -139,7 +138,6 @@ export default {
for (let item of this.selectedItems) { for (let item of this.selectedItems) {
this.deleteItem(item.id) this.deleteItem(item.id)
.then(() => { .then(() => {
this.loadItems();
this.$toast.open({ this.$toast.open({
duration: 3000, duration: 3000,
message: this.$i18n.get('info_item_deleted'), message: this.$i18n.get('info_item_deleted'),

7
src/admin/components/search/pagination.vue
View File

@ -37,7 +37,6 @@
<script> <script>
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import { eventBusSearch } from '../../../js/event-bus-search';
export default { export default {
name: 'Pagination', name: 'Pagination',
@ -59,7 +58,7 @@ export default {
watch: { watch: {
page( value ){ page( value ){
if (value < 1) if (value < 1)
eventBusSearch.setPage(1); this.$eventBusSearch.setPage(1);
} }
}, },
methods: { methods: {
@ -75,13 +74,13 @@ export default {
} }
let prevValue = this.itemsPerPage; let prevValue = this.itemsPerPage;
eventBusSearch.setItemsPerPage(value); this.$eventBusSearch.setItemsPerPage(value);
this.$userPrefs.set('items_per_page', value, prevValue); this.$userPrefs.set('items_per_page', value, prevValue);
}, },
onPageChange(page) { onPageChange(page) {
if(page == 0) if(page == 0)
return; return;
eventBusSearch.setPage(page); this.$eventBusSearch.setPage(page);
}, },
getLastItemNumber() { getLastItemNumber() {
let last = (Number(this.itemsPerPage*(this.page - 1)) + Number(this.itemsPerPage)); let last = (Number(this.itemsPerPage*(this.page - 1)) + Number(this.itemsPerPage));

5
src/admin/components/search/search-control.vue
View File

@ -52,7 +52,6 @@
<script> <script>
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import { eventBusSearch } from '../../../js/event-bus-search';
export default { export default {
name: 'SearchControl', name: 'SearchControl',
@ -80,10 +79,10 @@ export default {
'getOrder' 'getOrder'
]), ]),
onChangeOrderBy(field) { onChangeOrderBy(field) {
eventBusSearch.setOrderBy(field); this.$eventBusSearch.setOrderBy(field);
}, },
onChangeOrder() { onChangeOrder() {
this.order == 'DESC' ? eventBusSearch.setOrder('ASC') : eventBusSearch.setOrder('DESC'); this.order == 'DESC' ? this.$eventBusSearch.setOrder('ASC') : this.$eventBusSearch.setOrder('DESC');
} }
} }
} }

10
src/admin/js/main.js
View File

@ -27,14 +27,14 @@ import FilterCategorySelectbox from '../../classes/filter-types/category/Selectb
import TaincanFormItem from '../../classes/field-types/tainacan-form-item.vue'; import TaincanFormItem from '../../classes/field-types/tainacan-form-item.vue';
import TaincanFiltersList from '../../classes/filter-types/tainacan-filter-item.vue'; import TaincanFiltersList from '../../classes/filter-types/tainacan-filter-item.vue';
import ItemsPage from '../pages/lists/items-page.vue';
// Remaining imports // Remaining imports
import AdminPage from '../admin.vue' import AdminPage from '../admin.vue'
import HelpButton from '../components/other/help-button.vue'; import HelpButton from '../components/other/help-button.vue';
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import store from '../../js/store/store' import store from '../../js/store/store'
import router from './router' import { router} from './router'
import eventBusSearch from '../../js/event-bus-search';
import { I18NPlugin, UserPrefsPlugin, RouterHelperPlugin, ConsolePlugin } from './utilities'; import { I18NPlugin, UserPrefsPlugin, RouterHelperPlugin, ConsolePlugin } from './utilities';
// Changing title of pages // Changing title of pages
@ -50,8 +50,6 @@ Vue.use(UserPrefsPlugin);
Vue.use(RouterHelperPlugin); Vue.use(RouterHelperPlugin);
Vue.use(ConsolePlugin, {visual: false}); Vue.use(ConsolePlugin, {visual: false});
// Register Components
Vue.component('items-page',ItemsPage);
/* Fields */ /* Fields */
Vue.component('tainacan-text', Text); Vue.component('tainacan-text', Text);
Vue.component('tainacan-textarea', Textarea); Vue.component('tainacan-textarea', Textarea);
@ -81,9 +79,11 @@ Vue.component('tainacan-filter-category-selectbox', FilterCategorySelectbox);
Vue.component('help-button', HelpButton); Vue.component('help-button', HelpButton);
Vue.component('draggable', draggable); Vue.component('draggable', draggable);
Vue.use(eventBusSearch, { store: store, router: router});
new Vue({ new Vue({
el: '#tainacan-admin-app', el: '#tainacan-admin-app',
store, store,
router, router,
render: h => h(AdminPage) render: h => h(AdminPage)
}); });

17
src/admin/js/router.js
View File

@ -67,7 +67,7 @@ const routes = [
{ path: '*', redirect: '/'} { path: '*', redirect: '/'}
]; ];
export default new VueRouter ({ export const router = new VueRouter ({
routes, routes,
// set custom query resolver // set custom query resolver
parseQuery(query) { parseQuery(query) {
@ -76,6 +76,21 @@ export default new VueRouter ({
stringifyQuery(query) { stringifyQuery(query) {
let result = qs.stringify(query); let result = qs.stringify(query);
return result ? ('?' + result) : '';
}
});
const themeRoutes = [];
export const routerTheme = new VueRouter ({
themeRoutes,
// set custom query resolver
parseQuery(query) {
return qs.parse(query);
},
stringifyQuery(query) {
let result = qs.stringify(query);
return result ? ('?' + result) : ''; return result ? ('?' + result) : '';
} }
}); });

91
src/admin/js/theme-main.js Normal file
View File

@ -0,0 +1,91 @@
// Main imports
import Vue from 'vue';
import Buefy from 'buefy';
// Custom elements
import Text from '../../classes/field-types/text/Text.vue';
import Textarea from '../../classes/field-types/textarea/Textarea.vue';
import Selectbox from '../../classes/field-types/selectbox/Selectbox.vue';
import Numeric from '../../classes/field-types/numeric/Numeric.vue';
import Date from '../../classes/field-types/date/Date.vue';
import Relationship from '../../classes/field-types/relationship/Relationship.vue';
import Category from '../../classes/field-types/category/Category.vue';
import FormRelationship from '../../classes/field-types/relationship/FormRelationship.vue';
import FormCategory from '../../classes/field-types/category/FormCategory.vue';
import FormSelectbox from '../../classes/field-types/selectbox/FormSelectbox.vue';
import FilterCustomInterval from '../../classes/filter-types/custom-interval/CustomInterval.vue';
import FilterSelectbox from '../../classes/filter-types/selectbox/Selectbox.vue';
import FilterAutocomplete from '../../classes/filter-types/autocomplete/Autocomplete.vue';
import FilterCheckbox from '../../classes/filter-types/checkbox/Checkbox.vue';
import FilterTaginput from '../../classes/filter-types/taginput/Taginput.vue';
import FilterCategoryCheckbox from '../../classes/filter-types/category/Checkbox.vue';
import FilterCategoryTaginput from '../../classes/filter-types/category/Taginput.vue';
import FilterCategorySelectbox from '../../classes/filter-types/category/Selectbox.vue';
import TaincanFormItem from '../../classes/field-types/tainacan-form-item.vue';
import TaincanFiltersList from '../../classes/filter-types/tainacan-filter-item.vue';
import ItemsPage from '../pages/lists/items-page.vue';
// Remaining imports
import HelpButton from '../components/other/help-button.vue';
import draggable from 'vuedraggable'
import store from '../../js/store/store'
import { routerTheme } from './router.js'
import eventBusSearch from '../../js/event-bus-search';
import { I18NPlugin, UserPrefsPlugin, RouterHelperPlugin, ConsolePlugin } from './utilities';
// Configure and Register Plugins
Vue.use(Buefy);
Vue.use(I18NPlugin);
Vue.use(UserPrefsPlugin);
Vue.use(RouterHelperPlugin);
Vue.use(ConsolePlugin, {visual: false});
/* Fields */
Vue.component('tainacan-text', Text);
Vue.component('tainacan-textarea', Textarea);
Vue.component('tainacan-selectbox', Selectbox);
Vue.component('tainacan-numeric', Numeric);
Vue.component('tainacan-date', Date);
Vue.component('tainacan-relationship', Relationship);
Vue.component('tainacan-category', Category);
Vue.component('tainacan-form-relationship', FormRelationship);
Vue.component('tainacan-form-category', FormCategory);
Vue.component('tainacan-form-selectbox', FormSelectbox);
Vue.component('tainacan-form-item', TaincanFormItem);
Vue.component('tainacan-filter-item', TaincanFiltersList);
/* Filters */
Vue.component('tainacan-filter-custom-interval', FilterCustomInterval);
Vue.component('tainacan-filter-selectbox', FilterSelectbox);
Vue.component('tainacan-filter-autocomplete', FilterAutocomplete);
Vue.component('tainacan-filter-checkbox', FilterCheckbox);
Vue.component('tainacan-filter-taginput', FilterTaginput);
Vue.component('tainacan-filter-category-checkbox', FilterCategoryCheckbox);
Vue.component('tainacan-filter-category-taginput', FilterCategoryTaginput);
Vue.component('tainacan-filter-category-selectbox', FilterCategorySelectbox);
/* Others */
Vue.component('help-button', HelpButton);
Vue.component('draggable', draggable);
Vue.component('items-page', ItemsPage);
Vue.use(eventBusSearch, { store: store, router: routerTheme});
new Vue({
el: '#tainacan-items-page',
store,
router: routerTheme,
data: {
collectionId: ''
},
template: '<items-page :collection-id="collectionId"></items-page>',
beforeMount () {
if (this.$el.attributes['collection-id'] != undefined)
this.collectionId = this.$el.attributes['collection-id'].value;
}
});

33
src/admin/pages/lists/items-page.vue
View File

@ -11,14 +11,14 @@
id="button-create-item" id="button-create-item"
tag="button" tag="button"
class="button is-secondary" class="button is-secondary"
:to="{ path: $routerHelper.getNewItemPath(finalCollectionId) }"> :to="{ path: $routerHelper.getNewItemPath(collectionId) }">
{{ $i18n.getFrom('items', 'new_item') }} {{ $i18n.getFrom('items', 'new_item') }}
</router-link> </router-link>
</div> </div>
<search-control <search-control
v-if="fields.length > 0 && (items.length != 0 || isLoadingItems)" v-if="fields.length > 0 && (items.length != 0 || isLoadingItems)"
:is-repository-level="isRepositoryLevel" :is-repository-level="isRepositoryLevel"
:collection-id="finalCollectionId" :collection-id="collectionId"
:table-fields="tableFields" :table-fields="tableFields"
:pref-table-fields="prefTableFields"/> :pref-table-fields="prefTableFields"/>
</div> </div>
@ -43,7 +43,7 @@
<p>{{ $i18n.get('info_there_is_no_filter' ) }}</p> <p>{{ $i18n.get('info_there_is_no_filter' ) }}</p>
<router-link <router-link
id="button-create-filter" id="button-create-filter"
:to="isRepositoryLevel ? $routerHelper.getNewFilterPath() : $routerHelper.getNewCollectionFilterPath(finalCollectionId)" :to="isRepositoryLevel ? $routerHelper.getNewFilterPath() : $routerHelper.getNewCollectionFilterPath(collectionId)"
tag="button" tag="button"
class="button is-secondary is-centered"> class="button is-secondary is-centered">
{{ $i18n.getFrom('filters', 'new_item') }}</router-link> {{ $i18n.getFrom('filters', 'new_item') }}</router-link>
@ -57,7 +57,7 @@
:active.sync="isLoadingItems"/> :active.sync="isLoadingItems"/>
<items-list <items-list
v-if="!isLoadingItems && items.length > 0" v-if="!isLoadingItems && items.length > 0"
:collection-id="finalCollectionId" :collection-id="collectionId"
:table-fields="tableFields" :table-fields="tableFields"
:items="items" :items="items"
:is-loading="isLoading"/> :is-loading="isLoading"/>
@ -76,7 +76,7 @@
id="button-create-item" id="button-create-item"
tag="button" tag="button"
class="button is-primary" class="button is-primary"
:to="{ path: $routerHelper.getNewItemPath(finalCollectionId) }"> :to="{ path: $routerHelper.getNewItemPath(collectionId) }">
{{ $i18n.getFrom('items', 'new_item') }} {{ $i18n.getFrom('items', 'new_item') }}
</router-link> </router-link>
</div> </div>
@ -94,14 +94,12 @@ import SearchControl from '../../components/search/search-control.vue'
import ItemsList from '../../components/lists/items-list.vue'; import ItemsList from '../../components/lists/items-list.vue';
import FiltersItemsList from '../../components/search/filters-items-list.vue'; import FiltersItemsList from '../../components/search/filters-items-list.vue';
import Pagination from '../../components/search/pagination.vue' import Pagination from '../../components/search/pagination.vue'
import { eventBusSearch } from '../../../js/event-bus-search'
import { mapActions, mapGetters } from 'vuex'; import { mapActions, mapGetters } from 'vuex';
export default { export default {
name: 'ItemsPage', name: 'ItemsPage',
data(){ data(){
return { return {
finalCollectionId: Number,
isRepositoryLevel: false, isRepositoryLevel: false,
tableFields: [], tableFields: [],
prefTableFields: [], prefTableFields: [],
@ -149,24 +147,24 @@ export default {
} }
}, },
created() { created() {
this.finalCollectionId = (this.collectionId != undefined && this.collectionId != null && this.collectionId != '' ) ? this.collectionId : this.$route.params.collectionId;
this.isRepositoryLevel = (this.finalCollectionId == undefined);
eventBusSearch.$on('isLoadingItems', isLoadingItems => { this.isRepositoryLevel = (this.collectionId == undefined);
this.$eventBusSearch.$on('isLoadingItems', isLoadingItems => {
this.isLoadingItems = isLoadingItems; this.isLoadingItems = isLoadingItems;
}); });
eventBusSearch.$on('hasFiltered', hasFiltered => { this.$eventBusSearch.$on('hasFiltered', hasFiltered => {
this.hasFiltered = hasFiltered; this.hasFiltered = hasFiltered;
}); });
this.isLoadingFilters = true; this.isLoadingFilters = true;
this.fetchFilters( { collectionId: this.finalCollectionId, isRepositoryLevel: this.isRepositoryLevel, isContextEdit: true }) this.fetchFilters( { collectionId: this.collectionId, isRepositoryLevel: this.isRepositoryLevel, isContextEdit: true })
.then(() => this.isLoadingFilters = false) .then(() => this.isLoadingFilters = false)
.catch(() => this.isLoadingFilters = false); .catch(() => this.isLoadingFilters = false);
this.isLoadingFields = true; this.isLoadingFields = true;
this.fetchFields({ collectionId: this.finalCollectionId, isRepositoryLevel: this.isRepositoryLevel, isContextEdit: false }).then(() => { this.fetchFields({ collectionId: this.collectionId, isRepositoryLevel: this.isRepositoryLevel, isContextEdit: false }).then(() => {
this.tableFields.push({ name: this.$i18n.get('label_thumbnail'), field: 'row_thumbnail', field_type: undefined, slug: 'featured_image', id: undefined, visible: true }); this.tableFields.push({ name: this.$i18n.get('label_thumbnail'), field: 'row_thumbnail', field_type: undefined, slug: 'featured_image', id: undefined, visible: true });
for (let field of this.fields) { for (let field of this.fields) {
@ -179,12 +177,12 @@ export default {
this.tableFields.push({ name: this.$i18n.get('label_actions'), field: 'row_actions', field_type: undefined, slug: 'actions', id: undefined, visible: true }); this.tableFields.push({ name: this.$i18n.get('label_actions'), field: 'row_actions', field_type: undefined, slug: 'actions', id: undefined, visible: true });
//this.prefTableFields = this.tableFields; //this.prefTableFields = this.tableFields;
// this.$userPrefs.get('table_columns_' + this.finalCollectionId) // this.$userPrefs.get('table_columns_' + this.collectionId)
// .then((value) => { // .then((value) => {
// this.prefTableFields = value; // this.prefTableFields = value;
// }) // })
// .catch((error) => { // .catch((error) => {
// this.$userPrefs.set('table_columns_' + this.finalCollectionId, this.prefTableFields, null); // this.$userPrefs.set('table_columns_' + this.collectionId, this.prefTableFields, null);
// }); // });
this.isLoadingFields = false; this.isLoadingFields = false;
@ -193,8 +191,9 @@ export default {
}); });
}, },
mounted(){ mounted(){
eventBusSearch.updateStoreFromURL(); this.$eventBusSearch.setCollectionId(this.collectionId);
eventBusSearch.loadItems(); this.$eventBusSearch.updateStoreFromURL();
this.$eventBusSearch.loadItems();
} }
} }

4
src/admin/pages/singles/collection-page.vue
View File

@ -2,7 +2,9 @@
<div class="columns is-fullheight"> <div class="columns is-fullheight">
<section class="column is-secondary-content"> <section class="column is-secondary-content">
<tainacan-subheader :id="collectionId"/> <tainacan-subheader :id="collectionId"/>
<router-view class="page-container"/> <router-view
:collection-id="collectionId"
class="page-container"/>
</section> </section>
</div> </div>
</template> </template>

5
src/classes/filter-types/tainacan-filter-item.vue
View File

@ -15,7 +15,6 @@
</template> </template>
<script> <script>
import { eventBusSearch } from '../../js/event-bus-search'
import { mapActions, mapGetters } from 'vuex'; import { mapActions, mapGetters } from 'vuex';
export default { export default {
@ -33,7 +32,7 @@
computed: { computed: {
getErrorMessage() { getErrorMessage() {
let msg = ''; let msg = '';
let errors = eventBusSearch.getErrors( this.filter.id ); let errors = this.$eventBusSearch.getErrors( this.filter.id );
if ( errors) { if ( errors) {
this.setFilterTypeMessage('is-danger'); this.setFilterTypeMessage('is-danger');
for (let index in errors) { for (let index in errors) {
@ -57,7 +56,7 @@
'getPostQuery' 'getPostQuery'
]), ]),
listen( event ){ listen( event ){
eventBusSearch.$emit( 'input', ( event.field_id ) ? event : event.detail[0] ); this.$eventBusSearch.$emit( 'input', ( event.field_id ) ? event : event.detail[0] );
}, },
setFilterTypeMessage( message ){ setFilterTypeMessage( message ){
this.filterTypeMessage = message; this.filterTypeMessage = message;

236
src/js/event-bus-search.js
View File

@ -1,123 +1,127 @@
import Vue from 'vue'; export default {
import store from './store/store'
import router from './../admin/js/router.js';
export const eventBusSearch = new Vue({ install(Vue, options = {}) {
router,
store,
data: {
componentsTag: [],
errors : [],
query: {}
},
created(){
this.$on('input', data => {
store.dispatch('search/setPage', 1);
if( data.taxonomy ){ Vue.prototype.$eventBusSearch = new Vue({
this.add_taxquery(data); router: options.router,
} else { store: options.store,
this.add_metaquery(data); data: {
} componentsTag: [],
errors : [],
this.updateURLQueries(); query: {},
}); collectionId: undefined
}, },
watch: { created(){
'$route.query' () { this.$on('input', data => {
if (this.$route.name == 'CollectionItemsPage' || this.$route.name == 'ItemsPage') { this.$store.dispatch('search/setPage', 1);
if (this.$route.query.perpage == undefined)
this.$route.query.perpage = 12; if( data.taxonomy ){
if (this.$route.query.paged == undefined) this.add_taxquery(data);
this.$route.query.paged = 1; } else {
if (this.$route.query.order == undefined) this.add_metaquery(data);
this.$route.query.order = 'DESC';
if (this.$route.query.orderby == undefined)
this.$route.query.orderby = 'date';
store.dispatch('search/set_postquery', this.$route.query);
//console.log(this.$route.query);
this.loadItems();
}
}
},
methods: {
add_metaquery( data ){
if ( data && data.collection_id ){
store.dispatch('search/add_metaquery', data );
}
},
add_taxquery( data ){
if ( data && data.collection_id ){
store.dispatch('search/add_taxquery', data );
}
},
getErrors( filter_id ){
let error = this.errors.find( errorItem => errorItem.field_id === filter_id );
return ( error ) ? error.errors : false
},
listener(){
const components = this.getAllComponents();
for (let eventElement of components){
eventElement.addEventListener('input', (event) => {
if( event.detail ) {
this.add_metaquery( event.detail[0] );
} }
this.updateURLQueries();
}); });
} },
}, watch: {
setPage(page) { '$route.query' () {
store.dispatch('search/setPage', page); //if (this.$route.name == 'CollectionItemsPage' || this.$route.name == 'ItemsPage') {
this.updateURLQueries(); if (this.$route.query.perpage == undefined)
}, this.$route.query.perpage = 12;
setItemsPerPage(itemsPerPage) { if (this.$route.query.paged == undefined)
store.dispatch('search/setItemsPerPage', itemsPerPage); this.$route.query.paged = 1;
this.updateURLQueries(); if (this.$route.query.order == undefined)
}, this.$route.query.order = 'DESC';
setOrderBy(newOrderBy) { if (this.$route.query.orderby == undefined)
store.dispatch('search/setOrderBy', newOrderBy); this.$route.query.orderby = 'date';
this.updateURLQueries();
}, this.$store.dispatch('search/set_postquery', this.$route.query);
setOrder(newOrder) { this.loadItems();
store.dispatch('search/setOrder', newOrder); //}
this.updateURLQueries();
},
updateURLQueries() {
router.push({ query: {} });
router.push({ query: store.getters['search/getPostQuery'] });
},
updateStoreFromURL() {
store.dispatch('search/set_postquery', this.$route.query);
},
loadItems() {
this.$emit( 'isLoadingItems', true);
store.dispatch('collection/fetchItems', this.$route.params.collectionId).then((res) => {
this.$emit( 'isLoadingItems', false);
this.$emit( 'hasFiltered', res.hasFiltered);
})
.catch(() => {
this.$emit( 'isLoadingItems', false);
});
},
/* Dev interfaces methods */
registerComponent( name ){
if (this.componentsTag.indexOf(name) < 0) {
this.componentsTag.push( name );
}
},
getAllComponents(){
const components = [];
for( let component of this.componentsTag ){
const eventElements = document.getElementsByTagName( component );
if( eventElements ) {
for (let eventElement of eventElements){
components.push( eventElement );
}
} }
},
methods: {
add_metaquery( data ){
if ( data && data.collection_id ){
this.$store.dispatch('search/add_metaquery', data );
}
},
add_taxquery( data ){
if ( data && data.collection_id ){
this.$store.dispatch('search/add_taxquery', data );
}
},
getErrors( filter_id ){
let error = this.errors.find( errorItem => errorItem.field_id === filter_id );
return ( error ) ? error.errors : false
},
listener(){
const components = this.getAllComponents();
for (let eventElement of components){
eventElement.addEventListener('input', (event) => {
if( event.detail ) {
this.add_metaquery( event.detail[0] );
}
});
}
},
setPage(page) {
this.$store.dispatch('search/setPage', page);
this.updateURLQueries();
},
setItemsPerPage(itemsPerPage) {
this.$store.dispatch('search/setItemsPerPage', itemsPerPage);
this.updateURLQueries();
},
setOrderBy(newOrderBy) {
this.$store.dispatch('search/setOrderBy', newOrderBy);
this.updateURLQueries();
},
setOrder(newOrder) {
this.$store.dispatch('search/setOrder', newOrder);
this.updateURLQueries();
},
updateURLQueries() {
this.$router.push({ query: {} });
this.$router.push({ query: this.$store.getters['search/getPostQuery'] });
},
updateStoreFromURL() {
this.$store.dispatch('search/set_postquery', this.$route.query);
},
loadItems() {
this.$emit( 'isLoadingItems', true);
this.$store.dispatch('collection/fetchItems', this.collectionId).then((res) => {
this.$emit( 'isLoadingItems', false);
this.$emit( 'hasFiltered', res.hasFiltered);
})
.catch(() => {
this.$emit( 'isLoadingItems', false);
});
},
setCollectionId(collectionId) {
this.collectionId = collectionId;
},
/* Dev interfaces methods */
registerComponent( name ){
if (this.componentsTag.indexOf(name) < 0) {
this.componentsTag.push( name );
}
},
getAllComponents(){
const components = [];
for( let component of this.componentsTag ){
const eventElements = document.getElementsByTagName( component );
if( eventElements ) {
for (let eventElement of eventElements){
components.push( eventElement );
}
}
}
return components;
},
} }
return components; });
},
} }
}); }

33
src/js/main.js
View File

@ -4,7 +4,7 @@ import Buefy from 'buefy'
// include vue-custom-element plugin to Vue // include vue-custom-element plugin to Vue
import VueCustomElement from 'vue-custom-element'; import VueCustomElement from 'vue-custom-element';
import { eventBus } from './event-bus-web-components'; import { eventBus } from './event-bus-web-components';
import { eventBusSearch } from './event-bus-search'; import eventBusSearch from './event-bus-search';
Vue.use(Buefy); Vue.use(Buefy);
@ -25,47 +25,48 @@ import FilterAutocomplete from '../classes/filter-types/autocomplete/Autocomplet
import FilterCheckbox from '../classes/filter-types/checkbox/Checkbox.vue'; import FilterCheckbox from '../classes/filter-types/checkbox/Checkbox.vue';
import FilterTaginput from '../classes/filter-types/taginput/Taginput.vue'; import FilterTaginput from '../classes/filter-types/taginput/Taginput.vue';
Vue.use(eventBusSearch);
Vue.customElement('tainacan-text', Text); Vue.customElement('tainacan-text', Text);
eventBus.registerComponent( 'tainacan-text' ); //eventBus.registerComponent( 'tainacan-text' );
Vue.customElement('tainacan-textarea', Textarea); Vue.customElement('tainacan-textarea', Textarea);
eventBus.registerComponent( 'tainacan-textarea' ); //eventBus.registerComponent( 'tainacan-textarea' );
Vue.customElement('tainacan-selectbox', Selectbox); Vue.customElement('tainacan-selectbox', Selectbox);
eventBus.registerComponent( 'tainacan-selectbox' ); //eventBus.registerComponent( 'tainacan-selectbox' );
Vue.customElement('tainacan-numeric', Numeric); Vue.customElement('tainacan-numeric', Numeric);
eventBus.registerComponent( 'tainacan-numeric' ); //eventBus.registerComponent( 'tainacan-numeric' );
Vue.customElement('tainacan-date', Date); Vue.customElement('tainacan-date', Date);
eventBus.registerComponent( 'tainacan-date' ); //eventBus.registerComponent( 'tainacan-date' );
Vue.customElement('tainacan-relationship', Relationship); Vue.customElement('tainacan-relationship', Relationship);
eventBus.registerComponent( 'tainacan-relationship' ); //eventBus.registerComponent( 'tainacan-relationship' );
eventBus.listener(); //eventBus.listener();
/* Form */ /* Form */
Vue.customElement('tainacan-form-relationship', FormRelationship); Vue.customElement('tainacan-form-relationship', FormRelationship);
eventBus.registerComponent( 'tainacan-form-relationship' ); //eventBus.registerComponent( 'tainacan-form-relationship' );
/* Filters */ /* Filters */
Vue.customElement('tainacan-filter-custom-interval', FilterCustomInterval); Vue.customElement('tainacan-filter-custom-interval', FilterCustomInterval);
eventBusSearch.registerComponent( 'tainacan-filter-custom-interval' ); //eventBusSearch.registerComponent( 'tainacan-filter-custom-interval' );
Vue.customElement('tainacan-filter-selectbox', FilterSelectbox); Vue.customElement('tainacan-filter-selectbox', FilterSelectbox);
eventBusSearch.registerComponent( 'tainacan-filter-selectbox' ); //eventBusSearch.registerComponent( 'tainacan-filter-selectbox' );
Vue.customElement('tainacan-filter-autocomplete', FilterAutocomplete); Vue.customElement('tainacan-filter-autocomplete', FilterAutocomplete);
eventBusSearch.registerComponent( 'tainacan-filter-autocomplete' ); //eventBusSearch.registerComponent( 'tainacan-filter-autocomplete' );
Vue.customElement('tainacan-filter-checkbox', FilterCheckbox); Vue.customElement('tainacan-filter-checkbox', FilterCheckbox);
eventBusSearch.registerComponent( 'tainacan-filter-checkbox' ); //eventBusSearch.registerComponent( 'tainacan-filter-checkbox' );
Vue.customElement('tainacan-filter-taginput', FilterTaginput); Vue.customElement('tainacan-filter-taginput', FilterTaginput);
eventBusSearch.registerComponent( 'tainacan-filter-taginput' ); //eventBusSearch.registerComponent( 'tainacan-filter-taginput' );
eventBusSearch.listener(); //eventBusSearch.listener();

1
src/js/store/modules/collection/actions.js
View File

@ -15,6 +15,7 @@ export const fetchItems = ({ rootGetters, dispatch, commit }, collectionId) => {
// Differentiates between repository level and collection level queries // Differentiates between repository level and collection level queries
let endpoint = '/collection/'+collectionId+'/items?' let endpoint = '/collection/'+collectionId+'/items?'
if (collectionId == undefined) if (collectionId == undefined)
endpoint = '/items?' endpoint = '/items?'

5
src/theme-helper/class-tainacan-theme-helper.php
View File

@ -40,8 +40,11 @@ class Theme_Helper {
} }
public function print_scripts() { public function print_scripts() {
global $TAINACAN_BASE_URL;
if ( is_post_type_archive( \Tainacan\Repositories\Repository::get_collections_db_identifiers() ) ) { if ( is_post_type_archive( \Tainacan\Repositories\Repository::get_collections_db_identifiers() ) ) {
\Tainacan\Admin::get_instance()->add_admin_js(); //\Tainacan\Admin::get_instance()->add_admin_js();
wp_enqueue_script('tainacan-search', $TAINACAN_BASE_URL . '/assets/user_search-components.js' , [] , null, true);
wp_localize_script('tainacan-search', 'tainacan_plugin', \Tainacan\Admin::get_instance()->get_admin_js_localization_params());
} }
} }

1
webpack.config.js
View File

@ -4,6 +4,7 @@ let webpack = require('webpack');
module.exports = { module.exports = {
entry: { entry: {
dev_admin: './src/js/main.js', dev_admin: './src/js/main.js',
user_search: './src/admin/js/theme-main.js',
user_admin: './src/admin/js/main.js' user_admin: './src/admin/js/main.js'
}, },
output: { output: {