Fixes weird css changes on column values. Implements termId default filtering for Terms Item Oage,

This commit is contained in:
Mateus Machado Luna 2018-08-16 15:25:54 -03:00
parent 9659d5a34a
commit 3a18ce8f2e
10 changed files with 62 additions and 227 deletions

View File

@ -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);

View File

@ -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;
}
});

View File

@ -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 => {

View File

@ -2,7 +2,7 @@
.tabs {
a {
font-size: 13px;
margin-bottom: -3px;
margin-bottom: -3px !important;
&:hover{
border-bottom-color: transparent;
text-decoration: none;

View File

@ -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>

View File

@ -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>

View File

@ -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');

View File

@ -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

View File

@ -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);

View File

@ -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>";