fix: Fix scrolling bug on inbox page

This commit is contained in:
Anton Stubenbord
2023-06-03 15:20:20 +02:00
parent d2b428c05b
commit 880695e04f
12 changed files with 427 additions and 331 deletions

View File

@@ -13,7 +13,8 @@ import 'package:paperless_mobile/features/paged_document_view/cubit/document_pag
part 'inbox_cubit.g.dart';
part 'inbox_state.dart';
class InboxCubit extends HydratedCubit<InboxState> with DocumentPagingBlocMixin {
class InboxCubit extends HydratedCubit<InboxState>
with DocumentPagingBlocMixin {
final LabelRepository _labelRepository;
final PaperlessDocumentsApi _documentsApi;
@@ -38,7 +39,10 @@ class InboxCubit extends HydratedCubit<InboxState> with DocumentPagingBlocMixin
this,
onDeleted: remove,
onUpdated: (document) {
if (document.tags.toSet().intersection(state.inboxTags.toSet()).isEmpty) {
if (document.tags
.toSet()
.intersection(state.inboxTags.toSet())
.isEmpty) {
remove(document);
emit(state.copyWith(itemsInInboxCount: state.itemsInInboxCount - 1));
} else {
@@ -139,7 +143,8 @@ class InboxCubit extends HydratedCubit<InboxState> with DocumentPagingBlocMixin
/// from the inbox.
///
Future<Iterable<int>> removeFromInbox(DocumentModel document) async {
final tagsToRemove = document.tags.toSet().intersection(state.inboxTags.toSet());
final tagsToRemove =
document.tags.toSet().intersection(state.inboxTags.toSet());
final updatedTags = {...document.tags}..removeAll(tagsToRemove);
final updatedDocument = await api.update(
@@ -193,8 +198,8 @@ class InboxCubit extends HydratedCubit<InboxState> with DocumentPagingBlocMixin
Future<void> assignAsn(DocumentModel document) async {
if (document.archiveSerialNumber == null) {
final int asn = await _documentsApi.findNextAsn();
final updatedDocument =
await _documentsApi.update(document.copyWith(archiveSerialNumber: () => asn));
final updatedDocument = await _documentsApi
.update(document.copyWith(archiveSerialNumber: () => asn));
replace(updatedDocument);
}

View File

@@ -15,7 +15,6 @@ import 'package:paperless_mobile/features/document_search/view/sliver_search_bar
import 'package:paperless_mobile/features/inbox/cubit/inbox_cubit.dart';
import 'package:paperless_mobile/features/inbox/view/widgets/inbox_empty_widget.dart';
import 'package:paperless_mobile/features/inbox/view/widgets/inbox_item.dart';
import 'package:paperless_mobile/features/inbox/view/widgets/inbox_list_loading_widget.dart';
import 'package:paperless_mobile/features/paged_document_view/view/document_paging_view_mixin.dart';
import 'package:paperless_mobile/generated/l10n/app_localizations.dart';
import 'package:paperless_mobile/helpers/message_helpers.dart';
@@ -27,18 +26,15 @@ class InboxPage extends StatefulWidget {
State<InboxPage> createState() => _InboxPageState();
}
class _InboxPageState extends State<InboxPage> with DocumentPagingViewMixin<InboxPage, InboxCubit> {
final SliverOverlapAbsorberHandle searchBarHandle = SliverOverlapAbsorberHandle();
class _InboxPageState extends State<InboxPage>
with DocumentPagingViewMixin<InboxPage, InboxCubit> {
final SliverOverlapAbsorberHandle searchBarHandle =
SliverOverlapAbsorberHandle();
@override
final pagingScrollController = ScrollController();
final _emptyStateRefreshIndicatorKey = GlobalKey<RefreshIndicatorState>();
@override
void initState() {
super.initState();
context.read<InboxCubit>().reloadInbox();
}
final _scrollController = ScrollController();
@override
Widget build(BuildContext context) {
@@ -63,98 +59,104 @@ class _InboxPageState extends State<InboxPage> with DocumentPagingViewMixin<Inbo
);
},
),
body: BlocBuilder<InboxCubit, InboxState>(
builder: (context, state) {
return SafeArea(
top: true,
child: NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) => [
SliverOverlapAbsorber(
handle: searchBarHandle,
sliver: const SliverSearchBar(),
)
],
body: Builder(
builder: (context) {
if (!state.hasLoaded) {
return const InboxListLoadingWidget();
} else if (state.documents.isEmpty) {
return Center(
child: InboxEmptyWidget(
emptyStateRefreshIndicatorKey: _emptyStateRefreshIndicatorKey,
body: SafeArea(
top: true,
child: NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) => [
SliverOverlapAbsorber(
handle: searchBarHandle,
sliver: const SliverSearchBar(),
)
],
body: BlocBuilder<InboxCubit, InboxState>(
builder: (_, state) {
if (state.documents.isEmpty && state.hasLoaded) {
return Center(
child: InboxEmptyWidget(
emptyStateRefreshIndicatorKey:
_emptyStateRefreshIndicatorKey,
),
);
} else if (state.isLoading) {
return ListView.builder(
padding: const EdgeInsets.only(top: 16, left: 16),
controller: _scrollController,
itemBuilder: (context, index) {
return const InboxItemPlaceholder();
},
);
} else {
return RefreshIndicator(
onRefresh: context.read<InboxCubit>().reload,
child: CustomScrollView(
controller: _scrollController,
slivers: [
SliverToBoxAdapter(
child: HintCard(
show: !state.isHintAcknowledged,
hintText:
S.of(context)!.swipeLeftToMarkADocumentAsSeen,
onHintAcknowledged: () =>
context.read<InboxCubit>().acknowledgeHint(),
),
),
);
} else {
return RefreshIndicator(
onRefresh: context.read<InboxCubit>().reload,
child: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: HintCard(
show: !state.isHintAcknowledged,
hintText: S.of(context)!.swipeLeftToMarkADocumentAsSeen,
onHintAcknowledged: () =>
context.read<InboxCubit>().acknowledgeHint(),
),
),
// Build a list of slivers alternating between SliverToBoxAdapter
// (group header) and a SliverList (inbox items).
..._groupByDate(state.documents)
.entries
.map(
(entry) => [
SliverToBoxAdapter(
child: Align(
alignment: Alignment.centerLeft,
child: ClipRRect(
borderRadius: BorderRadius.circular(32.0),
child: Text(
entry.key,
style: Theme.of(context).textTheme.bodySmall,
textAlign: TextAlign.center,
).padded(),
),
).paddedOnly(top: 8.0),
// Build a list of slivers alternating between SliverToBoxAdapter
// (group header) and a SliverList (inbox items).
..._groupByDate(state.documents)
.entries
.map(
(entry) => [
SliverToBoxAdapter(
child: Align(
alignment: Alignment.centerLeft,
child: ClipRRect(
borderRadius: BorderRadius.circular(32.0),
child: Text(
entry.key,
style:
Theme.of(context).textTheme.bodySmall,
textAlign: TextAlign.center,
).padded(),
),
SliverList(
delegate: SliverChildBuilderDelegate(
childCount: entry.value.length,
(context, index) {
if (index < entry.value.length - 1) {
return Column(
children: [
_buildListItem(
entry.value[index],
),
const Divider(
indent: 16,
endIndent: 16,
),
],
);
}
return _buildListItem(
entry.value[index],
);
},
),
),
],
)
.flattened
.toList(),
const SliverToBoxAdapter(
child: SizedBox(height: 78),
),
],
).paddedOnly(top: 8.0),
),
SliverList(
delegate: SliverChildBuilderDelegate(
childCount: entry.value.length,
(context, index) {
if (index < entry.value.length - 1) {
return Column(
children: [
_buildListItem(
entry.value[index],
),
const Divider(
indent: 16,
endIndent: 16,
),
],
);
}
return _buildListItem(
entry.value[index],
);
},
),
),
],
)
.flattened
.toList(),
const SliverToBoxAdapter(
child: SizedBox(height: 78),
),
);
}
},
),
),
);
},
],
),
);
}
},
),
),
),
);
}
@@ -239,7 +241,9 @@ class _InboxPageState extends State<InboxPage> with DocumentPagingViewMixin<Inbo
Iterable<int> removedTags,
) async {
try {
await context.read<InboxCubit>().undoRemoveFromInbox(document, removedTags);
await context
.read<InboxCubit>()
.undoRemoveFromInbox(document, removedTags);
} on PaperlessServerException catch (error, stackTrace) {
showErrorMessage(context, error, stackTrace);
}

View File

@@ -4,18 +4,130 @@ import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:paperless_api/paperless_api.dart';
import 'package:paperless_mobile/core/database/tables/local_user_account.dart';
import 'package:paperless_mobile/core/navigation/push_routes.dart';
import 'package:paperless_mobile/core/widgets/shimmer_placeholder.dart';
import 'package:paperless_mobile/core/workarounds/colored_chip.dart';
import 'package:paperless_mobile/extensions/flutter_extensions.dart';
import 'package:paperless_mobile/features/documents/view/widgets/delete_document_confirmation_dialog.dart';
import 'package:paperless_mobile/features/documents/view/widgets/document_preview.dart';
import 'package:paperless_mobile/features/documents/view/widgets/placeholder/tags_placeholder.dart';
import 'package:paperless_mobile/features/documents/view/widgets/placeholder/text_placeholder.dart';
import 'package:paperless_mobile/features/inbox/cubit/inbox_cubit.dart';
import 'package:paperless_mobile/features/labels/tags/view/widgets/tags_widget.dart';
import 'package:paperless_mobile/features/labels/view/widgets/label_text.dart';
import 'package:paperless_mobile/generated/l10n/app_localizations.dart';
class InboxItemPlaceholder extends StatelessWidget {
const InboxItemPlaceholder({super.key});
@override
Widget build(BuildContext context) {
return ShimmerPlaceholder(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const TextPlaceholder(length: 150, fontSize: 12),
const SizedBox(
height: 16,
),
SizedBox(
height: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 150,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: 120,
width: 90,
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: const ColoredBox(
color: Colors.white,
),
),
),
const SizedBox(width: 8),
const Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Spacer(),
TextPlaceholder(length: 200, fontSize: 14),
Spacer(),
TextPlaceholder(length: 120, fontSize: 14),
SizedBox(height: 8),
TextPlaceholder(length: 170, fontSize: 14),
Spacer(),
TagsPlaceholder(count: 3, dense: true),
Spacer(),
],
),
),
],
),
),
SizedBox(
height: 50,
child: IntrinsicHeight(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
physics: const NeverScrollableScrollPhysics(),
child: Row(
children: [
const SizedBox(
width: 50,
height: 40,
child: ColoredBox(
color: Colors.white,
),
).padded(),
const VerticalDivider(
indent: 12,
endIndent: 12,
),
SizedBox(
height: 40,
child: Row(
children: [
Container(
width: 150,
height: 48,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.white,
),
),
const SizedBox(width: 4),
Container(
width: 200,
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.white,
),
),
],
),
),
],
),
),
),
),
],
),
),
],
),
);
}
}
class InboxItem extends StatefulWidget {
static const a4AspectRatio = 1 / 1.4142;
final DocumentModel document;
const InboxItem({
super.key,
@@ -70,10 +182,14 @@ class _InboxItemState extends State<InboxItem> {
_buildTextWithLeadingIcon(
Icon(
Icons.person_outline,
size: Theme.of(context).textTheme.bodyMedium?.fontSize,
size: Theme.of(context)
.textTheme
.bodyMedium
?.fontSize,
),
LabelText<Correspondent>(
label: state.labels.correspondents[widget.document.correspondent],
label: state.labels.correspondents[
widget.document.correspondent],
style: Theme.of(context).textTheme.bodyMedium,
placeholder: "-",
),
@@ -81,10 +197,14 @@ class _InboxItemState extends State<InboxItem> {
_buildTextWithLeadingIcon(
Icon(
Icons.description_outlined,
size: Theme.of(context).textTheme.bodyMedium?.fontSize,
size: Theme.of(context)
.textTheme
.bodyMedium
?.fontSize,
),
LabelText<DocumentType>(
label: state.labels.documentTypes[widget.document.documentType],
label: state.labels.documentTypes[
widget.document.documentType],
style: Theme.of(context).textTheme.bodyMedium,
placeholder: "-",
),
@@ -139,8 +259,8 @@ class _InboxItemState extends State<InboxItem> {
onPressed: () async {
final shouldDelete = await showDialog<bool>(
context: context,
builder: (context) =>
DeleteDocumentConfirmationDialog(document: widget.document),
builder: (context) => DeleteDocumentConfirmationDialog(
document: widget.document),
) ??
false;
if (shouldDelete) {
@@ -217,7 +337,10 @@ class _InboxItemState extends State<InboxItem> {
_isAsnAssignLoading = true;
});
context.read<InboxCubit>().assignAsn(widget.document).whenComplete(
context
.read<InboxCubit>()
.assignAsn(widget.document)
.whenComplete(
() => setState(() => _isAsnAssignLoading = false),
);
}

View File

@@ -1,124 +0,0 @@
import 'package:flutter/material.dart';
import 'package:paperless_mobile/core/widgets/shimmer_placeholder.dart';
import 'package:paperless_mobile/extensions/flutter_extensions.dart';
import 'package:paperless_mobile/features/documents/view/widgets/placeholder/tags_placeholder.dart';
import 'package:paperless_mobile/features/documents/view/widgets/placeholder/text_placeholder.dart';
class InboxListLoadingWidget extends StatelessWidget {
const InboxListLoadingWidget({super.key});
@override
Widget build(BuildContext context) {
return ListView.separated(
itemCount: 20,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) => _buildInboxItem().padded(),
separatorBuilder: (context, index) => const SizedBox(height: 16),
).paddedOnly(top: 8);
}
Widget _buildInboxItem() {
return ShimmerPlaceholder(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const TextPlaceholder(length: 150, fontSize: 12),
const SizedBox(
height: 16,
),
SizedBox(
height: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 150,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: 120,
width: 90,
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: const ColoredBox(
color: Colors.white,
),
),
),
const SizedBox(width: 8),
const Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Spacer(),
TextPlaceholder(length: 200, fontSize: 14),
Spacer(),
TextPlaceholder(length: 120, fontSize: 14),
SizedBox(height: 8),
TextPlaceholder(length: 170, fontSize: 14),
Spacer(),
TagsPlaceholder(count: 3, dense: true),
Spacer(),
],
),
),
],
),
),
SizedBox(
height: 50,
child: IntrinsicHeight(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
physics: const NeverScrollableScrollPhysics(),
child: Row(
children: [
const SizedBox(
width: 50,
height: 40,
child: ColoredBox(
color: Colors.white,
),
).padded(),
const VerticalDivider(
indent: 12,
endIndent: 12,
),
SizedBox(
height: 40,
child: Row(
children: [
Container(
width: 150,
height: 48,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.white,
),
),
const SizedBox(width: 4),
Container(
width: 200,
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.white,
),
),
],
),
),
],
),
),
),
),
],
),
),
],
),
);
}
}