Skip to content

Commit 2303bdd

Browse files
sinisaosdantownsend
sinisaos
and
dantownsend
authored
Better pagination for large datasets (#468)
* enable better pagination for large datasets * change styling for smaller screens * page changes on input field change event * fix translations * fix translations * a few tweaks --------- Co-authored-by: Daniel Townsend <dan@dantownsend.co.uk>
1 parent cb1e431 commit 2303bdd

3 files changed

Lines changed: 81 additions & 86 deletions

File tree

‎admin_ui/src/components/Pagination.vue‎

Lines changed: 70 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,58 @@
11
<template>
22
<div id="pagination">
3-
<ul class="pages" v-if="pageCount < 20">
4-
<li :key="n" v-for="n in pageCount">
3+
<ul class="pages">
4+
<li>
55
<a
66
class="subtle"
77
href="#"
8-
v-bind:class="{ active: n === currentPageNumber }"
9-
v-on:click.prevent="changePage(n)"
10-
>{{ n }}</a
8+
v-on:click.prevent="changePage(currentPageNumber - 1)"
9+
:class="{ disabled: currentPageNumber == 1 }"
1110
>
11+
<font-awesome-icon icon="angle-left" />
12+
</a>
1213
</li>
13-
</ul>
1414

15-
<div class="page_select" v-else>
16-
<label>{{ $t("Go to page") }}</label>
17-
<select v-model="pageDropdownValue">
18-
<option :key="n" v-for="n in pageCount">{{ n }}</option>
19-
</select>
20-
</div>
15+
<li class="current">
16+
<input
17+
type="number"
18+
:min="1"
19+
:max="pageCount"
20+
v-model.number="pageInput"
21+
v-on:keyup.enter="
22+
changePage(
23+
Number(($event.target as HTMLInputElement).value)
24+
)
25+
"
26+
v-on:change="
27+
changePage(
28+
Number(($event.target as HTMLInputElement).value)
29+
)
30+
"
31+
/>
32+
</li>
33+
<li class="count">of {{ pageCount }}</li>
34+
35+
<li>
36+
<a
37+
href="#"
38+
class="subtle"
39+
v-on:click.prevent="changePage(currentPageNumber + 1)"
40+
:class="{ disabled: currentPageNumber == pageCount }"
41+
>
42+
<font-awesome-icon icon="angle-right" />
43+
</a>
44+
</li>
45+
</ul>
2146
</div>
2247
</template>
2348

2449
<script lang="ts">
2550
import { defineComponent } from "vue"
2651
2752
export default defineComponent({
28-
props: {
29-
tableName: String
30-
},
3153
data() {
3254
return {
33-
pageDropdownValue: 0
55+
pageInput: 1
3456
}
3557
},
3658
computed: {
@@ -44,32 +66,37 @@ export default defineComponent({
4466
const count = Math.ceil(this.rowCount / this.pageSize)
4567
return count < 1 ? 1 : count
4668
},
47-
currentTableName() {
48-
return this.$store.state.currentTableName
49-
},
50-
filterParams() {
51-
return this.$store.state.filterParams
52-
},
5369
currentPageNumber() {
5470
return this.$store.state.currentPageNumber
5571
}
5672
},
5773
methods: {
58-
async changePage(pageNumber: number) {
59-
if (this.currentPageNumber != pageNumber) {
60-
console.log("Navigating to " + pageNumber)
61-
this.$store.commit("updateCurrentPageNumber", pageNumber)
62-
await this.$store.dispatch("fetchRows")
74+
async changePage(page: number) {
75+
if (page < 1) {
76+
this.pageInput = 1
77+
return
78+
}
79+
80+
if (page > this.pageCount) {
81+
this.pageInput = this.pageCount
82+
return
6383
}
84+
85+
if (page === this.currentPageNumber) {
86+
return
87+
}
88+
89+
this.$store.commit("updateCurrentPageNumber", page)
90+
await this.$store.dispatch("fetchRows")
6491
}
6592
},
6693
watch: {
67-
pageDropdownValue(value) {
68-
this.changePage(value)
94+
currentPageNumber(value: number) {
95+
this.pageInput = value
6996
}
7097
},
7198
mounted() {
72-
this.pageDropdownValue = this.currentPageNumber
99+
this.pageInput = this.currentPageNumber
73100
}
74101
})
75102
</script>
@@ -80,11 +107,10 @@ export default defineComponent({
80107
div#pagination {
81108
ul.pages {
82109
list-style: none;
83-
margin: 0.5rem 0;
110+
margin: 0.3rem 0;
84111
padding: 0;
85112
86113
li {
87-
border: 1px solid rgba(255, 255, 255, 0.2);
88114
display: inline-block;
89115
font-size: 0.8rem;
90116
margin-bottom: 0.5rem;
@@ -103,28 +129,22 @@ div#pagination {
103129
background-color: @activeColor;
104130
}
105131
106-
&.active {
107-
background-color: @activeColor;
132+
&.disabled {
133+
color: grey;
134+
cursor: initial;
135+
136+
&:hover {
137+
background: none;
138+
}
108139
}
109140
}
110141
}
111142
}
112-
113-
div.page_select {
114-
select,
115-
label {
116-
display: inline-block;
117-
}
118-
119-
label {
120-
font-size: 0.9rem;
121-
margin-right: 1rem;
122-
}
123-
124-
select {
125-
width: auto;
126-
padding-right: 1.5rem;
127-
}
143+
span.count {
144+
padding-right: 0.5rem;
145+
}
146+
input {
147+
text-align: center;
128148
}
129149
}
130150
</style>

‎admin_ui/src/views/RowListing.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -403,7 +403,7 @@
403403
</p>
404404

405405
<div class="pagination_wrapper">
406-
<Pagination :tableName="tableName" />
406+
<Pagination />
407407
<ChangePageSize />
408408
</div>
409409
</template>

‎piccolo_admin/translations/data.py‎

Lines changed: 10 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,6 @@
5252
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "For timestamps which are timezone aware, they will be displayed in this timezone by default.",
5353
"Form submitted": "Form submitted",
5454
"Forms": "Forms",
55-
"Go to page": "Go to page",
5655
"Hide Filters": "Hide Filters",
5756
"Hide referencing tables": "Hide referencing tables",
5857
"Home": "Home",
@@ -134,7 +133,6 @@
134133
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "Ar gyfer stampiau amser sy'n ymwybodol o gylchfa amser, byddant yn cael eu harddangos yn y gylchfa amser hon yn ddiofyn.",
135134
"Form submitted": "Ffurflen wedi'i chyflwyno",
136135
"Forms": "Ffurflenni",
137-
"Go to page": "Ewch i'r dudalen",
138136
"Hide Filters": "Cuddio hidlwyr",
139137
"Hide referencing tables": "Cuddio tablau cyfeirio",
140138
"Home": "Cartref",
@@ -216,7 +214,6 @@
216214
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "Za vremenske oznake koje su svjesne vremenske zone, one će prema zadanim postavkama biti prikazane u ovoj vremenskoj zoni.",
217215
"Form submitted": "Obrazac poslan",
218216
"Forms": "Forme",
219-
"Go to page": "Idi na stranicu",
220217
"Hide Filters": "Sakrij filtre",
221218
"Hide referencing tables": "Sakrij referentne tablice",
222219
"Home": "Početna",
@@ -298,7 +295,6 @@
298295
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "Para carimbos de data/hora que reconhecem o fuso horário, eles serão exibidos nesse fuso horário por padrão.",
299296
"Form submitted": "Formulário enviado",
300297
"Forms": "Formulários",
301-
"Go to page": "Ir para página",
302298
"Hide Filters": "Ocultar filtros",
303299
"Hide referencing tables": "Ocultar tabelas de referência",
304300
"Home": "Página inicial",
@@ -380,7 +376,6 @@
380376
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "Zeitstempel, die die Zeitzone berücksichtigen, werden standardmäßig in dieser Zeitzone angezeigt.",
381377
"Form submitted": "Formular eingereicht",
382378
"Forms": "Formulare",
383-
"Go to page": "Gehen Sie zur Seite",
384379
"Hide Filters": "Filter ausblenden",
385380
"Hide referencing tables": "Referenzierungstabellen ausblenden",
386381
"Home": "Startseite",
@@ -462,7 +457,6 @@
462457
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "Pour les horodatages prenant en compte le fuseau horaire, ils seront affichés par défaut dans ce fuseau horaire.",
463458
"Form submitted": "Formulaire soumis",
464459
"Forms": "Formulaires",
465-
"Go to page": "Aller à la page",
466460
"Hide Filters": "Masquer les filtres",
467461
"Hide referencing tables": "Masquer les tables de référence",
468462
"Home": "Accueil",
@@ -544,7 +538,6 @@
544538
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "Para las marcas de tiempo que tienen en cuenta la zona horaria, se mostrarán en esta zona horaria de forma predeterminada.",
545539
"Form submitted": "Formulario enviado",
546540
"Forms": "Formularios",
547-
"Go to page": "Ir a la página",
548541
"Hide Filters": "Ocultar filtros",
549542
"Hide referencing tables": "Ocultar tablas de referencia",
550543
"Home": "Hogar",
@@ -626,7 +619,6 @@
626619
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "Aikavyöhyketietoiset aikaleimat näytetään oletusarvoisesti tällä aikavyöhykkeellä.",
627620
"Form submitted": "Lomake lähetetty",
628621
"Forms": "Lomakkeet",
629-
"Go to page": "Mene sivulle",
630622
"Hide Filters": "Piilota suodattimet",
631623
"Hide referencing tables": "Piilota viitetaulukot",
632624
"Home": "Koti",
@@ -708,7 +700,6 @@
708700
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "Временные метки, которые учитывают часовой пояс, по умолчанию будут отображаться в этом часовом поясе.",
709701
"Form submitted": "Форма отправлена",
710702
"Forms": "Формы",
711-
"Go to page": "Перейти к странице",
712703
"Hide Filters": "Скрыть фильтры",
713704
"Hide referencing tables": "Скрыть связаные таблицы",
714705
"Home": "Главная",
@@ -790,7 +781,6 @@
790781
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "Для часових позначок, які враховують часовий пояс, вони відображатимуться в цьому часовому поясі за умовчанням.",
791782
"Form submitted": "Форму відправлено",
792783
"Forms": "Форми",
793-
"Go to page": "Перейти на сторінку",
794784
"Hide Filters": "Приховати фільтри",
795785
"Hide referencing tables": "Приховати пов'язані таблиці",
796786
"Home": "Головна",
@@ -872,7 +862,6 @@
872862
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "对于时区感知的时间戳，默认情况下它们将显示在该时区中。",
873863
"Form submitted": "已提交的表单",
874864
"Forms": "表单",
875-
"Go to page": "转到页面",
876865
"Hide Filters": "隐藏过滤器",
877866
"Hide referencing tables": "隐藏引用的表",
878867
"Home": "主页",
@@ -954,7 +943,6 @@
954943
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "對於具有時區的時間戳記，將會顯示於此時區所對應的時間。",
955944
"Form submitted": "表單已提交",
956945
"Forms": "表單",
957-
"Go to page": "跳轉頁面",
958946
"Hide Filters": "隱藏篩選器",
959947
"Hide referencing tables": "隱藏引用的表格",
960948
"Home": "首頁",
@@ -1036,7 +1024,6 @@
10361024
"Form submitted": "Form gönderildi",
10371025
"Forms": "Formlar",
10381026
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "Zaman dilimine duyarlı zaman damgaları varsayılan olarak bu zaman diliminde görüntülenecektir.",
1039-
"Go to page": "Sayfaya git",
10401027
"Hide Filters": "Filtreleri Gizle",
10411028
"Hide referencing tables": "Referans tablolarını gizle",
10421029
"Home": "Ana Sayfa",
@@ -1118,7 +1105,6 @@
11181105
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "برای مهرهای زمانی دارای اطلاعات منطقه زمانی، به‌طور پیش‌فرض در این منطقه زمانی نمایش داده می‌شوند.",
11191106
"Form submitted": "فرم ارسال شد",
11201107
"Forms": "فرم‌ها",
1121-
"Go to page": "رفتن به صفحه",
11221108
"Hide Filters": "پنهان کردن فیلترها",
11231109
"Hide referencing tables": "پنهان کردن جدول‌های مرتبط",
11241110
"Home": "خانه",
@@ -1200,7 +1186,6 @@
12001186
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "I timestamp che tengono conto del fuso orario verranno visualizzati in questo fuso orario di default.",
12011187
"Form submitted": "Modulo inviato",
12021188
"Forms": "Moduli",
1203-
"Go to page": "Vai alla pagina",
12041189
"Hide Filters": "Nascondi filtri",
12051190
"Hide referencing tables": "Nascondi tabelle di riferimento",
12061191
"Home": "Home",
@@ -1279,11 +1264,9 @@
12791264
"Edit": "Szerkesztés",
12801265
"Export CSV": "CSV exportálása",
12811266
"Filter": "Szűrés",
1282-
"For timestamps which are timezone aware, they will be displayed in this timezone by default.":
1283-
"Az időzóna-érzékeny időbélyegek alapértelmezés szerint ebben az időzónában jelennek meg.",
1267+
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "Az időzóna-érzékeny időbélyegek alapértelmezés szerint ebben az időzónában jelennek meg.",
12841268
"Form submitted": "Űrlap elküldve",
12851269
"Forms": "Űrlapok",
1286-
"Go to page": "Ugrás az oldalra",
12871270
"Hide Filters": "Szűrők elrejtése",
12881271
"Hide referencing tables": "Hivatkozó táblák elrejtése",
12891272
"Home": "Főoldal",
@@ -1300,10 +1283,8 @@
13001283
"New password": "Új jelszó",
13011284
"New value": "Új érték",
13021285
"No results found": "Nincs találat",
1303-
"Note: Large data sets may take a while.":
1304-
"Megjegyzés: Nagy adathalmazok feldolgozása eltarthat egy ideig.",
1305-
"Note: They are converted to UTC when stored in the database.":
1306-
"Megjegyzés: Az adatbázisban UTC időzónára vannak konvertálva.",
1286+
"Note: Large data sets may take a while.": "Megjegyzés: Nagy adathalmazok feldolgozása eltarthat egy ideig.",
1287+
"Note: They are converted to UTC when stored in the database.": "Megjegyzés: Az adatbázisban UTC időzónára vannak konvertálva.",
13071288
"of": "/",
13081289
"page": "oldal",
13091290
"Password": "Jelszó",
@@ -1313,8 +1294,7 @@
13131294
"Seconds": "Másodpercek",
13141295
"Select a column to update": "Válasszon egy frissítendő oszlopot",
13151296
"Select a Column": "Oszlop kiválasztása",
1316-
"Select a table in the sidebar to get started.":
1317-
"A kezdéshez válasszon egy táblát az oldalsávban.",
1297+
"Select a table in the sidebar to get started.": "A kezdéshez válasszon egy táblát az oldalsávban.",
13181298
"selected result(s) on": "kiválasztott találat itt:",
13191299
"Semicolon": "Pontosvessző",
13201300
"Set Timezone": "Időzóna beállítása",
@@ -1334,7 +1314,7 @@
13341314
"Weeks": "Hetek",
13351315
"Welcome to": "Üdvözöljük itt:",
13361316
"with a matching": "egyező értékkel",
1337-
}
1317+
},
13381318
)
13391319

13401320
SLOVAK = Translation(
@@ -1365,11 +1345,9 @@
13651345
"Edit": "Upraviť",
13661346
"Export CSV": "Exportovať CSV",
13671347
"Filter": "Filter",
1368-
"For timestamps which are timezone aware, they will be displayed in this timezone by default.":
1369-
"Časové značky s informáciou o časovom pásme sa predvolene zobrazujú v tomto časovom pásme.",
1348+
"For timestamps which are timezone aware, they will be displayed in this timezone by default.": "Časové značky s informáciou o časovom pásme sa predvolene zobrazujú v tomto časovom pásme.",
13701349
"Form submitted": "Formulár odoslaný",
13711350
"Forms": "Formuláre",
1372-
"Go to page": "Prejsť na stránku",
13731351
"Hide Filters": "Skryť filtre",
13741352
"Hide referencing tables": "Skryť odkazujúce tabuľky",
13751353
"Home": "Domov",
@@ -1386,10 +1364,8 @@
13861364
"New password": "Nové heslo",
13871365
"New value": "Nová hodnota",
13881366
"No results found": "Neboli nájdené žiadne výsledky",
1389-
"Note: Large data sets may take a while.":
1390-
"Poznámka: Spracovanie veľkých dátových súborov môže chvíľu trvať.",
1391-
"Note: They are converted to UTC when stored in the database.":
1392-
"Poznámka: Pri ukladaní do databázy sa konvertujú na UTC.",
1367+
"Note: Large data sets may take a while.": "Poznámka: Spracovanie veľkých dátových súborov môže chvíľu trvať.",
1368+
"Note: They are converted to UTC when stored in the database.": "Poznámka: Pri ukladaní do databázy sa konvertujú na UTC.",
13931369
"of": "z",
13941370
"page": "strana",
13951371
"Password": "Heslo",
@@ -1399,8 +1375,7 @@
13991375
"Seconds": "Sekundy",
14001376
"Select a column to update": "Vyberte stĺpec na aktualizáciu",
14011377
"Select a Column": "Vybrať stĺpec",
1402-
"Select a table in the sidebar to get started.":
1403-
"Ak chcete začať, vyberte tabuľku na bočnom paneli.",
1378+
"Select a table in the sidebar to get started.": "Ak chcete začať, vyberte tabuľku na bočnom paneli.",
14041379
"selected result(s) on": "vybrané výsledky na",
14051380
"Semicolon": "Bodkočiarka",
14061381
"Set Timezone": "Nastaviť časové pásmo",
@@ -1420,7 +1395,7 @@
14201395
"Weeks": "Týždne",
14211396
"Welcome to": "Vitajte v",
14221397
"with a matching": "so zhodou",
1423-
}
1398+
},
14241399
)
14251400

14261401
TRANSLATIONS: list[Translation] = [

0 commit comments

Comments
 (0)