External/oott
1
0
Fork 0
mirror of https://github.com/rzuasti/oott.git synced 2026-07-08 19:21:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add "go to last page" and page count to notifications and devices lists

Browse Source 
The list endpoints now return a total count alongside the page so the
front-end can show how many pages exist and offer a last-page jump.

Backend: add count(is_new) and count_devices(...) (sharing a WHERE-builder
with list_devices so page and count can't drift), wrap both list responses
in {items, total_count} structs, and register them with utoipa.

Front-end: parse the wrapper shape (dropping the fetch-one-extra trick),
add a Last-page button and a responsive "Page X of Y" / "X / Y" label to
the shared PaginationBar, and track the total in both lists. Notifications
re-sync the count on every fetch and decrement it locally on mark-read/
unread removals so the count stays accurate without a re-fetch.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
rzuasti
2026-06-05 21:09:25 -04:00
co-authored by Claude Opus 4.8
parent 3cb104e364
commit 844d7d189c
21 changed files with 765 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/lib/devices/device_list.dart
+7 -4
View File
@@ -46,7 +46,9 @@ class _DeviceListState extends State<DeviceList> with RouteAware {
bool _sortAscending = false;
int _currentPage = 0;
bool _hasNextPage = false;
// Total devices matching the current filters, used to show how many pages
// exist and to offer "go to last page".
int _totalCount = 0;
bool _didInitialFetch = false;
CancelToken? _fetchToken;
final ScrollController _scrollController = ScrollController();
@@ -54,6 +56,7 @@ class _DeviceListState extends State<DeviceList> with RouteAware {
int get _pageSize => MediaQuery.sizeOf(context).width < Breakpoints.medium
? _phonePageSize
: _widePageSize;
int get _totalPages => (_totalCount / _pageSize).ceil().clamp(1, 1 << 30);
@override
void initState() {
@@ -145,7 +148,7 @@ class _DeviceListState extends State<DeviceList> with RouteAware {
if (!mounted || token != _fetchToken) return;
setState(() {
_currentPage = page;
_hasNextPage = result.hasNextPage;
_totalCount = result.totalCount;
_devices = result.items;
_isLoading = false;
_isPaging = false;
@@ -349,11 +352,11 @@ class _DeviceListState extends State<DeviceList> with RouteAware {
separatorBuilder: (_, _) =>
isWide ? const Divider(height: 1) : const SizedBox.shrink(),
),
if (_currentPage > 0 || _hasNextPage)
if (_currentPage > 0 || _totalPages > 1)
SliverToBoxAdapter(
child: PaginationBar(
currentPage: _currentPage,
hasNextPage: _hasNextPage,
totalPages: _totalPages,
isLoading: _isPaging,
onPageChanged: (page) =>
_fetchPage(page, scrollToTop: true, paging: true),
frontend/lib/home/notifications_list.dart
+15 -7
View File
@@ -73,7 +73,10 @@ class _NotificationsListState extends State<NotificationsList>
int get _pageSize => MediaQuery.sizeOf(context).width < Breakpoints.medium
? _phonePageSize
: _widePageSize;
bool _hasNextPage = false;
// Total notifications matching the current filter, used to show how many pages
// exist and to offer "go to last page".
int _totalCount = 0;
int get _totalPages => (_totalCount / _pageSize).ceil().clamp(1, 1 << 30);
String? _error;
CancelToken? _fetchToken;
final ScrollController _scrollController = ScrollController();
@@ -189,7 +192,7 @@ class _NotificationsListState extends State<NotificationsList>
// without setState here; _reconcile schedules the rebuild itself so it
// can defer swapping in the empty state until exit animations finish.
_currentPage = page;
_hasNextPage = result.hasNextPage;
_totalCount = result.totalCount;
_isLoading = false;
_isPaging = false;
_reconcile(result.items);
@@ -200,7 +203,7 @@ class _NotificationsListState extends State<NotificationsList>
setState(() {
_listKey = GlobalKey();
_currentPage = page;
_hasNextPage = result.hasNextPage;
_totalCount = result.totalCount;
_items = result.items;
_isLoading = false;
_isPaging = false;
@@ -293,10 +296,15 @@ class _NotificationsListState extends State<NotificationsList>
);
}
/// Removes an item in response to a card action, then refreshes the
/// surrounding chrome (header button, pagination, empty state).
/// Removes an item in response to a card action (swipe or mark read/unread
/// that drops it from the current filter), then refreshes the surrounding
/// chrome (header button, pagination, empty state). The total is decremented
/// locally so the page count stays accurate without re-fetching; background
/// refreshes re-sync it from the backend. Removals driven by [_reconcile] use
/// [_removeItem] directly so they don't double-count against a fresh total.
void _removeAndSettle(int id, {required bool animated}) {
_removeItem(id, animated: animated);
if (_totalCount > 0) _totalCount--;
_afterStructuralChange();
}
@@ -436,11 +444,11 @@ class _NotificationsListState extends State<NotificationsList>
}
return [
_buildNotificationSliver(),
if (_currentPage > 0 || _hasNextPage)
if (_currentPage > 0 || _totalPages > 1)
SliverToBoxAdapter(
child: PaginationBar(
currentPage: _currentPage,
hasNextPage: _hasNextPage,
totalPages: _totalPages,
isLoading: _isPaging,
onPageChanged: (page) =>
_fetchPage(page, scrollToTop: true, paging: true),
frontend/lib/utils/api/oott_api_devices.dart
+3 -4
View File
@@ -5,7 +5,7 @@ extension DeviceApi on BackendAPI {
Future<Device> getDevice(String macAddress) =>
_getModel('/devices/$macAddress', Device.fromJson);
Future<({List<Device> items, bool hasNextPage})> listDevices({
Future<({List<Device> items, int totalCount})> listDevices({
bool? isRegistered,
String? owner,
DeviceType? deviceType,
@@ -28,7 +28,7 @@ extension DeviceApi on BackendAPI {
params['sort_order'] = sortAscending ? 'asc' : 'desc';
}
params['page_offset'] = page * perPage;
params['page_limit'] = perPage + 1;
params['page_limit'] = perPage;
final response = await _dio.get(
'/devices',
@@ -37,9 +37,8 @@ extension DeviceApi on BackendAPI {
);
return _paginate(
response.data as List,
response.data as Map<String, dynamic>,
(item) => Device.fromJson(item as Map<String, dynamic>),
perPage,
);
}
frontend/lib/utils/api/oott_api_notifications.dart
+3 -4
View File
@@ -14,7 +14,7 @@ extension NotificationApi on BackendAPI {
await _dio.post('/notifications/mark_all_as_old');
}
Future<({List<Notification> items, bool hasNextPage})> listNotifications(
Future<({List<Notification> items, int totalCount})> listNotifications(
bool? isNew, {
int page = 0,
int perPage = 5,
@@ -25,15 +25,14 @@ extension NotificationApi on BackendAPI {
queryParameters: {
'is_new': isNew ?? '',
'page_offset': page * perPage,
'page_limit': perPage + 1,
'page_limit': perPage,
},
cancelToken: cancelToken,
);
return _paginate(
response.data as List<dynamic>,
response.data as Map<String, dynamic>,
(item) => Notification.fromJson(item),
perPage,
);
}
}
frontend/lib/utils/oott_api.dart
+8 -12
View File
@@ -87,19 +87,15 @@ class BackendAPI {
return fromJson(response.data as Map<String, dynamic>);
}
/// Splits a "fetch one extra item" page into its items and a [hasNextPage]
/// flag. Callers request `perPage + 1` items so a full extra item signals
/// that another page exists.
({List<T> items, bool hasNextPage}) _paginate<T>(
List<dynamic> data,
/// Decodes a paged list response of the shape `{items: [...], total_count: N}`
/// into the page's items and the total number of rows matching the request's
/// filters. The total lets callers report how many pages exist and offer a
/// "go to last page" control.
({List<T> items, int totalCount}) _paginate<T>(
Map<String, dynamic> data,
T Function(dynamic) fromItem,
int perPage,
) {
final results = data.map(fromItem).toList();
final hasNextPage = results.length > perPage;
return (
items: hasNextPage ? results.take(perPage).toList() : results,
hasNextPage: hasNextPage,
);
final items = (data['items'] as List<dynamic>).map(fromItem).toList();
return (items: items, totalCount: data['total_count'] as int);
}
}
frontend/lib/widgets/pagination_bar.dart
+19 -7
View File
@@ -1,23 +1,32 @@
import 'package:flutter/material.dart';
import '../theme/dimens.dart';
class PaginationBar extends StatelessWidget {
const PaginationBar({
super.key,
required this.currentPage,
required this.hasNextPage,
required this.totalPages,
required this.isLoading,
required this.onPageChanged,
});
final int currentPage;
final bool hasNextPage;
final int totalPages;
final bool isLoading;
final ValueChanged<int> onPageChanged;
@override
Widget build(BuildContext context) {
final lastPage = totalPages - 1;
final canGoBack = currentPage > 0 && !isLoading;
final canGoForward = hasNextPage && !isLoading;
final canGoForward = currentPage < lastPage && !isLoading;
// Phones don't have room for the verbose label, so they get the compact
// "X / Y" form; wider layouts spell it out.
final isWide = MediaQuery.sizeOf(context).width >= Breakpoints.medium;
final label = isWide
? 'Page ${currentPage + 1} of $totalPages'
: '${currentPage + 1} / $totalPages';
// While a page change is in flight the buttons disable so the tap reads as
// registered and double-taps are blocked; the progress cue itself is drawn
// by the app shell at the bottom of the page body.
@@ -39,10 +48,7 @@ class PaginationBar extends StatelessWidget {
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Text(
'Page ${currentPage + 1}',
style: Theme.of(context).textTheme.bodyMedium,
),
child: Text(label, style: Theme.of(context).textTheme.bodyMedium),
),
IconButton.outlined(
onPressed: canGoForward
@@ -51,6 +57,12 @@ class PaginationBar extends StatelessWidget {
icon: const Icon(Icons.chevron_right),
tooltip: 'Next page',
),
const SizedBox(width: 8),
IconButton.outlined(
onPressed: canGoForward ? () => onPageChanged(lastPage) : null,
icon: const Icon(Icons.last_page),
tooltip: 'Last page',
),
],
),
);
frontend/test/api/devices_api_test.dart
+47 -45
View File
@@ -35,60 +35,62 @@ void main() {
expect(summary.totalRegistered, 7);
});
test('listDevices sends filter + pagination params and trims extra item',
() async {
adapter.onGet(
'/devices',
(server) => server.reply(200, [
deviceJson(macAddress: '00:00:00:00:00:01'),
deviceJson(macAddress: '00:00:00:00:00:02'),
deviceJson(macAddress: '00:00:00:00:00:03'),
]),
queryParameters: {
'is_registered': false,
'device_type': 'laptop',
'sort_by': 'last_seen',
'sort_order': 'asc',
'page_offset': 0,
'page_limit': 3,
},
);
test(
'listDevices sends filter + pagination params and reports the total',
() async {
adapter.onGet(
'/devices',
(server) => server.reply(
200,
pagedListJson([
deviceJson(macAddress: '00:00:00:00:00:01'),
deviceJson(macAddress: '00:00:00:00:00:02'),
], totalCount: 12),
),
queryParameters: {
'is_registered': false,
'device_type': 'laptop',
'sort_by': 'last_seen',
'sort_order': 'asc',
'page_offset': 0,
'page_limit': 2,
},
);
final result = await BackendAPI.instance.listDevices(
isRegistered: false,
deviceType: DeviceType.laptop,
sortBy: 'last_seen',
sortAscending: true,
page: 0,
perPage: 2,
);
final result = await BackendAPI.instance.listDevices(
isRegistered: false,
deviceType: DeviceType.laptop,
sortBy: 'last_seen',
sortAscending: true,
page: 0,
perPage: 2,
);
expect(result.items, hasLength(2));
expect(result.hasNextPage, isTrue);
});
expect(result.items, hasLength(2));
expect(result.totalCount, 12);
},
);
test('listDevices reports no next page when fewer than perPage+1 returned',
() async {
adapter.onGet(
'/devices',
(server) => server.reply(200, [deviceJson()]),
);
test(
'listDevices reports the total when a single page is returned',
() async {
adapter.onGet(
'/devices',
(server) => server.reply(200, pagedListJson([deviceJson()])),
);
final result = await BackendAPI.instance.listDevices(perPage: 2);
final result = await BackendAPI.instance.listDevices(perPage: 2);
expect(result.items, hasLength(1));
expect(result.hasNextPage, isFalse);
});
expect(result.items, hasLength(1));
expect(result.totalCount, 1);
},
);
test('listDevices maps the unknown device type to an empty filter', () async {
adapter.onGet(
'/devices',
(server) => server.reply(200, <dynamic>[]),
queryParameters: {
'device_type': '',
'page_offset': 0,
'page_limit': 11,
},
(server) => server.reply(200, pagedListJson([])),
queryParameters: {'device_type': '', 'page_offset': 0, 'page_limit': 10},
);
final result = await BackendAPI.instance.listDevices(
frontend/test/api/notifications_api_test.dart
+41 -46
View File
@@ -13,10 +13,7 @@ void main() {
});
test('markNotificationAsRead GETs the notification path', () async {
adapter.onGet(
'/notifications/7',
(server) => server.reply(200, null),
);
adapter.onGet('/notifications/7', (server) => server.reply(200, null));
await BackendAPI.instance.markNotificationAsRead(7);
});
@@ -39,51 +36,49 @@ void main() {
await BackendAPI.instance.markAllNotificationsAsRead();
});
test('listNotifications sends is_new + pagination and trims extra item',
() async {
adapter.onGet(
'/notifications',
(server) => server.reply(200, [
notificationJson(id: 1),
notificationJson(id: 2),
notificationJson(id: 3),
]),
queryParameters: {
'is_new': true,
'page_offset': 0,
'page_limit': 3,
},
);
test(
'listNotifications sends is_new + pagination and reports the total',
() async {
adapter.onGet(
'/notifications',
(server) => server.reply(
200,
pagedListJson([
notificationJson(id: 1),
notificationJson(id: 2),
], totalCount: 9),
),
queryParameters: {'is_new': true, 'page_offset': 0, 'page_limit': 2},
);
final result = await BackendAPI.instance.listNotifications(
true,
page: 0,
perPage: 2,
);
final result = await BackendAPI.instance.listNotifications(
true,
page: 0,
perPage: 2,
);
expect(result.items, hasLength(2));
expect(result.hasNextPage, isTrue);
});
expect(result.items, hasLength(2));
expect(result.totalCount, 9);
},
);
test('listNotifications maps a null filter to an empty is_new param',
() async {
adapter.onGet(
'/notifications',
(server) => server.reply(200, <dynamic>[]),
queryParameters: {
'is_new': '',
'page_offset': 10,
'page_limit': 6,
},
);
test(
'listNotifications maps a null filter to an empty is_new param',
() async {
adapter.onGet(
'/notifications',
(server) => server.reply(200, pagedListJson([])),
queryParameters: {'is_new': '', 'page_offset': 10, 'page_limit': 5},
);
final result = await BackendAPI.instance.listNotifications(
null,
page: 2,
perPage: 5,
);
final result = await BackendAPI.instance.listNotifications(
null,
page: 2,
perPage: 5,
);
expect(result.items, isEmpty);
expect(result.hasNextPage, isFalse);
});
expect(result.items, isEmpty);
expect(result.totalCount, 0);
},
);
}
frontend/test/helpers/fixtures.dart
+8
View File
@@ -74,6 +74,14 @@ Map<String, dynamic> notificationJson({
'mac_address': macAddress,
};
/// Wraps a page of items in the paged-list response shape the list endpoints
/// return: `{items: [...], total_count: N}`. [totalCount] defaults to the page
/// length, so single-page stubs stay terse; pass it to simulate more pages.
Map<String, dynamic> pagedListJson(
List<Map<String, dynamic>> items, {
int? totalCount,
}) => {'items': items, 'total_count': totalCount ?? items.length};
/// Shape shared by the ARP and SNMP scanners (run-on-interval scanners).
Map<String, dynamic> intervalScannerJson({
bool isRunning = false,
frontend/test/widget/device_list_test.dart
+87 -23
View File
@@ -18,10 +18,13 @@ void main() {
testWidgets('renders device rows after loading', (tester) async {
adapter.onGet(
'/devices',
(server) => server.reply(200, [
deviceJson(macAddress: '00:00:00:00:00:01', owner: 'alice'),
deviceJson(macAddress: '00:00:00:00:00:02', owner: 'bob'),
]),
(server) => server.reply(
200,
pagedListJson([
deviceJson(macAddress: '00:00:00:00:00:01', owner: 'alice'),
deviceJson(macAddress: '00:00:00:00:00:02', owner: 'bob'),
]),
),
);
await pumpScreen(tester, const DeviceList());
@@ -35,7 +38,7 @@ void main() {
testWidgets('shows the empty message when there are no devices', (
tester,
) async {
adapter.onGet('/devices', (server) => server.reply(200, <dynamic>[]));
adapter.onGet('/devices', (server) => server.reply(200, pagedListJson([])));
await pumpScreen(tester, const DeviceList());
await pumpUntilFound(tester, find.text('No unregistered devices'));
@@ -63,16 +66,19 @@ void main() {
testWidgets('changing pages scrolls back to the top of the list', (
tester,
) async {
// 11 devices: a full page of 10 plus one, so the pagination bar appears.
// A total of 11 across two pages of 10, so the pagination bar appears.
adapter.onGet(
'/devices',
(server) => server.reply(
200,
List.generate(
11,
(i) => deviceJson(
macAddress: '00:00:00:00:00:${i.toString().padLeft(2, '0')}',
pagedListJson(
List.generate(
10,
(i) => deviceJson(
macAddress: '00:00:00:00:00:${i.toString().padLeft(2, '0')}',
),
),
totalCount: 11,
),
),
);
@@ -107,29 +113,34 @@ void main() {
// Default ordering (last_seen, desc) returns two devices.
adapter.onGet(
'/devices',
(server) => server.reply(200, [
deviceJson(macAddress: '00:00:00:00:00:01'),
deviceJson(macAddress: '00:00:00:00:00:02'),
]),
(server) => server.reply(
200,
pagedListJson([
deviceJson(macAddress: '00:00:00:00:00:01'),
deviceJson(macAddress: '00:00:00:00:00:02'),
]),
),
queryParameters: {
'is_registered': false,
'sort_by': 'last_seen',
'sort_order': 'desc',
'page_offset': 0,
'page_limit': 11,
'page_limit': 10,
},
);
// Sorting by device type (asc) returns a single, distinguishable device.
adapter.onGet(
'/devices',
(server) =>
server.reply(200, [deviceJson(macAddress: '00:00:00:00:00:03')]),
(server) => server.reply(
200,
pagedListJson([deviceJson(macAddress: '00:00:00:00:00:03')]),
),
queryParameters: {
'is_registered': false,
'sort_by': 'device_type',
'sort_order': 'asc',
'page_offset': 0,
'page_limit': 11,
'page_limit': 10,
},
);
@@ -138,9 +149,11 @@ void main() {
expect(find.byType(DeviceRowWide), findsNWidgets(2));
await tester.tap(find.byTooltip('Sort by device type'));
for (var i = 0;
i < 40 && find.byType(DeviceRowWide).evaluate().length != 1;
i++) {
for (
var i = 0;
i < 40 && find.byType(DeviceRowWide).evaluate().length != 1;
i++
) {
await tester.pump(const Duration(milliseconds: 10));
}
expect(find.byType(DeviceRowWide), findsOneWidget);
@@ -149,7 +162,10 @@ void main() {
});
testWidgets('the sort sheet offers ordering by device type', (tester) async {
adapter.onGet('/devices', (server) => server.reply(200, [deviceJson()]));
adapter.onGet(
'/devices',
(server) => server.reply(200, pagedListJson([deviceJson()])),
);
// A phone-width viewport so the compact layout with the sort button shows.
await pumpScreen(tester, const DeviceList(), size: const Size(500, 900));
@@ -169,7 +185,10 @@ void main() {
final devices = <Map<String, dynamic>>[
deviceJson(macAddress: '00:00:00:00:00:01'),
];
adapter.onGet('/devices', (server) => server.reply(200, devices));
adapter.onGet(
'/devices',
(server) => server.reply(200, pagedListJson(devices)),
);
await pumpScreen(tester, const DeviceList());
await pumpUntilFound(tester, find.byType(DeviceRowWide));
@@ -188,4 +207,49 @@ void main() {
await tearDownTree(tester);
});
testWidgets('the last-page button jumps to the final page', (tester) async {
// Wide viewport → page size 10. A total of 25 spans three pages.
List<Map<String, dynamic>> page(int first, int count) => List.generate(
count,
(i) => deviceJson(
macAddress: '00:00:00:00:00:${(first + i).toString().padLeft(2, '0')}',
),
);
adapter.onGet(
'/devices',
(server) => server.reply(200, pagedListJson(page(0, 10), totalCount: 25)),
queryParameters: {
'is_registered': false,
'sort_by': 'last_seen',
'sort_order': 'desc',
'page_offset': 0,
'page_limit': 10,
},
);
adapter.onGet(
'/devices',
(server) => server.reply(200, pagedListJson(page(20, 5), totalCount: 25)),
queryParameters: {
'is_registered': false,
'sort_by': 'last_seen',
'sort_order': 'desc',
'page_offset': 20,
'page_limit': 10,
},
);
// A tall viewport so the full page of rows and the pagination bar are all
// on screen at once (no scrolling needed to reach the last-page button).
await pumpScreen(tester, const DeviceList(), size: const Size(900, 2000));
await pumpUntilFound(tester, find.byType(DeviceRowWide));
expect(find.text('Page 1 of 3'), findsOneWidget);
await tester.tap(find.byTooltip('Last page'));
await pumpUntilFound(tester, find.text('Page 3 of 3'));
expect(find.text('Page 3 of 3'), findsOneWidget);
await tearDownTree(tester);
});
}
frontend/test/widget/home_screen_test.dart
+7 -5
View File
@@ -17,9 +17,10 @@ void main() {
void stubHomeEndpoints() {
adapter.onGet(
'/notifications',
(server) => server.reply(200, [
notificationJson(id: 1, title: 'New device found'),
]),
(server) => server.reply(
200,
pagedListJson([notificationJson(id: 1, title: 'New device found')]),
),
);
adapter.onGet(
'/devices/summary',
@@ -47,8 +48,9 @@ void main() {
);
}
testWidgets('shows notifications, the device summary and scanner statuses',
(tester) async {
testWidgets('shows notifications, the device summary and scanner statuses', (
tester,
) async {
stubHomeEndpoints();
// Below the 700px breakpoint the home screen uses its single-column layout,
frontend/test/widget/notifications_list_test.dart
+130 -35
View File
@@ -20,11 +20,14 @@ void main() {
(tester) async {
adapter.onGet(
'/notifications',
(server) => server.reply(200, [
notificationJson(id: 1, title: 'First', body: 'First body'),
notificationJson(id: 2, title: 'Second', body: 'Second body'),
]),
queryParameters: {'is_new': true, 'page_offset': 0, 'page_limit': 6},
(server) => server.reply(
200,
pagedListJson([
notificationJson(id: 1, title: 'First', body: 'First body'),
notificationJson(id: 2, title: 'Second', body: 'Second body'),
]),
),
queryParameters: {'is_new': true, 'page_offset': 0, 'page_limit': 5},
);
adapter.onGet('/notifications/1', (server) => server.reply(200, null));
@@ -64,20 +67,20 @@ void main() {
addTearDown(tester.view.resetPhysicalSize);
// The 400px-wide viewport above is a phone, so the list uses the smaller
// phone page size of 4 (requesting page_limit 5 to detect a next page).
// phone page size of 4. A total of 8 spans two pages.
List<Map<String, dynamic>> page(int firstId) => List.generate(
5,
4,
(i) => notificationJson(id: firstId + i, title: 'Item ${firstId + i}'),
);
adapter.onGet(
'/notifications',
(server) => server.reply(200, page(1)),
queryParameters: {'is_new': true, 'page_offset': 0, 'page_limit': 5},
(server) => server.reply(200, pagedListJson(page(1), totalCount: 8)),
queryParameters: {'is_new': true, 'page_offset': 0, 'page_limit': 4},
);
adapter.onGet(
'/notifications',
(server) => server.reply(200, page(6)),
queryParameters: {'is_new': true, 'page_offset': 4, 'page_limit': 5},
(server) => server.reply(200, pagedListJson(page(5), totalCount: 8)),
queryParameters: {'is_new': true, 'page_offset': 4, 'page_limit': 4},
);
await tester.pumpWidget(
@@ -100,10 +103,11 @@ void main() {
await tester.pumpAndSettle();
expect(position().pixels, greaterThan(0));
// Advance a page: the list should jump back to the top.
// Advance a page: the list should jump back to the top, showing page two's
// first item (id 5).
await tester.tap(find.byTooltip('Next page'));
await tester.pumpAndSettle();
expect(find.textContaining('Item 7'), findsWidgets);
expect(find.textContaining('Item 5'), findsWidgets);
expect(position().pixels, 0);
await tester.pumpWidget(const SizedBox());
@@ -121,8 +125,8 @@ void main() {
];
adapter.onGet(
'/notifications',
(server) => server.reply(200, items),
queryParameters: {'is_new': true, 'page_offset': 0, 'page_limit': 5},
(server) => server.reply(200, pagedListJson(items)),
queryParameters: {'is_new': true, 'page_offset': 0, 'page_limit': 4},
);
await tester.pumpWidget(
@@ -156,11 +160,14 @@ void main() {
) async {
adapter.onGet(
'/notifications',
(server) => server.reply(200, [
notificationJson(id: 1, title: 'First'),
notificationJson(id: 2, title: 'Second'),
]),
queryParameters: {'is_new': true, 'page_offset': 0, 'page_limit': 6},
(server) => server.reply(
200,
pagedListJson([
notificationJson(id: 1, title: 'First'),
notificationJson(id: 2, title: 'Second'),
]),
),
queryParameters: {'is_new': true, 'page_offset': 0, 'page_limit': 5},
);
adapter.onGet('/notifications/1', (server) => server.reply(200, null));
@@ -208,8 +215,8 @@ void main() {
];
adapter.onGet(
'/notifications',
(server) => server.reply(200, items),
queryParameters: {'is_new': true, 'page_offset': 0, 'page_limit': 5},
(server) => server.reply(200, pagedListJson(items)),
queryParameters: {'is_new': true, 'page_offset': 0, 'page_limit': 4},
);
await tester.pumpWidget(
@@ -262,8 +269,8 @@ void main() {
];
adapter.onGet(
'/notifications',
(server) => server.reply(200, items),
queryParameters: {'is_new': true, 'page_offset': 0, 'page_limit': 5},
(server) => server.reply(200, pagedListJson(items)),
queryParameters: {'is_new': true, 'page_offset': 0, 'page_limit': 4},
);
await tester.pumpWidget(
@@ -295,13 +302,19 @@ void main() {
) async {
adapter.onGet(
'/notifications',
(server) => server.reply(200, [notificationJson(id: 1, title: 'Kept')]),
queryParameters: {'is_new': true, 'page_offset': 0, 'page_limit': 6},
(server) => server.reply(
200,
pagedListJson([notificationJson(id: 1, title: 'Kept')]),
),
queryParameters: {'is_new': true, 'page_offset': 0, 'page_limit': 5},
);
adapter.onGet(
'/notifications',
(server) => server.reply(200, [notificationJson(id: 1, title: 'Kept')]),
queryParameters: {'is_new': '', 'page_offset': 0, 'page_limit': 6},
(server) => server.reply(
200,
pagedListJson([notificationJson(id: 1, title: 'Kept')]),
),
queryParameters: {'is_new': '', 'page_offset': 0, 'page_limit': 5},
);
adapter.onGet('/notifications/1', (server) => server.reply(200, null));
@@ -336,16 +349,21 @@ void main() {
) async {
adapter.onGet(
'/notifications',
(server) =>
server.reply(200, [notificationJson(id: 1, title: 'New one')]),
queryParameters: {'is_new': true, 'page_offset': 0, 'page_limit': 6},
(server) => server.reply(
200,
pagedListJson([notificationJson(id: 1, title: 'New one')]),
),
queryParameters: {'is_new': true, 'page_offset': 0, 'page_limit': 5},
);
adapter.onGet(
'/notifications',
(server) => server.reply(200, [
notificationJson(id: 2, title: 'Old one', isNew: false),
]),
queryParameters: {'is_new': false, 'page_offset': 0, 'page_limit': 6},
(server) => server.reply(
200,
pagedListJson([
notificationJson(id: 2, title: 'Old one', isNew: false),
]),
),
queryParameters: {'is_new': false, 'page_offset': 0, 'page_limit': 5},
);
await tester.pumpWidget(
@@ -365,4 +383,81 @@ void main() {
await tester.pumpWidget(const SizedBox());
});
testWidgets('the last-page button jumps to the final page', (tester) async {
// Wide default surface → page size 5. A total of 12 spans three pages.
List<Map<String, dynamic>> page(int firstId, int count) => List.generate(
count,
(i) => notificationJson(id: firstId + i, title: 'Item ${firstId + i}'),
);
adapter.onGet(
'/notifications',
(server) => server.reply(200, pagedListJson(page(1, 5), totalCount: 12)),
queryParameters: {'is_new': true, 'page_offset': 0, 'page_limit': 5},
);
adapter.onGet(
'/notifications',
(server) => server.reply(200, pagedListJson(page(11, 2), totalCount: 12)),
queryParameters: {'is_new': true, 'page_offset': 10, 'page_limit': 5},
);
await tester.pumpWidget(
MaterialApp(
theme: gruvboxDarkTheme,
home: const Scaffold(body: NotificationsList()),
),
);
await tester.pumpAndSettle();
expect(find.text('Page 1 of 3'), findsOneWidget);
await tester.tap(find.byTooltip('Last page'));
await tester.pumpAndSettle();
expect(find.text('Page 3 of 3'), findsOneWidget);
expect(find.textContaining('Item 11'), findsWidgets);
await tester.pumpWidget(const SizedBox());
});
testWidgets('marking read under "New" decrements the page total', (
tester,
) async {
// Wide default surface → page size 5. A total of 11 spans three pages;
// dropping one locally should leave ten, i.e. two pages.
adapter.onGet(
'/notifications',
(server) => server.reply(
200,
pagedListJson(
List.generate(
5,
(i) => notificationJson(id: i + 1, title: 'Item ${i + 1}'),
),
totalCount: 11,
),
),
queryParameters: {'is_new': true, 'page_offset': 0, 'page_limit': 5},
);
adapter.onGet('/notifications/1', (server) => server.reply(200, null));
await tester.pumpWidget(
MaterialApp(
theme: gruvboxDarkTheme,
home: const Scaffold(body: NotificationsList()),
),
);
await tester.pumpAndSettle();
expect(find.text('Page 1 of 3'), findsOneWidget);
// Mark the first item read; under "New" it leaves the list and the total
// drops by one without a re-fetch.
await tester.tap(find.byType(ListTile).first);
await tester.pumpAndSettle();
await tester.tap(find.text('Mark as read'));
await tester.pumpAndSettle();
expect(find.text('Page 1 of 2'), findsOneWidget);
await tester.pumpWidget(const SizedBox());
});
}
frontend/test/widget/pagination_bar_test.dart
+79 -5
View File
@@ -1,12 +1,16 @@
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:frontend/theme/dimens.dart';
import 'package:frontend/theme/gruvbox_theme.dart';
import 'package:frontend/widgets/pagination_bar.dart';
void main() {
Widget wrap(Widget child) => MaterialApp(
theme: gruvboxDarkTheme,
home: Scaffold(body: child),
Widget wrap(Widget child, {Size? size}) => MediaQuery(
data: MediaQueryData(size: size ?? const Size(1200, 800)),
child: MaterialApp(
theme: gruvboxDarkTheme,
home: Scaffold(body: child),
),
);
testWidgets('disables every navigation button while loading', (tester) async {
@@ -15,7 +19,7 @@ void main() {
wrap(
PaginationBar(
currentPage: 1,
hasNextPage: true,
totalPages: 3,
isLoading: true,
onPageChanged: (page) => changedTo = page,
),
@@ -25,6 +29,7 @@ void main() {
await tester.tap(find.byTooltip('Next page'));
await tester.tap(find.byTooltip('Previous page'));
await tester.tap(find.byTooltip('First page'));
await tester.tap(find.byTooltip('Last page'));
expect(changedTo, -1);
});
@@ -34,7 +39,7 @@ void main() {
wrap(
PaginationBar(
currentPage: 1,
hasNextPage: true,
totalPages: 3,
isLoading: false,
onPageChanged: (page) => changedTo = page,
),
@@ -47,4 +52,73 @@ void main() {
await tester.tap(find.byTooltip('Previous page'));
expect(changedTo, 0);
});
testWidgets('last-page button jumps to the final page', (tester) async {
var changedTo = -1;
await tester.pumpWidget(
wrap(
PaginationBar(
currentPage: 0,
totalPages: 5,
isLoading: false,
onPageChanged: (page) => changedTo = page,
),
),
);
await tester.tap(find.byTooltip('Last page'));
expect(changedTo, 4);
});
testWidgets('forward buttons disable on the last page', (tester) async {
var changedTo = -1;
await tester.pumpWidget(
wrap(
PaginationBar(
currentPage: 4,
totalPages: 5,
isLoading: false,
onPageChanged: (page) => changedTo = page,
),
),
);
await tester.tap(find.byTooltip('Next page'));
await tester.tap(find.byTooltip('Last page'));
expect(changedTo, -1);
});
testWidgets('spells out the page label on wide layouts', (tester) async {
await tester.pumpWidget(
wrap(
const PaginationBar(
currentPage: 1,
totalPages: 5,
isLoading: false,
onPageChanged: _noop,
),
size: const Size(1200, 800),
),
);
expect(find.text('Page 2 of 5'), findsOneWidget);
});
testWidgets('uses the compact page label on narrow layouts', (tester) async {
await tester.pumpWidget(
wrap(
const PaginationBar(
currentPage: 1,
totalPages: 5,
isLoading: false,
onPageChanged: _noop,
),
size: Size(Breakpoints.medium - 1, 800),
),
);
expect(find.text('2 / 5'), findsOneWidget);
});
}
void _noop(int _) {}