accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2025-01-23 07:08:36 +00:00
Code Issues Releases Activity

fix: List Pagination

Browse Source
This commit is contained in:
Faris Ansari 2019-10-11 16:28:37 +05:30
parent 227133c1ab
commit 6126a6ee63
2 changed files with 85 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/pages/ListView/List.vue
View File

@ -1,41 +1,80 @@
<template>
<div class="px-8 pb-8 mt-2 text-sm">
<ListRow class="text-gray-700" :columnCount="columns.length">
<div
v-for="column in columns"
:key="column.label"
class="py-4"
:class="['Float', 'Currency'].includes(column.fieldtype) ? 'text-right pr-10' : ''"
>{{ column.label }}</div>
</ListRow>
<ListRow
class="cursor-pointer text-gray-900 hover:text-gray-600"
v-for="doc in data"
:key="doc.name"
@click.native="openForm(doc.name)"
:columnCount="columns.length"
>
<ListCell
v-for="column in columns"
:key="column.label"
:class="['Float', 'Currency'].includes(column.fieldtype) ? 'text-right pr-10' : ''"
:doc="doc"
:column="column"
></ListCell>
</ListRow>
<div class="px-8 pb-8 mt-2 text-sm flex flex-col justify-between">
<div>
<ListRow class="text-gray-700" :columnCount="columns.length">
<div
v-for="column in columns"
:key="column.label"
class="py-4"
:class="['Float', 'Currency'].includes(column.fieldtype) ? 'text-right pr-10' : ''"
>{{ column.label }}</div>
</ListRow>
<ListRow
class="cursor-pointer text-gray-900 hover:text-gray-600"
v-for="doc in data"
:key="doc.name"
@click.native="openForm(doc.name)"
:columnCount="columns.length"
>
<ListCell
v-for="column in columns"
:key="column.label"
:class="['Float', 'Currency'].includes(column.fieldtype) ? 'text-right pr-10' : ''"
:doc="doc"
:column="column"
></ListCell>
</ListRow>
</div>
<div class="flex items-center justify-center">
<Button :class="start == 0 && 'text-gray-600'" :disabled="start == 0" @click="prevPage">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-4 h-4 feather feather-chevron-left"
>
<polyline points="15 18 9 12 15 6" />
</svg>
</Button>
<div class="mx-3">
<span class="font-medium">{{ start + data.length }}</span>
<span class="text-gray-600">of</span>
<span class="font-medium">{{ totalCount }}</span>
</div>
<Button :class="start + 10 >= totalCount && 'text-gray-600'" :disabled="start + 10 >= totalCount" @click="nextPage">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-4 h-4 feather feather-chevron-right"
>
<polyline points="9 18 15 12 9 6" />
</svg>
</Button>
</div>
</div>
</template>
<script>
import frappe from 'frappejs';
import ListRow from './ListRow';
import ListCell from './ListCell';
import Button from '@/components/Button';
export default {
name: 'List',
props: ['listConfig', 'filters'],
components: {
ListRow,
ListCell
ListCell,
Button
},
watch: {
listConfig(oldValue, newValue) {
@ -46,7 +85,10 @@ export default {
},
data() {
return {
data: []
data: [],
start: 0,
pageLength: 10,
totalCount: null
};
},
computed: {
@ -92,8 +134,22 @@ export default {
fields: ['*'],
filters,
orderBy: 'creation',
limit: 13
start: this.start,
limit: this.pageLength
});
let result = await frappe.db.getAll({
doctype: this.doctype,
fields: ['count(*) as count']
});
this.totalCount = result[0].count;
},
prevPage() {
this.start -= 10;
this.updateData();
},
nextPage() {
this.start += 10;
this.updateData();
},
getFilters() {
let filters = {};

4
src/pages/ListView/ListView.vue
View File

@ -10,8 +10,8 @@
<SearchBar class="ml-2" />
</template>
</PageHeader>
<div class="flex-1">
<List :listConfig="listConfig" :filters="filters" />
<div class="flex-1 flex">
<List :listConfig="listConfig" :filters="filters" class="flex-1" />
</div>
</div>
</div>