Commit dc27f807 authored by janis.streib's avatar janis.streib 🦉
Browse files

ADD: filter to paginator

parent e914926f
Pipeline #114861 passed with stages
in 8 minutes and 44 seconds
<template>
<div class="paginator">
<FilterInput v-model="filterValue"></FilterInput>
<b-pagination :total-rows="items.length" v-model="currentPage" :per-page="items_per_page"
v-if="items && items.length > items_per_page">
v-if="filterValue == '' && items && items.length > items_per_page">
</b-pagination>
<div class="pagination_container">
<slot name="content_skeleton_item" v-if="items == null || items.length == 0"></slot>
<slot name="item" v-else
v-for="item in items.slice((currentPage-1)*items_per_page, Math.min(items.length, currentPage*items_per_page))"
v-for="item in slicer"
v-bind:item="item"/>
</div>
<b-pagination :total-rows="items.length" v-model="currentPage" :per-page="items_per_page"
v-if="items && items.length > items_per_page">
v-if="filterValue == '' && items && items.length > items_per_page">
</b-pagination>
</div>
</template>
<script>
import FilterInput from '@/components/FilterInput'
export default {
name: 'Paginator',
components: {FilterInput},
data() {
return {
currentPage: 1
currentPage: 1,
filterValue: ''
}
},
props: {
......@@ -34,6 +39,30 @@ export default {
default() {
return 25
}
},
filter_function: {
type: Function,
default() {
return function (item, term) {
for (const v of Object.values(item)) {
window.console.debug(typeof v)
if (typeof v === 'string') {
if (v.includes(term)) {
return true
}
}
}
return false
}
}
}
},
computed: {
slicer() {
if (this.filterValue === '') {
return this.items.slice((this.currentPage - 1) * this.items_per_page, Math.min(this.items.length, this.currentPage * this.items_per_page))
}
return this.items.filter(x => this.filter_function()(x, this.filterValue))
}
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment