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 { .is-main-content {
padding: 0px; padding: 0px !important;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
overflow-y: auto; overflow-y: auto;
@ -89,8 +89,8 @@
} }
.is-secondary-content { .is-secondary-content {
padding: 0px; padding: 0px !important;
margin: 94px auto 0 auto; margin: 106px auto 0 auto;
position: relative; position: relative;
overflow-y: hidden; overflow-y: hidden;
height: calc(100% - 94px); 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 TaincanFormItem from '../../classes/metadata-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'; 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 ViewModeTable from '../../theme-helper/view-mode-table.vue';
import ViewModeCards from '../../theme-helper/view-mode-cards.vue'; import ViewModeCards from '../../theme-helper/view-mode-cards.vue';
import ViewModeRecords from '../../theme-helper/view-mode-records.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('help-button', HelpButton);
Vue.component('draggable', draggable); Vue.component('draggable', draggable);
Vue.component('items-page', ItemsPage); Vue.component('items-page', ItemsPage);
Vue.component('term-items-page', TermItemsPage);
// Oficial view modes // Oficial view modes
Vue.component('view-mode-table', ViewModeTable); Vue.component('view-mode-table', ViewModeTable);
@ -95,11 +97,13 @@ Vue.use(eventBusSearch, { store: store, router: routerTheme});
// THEME ITEMS LIST (COLLECTIONS) // THEME ITEMS LIST (COLLECTIONS)
import ThemeItemsList from '../theme-items-list.vue'; import ThemeItemsList from '../theme-items-list.vue';
new Vue({ export const ThemeItemsListing = new Vue({
el: '#tainacan-items-page', el: '#tainacan-items-page',
store, store,
router: routerTheme, router: routerTheme,
data: { data: {
termId: '',
taxonomy: '',
collectionId: '', collectionId: '',
defaultViewMode: '', defaultViewMode: '',
enabledViewModes: {} enabledViewModes: {}
@ -114,32 +118,10 @@ new Vue({
if (this.$el.attributes['enabled-view-modes'] != undefined) if (this.$el.attributes['enabled-view-modes'] != undefined)
this.enabledViewModes = this.$el.attributes['enabled-view-modes'].value.split(','); 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) if (this.$el.attributes['term-id'] != undefined)
this.termId = this.$el.attributes['term-id'].value; this.termId = this.$el.attributes['term-id'].value;
if (this.$el.attributes['default-view-mode'] != undefined) if (this.$el.attributes['taxonomy'] != undefined)
this.defaultViewMode = this.$el.attributes['default-view-mode'].value; this.taxonomy = this.$el.attributes['taxonomy'].value;
if (this.$el.attributes['enabled-view-modes'] != undefined)
this.enabledViewModes = this.$el.attributes['enabled-view-modes'].value.split(',');
} }
}); });

View File

@ -680,8 +680,9 @@
} }
}, },
props: { props: {
collectionId: Number, // collectionId: Number,
termId: Number, termId: Number,
taxonomy: String,
defaultViewMode: String, // Used only on theme defaultViewMode: String, // Used only on theme
enabledViewModes: Object // Used only on theme enabledViewModes: Object // Used only on theme
}, },
@ -1031,12 +1032,13 @@
} }
}, },
created() { created() {
this.isOnTheme = (this.$route.name === null); this.isOnTheme = (this.$route.name === null);
this.isRepositoryLevel = (this.collectionId === undefined); 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.updateStoreFromURL();
this.$eventBusSearch.$on('isLoadingItems', isLoadingItems => { this.$eventBusSearch.$on('isLoadingItems', isLoadingItems => {

View File

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

View File

@ -1,9 +1,19 @@
<template> <template>
<div>
<items-page <items-page
v-if="$root.collectionId != undefined && $root.collectionId != ''"
class="theme-items-list" class="theme-items-list"
:enabled-view-modes="$root.enabledViewModes" :enabled-view-modes="$root.enabledViewModes"
:default-view-mode="$root.defaultViewMode" :default-view-mode="$root.defaultViewMode"
:collection-id="$root.collectionId" /> :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> </template>
<script> <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: [], componentsTag: [],
errors : [], errors : [],
query: {}, query: {},
collectionId: undefined collectionId: undefined,
taxonomy: undefined,
termId: undefined
}, },
created(){ created(){
@ -305,13 +307,15 @@ export default {
} else { } else {
this.$emit( 'isLoadingItems', true); this.$emit( 'isLoadingItems', true);
this.$store.dispatch('collection/fetchItems', { this.$store.dispatch('collection/fetchItems', {
'collectionId': this.collectionId, 'collectionId': this.collectionId,
'isOnTheme': (this.$route.name == null) 'isOnTheme': (this.$route.name == null),
'termId': this.termId,
'taxonomy': this.taxonomy
}) })
.then((res) => { .then((res) => {
this.$emit( 'isLoadingItems', false); this.$emit( 'isLoadingItems', false);
this.$emit( 'hasFiltered', res.hasFiltered); this.$emit( 'hasFiltered', res.hasFiltered);
@ -324,10 +328,15 @@ export default {
this.$emit( 'isLoadingItems', false); this.$emit( 'isLoadingItems', false);
}); });
} }
}, },
setCollectionId(collectionId) { setCollectionId(collectionId) {
this.collectionId = collectionId; this.collectionId = collectionId;
}, },
setTerm(termId, taxonomy) {
this.termId = termId;
this.taxonomy = taxonomy;
},
clearAllFilters() { clearAllFilters() {
this.$store.dispatch('search/cleanFilterTags'); this.$store.dispatch('search/cleanFilterTags');
this.$store.dispatch('search/cleanMetaQueries'); this.$store.dispatch('search/cleanMetaQueries');

View File

@ -1,13 +1,13 @@
import axios from '../../../axios/axios'; import axios from '../../../axios/axios';
import qs from 'qs'; import qs from 'qs';
export const fetchItems = ({ rootGetters, dispatch, commit }, { collectionId, isOnTheme }) => { export const fetchItems = ({ rootGetters, dispatch, commit }, { collectionId, isOnTheme, termId, taxonomy }) => {
commit('cleanItems'); commit('cleanItems');
return new Promise ((resolve, reject) => { return new Promise ((resolve, reject) => {
// Adds queries for filtering // 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 // Sets a flag to inform components that an empty sate is or not due to filtering
let hasFiltered = false; 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); let query = qs.stringify(postQueries);
// Guarantees at least empty fetch_only are passed in case none is found // Guarantees at least empty fetch_only are passed in case none is found
@ -52,7 +65,7 @@ export const fetchItems = ({ rootGetters, dispatch, commit }, { collectionId, is
} else { } else {
if (postQueries.admin_view_mode != undefined) if (postQueries.admin_view_mode != undefined)
postQueries.admin_view_mode = null; postQueries.admin_view_mode = null;
} }
axios.tainacan.get(endpoint+query) axios.tainacan.get(endpoint+query)
.then(res => { .then(res => {

View File

@ -81,11 +81,11 @@ class Theme_Helper {
public function enqueue_scripts($force = false) { public function enqueue_scripts($force = false) {
global $TAINACAN_BASE_URL; 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(); //\Tainacan\Admin::get_instance()->add_admin_js();
wp_enqueue_script('tainacan-search', $TAINACAN_BASE_URL . '/assets/user_search-components.js' , [] , null, true); 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()); 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) { public function is_post_an_item(\WP_Post $post) {
@ -305,7 +305,7 @@ class Theme_Helper {
$atts = shortcode_atts( $atts = shortcode_atts(
array( array(
'collection-id' => '', 'collection-id' => '',
'term' => '', 'term-id' => '',
), ),
$atts $atts
); );
@ -314,6 +314,9 @@ class Theme_Helper {
if (isset($atts['collection-id'])) { if (isset($atts['collection-id'])) {
$params = "collection-id=" . $atts['collection-id']; $params = "collection-id=" . $atts['collection-id'];
} }
if (isset($atts['term-id'])) {
$params = "term-id=" . $atts['term-id'];
}
$this->enqueue_scripts(true); $this->enqueue_scripts(true);

View File

@ -198,7 +198,7 @@ function tainacan_the_faceted_search() {
if ($term) { if ($term) {
$props .= 'term-id="' . $term->term_id . '" '; $props .= 'term-id="' . $term->term_id . '" ';
$props .= 'taxonomy="' . $term->taxonomy . '" '; $props .= 'taxonomy="' . $term->taxonomy . '" ';
$id = 'tainacan-term-items-page'; $id = 'tainacan-items-page';
} }
echo "<div id='$id' $props ></div>"; echo "<div id='$id' $props ></div>";