Commit ddd31fd2 authored by gj4210's avatar gj4210 👁 Committed by janis.streib
Browse files

ADD: Optional sorting for PaginatorList

parent f1fbff4b
<template>
<div class="paginator">
<FilterInput v-model="filterValue"></FilterInput>
<Paginator :current_page="current_page" :per_page="items_per_page" @current-page="current_page = $event" @per-page="items_per_page = $event" :total_rows="filtered_items.length" v-if="filtered_items.length > 0"/>
<Paginator :current_page="current_page" :per_page="items_per_page" @current-page="current_page = $event"
@per-page="items_per_page = $event" :total_rows="filtered_and_sorted_items.length"
v-if="filtered_and_sorted_items.length > 0"/>
<div class="pagination_container">
<slot name="content_skeleton_item" v-if="!items || items.length === 0"></slot>
......@@ -9,12 +11,14 @@
v-for="item in sliced_items"
v-bind:item="item"/>
</div>
<div v-if="!items || filtered_items.length === 0"
<div v-if="!items || filtered_and_sorted_items.length === 0"
class="font-italic text-center my-3">
<span class="font-italic">{{ no_items_text }}</span><br/>
</div>
<Paginator :current_page="current_page" :per_page="items_per_page" @current-page="current_page = $event" @per-page="items_per_page = $event" :total_rows="filtered_items.length" v-if="filtered_items.length > 0"/>
<Paginator :current_page="current_page" :per_page="items_per_page" @current-page="current_page = $event"
@per-page="items_per_page = $event" :total_rows="filtered_and_sorted_items.length"
v-if="filtered_and_sorted_items.length > 0"/>
</div>
</template>
......@@ -77,17 +81,24 @@ export default {
return false
}
}
},
sort_function: {
type: Function,
default() {
return null
}
}
},
computed: {
filtered_items() {
return this.filterValue === '' ? this.items : this.items.filter(x => this.filter_function()(x, this.filterValue))
filtered_and_sorted_items() {
const filtered_items = this.filterValue === '' ? this.items : this.items.filter(x => this.filter_function()(x, this.filterValue))
return this.sort_function ? filtered_items.sort(this.sort_function) : filtered_items
},
sliced_items() {
if (this.items_per_page === 0) {
return this.filtered_items()
return this.sorted_items()
}
return this.filtered_items.slice((this.current_page - 1) * this.items_per_page, Math.min(this.items.length, this.current_page * this.items_per_page))
return this.filtered_and_sorted_items.slice((this.current_page - 1) * this.items_per_page, Math.min(this.items.length, this.current_page * this.items_per_page))
}
}
}
......
Supports Markdown
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