Commit 43bcc793 authored by gj4210's avatar gj4210 👽 Committed by janis.streib
Browse files

UPD: Paginator & -List attribute naming

parent f2b8ad25
<template>
<b-row class="justify-content-md-center">
<b-col :md="block ? null : 'auto'" class="mb-0" v-if="total_rows > per_page">
<b-pagination :total-rows="total_rows" v-model="current_page_mutable" :per-page="per_page" first-number align="fill"
<b-col :md="block ? null : 'auto'" class="mb-0" v-if="totalRows > perPage">
<b-pagination :total-rows="totalRows" v-model="current_page_mutable" :per-page="perPage" first-number align="fill"
last-number class="shadow">
</b-pagination>
</b-col>
<b-col :md="block ? null : 'auto'" class="mb-0 pb-3">
<b-input-group class="shadow flex-nowrap">
<b-form-select v-model="per_page_mutable" :options="per_page_options"/>
<b-form-select v-model="per_page_mutable" :options="perPageOptions"/>
<template #append>
<b-input-group-text>von {{ total_rows }}</b-input-group-text>
<b-input-group-text>von {{ totalRows }}</b-input-group-text>
</template>
</b-input-group>
</b-col>
......@@ -20,24 +20,24 @@
export default {
name: 'Paginator',
props: {
current_page: {
currentPage: {
default() {
return 1
}
},
per_page: {
perPage: {
default() {
return 25
}
},
total_rows:
totalRows:
{
required: true,
default() {
return 0
}
},
per_page_options: {
perPageOptions: {
default() {
return [
5,
......@@ -59,7 +59,7 @@ export default {
computed: {
current_page_mutable: {
get() {
return this.current_page
return this.currentPage
},
set(val) {
this.$emit('current-page', val)
......@@ -67,7 +67,7 @@ export default {
},
per_page_mutable: {
get() {
return this.per_page
return this.perPage
},
set(val) {
this.$emit('per-page', val)
......
<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_and_sorted_items.length" :block="block"
<Paginator currentPage="current_page" perPage="items_per_page" @current-page="current_page = $event"
@per-page="items_per_page = $event" totalRows="filtered_and_sorted_items.length" :block="block"
:per-page-options="itemsPerPageOptions"
v-if="filtered_and_sorted_items.length > 0"/>
<div class="pagination_container">
......@@ -13,11 +14,12 @@
</div>
<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/>
<span class="font-italic">{{ noItemsText }}</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_and_sorted_items.length" :block="block"
<Paginator currentPage="current_page" perPage="items_per_page" @current-page="current_page = $event"
@per-page="items_per_page = $event" totalRows="filtered_and_sorted_items.length" :block="block"
:per-page-options="itemsPerPageOptions"
v-if="filtered_and_sorted_items.length > 0"/>
</div>
</template>
......@@ -43,12 +45,12 @@ export default {
return null
}
},
initial_items_per_page: {
initialItemsPerPage: {
default() {
return 25
}
},
items_per_page_options: {
itemsPerPageOptions: {
default() {
return [
{ value: 25, text: 25 },
......@@ -65,12 +67,12 @@ export default {
return false
}
},
no_items_text: {
noItemsText: {
default() {
return 'Keine Einträge vorhanden'
}
},
filter_function: {
filterFunction: {
type: Function,
default() {
return function (item, term) {
......@@ -88,7 +90,7 @@ export default {
}
}
},
sort_function: {
sortFunction: {
type: Function,
default() {
return null
......@@ -97,8 +99,8 @@ export default {
},
computed: {
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
const filtered_items = this.filterValue === '' ? this.items : this.items.filter(x => this.filterFunction()(x, this.filterValue))
return this.sortFunction ? filtered_items.sort(this.sortFunction) : filtered_items
},
sliced_items() {
if (this.items_per_page === 0) {
......
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