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:
parent
7a326b4a0e
commit
e255b0385c
|
@ -154,7 +154,6 @@ export default {
|
|||
return this.getFieldTypes();
|
||||
},
|
||||
set(value) {
|
||||
console.log("OIEEE")
|
||||
return this.updateFieldTypes(value);
|
||||
}
|
||||
},
|
||||
|
|
|
@ -106,7 +106,6 @@ export default {
|
|||
message: this.$i18n.get('info_warning_item_delete'),
|
||||
onConfirm: () => {
|
||||
this.deleteItem(itemId).then(() => {
|
||||
this.loadItems();
|
||||
this.$toast.open({
|
||||
duration: 3000,
|
||||
message: this.$i18n.get('info_item_deleted'),
|
||||
|
@ -139,7 +138,6 @@ export default {
|
|||
for (let item of this.selectedItems) {
|
||||
this.deleteItem(item.id)
|
||||
.then(() => {
|
||||
this.loadItems();
|
||||
this.$toast.open({
|
||||
duration: 3000,
|
||||
message: this.$i18n.get('info_item_deleted'),
|
||||
|
|
|
@ -37,7 +37,6 @@
|
|||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { eventBusSearch } from '../../../js/event-bus-search';
|
||||
|
||||
export default {
|
||||
name: 'Pagination',
|
||||
|
@ -59,7 +58,7 @@ export default {
|
|||
watch: {
|
||||
page( value ){
|
||||
if (value < 1)
|
||||
eventBusSearch.setPage(1);
|
||||
this.$eventBusSearch.setPage(1);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
@ -75,13 +74,13 @@ export default {
|
|||
}
|
||||
|
||||
let prevValue = this.itemsPerPage;
|
||||
eventBusSearch.setItemsPerPage(value);
|
||||
this.$eventBusSearch.setItemsPerPage(value);
|
||||
this.$userPrefs.set('items_per_page', value, prevValue);
|
||||
},
|
||||
onPageChange(page) {
|
||||
if(page == 0)
|
||||
return;
|
||||
eventBusSearch.setPage(page);
|
||||
this.$eventBusSearch.setPage(page);
|
||||
},
|
||||
getLastItemNumber() {
|
||||
let last = (Number(this.itemsPerPage*(this.page - 1)) + Number(this.itemsPerPage));
|
||||
|
|
|
@ -52,7 +52,6 @@
|
|||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { eventBusSearch } from '../../../js/event-bus-search';
|
||||
|
||||
export default {
|
||||
name: 'SearchControl',
|
||||
|
@ -80,10 +79,10 @@ export default {
|
|||
'getOrder'
|
||||
]),
|
||||
onChangeOrderBy(field) {
|
||||
eventBusSearch.setOrderBy(field);
|
||||
this.$eventBusSearch.setOrderBy(field);
|
||||
},
|
||||
onChangeOrder() {
|
||||
this.order == 'DESC' ? eventBusSearch.setOrder('ASC') : eventBusSearch.setOrder('DESC');
|
||||
this.order == 'DESC' ? this.$eventBusSearch.setOrder('ASC') : this.$eventBusSearch.setOrder('DESC');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -27,14 +27,14 @@ import FilterCategorySelectbox from '../../classes/filter-types/category/Selectb
|
|||
|
||||
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 AdminPage from '../admin.vue'
|
||||
import HelpButton from '../components/other/help-button.vue';
|
||||
import draggable from 'vuedraggable'
|
||||
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';
|
||||
|
||||
// Changing title of pages
|
||||
|
@ -50,8 +50,6 @@ Vue.use(UserPrefsPlugin);
|
|||
Vue.use(RouterHelperPlugin);
|
||||
Vue.use(ConsolePlugin, {visual: false});
|
||||
|
||||
// Register Components
|
||||
Vue.component('items-page',ItemsPage);
|
||||
/* Fields */
|
||||
Vue.component('tainacan-text', Text);
|
||||
Vue.component('tainacan-textarea', Textarea);
|
||||
|
@ -81,9 +79,11 @@ Vue.component('tainacan-filter-category-selectbox', FilterCategorySelectbox);
|
|||
Vue.component('help-button', HelpButton);
|
||||
Vue.component('draggable', draggable);
|
||||
|
||||
Vue.use(eventBusSearch, { store: store, router: router});
|
||||
|
||||
new Vue({
|
||||
el: '#tainacan-admin-app',
|
||||
store,
|
||||
router,
|
||||
render: h => h(AdminPage)
|
||||
});
|
||||
});
|
||||
|
|
|
@ -67,7 +67,7 @@ const routes = [
|
|||
{ path: '*', redirect: '/'}
|
||||
];
|
||||
|
||||
export default new VueRouter ({
|
||||
export const router = new VueRouter ({
|
||||
routes,
|
||||
// set custom query resolver
|
||||
parseQuery(query) {
|
||||
|
@ -76,6 +76,21 @@ export default new VueRouter ({
|
|||
stringifyQuery(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) : '';
|
||||
}
|
||||
});
|
|
@ -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;
|
||||
}
|
||||
});
|
|
@ -11,14 +11,14 @@
|
|||
id="button-create-item"
|
||||
tag="button"
|
||||
class="button is-secondary"
|
||||
:to="{ path: $routerHelper.getNewItemPath(finalCollectionId) }">
|
||||
:to="{ path: $routerHelper.getNewItemPath(collectionId) }">
|
||||
{{ $i18n.getFrom('items', 'new_item') }}
|
||||
</router-link>
|
||||
</div>
|
||||
<search-control
|
||||
v-if="fields.length > 0 && (items.length != 0 || isLoadingItems)"
|
||||
:is-repository-level="isRepositoryLevel"
|
||||
:collection-id="finalCollectionId"
|
||||
:collection-id="collectionId"
|
||||
:table-fields="tableFields"
|
||||
:pref-table-fields="prefTableFields"/>
|
||||
</div>
|
||||
|
@ -43,7 +43,7 @@
|
|||
<p>{{ $i18n.get('info_there_is_no_filter' ) }}</p>
|
||||
<router-link
|
||||
id="button-create-filter"
|
||||
:to="isRepositoryLevel ? $routerHelper.getNewFilterPath() : $routerHelper.getNewCollectionFilterPath(finalCollectionId)"
|
||||
:to="isRepositoryLevel ? $routerHelper.getNewFilterPath() : $routerHelper.getNewCollectionFilterPath(collectionId)"
|
||||
tag="button"
|
||||
class="button is-secondary is-centered">
|
||||
{{ $i18n.getFrom('filters', 'new_item') }}</router-link>
|
||||
|
@ -57,7 +57,7 @@
|
|||
:active.sync="isLoadingItems"/>
|
||||
<items-list
|
||||
v-if="!isLoadingItems && items.length > 0"
|
||||
:collection-id="finalCollectionId"
|
||||
:collection-id="collectionId"
|
||||
:table-fields="tableFields"
|
||||
:items="items"
|
||||
:is-loading="isLoading"/>
|
||||
|
@ -76,7 +76,7 @@
|
|||
id="button-create-item"
|
||||
tag="button"
|
||||
class="button is-primary"
|
||||
:to="{ path: $routerHelper.getNewItemPath(finalCollectionId) }">
|
||||
:to="{ path: $routerHelper.getNewItemPath(collectionId) }">
|
||||
{{ $i18n.getFrom('items', 'new_item') }}
|
||||
</router-link>
|
||||
</div>
|
||||
|
@ -94,14 +94,12 @@ import SearchControl from '../../components/search/search-control.vue'
|
|||
import ItemsList from '../../components/lists/items-list.vue';
|
||||
import FiltersItemsList from '../../components/search/filters-items-list.vue';
|
||||
import Pagination from '../../components/search/pagination.vue'
|
||||
import { eventBusSearch } from '../../../js/event-bus-search'
|
||||
import { mapActions, mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'ItemsPage',
|
||||
data(){
|
||||
return {
|
||||
finalCollectionId: Number,
|
||||
isRepositoryLevel: false,
|
||||
tableFields: [],
|
||||
prefTableFields: [],
|
||||
|
@ -149,24 +147,24 @@ export default {
|
|||
}
|
||||
},
|
||||
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;
|
||||
});
|
||||
|
||||
eventBusSearch.$on('hasFiltered', hasFiltered => {
|
||||
this.$eventBusSearch.$on('hasFiltered', hasFiltered => {
|
||||
this.hasFiltered = hasFiltered;
|
||||
});
|
||||
|
||||
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)
|
||||
.catch(() => this.isLoadingFilters = false);
|
||||
|
||||
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 });
|
||||
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.prefTableFields = this.tableFields;
|
||||
// this.$userPrefs.get('table_columns_' + this.finalCollectionId)
|
||||
// this.$userPrefs.get('table_columns_' + this.collectionId)
|
||||
// .then((value) => {
|
||||
// this.prefTableFields = value;
|
||||
// })
|
||||
// .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;
|
||||
|
||||
|
@ -193,8 +191,9 @@ export default {
|
|||
});
|
||||
},
|
||||
mounted(){
|
||||
eventBusSearch.updateStoreFromURL();
|
||||
eventBusSearch.loadItems();
|
||||
this.$eventBusSearch.setCollectionId(this.collectionId);
|
||||
this.$eventBusSearch.updateStoreFromURL();
|
||||
this.$eventBusSearch.loadItems();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
<div class="columns is-fullheight">
|
||||
<section class="column is-secondary-content">
|
||||
<tainacan-subheader :id="collectionId"/>
|
||||
<router-view class="page-container"/>
|
||||
<router-view
|
||||
:collection-id="collectionId"
|
||||
class="page-container"/>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -15,7 +15,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { eventBusSearch } from '../../js/event-bus-search'
|
||||
import { mapActions, mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
|
@ -33,7 +32,7 @@
|
|||
computed: {
|
||||
getErrorMessage() {
|
||||
let msg = '';
|
||||
let errors = eventBusSearch.getErrors( this.filter.id );
|
||||
let errors = this.$eventBusSearch.getErrors( this.filter.id );
|
||||
if ( errors) {
|
||||
this.setFilterTypeMessage('is-danger');
|
||||
for (let index in errors) {
|
||||
|
@ -57,7 +56,7 @@
|
|||
'getPostQuery'
|
||||
]),
|
||||
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 ){
|
||||
this.filterTypeMessage = message;
|
||||
|
|
|
@ -1,123 +1,127 @@
|
|||
import Vue from 'vue';
|
||||
import store from './store/store'
|
||||
import router from './../admin/js/router.js';
|
||||
export default {
|
||||
|
||||
export const eventBusSearch = new Vue({
|
||||
router,
|
||||
store,
|
||||
data: {
|
||||
componentsTag: [],
|
||||
errors : [],
|
||||
query: {}
|
||||
},
|
||||
created(){
|
||||
this.$on('input', data => {
|
||||
store.dispatch('search/setPage', 1);
|
||||
install(Vue, options = {}) {
|
||||
|
||||
if( data.taxonomy ){
|
||||
this.add_taxquery(data);
|
||||
} else {
|
||||
this.add_metaquery(data);
|
||||
}
|
||||
|
||||
this.updateURLQueries();
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
'$route.query' () {
|
||||
if (this.$route.name == 'CollectionItemsPage' || this.$route.name == 'ItemsPage') {
|
||||
if (this.$route.query.perpage == undefined)
|
||||
this.$route.query.perpage = 12;
|
||||
if (this.$route.query.paged == undefined)
|
||||
this.$route.query.paged = 1;
|
||||
if (this.$route.query.order == undefined)
|
||||
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] );
|
||||
Vue.prototype.$eventBusSearch = new Vue({
|
||||
router: options.router,
|
||||
store: options.store,
|
||||
data: {
|
||||
componentsTag: [],
|
||||
errors : [],
|
||||
query: {},
|
||||
collectionId: undefined
|
||||
},
|
||||
created(){
|
||||
this.$on('input', data => {
|
||||
this.$store.dispatch('search/setPage', 1);
|
||||
|
||||
if( data.taxonomy ){
|
||||
this.add_taxquery(data);
|
||||
} else {
|
||||
this.add_metaquery(data);
|
||||
}
|
||||
|
||||
this.updateURLQueries();
|
||||
});
|
||||
}
|
||||
},
|
||||
setPage(page) {
|
||||
store.dispatch('search/setPage', page);
|
||||
this.updateURLQueries();
|
||||
},
|
||||
setItemsPerPage(itemsPerPage) {
|
||||
store.dispatch('search/setItemsPerPage', itemsPerPage);
|
||||
this.updateURLQueries();
|
||||
},
|
||||
setOrderBy(newOrderBy) {
|
||||
store.dispatch('search/setOrderBy', newOrderBy);
|
||||
this.updateURLQueries();
|
||||
},
|
||||
setOrder(newOrder) {
|
||||
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 );
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route.query' () {
|
||||
//if (this.$route.name == 'CollectionItemsPage' || this.$route.name == 'ItemsPage') {
|
||||
if (this.$route.query.perpage == undefined)
|
||||
this.$route.query.perpage = 12;
|
||||
if (this.$route.query.paged == undefined)
|
||||
this.$route.query.paged = 1;
|
||||
if (this.$route.query.order == undefined)
|
||||
this.$route.query.order = 'DESC';
|
||||
if (this.$route.query.orderby == undefined)
|
||||
this.$route.query.orderby = 'date';
|
||||
|
||||
this.$store.dispatch('search/set_postquery', this.$route.query);
|
||||
this.loadItems();
|
||||
//}
|
||||
}
|
||||
},
|
||||
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;
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
|
@ -4,7 +4,7 @@ import Buefy from 'buefy'
|
|||
// include vue-custom-element plugin to Vue
|
||||
import VueCustomElement from 'vue-custom-element';
|
||||
import { eventBus } from './event-bus-web-components';
|
||||
import { eventBusSearch } from './event-bus-search';
|
||||
import eventBusSearch from './event-bus-search';
|
||||
|
||||
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 FilterTaginput from '../classes/filter-types/taginput/Taginput.vue';
|
||||
|
||||
Vue.use(eventBusSearch);
|
||||
|
||||
Vue.customElement('tainacan-text', Text);
|
||||
eventBus.registerComponent( 'tainacan-text' );
|
||||
//eventBus.registerComponent( 'tainacan-text' );
|
||||
|
||||
Vue.customElement('tainacan-textarea', Textarea);
|
||||
eventBus.registerComponent( 'tainacan-textarea' );
|
||||
//eventBus.registerComponent( 'tainacan-textarea' );
|
||||
|
||||
Vue.customElement('tainacan-selectbox', Selectbox);
|
||||
eventBus.registerComponent( 'tainacan-selectbox' );
|
||||
//eventBus.registerComponent( 'tainacan-selectbox' );
|
||||
|
||||
Vue.customElement('tainacan-numeric', Numeric);
|
||||
eventBus.registerComponent( 'tainacan-numeric' );
|
||||
//eventBus.registerComponent( 'tainacan-numeric' );
|
||||
|
||||
Vue.customElement('tainacan-date', Date);
|
||||
eventBus.registerComponent( 'tainacan-date' );
|
||||
//eventBus.registerComponent( 'tainacan-date' );
|
||||
|
||||
Vue.customElement('tainacan-relationship', Relationship);
|
||||
eventBus.registerComponent( 'tainacan-relationship' );
|
||||
//eventBus.registerComponent( 'tainacan-relationship' );
|
||||
|
||||
eventBus.listener();
|
||||
//eventBus.listener();
|
||||
|
||||
/* Form */
|
||||
|
||||
Vue.customElement('tainacan-form-relationship', FormRelationship);
|
||||
eventBus.registerComponent( 'tainacan-form-relationship' );
|
||||
//eventBus.registerComponent( 'tainacan-form-relationship' );
|
||||
|
||||
/* Filters */
|
||||
|
||||
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);
|
||||
eventBusSearch.registerComponent( 'tainacan-filter-selectbox' );
|
||||
|
||||
//eventBusSearch.registerComponent( 'tainacan-filter-selectbox' );
|
||||
|
||||
Vue.customElement('tainacan-filter-autocomplete', FilterAutocomplete);
|
||||
eventBusSearch.registerComponent( 'tainacan-filter-autocomplete' );
|
||||
//eventBusSearch.registerComponent( 'tainacan-filter-autocomplete' );
|
||||
|
||||
Vue.customElement('tainacan-filter-checkbox', FilterCheckbox);
|
||||
eventBusSearch.registerComponent( 'tainacan-filter-checkbox' );
|
||||
//eventBusSearch.registerComponent( 'tainacan-filter-checkbox' );
|
||||
|
||||
Vue.customElement('tainacan-filter-taginput', FilterTaginput);
|
||||
eventBusSearch.registerComponent( 'tainacan-filter-taginput' );
|
||||
//eventBusSearch.registerComponent( 'tainacan-filter-taginput' );
|
||||
|
||||
eventBusSearch.listener();
|
||||
//eventBusSearch.listener();
|
||||
|
|
|
@ -15,6 +15,7 @@ export const fetchItems = ({ rootGetters, dispatch, commit }, collectionId) => {
|
|||
|
||||
// Differentiates between repository level and collection level queries
|
||||
let endpoint = '/collection/'+collectionId+'/items?'
|
||||
|
||||
if (collectionId == undefined)
|
||||
endpoint = '/items?'
|
||||
|
||||
|
|
|
@ -40,8 +40,11 @@ class Theme_Helper {
|
|||
}
|
||||
|
||||
public function print_scripts() {
|
||||
global $TAINACAN_BASE_URL;
|
||||
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());
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -4,6 +4,7 @@ let webpack = require('webpack');
|
|||
module.exports = {
|
||||
entry: {
|
||||
dev_admin: './src/js/main.js',
|
||||
user_search: './src/admin/js/theme-main.js',
|
||||
user_admin: './src/admin/js/main.js'
|
||||
},
|
||||
output: {
|
||||
|
|
Loading…
Reference in New Issue