Items page in repository level with collections filter
This commit is contained in:
weryques
parent
4fe66a3352
commit
a20b0fa392
4
build.sh
4
build.sh
|
|
@ -67,7 +67,9 @@ rm -rf $wp_plugin_dir
|
|||
|
||||
mkdir $wp_plugin_dir
|
||||
|
||||
rsync -axz --exclude='vendor/bin/phpc*' --exclude='vendor/squizlabs' --exclude='vendor/wimg' src/* $wp_plugin_dir/
|
||||
rsync -axz --exclude='vendor/bin/phpc*' --exclude='vendor/squizlabs' --exclude='vendor/wimg' \
|
||||
--exclude='vendor/respect/validation/.git' --exclude='pdf-viewer/pdfjs-dist/web/compressed.tracemonkey-pldi-09.pdf' \
|
||||
src/* $wp_plugin_dir/
|
||||
|
||||
rm -rf $wp_plugin_dir/scss
|
||||
|
||||
|
|
|
|||
|
|
@ -69,14 +69,14 @@
|
|||
v-model="filter.enabled"
|
||||
@input="onChangeEnable($event, index)"/>
|
||||
<a
|
||||
:style="{ visibility: filter.collection_id != collectionId ? 'hidden' : 'visible' }"
|
||||
:style="{ visibility: filter.collection_id != collectionId && !isRepositoryLevel? 'hidden' : 'visible' }"
|
||||
@click.prevent="editFilter(filter)">
|
||||
<b-icon
|
||||
type="is-gray"
|
||||
icon="pencil"/>
|
||||
</a>
|
||||
<a
|
||||
:style="{ visibility: filter.collection_id != collectionId ? 'hidden' : 'visible' }"
|
||||
:style="{ visibility: filter.collection_id != collectionId && !isRepositoryLevel ? 'hidden' : 'visible' }"
|
||||
@click.prevent="removeFilter(filter)">
|
||||
<b-icon
|
||||
type="is-gray"
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
<li>
|
||||
<router-link
|
||||
tag="a"
|
||||
to="/categories"
|
||||
to="/taxonomies"
|
||||
:class="activeRoute == 'CategoriesPage' ? 'is-active':''">
|
||||
<b-icon
|
||||
size="is-small"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,93 @@
|
|||
<template>
|
||||
<b-field class="filter-item-forms">
|
||||
<b-collapse
|
||||
class="show"
|
||||
:open="open">
|
||||
<label
|
||||
class="label"
|
||||
slot="trigger"
|
||||
slot-scope="props">
|
||||
<b-icon
|
||||
:icon="props.open ? 'menu-down' : 'menu-right'"
|
||||
/>
|
||||
{{ $i18n.get('collections') }}
|
||||
</label>
|
||||
|
||||
<div
|
||||
class="block overflow-at">
|
||||
<div
|
||||
v-for="(collection, key) in collections"
|
||||
:key="key"
|
||||
class="control">
|
||||
<b-checkbox
|
||||
v-model="collectionsIdsToFilter"
|
||||
:native-value="collection.id"
|
||||
@input="apply_filter">
|
||||
{{ collection.name }}
|
||||
</b-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</b-collapse>
|
||||
</b-field>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'CollectionFilter',
|
||||
props: {
|
||||
query: Object,
|
||||
open: false,
|
||||
},
|
||||
created(){
|
||||
this.fetchCollections({page: 1, collectionsPerPage: -1, status: null});
|
||||
},
|
||||
mounted(){
|
||||
let routeQueries = this.$route.query;
|
||||
|
||||
if(routeQueries.metaquery && Array.isArray(routeQueries.metaquery[0].value)){
|
||||
this.collectionsIdsToFilter = routeQueries.metaquery[0].value;
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
inputs: [],
|
||||
collectionsIdsToFilter: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
collections(){
|
||||
return this.getCollections();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions('search', [
|
||||
'setPage'
|
||||
]),
|
||||
...mapActions('collection', [
|
||||
'fetchCollections'
|
||||
]),
|
||||
...mapGetters('collection', [
|
||||
'getCollections',
|
||||
]),
|
||||
apply_filter(){
|
||||
this.$eventBusSearch.$emit( 'input', {
|
||||
filter: 'checkbox',
|
||||
field_id: 'collection_id',
|
||||
value: this.collectionsIdsToFilter,
|
||||
compare: 'IN',
|
||||
collection_id: this.collectionsIdsToFilter,
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.overflow-at {
|
||||
overflow: auto;
|
||||
max-height: 125px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,22 +1,29 @@
|
|||
<template>
|
||||
<div>
|
||||
<collections-filter
|
||||
:open="collapsed"
|
||||
:query="getQuery"
|
||||
v-if="repository"/>
|
||||
<tainacan-filter-item
|
||||
v-show="!isMenuCompressed"
|
||||
:query="getQuery"
|
||||
v-for="(filter, index) in filters"
|
||||
:key="index"
|
||||
:filter="filter"
|
||||
:open="collapsed"/>
|
||||
:open="collapsed"
|
||||
:repository="repository"/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import CollectionsFilter from '../repository/collection-filter/collection-filter.vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
filters: Array,
|
||||
collapsed: Boolean,
|
||||
repository: Boolean,
|
||||
},
|
||||
methods: {
|
||||
...mapGetters('search',[
|
||||
|
|
@ -27,6 +34,9 @@
|
|||
getQuery() {
|
||||
return this.getPostQuery();
|
||||
}
|
||||
},
|
||||
components: {
|
||||
CollectionsFilter
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
<!-- SEARCH AND FILTERS --------------------- -->
|
||||
<button
|
||||
id="filter-menu-compress-button"
|
||||
:class="{'filter-menu-compress-button-top-repo': isRepositoryLevel}"
|
||||
:style="{ top: isHeaderShrinked ? '125px' : '152px'}"
|
||||
@click="isFiltersMenuCompressed = !isFiltersMenuCompressed">
|
||||
<b-icon :icon="isFiltersMenuCompressed ? 'menu-right' : 'menu-left'" />
|
||||
|
|
@ -20,7 +21,7 @@
|
|||
<div class="control is-small is-clearfix">
|
||||
<input
|
||||
class="input is-small"
|
||||
:placeholder=" $i18n.get('instruction_search_collection') "
|
||||
:placeholder="$i18n.get('instruction_search')"
|
||||
type="search"
|
||||
autocomplete="on"
|
||||
:value="searchQuery"
|
||||
|
|
@ -47,7 +48,9 @@
|
|||
|
||||
<h3 class="has-text-weight-semibold">{{ $i18n.get('filters') }}</h3>
|
||||
<a
|
||||
v-if="!isLoadingFilters && filters.length > 0"
|
||||
v-if="!isLoadingFilters &&
|
||||
((filters.length >= 0 &&
|
||||
isRepositoryLevel) || filters.length > 0)"
|
||||
class="collapse-all is-size-7"
|
||||
@click="collapseAll = !collapseAll">
|
||||
{{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
|
||||
|
|
@ -61,9 +64,12 @@
|
|||
<br>
|
||||
|
||||
<filters-items-list
|
||||
v-if="!isLoadingFilters && filters.length > 0"
|
||||
v-if="!isLoadingFilters &&
|
||||
((filters.length >= 0 &&
|
||||
isRepositoryLevel) || filters.length > 0)"
|
||||
:filters="filters"
|
||||
:collapsed="collapseAll"/>
|
||||
:collapsed="collapseAll"
|
||||
:repository="isRepositoryLevel"/>
|
||||
|
||||
<section
|
||||
v-else
|
||||
|
|
@ -256,7 +262,8 @@
|
|||
}); */
|
||||
|
||||
this.isOnTheme = (this.$route.name == null);
|
||||
this.isRepositoryLevel = (this.collectionId == undefined);
|
||||
|
||||
this.isRepositoryLevel = this.collectionId === undefined;
|
||||
|
||||
this.$eventBusSearch.$on('isLoadingItems', isLoadingItems => {
|
||||
this.isLoadingItems = isLoadingItems;
|
||||
|
|
@ -415,8 +422,8 @@
|
|||
}
|
||||
|
||||
#collection-search-button {
|
||||
border-radius: 0px !important;
|
||||
padding: 0px 8px !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 0 8px !important;
|
||||
border-color: $tainacan-input-background;
|
||||
&:focus, &:active {
|
||||
border-color: none !important;
|
||||
|
|
@ -462,14 +469,14 @@
|
|||
position: absolute;
|
||||
z-index: 9;
|
||||
top: 152px;
|
||||
left: 0px;
|
||||
left: 0;
|
||||
max-width: 23px;
|
||||
height: 21px;
|
||||
width: 23px;
|
||||
border: none;
|
||||
background-color: $primary-lighter;
|
||||
color: $tertiary;
|
||||
padding: 0px;
|
||||
padding: 0;
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
cursor: pointer;
|
||||
|
|
@ -480,6 +487,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.filter-menu-compress-button-top-repo {
|
||||
top: 123px !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -206,8 +206,7 @@ return [
|
|||
'instruction_select_document_file_for_item' => __( 'Select a document file for item', 'tainacan' ),
|
||||
'instruction_insert_url' => __( 'Insert URL', 'tainacan' ),
|
||||
'instruction_write_text' => __( 'Write Text', 'tainacan' ),
|
||||
'instruction_search_repository' => __( 'Search on repository', 'tainacan' ),
|
||||
'instruction_search_collection' => __( 'Search on collection', 'tainacan' ),
|
||||
'instruction_search' => __( 'Search', 'tainacan' ),
|
||||
|
||||
// Info. Other feedback to user.
|
||||
'info_name_is_required' => __( 'Name is required.', 'tainacan' ),
|
||||
|
|
|
|||
|
|
@ -375,12 +375,8 @@ class REST_Controller extends \WP_REST_Controller {
|
|||
|
||||
$query_params['perpage'] = array(
|
||||
'description' => __( "Maximum number of $object_name to be returned in result set." ),
|
||||
'type' => 'integer',
|
||||
'type' => 'numeric',
|
||||
'default' => 10,
|
||||
'minimum' => 1,
|
||||
'maximum' => 100,
|
||||
'sanitize_callback' => 'absint',
|
||||
'validate_callback' => 'rest_validate_request_arg',
|
||||
);
|
||||
|
||||
$query_params['paged'] = array(
|
||||
|
|
|
|||
|
|
@ -22,7 +22,13 @@
|
|||
this.field = ( this.field_id ) ? this.field_id : this.filter.field.field_id ;
|
||||
this.type = ( this.filter_type ) ? this.filter_type : this.filter.field.field_type;
|
||||
|
||||
axios.get('/collection/'+ this.collection +'/fields/' + this.field + '?context=edit')
|
||||
let in_route = '/collection/' + this.collection + '/fields/' + this.field +'?context=edit';
|
||||
|
||||
if(this.repository){
|
||||
in_route = '/fields?context=edit';
|
||||
}
|
||||
|
||||
axios.get(in_route)
|
||||
.then( res => {
|
||||
let field = res.data;
|
||||
this.selectedValues( field.field_type_options.taxonomy_id );
|
||||
|
|
@ -50,7 +56,8 @@
|
|||
id: '',
|
||||
query: {
|
||||
type: Object // concentrate all attributes field id and type
|
||||
}
|
||||
},
|
||||
repository: Boolean,
|
||||
},
|
||||
watch: {
|
||||
selected( value ){
|
||||
|
|
|
|||
|
|
@ -21,7 +21,14 @@
|
|||
this.collection = ( this.collection_id ) ? this.collection_id : this.filter.collection_id;
|
||||
this.field = ( this.field_id ) ? this.field_id : this.filter.field.field_id;
|
||||
const vm = this;
|
||||
axios.get('/collection/' + this.collection + '/fields/' + this.field + '?nopaging=1')
|
||||
|
||||
let in_route = '/collection/' + this.collection + '/fields/' + this.field +'?nopaging=1';
|
||||
|
||||
if(this.repository){
|
||||
in_route = '/fields?nopaging=1';
|
||||
}
|
||||
|
||||
axios.get(in_route)
|
||||
.then( res => {
|
||||
let result = res.data;
|
||||
if( result && result.field_type ){
|
||||
|
|
@ -34,6 +41,9 @@
|
|||
this.$console.log(error);
|
||||
});
|
||||
},
|
||||
props: {
|
||||
repository: Boolean,
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
isLoading: false,
|
||||
|
|
|
|||
|
|
@ -66,7 +66,13 @@
|
|||
this.collection = ( this.collection_id ) ? this.collection_id : this.filter.collection_id;
|
||||
this.field = ( this.field_id ) ? this.field_id : this.filter.field.field_id;
|
||||
|
||||
axios.get('/collection/' + this.collection + '/fields/' + this.field )
|
||||
let in_route = '/collection/' + this.collection + '/fields/' + this.field;
|
||||
|
||||
if(this.repository){
|
||||
in_route = '/fields/'+ this.field;
|
||||
}
|
||||
|
||||
axios.get(in_route)
|
||||
.then( res => {
|
||||
let result = res.data;
|
||||
if( result && result.field_type ){
|
||||
|
|
@ -101,7 +107,8 @@
|
|||
field_id: [Number], // not required, but overrides the filter field id if is set
|
||||
collection_id: [Number], // not required, but overrides the filter field id if is set
|
||||
id: '',
|
||||
query: Object
|
||||
query: Object,
|
||||
repository: Boolean,
|
||||
},
|
||||
watch: {
|
||||
isTouched( val ){
|
||||
|
|
|
|||
|
|
@ -27,7 +27,14 @@
|
|||
this.collection = ( this.collection_id ) ? this.collection_id : this.filter.collection_id;
|
||||
this.field = ( this.field_id ) ? this.field_id : this.filter.field.field_id;
|
||||
const vm = this;
|
||||
axios.get('/collection/' + this.collection + '/fields/' + this.field )
|
||||
|
||||
let in_route = '/collection/' + this.collection + '/fields/' + this.field;
|
||||
|
||||
if(this.repository){
|
||||
in_route = '/fields/'+ this.field;
|
||||
}
|
||||
|
||||
axios.get(in_route)
|
||||
.then( res => {
|
||||
let result = res.data;
|
||||
if( result && result.field_type ){
|
||||
|
|
@ -40,6 +47,9 @@
|
|||
this.$console.error(error);
|
||||
});
|
||||
},
|
||||
props: {
|
||||
repository: Boolean,
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
isLoading: false,
|
||||
|
|
|
|||
|
|
@ -23,7 +23,14 @@
|
|||
this.collection = ( this.collection_id ) ? this.collection_id : this.filter.collection_id;
|
||||
this.field = ( this.field_id ) ? this.field_id : this.filter.field.field_id;
|
||||
const vm = this;
|
||||
axios.get('/collection/' + this.collection + '/fields/' + this.field )
|
||||
|
||||
let in_route = '/collection/' + this.collection + '/fields/' + this.field;
|
||||
|
||||
if(this.repository){
|
||||
in_route = '/fields?nopaging=1';
|
||||
}
|
||||
|
||||
axios.get(in_route)
|
||||
.then( res => {
|
||||
let result = res.data;
|
||||
if( result && result.field_type ){
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<b-field
|
||||
id="filter-item-forms"
|
||||
class="filter-item-forms"
|
||||
:message="getErrorMessage"
|
||||
:type="filterTypeMessage">
|
||||
<b-collapse
|
||||
|
|
@ -22,6 +22,7 @@
|
|||
:is="filter.filter_type_object.component"
|
||||
:filter="filter"
|
||||
:query="query"
|
||||
:repository="repository"
|
||||
@input="listen( $event )"/>
|
||||
</div>
|
||||
</b-collapse>
|
||||
|
|
@ -37,6 +38,7 @@
|
|||
filter: Object,
|
||||
query: Object,
|
||||
open: false,
|
||||
repository: Boolean,
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
|
@ -76,7 +78,7 @@
|
|||
<style lang="scss">
|
||||
@import "../../../src/admin/scss/_variables.scss";
|
||||
|
||||
#filter-item-forms {
|
||||
.filter-item-forms {
|
||||
|
||||
.datepicker {
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue