Fixes weird css changes on column values. Implements termId default filtering for Terms Item Oage,
This commit is contained in:
parent
9659d5a34a
commit
3a18ce8f2e
|
@ -73,7 +73,7 @@
|
|||
}
|
||||
|
||||
.is-main-content {
|
||||
padding: 0px;
|
||||
padding: 0px !important;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
|
@ -89,8 +89,8 @@
|
|||
}
|
||||
|
||||
.is-secondary-content {
|
||||
padding: 0px;
|
||||
margin: 94px auto 0 auto;
|
||||
padding: 0px !important;
|
||||
margin: 106px auto 0 auto;
|
||||
position: relative;
|
||||
overflow-y: hidden;
|
||||
height: calc(100% - 94px);
|
||||
|
|
|
@ -31,6 +31,7 @@ import FilterTaxonomySelectbox from '../../classes/filter-types/taxonomy/Selectb
|
|||
import TaincanFormItem from '../../classes/metadata-types/tainacan-form-item.vue';
|
||||
import TaincanFiltersList from '../../classes/filter-types/tainacan-filter-item.vue';
|
||||
import ItemsPage from '../pages/lists/items-page.vue';
|
||||
import TermItemsPage from '../pages/lists/term-items-page.vue';
|
||||
import ViewModeTable from '../../theme-helper/view-mode-table.vue';
|
||||
import ViewModeCards from '../../theme-helper/view-mode-cards.vue';
|
||||
import ViewModeRecords from '../../theme-helper/view-mode-records.vue';
|
||||
|
@ -83,6 +84,7 @@ Vue.component('tainacan-filter-taxonomy-selectbox', FilterTaxonomySelectbox);
|
|||
Vue.component('help-button', HelpButton);
|
||||
Vue.component('draggable', draggable);
|
||||
Vue.component('items-page', ItemsPage);
|
||||
Vue.component('term-items-page', TermItemsPage);
|
||||
|
||||
// Oficial view modes
|
||||
Vue.component('view-mode-table', ViewModeTable);
|
||||
|
@ -95,11 +97,13 @@ Vue.use(eventBusSearch, { store: store, router: routerTheme});
|
|||
// THEME ITEMS LIST (COLLECTIONS)
|
||||
import ThemeItemsList from '../theme-items-list.vue';
|
||||
|
||||
new Vue({
|
||||
export const ThemeItemsListing = new Vue({
|
||||
el: '#tainacan-items-page',
|
||||
store,
|
||||
router: routerTheme,
|
||||
data: {
|
||||
termId: '',
|
||||
taxonomy: '',
|
||||
collectionId: '',
|
||||
defaultViewMode: '',
|
||||
enabledViewModes: {}
|
||||
|
@ -114,32 +118,10 @@ new Vue({
|
|||
if (this.$el.attributes['enabled-view-modes'] != undefined)
|
||||
this.enabledViewModes = this.$el.attributes['enabled-view-modes'].value.split(',');
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// THEME ITEMS LIST (TERMS)
|
||||
import ThemeTermItemsList from '../theme-term-items-list.vue';
|
||||
|
||||
new Vue({
|
||||
el: '#tainacan-term-items-page',
|
||||
store,
|
||||
router: routerTheme,
|
||||
data: {
|
||||
termId: '',
|
||||
defaultViewMode: '',
|
||||
enabledViewModes: {}
|
||||
},
|
||||
render: h => h(ThemeTermItemsList),
|
||||
beforeMount () {
|
||||
|
||||
if (this.$el.attributes['term-id'] != undefined)
|
||||
this.termId = this.$el.attributes['term-id'].value;
|
||||
if (this.$el.attributes['default-view-mode'] != undefined)
|
||||
this.defaultViewMode = this.$el.attributes['default-view-mode'].value;
|
||||
if (this.$el.attributes['enabled-view-modes'] != undefined)
|
||||
this.enabledViewModes = this.$el.attributes['enabled-view-modes'].value.split(',');
|
||||
|
||||
if (this.$el.attributes['taxonomy'] != undefined)
|
||||
this.taxonomy = this.$el.attributes['taxonomy'].value;
|
||||
}
|
||||
|
||||
});
|
|
@ -680,8 +680,9 @@
|
|||
}
|
||||
},
|
||||
props: {
|
||||
collectionId: Number,
|
||||
// collectionId: Number,
|
||||
termId: Number,
|
||||
taxonomy: String,
|
||||
defaultViewMode: String, // Used only on theme
|
||||
enabledViewModes: Object // Used only on theme
|
||||
},
|
||||
|
@ -1036,7 +1037,8 @@
|
|||
|
||||
this.isRepositoryLevel = (this.collectionId === undefined);
|
||||
|
||||
this.$eventBusSearch.setCollectionId(this.collectionId);
|
||||
// this.$eventBusSearch.setCollectionId(this.collectionId);
|
||||
this.$eventBusSearch.setTerm(this.termId, this.taxonomy);
|
||||
this.$eventBusSearch.updateStoreFromURL();
|
||||
|
||||
this.$eventBusSearch.$on('isLoadingItems', isLoadingItems => {
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
.tabs {
|
||||
a {
|
||||
font-size: 13px;
|
||||
margin-bottom: -3px;
|
||||
margin-bottom: -3px !important;
|
||||
&:hover{
|
||||
border-bottom-color: transparent;
|
||||
text-decoration: none;
|
||||
|
|
|
@ -1,9 +1,19 @@
|
|||
<template>
|
||||
<div>
|
||||
<items-page
|
||||
v-if="$root.collectionId != undefined && $root.collectionId != ''"
|
||||
class="theme-items-list"
|
||||
:enabled-view-modes="$root.enabledViewModes"
|
||||
:default-view-mode="$root.defaultViewMode"
|
||||
:collection-id="$root.collectionId" />
|
||||
<term-items-page
|
||||
v-if="$root.termId != undefined && $root.termId != ''"
|
||||
class="theme-items-list"
|
||||
:taxonomy="$root.taxonomy"
|
||||
:enabled-view-modes="$root.enabledViewModes"
|
||||
:default-view-mode="$root.defaultViewMode"
|
||||
:term-id="$root.termId" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
@ -1,184 +0,0 @@
|
|||
<template>
|
||||
<term-items-page
|
||||
class="theme-items-list"
|
||||
:enabled-view-modes="$root.enabledViewModes"
|
||||
:default-view-mode="$root.defaultViewMode"
|
||||
:term-id="$root.termId" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ThemeTermItemsList",
|
||||
created() {
|
||||
this.$userPrefs.init();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
@import "../admin/scss/_variables.scss";
|
||||
|
||||
// Bulma imports
|
||||
@import "./scss/theme-basics.sass";
|
||||
|
||||
// Buefy imports
|
||||
@import "../../node_modules/buefy/src/scss/components/_datepicker.scss";
|
||||
@import "../../node_modules/buefy/src/scss/utils/_all.scss";
|
||||
@import "../../node_modules/buefy/src/scss/components/_checkbox.scss";
|
||||
@import "../../node_modules/buefy/src/scss/components/_radio.scss";
|
||||
@import "../../node_modules/buefy/src/scss/components/_tag.scss";
|
||||
@import "../../node_modules/buefy/src/scss/components/_loading.scss";
|
||||
@import "../../node_modules/buefy/src/scss/components/_dropdown.scss";
|
||||
@import "../../node_modules/buefy/src/scss/components/_modal.scss";
|
||||
|
||||
// Tainacan imports
|
||||
@import "../admin/scss/_tables.scss";
|
||||
@import "../admin/scss/_modals.scss";
|
||||
@import "../admin/scss/_buttons.scss";
|
||||
@import "../admin/scss/_inputs.scss";
|
||||
@import "../admin/scss/_checkboxes.scss";
|
||||
@import "../admin/scss/_pagination.scss";
|
||||
@import "../admin/scss/_tags.scss";
|
||||
// @import "../admin/scss/_tabs.scss";
|
||||
@import "../admin/scss/_selects.scss";
|
||||
@import "../admin/scss/_dropdown-and-autocomplete.scss";
|
||||
@import "../admin/scss/_tooltips.scss";
|
||||
@import "../admin/scss/_tainacan-form.scss";
|
||||
@import "../admin/scss/_filters-menu-modal.scss";
|
||||
|
||||
.theme-items-list {
|
||||
position: relative;
|
||||
display: flex;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
a{ color: $secondary !important }
|
||||
a:hover {
|
||||
cursor: pointer;
|
||||
color: $secondary !important;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
}
|
||||
.dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
.b-radio.radio {
|
||||
|
||||
input[type="radio"] + .check {
|
||||
width: 13px !important;
|
||||
height: 13px !important;
|
||||
border: 1px solid $gray4 !important;
|
||||
}
|
||||
input[type="radio"] + .check::before {
|
||||
background: black !important;
|
||||
width: 7px !important;
|
||||
height: 7px !important;
|
||||
}
|
||||
&:focus input[type="radio"] + .check,
|
||||
&:active input[type="radio"] + .check,
|
||||
&:hover input[type="radio"] + .check {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
input[type="radio"]:checked + .check {
|
||||
border-color: $gray4 !important;
|
||||
}
|
||||
&:focus input[type="radio"]:checked + .check {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
}
|
||||
.collapse-all {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.collapse .collapse-trigger {
|
||||
display: inline;
|
||||
cursor: pointer;
|
||||
.label {
|
||||
vertical-align: middle;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.filters-menu {
|
||||
// height: auto;
|
||||
position: absolute !important;
|
||||
min-width: $filter-menu-width-theme;
|
||||
border-right: 0;
|
||||
padding: 25px 2.0833333% 25px 4.1666667%;
|
||||
|
||||
@media screen and (min-width: 769px) and (max-width: 1023px) {
|
||||
min-width: 25% !important;
|
||||
}
|
||||
|
||||
.columns {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.taginput-container {
|
||||
.control.has-icons-left .icon {
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-control {
|
||||
justify-content: flex-start !important;
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
margin-bottom: $page-small-top-padding !important;
|
||||
|
||||
.search-control-item {
|
||||
margin-right: $page-side-padding !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
.search-control-item:first-child>div {
|
||||
margin-left: -8.3333333%;
|
||||
}
|
||||
|
||||
.gray-icon, .gray-icon .icon {
|
||||
color: $gray4 !important;
|
||||
i::before {
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
.dropdown-item {
|
||||
padding: 0.25rem 1.35rem 0.25rem 0.25rem;
|
||||
}
|
||||
.view-mode-icon {
|
||||
margin-right: 0px !important;
|
||||
margin-top: 1px;
|
||||
margin-left: 4px;
|
||||
|
||||
&.icon i::before, .gray-icon i::before {
|
||||
font-size: 19px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#items-list-area {
|
||||
width: 100%;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
margin-left: 0;
|
||||
&.spaced-to-right {
|
||||
margin-left: $filter-menu-width-theme;
|
||||
|
||||
@media screen and (min-width: 769px) and (max-width: 1023px) {
|
||||
margin-left: 25% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
|
@ -9,7 +9,9 @@ export default {
|
|||
componentsTag: [],
|
||||
errors : [],
|
||||
query: {},
|
||||
collectionId: undefined
|
||||
collectionId: undefined,
|
||||
taxonomy: undefined,
|
||||
termId: undefined
|
||||
},
|
||||
created(){
|
||||
|
||||
|
@ -308,7 +310,9 @@ export default {
|
|||
|
||||
this.$store.dispatch('collection/fetchItems', {
|
||||
'collectionId': this.collectionId,
|
||||
'isOnTheme': (this.$route.name == null)
|
||||
'isOnTheme': (this.$route.name == null),
|
||||
'termId': this.termId,
|
||||
'taxonomy': this.taxonomy
|
||||
})
|
||||
.then((res) => {
|
||||
|
||||
|
@ -324,10 +328,15 @@ export default {
|
|||
this.$emit( 'isLoadingItems', false);
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
setCollectionId(collectionId) {
|
||||
this.collectionId = collectionId;
|
||||
},
|
||||
setTerm(termId, taxonomy) {
|
||||
this.termId = termId;
|
||||
this.taxonomy = taxonomy;
|
||||
},
|
||||
clearAllFilters() {
|
||||
this.$store.dispatch('search/cleanFilterTags');
|
||||
this.$store.dispatch('search/cleanMetaQueries');
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
import axios from '../../../axios/axios';
|
||||
import qs from 'qs';
|
||||
|
||||
export const fetchItems = ({ rootGetters, dispatch, commit }, { collectionId, isOnTheme }) => {
|
||||
export const fetchItems = ({ rootGetters, dispatch, commit }, { collectionId, isOnTheme, termId, taxonomy }) => {
|
||||
commit('cleanItems');
|
||||
|
||||
return new Promise ((resolve, reject) => {
|
||||
|
||||
// Adds queries for filtering
|
||||
let postQueries = rootGetters['search/getPostQuery'];
|
||||
let postQueries = JSON.parse(JSON.stringify(rootGetters['search/getPostQuery']));
|
||||
|
||||
// Sets a flag to inform components that an empty sate is or not due to filtering
|
||||
let hasFiltered = false;
|
||||
|
@ -26,6 +26,19 @@ export const fetchItems = ({ rootGetters, dispatch, commit }, { collectionId, is
|
|||
}
|
||||
}
|
||||
|
||||
// Sets term query in case it's on a term items page
|
||||
if (termId != undefined && taxonomy != undefined) {
|
||||
|
||||
if (postQueries.taxquery == undefined)
|
||||
postQueries.taxquery = [];
|
||||
|
||||
postQueries.taxquery.push({
|
||||
taxonomy: taxonomy,
|
||||
terms:[ termId ],
|
||||
compare: 'IN'
|
||||
});
|
||||
}
|
||||
|
||||
let query = qs.stringify(postQueries);
|
||||
|
||||
// Guarantees at least empty fetch_only are passed in case none is found
|
||||
|
|
|
@ -81,11 +81,11 @@ class Theme_Helper {
|
|||
|
||||
public function enqueue_scripts($force = false) {
|
||||
global $TAINACAN_BASE_URL;
|
||||
if ( $force || is_post_type_archive( \Tainacan\Repositories\Repository::get_collections_db_identifiers() ) ) {
|
||||
// if ( $force || is_post_type_archive( \Tainacan\Repositories\Repository::get_collections_db_identifiers() ) ) {
|
||||
//\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());
|
||||
}
|
||||
// }
|
||||
}
|
||||
|
||||
public function is_post_an_item(\WP_Post $post) {
|
||||
|
@ -305,7 +305,7 @@ class Theme_Helper {
|
|||
$atts = shortcode_atts(
|
||||
array(
|
||||
'collection-id' => '',
|
||||
'term' => '',
|
||||
'term-id' => '',
|
||||
),
|
||||
$atts
|
||||
);
|
||||
|
@ -314,6 +314,9 @@ class Theme_Helper {
|
|||
if (isset($atts['collection-id'])) {
|
||||
$params = "collection-id=" . $atts['collection-id'];
|
||||
}
|
||||
if (isset($atts['term-id'])) {
|
||||
$params = "term-id=" . $atts['term-id'];
|
||||
}
|
||||
|
||||
$this->enqueue_scripts(true);
|
||||
|
||||
|
|
|
@ -198,7 +198,7 @@ function tainacan_the_faceted_search() {
|
|||
if ($term) {
|
||||
$props .= 'term-id="' . $term->term_id . '" ';
|
||||
$props .= 'taxonomy="' . $term->taxonomy . '" ';
|
||||
$id = 'tainacan-term-items-page';
|
||||
$id = 'tainacan-items-page';
|
||||
}
|
||||
|
||||
echo "<div id='$id' $props ></div>";
|
||||
|
|
Loading…
Reference in New Issue