512 lines
17 KiB
Dart
512 lines
17 KiB
Dart
import 'dart:async';
|
|
import 'dart:math';
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter/services.dart';
|
|
import 'package:flutter_slidable/flutter_slidable.dart';
|
|
|
|
import '../../l10n/app_localizations.dart';
|
|
import '../../models/bar_tab.dart';
|
|
import '../../models/tab_item.dart';
|
|
import '../../utils/money.dart';
|
|
import '../../utils/name_index.dart';
|
|
import 'selected_tab_details.dart';
|
|
|
|
class TabPanel extends StatefulWidget {
|
|
final List<BarTab> tabs;
|
|
final BarTab? selectedTab;
|
|
final String? selectedTabId;
|
|
final Map<String, int> stockByProductId;
|
|
final bool showSearch;
|
|
final ValueChanged<String> onTabSelected;
|
|
final Future<void> Function(TabItem item, int delta) onItemQuantityChanged;
|
|
final VoidCallback onCloseTabPressed;
|
|
final Future<void> Function(BarTab) onTabEdited;
|
|
final Future<void> Function(BarTab) onTabDeleted;
|
|
|
|
const TabPanel({
|
|
super.key,
|
|
required this.tabs,
|
|
required this.selectedTab,
|
|
required this.selectedTabId,
|
|
required this.stockByProductId,
|
|
required this.showSearch,
|
|
required this.onTabSelected,
|
|
required this.onItemQuantityChanged,
|
|
required this.onCloseTabPressed,
|
|
required this.onTabEdited,
|
|
required this.onTabDeleted,
|
|
});
|
|
|
|
@override
|
|
State<TabPanel> createState() => _TabPanelState();
|
|
}
|
|
|
|
class _TabPanelState extends State<TabPanel> {
|
|
final TextEditingController _searchController = TextEditingController();
|
|
final ScrollController _tabsScrollController = ScrollController();
|
|
String _searchQuery = '';
|
|
|
|
/// The letter under the finger while the index bar is pressed.
|
|
String? _touchedLetter;
|
|
|
|
@override
|
|
void didUpdateWidget(TabPanel oldWidget) {
|
|
super.didUpdateWidget(oldWidget);
|
|
|
|
// Hiding the search bar shouldn't leave the list silently filtered
|
|
if (oldWidget.showSearch && !widget.showSearch) {
|
|
_searchController.clear();
|
|
_searchQuery = '';
|
|
}
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_searchController.dispose();
|
|
_tabsScrollController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
/// Every tab row has the same height, so it follows from the scroll range.
|
|
double? _tabExtent(int tabCount) {
|
|
if (!_tabsScrollController.hasClients || tabCount == 0) return null;
|
|
|
|
final position = _tabsScrollController.position;
|
|
return (position.maxScrollExtent + position.viewportDimension) / tabCount;
|
|
}
|
|
|
|
/// Scrolls to the first tab at or after [letter], so a letter without names
|
|
/// lands on the next one.
|
|
void _jumpToLetter(String letter, List<BarTab> tabs) {
|
|
if (letter != _touchedLetter) {
|
|
unawaited(HapticFeedback.selectionClick());
|
|
setState(() => _touchedLetter = letter);
|
|
}
|
|
|
|
final extent = _tabExtent(tabs.length);
|
|
if (extent == null) return;
|
|
|
|
final position = _tabsScrollController.position;
|
|
final start = indexLetters.indexOf(letter);
|
|
final index = tabs.indexWhere(
|
|
(tab) => indexLetters.indexOf(indexLetterOf(tab.customerName)) >= start,
|
|
);
|
|
|
|
_tabsScrollController.jumpTo(
|
|
index == -1
|
|
? position.maxScrollExtent
|
|
: min(index * extent, position.maxScrollExtent),
|
|
);
|
|
}
|
|
|
|
String? _visibleLetter(List<BarTab> tabs) {
|
|
if (tabs.isEmpty) return null;
|
|
|
|
final extent = _tabExtent(tabs.length);
|
|
final index = extent == null
|
|
? 0
|
|
: (_tabsScrollController.offset / extent).round().clamp(
|
|
0,
|
|
tabs.length - 1,
|
|
);
|
|
|
|
return indexLetterOf(tabs[index].customerName);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final scheme = Theme.of(context).colorScheme;
|
|
final l10n = AppLocalizations.of(context);
|
|
|
|
final filteredTabs = widget.tabs.where((tab) {
|
|
return tab.customerName.toLowerCase().contains(
|
|
_searchQuery.toLowerCase(),
|
|
);
|
|
}).toList()..sort((a, b) => compareByIndex(a.customerName, b.customerName));
|
|
|
|
return DecoratedBox(
|
|
decoration: BoxDecoration(color: scheme.surfaceContainerLow),
|
|
child: Padding(
|
|
padding: const EdgeInsets.fromLTRB(4, 16, 16, 16),
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
ListenableBuilder(
|
|
listenable: _tabsScrollController,
|
|
builder: (context, child) => _LetterIndexBar(
|
|
availableLetters: {
|
|
for (final tab in filteredTabs)
|
|
indexLetterOf(tab.customerName),
|
|
},
|
|
activeLetter: _touchedLetter ?? _visibleLetter(filteredTabs),
|
|
isTouched: _touchedLetter != null,
|
|
onLetterSelected: (letter) =>
|
|
_jumpToLetter(letter, filteredTabs),
|
|
onReleased: () => setState(() => _touchedLetter = null),
|
|
),
|
|
),
|
|
const SizedBox(width: 8),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Fixed height, so hiding the search bar gives its space
|
|
// to the names
|
|
SizedBox(
|
|
height: 246,
|
|
child: Column(
|
|
children: [
|
|
if (widget.showSearch) ...[
|
|
TextField(
|
|
autofocus: true,
|
|
controller: _searchController,
|
|
onChanged: (value) {
|
|
setState(() {
|
|
_searchQuery = value;
|
|
});
|
|
},
|
|
decoration: InputDecoration(
|
|
hintText: l10n.searchByName,
|
|
prefixIcon: Icon(Icons.search_rounded, size: 20),
|
|
suffixIcon: _searchQuery.isEmpty
|
|
? null
|
|
: IconButton(
|
|
onPressed: () {
|
|
_searchController.clear();
|
|
setState(() {
|
|
_searchQuery = '';
|
|
});
|
|
},
|
|
icon: const Icon(Icons.clear_rounded),
|
|
tooltip: l10n.clearSearch,
|
|
),
|
|
isDense: true,
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
],
|
|
Expanded(
|
|
child: OpenTabsList(
|
|
controller: _tabsScrollController,
|
|
tabs: filteredTabs,
|
|
selectedTabId: widget.selectedTabId,
|
|
onTabSelected: widget.onTabSelected,
|
|
onTabEdited: widget.onTabEdited,
|
|
onTabDeleted: widget.onTabDeleted,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
const Divider(height: 28),
|
|
|
|
Expanded(
|
|
child: widget.selectedTab == null
|
|
? Center(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(
|
|
Icons.receipt_long_outlined,
|
|
size: 36,
|
|
color: scheme.onSurface.withValues(
|
|
alpha: 0.25,
|
|
),
|
|
),
|
|
const SizedBox(height: 10),
|
|
Text(
|
|
l10n.selectOrOpenTab,
|
|
style: Theme.of(context).textTheme.bodyMedium,
|
|
),
|
|
],
|
|
),
|
|
)
|
|
: SelectedTabDetails(
|
|
tab: widget.selectedTab!,
|
|
stockByProductId: widget.stockByProductId,
|
|
onItemQuantityChanged: widget.onItemQuantityChanged,
|
|
onCloseTabPressed: widget.onCloseTabPressed,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class OpenTabsList extends StatelessWidget {
|
|
final ScrollController? controller;
|
|
final List<BarTab> tabs;
|
|
final String? selectedTabId;
|
|
final ValueChanged<String> onTabSelected;
|
|
final Future<void> Function(BarTab) onTabEdited;
|
|
final Future<void> Function(BarTab) onTabDeleted;
|
|
|
|
const OpenTabsList({
|
|
super.key,
|
|
this.controller,
|
|
required this.tabs,
|
|
required this.selectedTabId,
|
|
required this.onTabSelected,
|
|
required this.onTabEdited,
|
|
required this.onTabDeleted,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final l10n = AppLocalizations.of(context);
|
|
if (tabs.isEmpty) {
|
|
return Center(
|
|
child: Text(
|
|
l10n.noOpenTabs,
|
|
style: Theme.of(context).textTheme.bodyMedium,
|
|
),
|
|
);
|
|
}
|
|
|
|
// A fixed row height lets the letter index work out where each tab is
|
|
return ListView.builder(
|
|
controller: controller,
|
|
itemCount: tabs.length,
|
|
// The selected card's border is thickest, so it sets the height
|
|
prototypeItem: _TabRow(child: _TabCard(tab: tabs.first, selected: true)),
|
|
itemBuilder: (context, index) {
|
|
final tab = tabs[index];
|
|
|
|
return _TabRow(
|
|
child: ClipRRect(
|
|
borderRadius: BorderRadius.circular(14),
|
|
child: Slidable(
|
|
key: ValueKey(tab.id),
|
|
endActionPane: ActionPane(
|
|
motion: const DrawerMotion(),
|
|
extentRatio: 0.6,
|
|
children: [
|
|
SlidableAction(
|
|
onPressed: (_) => onTabEdited(tab),
|
|
icon: Icons.edit_outlined,
|
|
label: l10n.edit,
|
|
backgroundColor: Theme.of(context).colorScheme.secondary,
|
|
foregroundColor: Theme.of(context).colorScheme.onSecondary,
|
|
),
|
|
SlidableAction(
|
|
onPressed: (_) => onTabDeleted(tab),
|
|
icon: Icons.delete_outline_rounded,
|
|
label: l10n.delete,
|
|
backgroundColor: Theme.of(context).colorScheme.error,
|
|
foregroundColor: Theme.of(context).colorScheme.onError,
|
|
),
|
|
],
|
|
),
|
|
child: _TabCard(
|
|
tab: tab,
|
|
selected: tab.id == selectedTabId,
|
|
onTap: () => onTabSelected(tab.id),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|
|
|
|
class _TabRow extends StatelessWidget {
|
|
final Widget child;
|
|
|
|
const _TabRow({required this.child});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Padding(padding: const EdgeInsets.only(bottom: 8), child: child);
|
|
}
|
|
}
|
|
|
|
class _TabCard extends StatelessWidget {
|
|
final BarTab tab;
|
|
final bool selected;
|
|
final VoidCallback? onTap;
|
|
|
|
const _TabCard({required this.tab, this.selected = false, this.onTap});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final l10n = AppLocalizations.of(context);
|
|
final scheme = Theme.of(context).colorScheme;
|
|
final primary = scheme.primary;
|
|
|
|
return AnimatedContainer(
|
|
duration: const Duration(milliseconds: 150),
|
|
decoration: BoxDecoration(
|
|
color: selected
|
|
? primary.withValues(alpha: 0.14)
|
|
: scheme.onSurface.withValues(alpha: 0.04),
|
|
borderRadius: BorderRadius.circular(14),
|
|
border: Border.all(
|
|
color: selected
|
|
? primary.withValues(alpha: 0.6)
|
|
: scheme.onSurface.withValues(alpha: 0.06),
|
|
width: selected ? 1.4 : 1,
|
|
),
|
|
),
|
|
child: Material(
|
|
color: Colors.transparent,
|
|
child: InkWell(
|
|
borderRadius: BorderRadius.circular(14),
|
|
onTap: onTap,
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
|
|
child: SizedBox(
|
|
width: double.infinity,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(
|
|
tab.customerName,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.w800,
|
|
color: scheme.onSurface,
|
|
),
|
|
),
|
|
const SizedBox(height: 4),
|
|
Text(
|
|
l10n.tabItemSummary(tab.itemCount, tab.totalInCents.asEuro),
|
|
style: Theme.of(context).textTheme.bodySmall,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _LetterIndexBar extends StatelessWidget {
|
|
final Set<String> availableLetters;
|
|
final String? activeLetter;
|
|
final bool isTouched;
|
|
final ValueChanged<String> onLetterSelected;
|
|
final VoidCallback onReleased;
|
|
|
|
const _LetterIndexBar({
|
|
required this.availableLetters,
|
|
required this.activeLetter,
|
|
required this.isTouched,
|
|
required this.onLetterSelected,
|
|
required this.onReleased,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final theme = Theme.of(context);
|
|
final scheme = theme.colorScheme;
|
|
|
|
return LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
final letterHeight = constraints.maxHeight / indexLetters.length;
|
|
final fontSize = min(13.0, letterHeight * 0.65);
|
|
|
|
String letterAt(Offset position) {
|
|
final index = (position.dy / letterHeight).floor();
|
|
return indexLetters[index.clamp(0, indexLetters.length - 1)];
|
|
}
|
|
|
|
return GestureDetector(
|
|
behavior: HitTestBehavior.opaque,
|
|
onTapDown: (details) =>
|
|
onLetterSelected(letterAt(details.localPosition)),
|
|
onTapUp: (_) => onReleased(),
|
|
onTapCancel: onReleased,
|
|
onVerticalDragStart: (details) =>
|
|
onLetterSelected(letterAt(details.localPosition)),
|
|
onVerticalDragUpdate: (details) =>
|
|
onLetterSelected(letterAt(details.localPosition)),
|
|
onVerticalDragEnd: (_) => onReleased(),
|
|
onVerticalDragCancel: onReleased,
|
|
child: SizedBox(
|
|
width: 28,
|
|
child: Column(
|
|
children: [
|
|
for (final letter in indexLetters)
|
|
SizedBox(
|
|
height: letterHeight,
|
|
child: Center(
|
|
child: _IndexLetter(
|
|
letter: letter,
|
|
fontSize: fontSize,
|
|
isActive: letter == activeLetter,
|
|
isTouched: isTouched,
|
|
hasNames: availableLetters.contains(letter),
|
|
scheme: scheme,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|
|
|
|
class _IndexLetter extends StatelessWidget {
|
|
final String letter;
|
|
final double fontSize;
|
|
final bool isActive;
|
|
final bool isTouched;
|
|
final bool hasNames;
|
|
final ColorScheme scheme;
|
|
|
|
const _IndexLetter({
|
|
required this.letter,
|
|
required this.fontSize,
|
|
required this.isActive,
|
|
required this.isTouched,
|
|
required this.hasNames,
|
|
required this.scheme,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final color = switch ((isActive, isTouched, hasNames)) {
|
|
(true, true, _) => scheme.onPrimary,
|
|
(true, false, _) => scheme.primary,
|
|
(false, _, true) => scheme.onSurface,
|
|
(false, _, false) => scheme.onSurface.withValues(alpha: 0.25),
|
|
};
|
|
|
|
return AnimatedContainer(
|
|
duration: const Duration(milliseconds: 120),
|
|
width: fontSize * 1.8,
|
|
height: fontSize * 1.8,
|
|
alignment: Alignment.center,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: isActive && isTouched ? scheme.primary : Colors.transparent,
|
|
),
|
|
child: Text(
|
|
letter,
|
|
style: TextStyle(
|
|
fontSize: fontSize,
|
|
height: 1,
|
|
fontWeight: isActive || hasNames ? FontWeight.w800 : FontWeight.w500,
|
|
color: color,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|