426 lines
13 KiB
Dart
426 lines
13 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:kooltab2/views/widgets/closed_tab_card.dart';
|
|
import 'package:kooltab2/views/widgets/open_tab_history_card.dart';
|
|
import 'package:provider/provider.dart';
|
|
|
|
import '../app/router.dart';
|
|
import '../models/bar_tab.dart';
|
|
import '../models/closed_tab.dart';
|
|
import '../utils/navigation.dart';
|
|
import '../viewmodels/history_view_model.dart';
|
|
import '../l10n/app_localizations.dart';
|
|
import '../l10n/app_localizations_helpers.dart';
|
|
|
|
class HistoryScreenView extends StatefulWidget {
|
|
const HistoryScreenView({super.key});
|
|
|
|
@override
|
|
State<HistoryScreenView> createState() => _HistoryScreenViewState();
|
|
}
|
|
|
|
class _HistoryScreenViewState extends State<HistoryScreenView> with RouteAware {
|
|
final _scrollController = ScrollController();
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
|
|
_scrollController.addListener(_onScroll);
|
|
|
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
|
context.read<HistoryViewModel>().load();
|
|
});
|
|
}
|
|
|
|
@override
|
|
void didChangeDependencies() {
|
|
super.didChangeDependencies();
|
|
routeObserver.subscribe(this, ModalRoute.of(context)! as PageRoute);
|
|
}
|
|
|
|
@override
|
|
void didPopNext() {
|
|
context.read<HistoryViewModel>().load();
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
routeObserver.unsubscribe(this);
|
|
_scrollController.removeListener(_onScroll);
|
|
_scrollController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
void _onScroll() {
|
|
if (_scrollController.position.extentAfter < 300) {
|
|
context.read<HistoryViewModel>().loadMore();
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final viewModel = context.watch<HistoryViewModel>();
|
|
final l10n = AppLocalizations.of(context);
|
|
|
|
return Scaffold(
|
|
appBar: AppBar(
|
|
leading: IconButton(
|
|
onPressed: () => context.popOrGo('/bar'),
|
|
icon: const Icon(Icons.arrow_back),
|
|
),
|
|
title: Text(l10n.tabHistory),
|
|
actionsPadding: const EdgeInsets.symmetric(horizontal: 8),
|
|
actions: [
|
|
IconButton(
|
|
tooltip: l10n.refresh,
|
|
onPressed: viewModel.load,
|
|
icon: const Icon(Icons.refresh_rounded),
|
|
),
|
|
const SizedBox(width: 8),
|
|
],
|
|
),
|
|
body: Builder(
|
|
builder: (context) {
|
|
if (viewModel.isLoading && !viewModel.hasLoaded) {
|
|
return const Center(
|
|
child: CircularProgressIndicator(strokeWidth: 2.5),
|
|
);
|
|
}
|
|
|
|
if (viewModel.errorMessage != null) {
|
|
return Center(
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(24),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(
|
|
Icons.error_outline_rounded,
|
|
size: 40,
|
|
color: Theme.of(context).colorScheme.error,
|
|
),
|
|
const SizedBox(height: 12),
|
|
Text(
|
|
l10n.localizedError(viewModel.errorMessage),
|
|
textAlign: TextAlign.center,
|
|
style: Theme.of(context).textTheme.bodyLarge,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
return Column(
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.fromLTRB(20, 16, 20, 8),
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
child: TextField(
|
|
onChanged: viewModel.search,
|
|
decoration: InputDecoration(
|
|
hintText: l10n.searchByName,
|
|
prefixIcon: Icon(Icons.search_rounded, size: 20),
|
|
isDense: true,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
_CustomerDropdown(
|
|
customerNames: viewModel.customerNames,
|
|
selectedCustomer: viewModel.selectedCustomer,
|
|
onSelected: viewModel.filterByCustomer,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Expanded(
|
|
child:
|
|
viewModel.openTabs.isEmpty && viewModel.closedTabs.isEmpty
|
|
? _EmptyState()
|
|
: _HistoryList(
|
|
openTabs: viewModel.openTabs,
|
|
closedTabs: viewModel.closedTabs,
|
|
hasMore: viewModel.hasMore,
|
|
isLoadingMore: viewModel.isLoadingMore,
|
|
scrollController: _scrollController,
|
|
),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _HistoryList extends StatelessWidget {
|
|
final List<BarTab> openTabs;
|
|
final List<ClosedTab> closedTabs;
|
|
final bool hasMore;
|
|
final bool isLoadingMore;
|
|
final ScrollController scrollController;
|
|
|
|
const _HistoryList({
|
|
required this.openTabs,
|
|
required this.closedTabs,
|
|
required this.hasMore,
|
|
required this.isLoadingMore,
|
|
required this.scrollController,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final l10n = AppLocalizations.of(context);
|
|
final openSectionCount = openTabs.isEmpty ? 0 : openTabs.length + 1;
|
|
final closedSectionCount = closedTabs.isEmpty ? 0 : closedTabs.length + 1;
|
|
final loadingCount = hasMore || isLoadingMore ? 1 : 0;
|
|
|
|
return ListView.separated(
|
|
controller: scrollController,
|
|
padding: const EdgeInsets.fromLTRB(20, 8, 20, 20),
|
|
itemCount: openSectionCount + closedSectionCount + loadingCount,
|
|
separatorBuilder: (_, _) => const SizedBox(height: 10),
|
|
itemBuilder: (context, index) {
|
|
if (openTabs.isNotEmpty) {
|
|
if (index == 0) {
|
|
return _HistorySectionHeader(title: l10n.openTabs);
|
|
}
|
|
|
|
if (index <= openTabs.length) {
|
|
return OpenTabHistoryCard(tab: openTabs[index - 1]);
|
|
}
|
|
}
|
|
|
|
final closedIndex = index - openSectionCount;
|
|
if (closedTabs.isNotEmpty) {
|
|
if (closedIndex == 0) {
|
|
return _HistorySectionHeader(title: l10n.closedTabs);
|
|
}
|
|
|
|
if (closedIndex <= closedTabs.length) {
|
|
return ClosedTabCard(closedTab: closedTabs[closedIndex - 1]);
|
|
}
|
|
}
|
|
|
|
return const Padding(
|
|
padding: EdgeInsets.symmetric(vertical: 24),
|
|
child: Center(child: CircularProgressIndicator(strokeWidth: 2.5)),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|
|
|
|
class _HistorySectionHeader extends StatelessWidget {
|
|
final String title;
|
|
|
|
const _HistorySectionHeader({required this.title});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Padding(
|
|
padding: const EdgeInsets.only(top: 8, bottom: 2),
|
|
child: Text(
|
|
title.toUpperCase(),
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
fontWeight: FontWeight.w700,
|
|
letterSpacing: 0.7,
|
|
color: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.5),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _CustomerDropdown extends StatelessWidget {
|
|
static const _allSentinel = r'$__all__$';
|
|
|
|
final List<String> customerNames;
|
|
final String? selectedCustomer;
|
|
final ValueChanged<String?> onSelected;
|
|
|
|
const _CustomerDropdown({
|
|
required this.customerNames,
|
|
required this.selectedCustomer,
|
|
required this.onSelected,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final scheme = Theme.of(context).colorScheme;
|
|
final l10n = AppLocalizations.of(context);
|
|
final isFiltered = selectedCustomer != null;
|
|
|
|
return PopupMenuButton<String>(
|
|
onSelected: (value) {
|
|
onSelected(value == _allSentinel ? null : value);
|
|
},
|
|
tooltip: l10n.customer,
|
|
padding: EdgeInsets.zero,
|
|
offset: const Offset(0, 8),
|
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
|
|
color: Theme.of(context).cardTheme.color ?? scheme.surface,
|
|
itemBuilder: (context) => [
|
|
PopupMenuItem<String>(
|
|
value: _allSentinel,
|
|
height: 50,
|
|
child: _CustomerMenuRow(
|
|
icon: Icons.people_outline_rounded,
|
|
label: l10n.allCustomers,
|
|
selected: !isFiltered,
|
|
),
|
|
),
|
|
if (customerNames.isNotEmpty) const PopupMenuDivider(height: 1),
|
|
...customerNames.map(
|
|
(name) => PopupMenuItem<String>(
|
|
value: name,
|
|
height: 50,
|
|
child: _CustomerMenuRow(
|
|
icon: name == selectedCustomer
|
|
? Icons.person_rounded
|
|
: Icons.person_outline_rounded,
|
|
label: name,
|
|
selected: name == selectedCustomer,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
child: ConstrainedBox(
|
|
constraints: const BoxConstraints(minWidth: 144, maxWidth: 220),
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(
|
|
color: isFiltered
|
|
? scheme.primary.withValues(alpha: 0.35)
|
|
: scheme.onSurface.withValues(alpha: 0.12),
|
|
),
|
|
color: isFiltered ? scheme.primary.withValues(alpha: 0.08) : null,
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Icon(
|
|
isFiltered
|
|
? Icons.filter_alt_rounded
|
|
: Icons.people_outline_rounded,
|
|
size: 18,
|
|
color: isFiltered
|
|
? scheme.primary
|
|
: scheme.onSurface.withValues(alpha: 0.5),
|
|
),
|
|
const SizedBox(width: 8),
|
|
Expanded(
|
|
child: Text(
|
|
selectedCustomer ?? l10n.allCustomers,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.w600,
|
|
fontSize: 13,
|
|
color: isFiltered
|
|
? scheme.primary
|
|
: scheme.onSurface.withValues(alpha: 0.65),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: 4),
|
|
Icon(
|
|
Icons.keyboard_arrow_down_rounded,
|
|
size: 18,
|
|
color: isFiltered
|
|
? scheme.primary
|
|
: scheme.onSurface.withValues(alpha: 0.5),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _CustomerMenuRow extends StatelessWidget {
|
|
final IconData icon;
|
|
final String label;
|
|
final bool selected;
|
|
|
|
const _CustomerMenuRow({
|
|
required this.icon,
|
|
required this.label,
|
|
required this.selected,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final scheme = Theme.of(context).colorScheme;
|
|
|
|
return Row(
|
|
children: [
|
|
Icon(
|
|
icon,
|
|
size: 18,
|
|
color: selected
|
|
? scheme.primary
|
|
: scheme.onSurface.withValues(alpha: 0.65),
|
|
),
|
|
const SizedBox(width: 10),
|
|
Expanded(
|
|
child: Text(
|
|
label,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(
|
|
fontWeight: selected ? FontWeight.w700 : FontWeight.w400,
|
|
color: selected ? scheme.primary : scheme.onSurface,
|
|
),
|
|
),
|
|
),
|
|
if (selected) ...[
|
|
const SizedBox(width: 10),
|
|
Icon(Icons.check_rounded, size: 18, color: scheme.primary),
|
|
],
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class _EmptyState extends StatelessWidget {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final scheme = Theme.of(context).colorScheme;
|
|
final l10n = AppLocalizations.of(context);
|
|
|
|
return Center(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(20),
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: scheme.onSurface.withValues(alpha: 0.05),
|
|
),
|
|
child: Icon(
|
|
Icons.history_rounded,
|
|
size: 40,
|
|
color: scheme.onSurface.withValues(alpha: 0.3),
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
Text(
|
|
l10n.noClosedTabs,
|
|
style: Theme.of(context).textTheme.titleMedium,
|
|
),
|
|
const SizedBox(height: 4),
|
|
Text(
|
|
l10n.tabsYouCloseAppearHere,
|
|
style: Theme.of(context).textTheme.bodyMedium,
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|