brammie15/kooltab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: alphabet list, change Layout etc

Browse Source
This commit is contained in:
brammie15
2026-10-11 20:37:59 +02:00
parent 489896305d
commit 072f560989
31 changed files with 1847 additions and 832 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/views/admin_screen_view.dart
+17
View File
@@ -7,6 +7,7 @@ import '../models/remote_command.dart';
import '../utils/navigation.dart';
import '../viewmodels/admin_pin_view_model.dart';
import '../viewmodels/remote_sync_view_model.dart';
import 'dialogs/new_tab_dialog.dart';
class AdminScreenView extends StatelessWidget {
const AdminScreenView({super.key});
@@ -17,6 +18,16 @@ class AdminScreenView extends StatelessWidget {
adminPinViewModel.lock();
}
Future<void> _openNewTab(BuildContext context) async {
final l10n = AppLocalizations.of(context);
final name = await showNewTabDialog(context);
if (name == null || !context.mounted) return;
ScaffoldMessenger.of(
context,
).showSnackBar(SnackBar(content: Text(l10n.tabOpened(name))));
}
Future<void> _confirmUnlink(BuildContext context) async {
final l10n = AppLocalizations.of(context);
final confirmed = await showDialog<bool>(
@@ -80,6 +91,12 @@ class AdminScreenView extends StatelessWidget {
_AdminSection(
title: l10n.adminTools,
children: [
_AdminTile(
icon: Icons.person_add_alt_1_outlined,
title: l10n.openNewTab,
subtitle: l10n.openNewTabDescription,
onTap: () => _openNewTab(context),
),
_AdminTile(
icon: Icons.inventory_2_outlined,
title: l10n.products,
lib/views/bar/bar_screen_view.dart
+11 -3
View File
@@ -19,7 +19,6 @@ import '../../viewmodels/remote_sync_view_model.dart';
import '../../viewmodels/settings_view_model.dart';
import '../dialogs/close_tab_dialog.dart';
import '../dialogs/edit_tab_dialog.dart';
import '../dialogs/new_tab_dialog.dart';
import 'product_grid.dart';
import 'tab_panel.dart';
@@ -31,6 +30,7 @@ class BarScreenView extends StatefulWidget {
}
class _BarScreenViewState extends State<BarScreenView> {
bool _showSearch = false;
late final StreamSubscription<RemoteSyncEvent> _remoteCloseSubscription;
@override
@@ -110,13 +110,21 @@ class _BarScreenViewState extends State<BarScreenView> {
final settings = context.watch<SettingsViewModel>().settings;
final stockByProductId = {
for (final product in productsViewModel.products)
product.id: product.stockQuantity,
if (!product.infiniteStock) product.id: product.stockQuantity,
};
return Scaffold(
appBar: AppBar(
title: Text(l10n.barTabs),
actions: [
IconButton(
tooltip: _showSearch ? l10n.closeSearch : l10n.searchTabs,
isSelected: _showSearch,
onPressed: () => setState(() => _showSearch = !_showSearch),
icon: const Icon(Icons.search_rounded),
selectedIcon: const Icon(Icons.search_off_rounded),
),
const SizedBox(width: 6),
IconButton(
tooltip: l10n.admin,
onPressed: () => context.push('/admin'),
@@ -190,7 +198,7 @@ class _BarScreenViewState extends State<BarScreenView> {
selectedTab: viewModel.selectedTab,
selectedTabId: viewModel.selectedTabId,
stockByProductId: stockByProductId,
onNewTabPressed: () => showNewTabDialog(context),
showSearch: _showSearch,
onTabSelected: viewModel.selectTab,
onItemQuantityChanged: viewModel.changeItemQuantity,
onCloseTabPressed: () => confirmCloseTab(context),
lib/views/bar/product_grid.dart
+25 -20
View File
@@ -1,3 +1,5 @@
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
@@ -111,33 +113,36 @@ class ProductGrid extends StatelessWidget {
Expanded(
child: LayoutBuilder(
builder: (context, constraints) {
const horizontalPadding = 32.0;
const verticalPadding = 28.0;
const padding = EdgeInsets.fromLTRB(16, 12, 16, 16);
const spacing = 12.0;
const minTileHeight = 72.0;
// Exactly [rows] rows fill the height; the column count keeps
// the tiles as close to square as the width allows
final rowCount = rows.clamp(2, 6).toInt();
final rowHeight =
((constraints.maxHeight -
verticalPadding -
(rowCount - 1) * spacing) /
rowCount)
.clamp(96.0, 320.0)
.toDouble();
final columns =
(((constraints.maxWidth - horizontalPadding + spacing) /
(rowHeight + spacing))
.ceil())
.clamp(2, 8)
.toInt();
final tileHeight = max(
minTileHeight,
(constraints.maxHeight -
padding.vertical -
(rowCount - 1) * spacing) /
rowCount,
);
final columns = max(
1,
((constraints.maxWidth - padding.horizontal + spacing) /
(tileHeight + spacing))
.round(),
);
return GridView.builder(
key: ValueKey('product-grid-$rows'),
padding: const EdgeInsets.fromLTRB(16, 12, 16, 16),
key: ValueKey('product-grid-$rowCount'),
padding: padding,
itemCount: products.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: columns,
crossAxisSpacing: 12,
mainAxisSpacing: 12,
childAspectRatio: 1,
crossAxisSpacing: spacing,
mainAxisSpacing: spacing,
mainAxisExtent: tileHeight,
),
itemBuilder: (context, index) {
final product = products[index];
lib/views/bar/tab_panel.dart
+395 -161
View File
@@ -1,10 +1,15 @@
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 {
@@ -12,7 +17,7 @@ class TabPanel extends StatefulWidget {
final BarTab? selectedTab;
final String? selectedTabId;
final Map<String, int> stockByProductId;
final VoidCallback onNewTabPressed;
final bool showSearch;
final ValueChanged<String> onTabSelected;
final Future<void> Function(TabItem item, int delta) onItemQuantityChanged;
final VoidCallback onCloseTabPressed;
@@ -25,7 +30,7 @@ class TabPanel extends StatefulWidget {
required this.selectedTab,
required this.selectedTabId,
required this.stockByProductId,
required this.onNewTabPressed,
required this.showSearch,
required this.onTabSelected,
required this.onItemQuantityChanged,
required this.onCloseTabPressed,
@@ -39,14 +44,76 @@ class TabPanel extends StatefulWidget {
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;
@@ -56,95 +123,115 @@ class _TabPanelState extends State<TabPanel> {
return tab.customerName.toLowerCase().contains(
_searchQuery.toLowerCase(),
);
}).toList();
}).toList()..sort((a, b) => compareByIndex(a.customerName, b.customerName));
return DecoratedBox(
decoration: BoxDecoration(color: scheme.surfaceContainerLow),
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
padding: const EdgeInsets.fromLTRB(4, 16, 16, 16),
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
children: [
Expanded(
child: TextField(
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(width: 10),
IconButton.filled(
onPressed: widget.onNewTabPressed,
icon: const Icon(Icons.add_rounded),
tooltip: l10n.openNewTab,
),
],
),
const SizedBox(height: 8),
SizedBox(
height: 190,
child: OpenTabsList(
tabs: filteredTabs,
selectedTabId: widget.selectedTabId,
onTabSelected: widget.onTabSelected,
onTabEdited: widget.onTabEdited,
onTabDeleted: widget.onTabDeleted,
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 Divider(height: 28),
const SizedBox(width: 8),
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,
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),
],
),
)
: SelectedTabDetails(
tab: widget.selectedTab!,
stockByProductId: widget.stockByProductId,
onItemQuantityChanged: widget.onItemQuantityChanged,
onCloseTabPressed: widget.onCloseTabPressed,
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,
),
),
],
),
),
],
),
@@ -154,6 +241,7 @@ class _TabPanelState extends State<TabPanel> {
}
class OpenTabsList extends StatelessWidget {
final ScrollController? controller;
final List<BarTab> tabs;
final String? selectedTabId;
final ValueChanged<String> onTabSelected;
@@ -162,6 +250,7 @@ class OpenTabsList extends StatelessWidget {
const OpenTabsList({
super.key,
this.controller,
required this.tabs,
required this.selectedTabId,
required this.onTabSelected,
@@ -181,92 +270,44 @@ class OpenTabsList extends StatelessWidget {
);
}
return ListView.separated(
// A fixed row height lets the letter index work out where each tab is
return ListView.builder(
controller: controller,
itemCount: tabs.length,
separatorBuilder: (_, _) => const SizedBox(height: 8),
// 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];
final selected = tab.id == selectedTabId;
final scheme = Theme.of(context).colorScheme;
final primary = scheme.primary;
return 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: 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: () => onTabSelected(tab.id),
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,
),
],
),
),
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),
),
),
),
@@ -275,3 +316,196 @@ class OpenTabsList extends StatelessWidget {
);
}
}
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,
),
),
);
}
}
lib/views/dialogs/new_tab_dialog.dart
+12 -9
View File
@@ -4,7 +4,8 @@ import 'package:provider/provider.dart';
import '../../l10n/app_localizations.dart';
import '../../viewmodels/bar_screen_view_model.dart';
Future<void> showNewTabDialog(BuildContext context) async {
/// Returns the name of the opened tab, or null when nothing was opened.
Future<String?> showNewTabDialog(BuildContext context) async {
final l10n = AppLocalizations.of(context);
final controller = TextEditingController();
@@ -38,16 +39,18 @@ Future<void> showNewTabDialog(BuildContext context) async {
},
);
if (name == null || name.trim().isEmpty) return;
if (!context.mounted) return;
final trimmed = name?.trim() ?? '';
if (trimmed.isEmpty || !context.mounted) return null;
try {
await context.read<BarScreenViewModel>().createTab(name.trim());
await context.read<BarScreenViewModel>().createTab(trimmed);
return trimmed;
} catch (_) {
if (!context.mounted) return;
ScaffoldMessenger.of(
context,
).showSnackBar(SnackBar(content: Text(l10n.couldNotCreateTabMessage)));
if (context.mounted) {
ScaffoldMessenger.of(
context,
).showSnackBar(SnackBar(content: Text(l10n.couldNotCreateTabMessage)));
}
return null;
}
}
lib/views/product_form_view.dart
+57 -35
View File
@@ -39,6 +39,7 @@ class _ProductFormViewState extends State<ProductFormView> {
Product? _existingProduct;
String? _imagePath;
bool _hasImage = false;
bool _infiniteStock = false;
bool _isLoading = true;
bool _isSaving = false;
@@ -79,6 +80,7 @@ class _ProductFormViewState extends State<ProductFormView> {
_priceController.text = (product.priceInCents / 100).toStringAsFixed(2);
_stockController.text = product.stockQuantity.toString();
_lowStockController.text = product.lowStockThreshold.toString();
_infiniteStock = product.infiniteStock;
_imagePath = product.imagePath;
_hasImage = product.imagePath != null && product.imagePath!.isNotEmpty;
@@ -189,6 +191,7 @@ class _ProductFormViewState extends State<ProductFormView> {
priceInCents: priceInCents,
stockQuantity: stockQuantity,
lowStockThreshold: lowStockThreshold,
infiniteStock: _infiniteStock,
imagePath: _imagePath,
);
@@ -200,6 +203,7 @@ class _ProductFormViewState extends State<ProductFormView> {
priceInCents: priceInCents,
stockQuantity: stockQuantity,
lowStockThreshold: lowStockThreshold,
infiniteStock: _infiniteStock,
imagePath: _imagePath,
);
}
@@ -429,46 +433,64 @@ class _ProductFormViewState extends State<ProductFormView> {
},
),
const SizedBox(height: 16),
TextFormField(
controller: _stockController,
decoration: InputDecoration(
labelText: l10n.stock,
border: OutlineInputBorder(),
SwitchListTile(
value: _infiniteStock,
onChanged: (value) {
setState(() => _infiniteStock = value);
},
title: Text(l10n.infiniteStock),
subtitle: Text(l10n.infiniteStockDescription),
secondary: const Icon(Icons.all_inclusive_rounded),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4),
side: BorderSide(
color: Theme.of(context).colorScheme.outline,
),
),
keyboardType: TextInputType.number,
textInputAction: TextInputAction.next,
validator: (value) {
final number = int.tryParse(value ?? '');
if (number == null || number < 0) {
return l10n.enterValidStock;
}
return null;
},
),
const SizedBox(height: 16),
TextFormField(
controller: _lowStockController,
decoration: InputDecoration(
labelText: l10n.lowStockThreshold,
border: OutlineInputBorder(),
if (!_infiniteStock) ...[
const SizedBox(height: 16),
TextFormField(
controller: _stockController,
decoration: InputDecoration(
labelText: l10n.stock,
border: OutlineInputBorder(),
),
keyboardType: TextInputType.number,
textInputAction: TextInputAction.next,
validator: (value) {
final number = int.tryParse(value ?? '');
if (number == null || number < 0) {
return l10n.enterValidStock;
}
return null;
},
),
keyboardType: TextInputType.number,
textInputAction: TextInputAction.done,
onFieldSubmitted: (_) {
FocusScope.of(context).unfocus();
},
validator: (value) {
final number = int.tryParse(value ?? '');
const SizedBox(height: 16),
TextFormField(
controller: _lowStockController,
decoration: InputDecoration(
labelText: l10n.lowStockThreshold,
border: OutlineInputBorder(),
),
keyboardType: TextInputType.number,
textInputAction: TextInputAction.done,
onFieldSubmitted: (_) {
FocusScope.of(context).unfocus();
},
validator: (value) {
final number = int.tryParse(value ?? '');
if (number == null || number < 0) {
return l10n.enterValidThreshold;
}
if (number == null || number < 0) {
return l10n.enterValidThreshold;
}
return null;
},
),
return null;
},
),
],
const SizedBox(height: 24),
FilledButton.icon(
onPressed: _isSaving ? null : _save,
lib/views/product_list_view.dart
+10 -5
View File
@@ -90,11 +90,16 @@ class _ProductListViewState extends State<ProductListView> {
),
title: Text(product.name),
subtitle: Text(
l10n.productStockSummary(
l10n.categoryLabel(product.category),
product.priceInCents.asEuro,
product.stockQuantity,
),
product.infiniteStock
? l10n.productInfiniteStockSummary(
l10n.categoryLabel(product.category),
product.priceInCents.asEuro,
)
: l10n.productStockSummary(
l10n.categoryLabel(product.category),
product.priceInCents.asEuro,
product.stockQuantity,
),
),
trailing: const Icon(Icons.chevron_right),
onTap: () => context.push('/products/${product.id}/edit'),
lib/views/update_progress_view.dart
+388 -226
View File
@@ -32,112 +32,74 @@ class _UpdateProgressViewState extends State<UpdateProgressView> {
update: widget.update,
simulate: widget.simulate,
simulateError: widget.simulateError,
);
_vm.addListener(_onVmChange);
_vm.start();
}
void _onVmChange() {
if (!mounted) return;
if (_vm.phase == OtaPhase.done) {
_showRestartDialog();
} else if (_vm.phase == OtaPhase.error) {
_showErrorSnackBar();
}
}
void _showRestartDialog() {
final l10n = AppLocalizations.of(context);
showDialog(
context: context,
barrierDismissible: false,
builder: (context) => AlertDialog(
title: Text(l10n.updateReady),
content: Text(l10n.updateReadyDescription),
actions: [
TextButton(
onPressed: () {
Navigator.pop(context);
this.context.popOrGo('/bar');
},
child: Text(l10n.later),
),
FilledButton(
onPressed: () {
Navigator.pop(context);
},
child: Text(l10n.restartApp),
),
],
),
);
}
void _showErrorSnackBar() {
final l10n = AppLocalizations.of(context);
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(l10n.updateError(_vm.errorMessage)),
backgroundColor: Theme.of(context).colorScheme.error,
action: SnackBarAction(
label: l10n.retry,
onPressed: () {
_vm.cancel();
_vm.start();
},
),
),
);
)..init();
}
@override
void dispose() {
_vm.removeListener(_onVmChange);
_vm.dispose();
super.dispose();
}
void _close() {
if (_vm.isBusy) {
_showCancelDialog();
return;
}
_vm.cancel();
context.popOrGo('/bar');
}
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
return PopScope(
canPop: false,
onPopInvokedWithResult: (didPop, result) {
if (!didPop) _showCancelDialog();
if (!didPop) _close();
},
child: Scaffold(
appBar: AppBar(
leading: IconButton(
icon: const Icon(Icons.close),
onPressed: () => _showCancelDialog(),
),
title: Text(l10n.updating),
centerTitle: true,
leading: IconButton(icon: const Icon(Icons.close), onPressed: _close),
automaticallyImplyLeading: false,
),
body: ListenableBuilder(
listenable: _vm,
builder: (context, child) {
return Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 480),
child: Padding(
padding: const EdgeInsets.all(32),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_buildHeader(),
const SizedBox(height: 40),
_buildProgress(_vm),
const SizedBox(height: 24),
_buildStatus(_vm),
const Spacer(),
_buildVersionInfo(_vm),
],
return SafeArea(
child: Center(
child: SingleChildScrollView(
padding: const EdgeInsets.fromLTRB(24, 0, 24, 32),
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 520),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
_Header(vm: _vm),
const SizedBox(height: 32),
AnimatedSwitcher(
duration: const Duration(milliseconds: 250),
child: switch (_vm.phase) {
UpdatePhase.downloading ||
UpdatePhase.installing => _Progress(vm: _vm),
UpdatePhase.waitingForInstaller =>
_WaitingForInstaller(onRetry: _vm.start),
UpdatePhase.failed => _Failed(
vm: _vm,
onClose: _close,
),
},
),
if (widget.update.notes.trim().isNotEmpty) ...[
const SizedBox(height: 32),
_ReleaseNotes(notes: widget.update.notes.trim()),
],
if (_vm.isBusy) ...[
const SizedBox(height: 24),
const _DoNotCloseHint(),
],
],
),
),
),
),
@@ -148,163 +110,27 @@ class _UpdateProgressViewState extends State<UpdateProgressView> {
);
}
Widget _buildHeader() {
final l10n = AppLocalizations.of(context);
return Column(
children: [
Container(
padding: const EdgeInsets.all(24),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primary.withValues(alpha: 0.1),
shape: BoxShape.circle,
),
child: Icon(
Icons.system_update_alt_rounded,
size: 56,
color: Theme.of(context).colorScheme.primary,
),
),
const SizedBox(height: 24),
Text('KoolTap', style: Theme.of(context).textTheme.headlineMedium),
const SizedBox(height: 8),
Text(
l10n.version(widget.update.version),
style: Theme.of(context).textTheme.titleMedium?.copyWith(
color: Theme.of(context).colorScheme.primary,
),
),
],
);
}
Widget _buildProgress(UpdateProgressViewModel vm) {
final scheme = Theme.of(context).colorScheme;
final l10n = AppLocalizations.of(context);
return Column(
children: [
SizedBox(
width: 200,
height: 200,
child: Stack(
alignment: Alignment.center,
children: [
SizedBox.expand(
child: CircularProgressIndicator(
value: vm.phase == OtaPhase.installing ? null : vm.progress,
strokeWidth: 10,
backgroundColor: scheme.primary.withValues(alpha: 0.12),
color: vm.phase == OtaPhase.error
? scheme.error
: scheme.primary,
),
),
Column(
mainAxisSize: MainAxisSize.min,
children: [
if (vm.phase == OtaPhase.error)
Icon(
Icons.error_outline_rounded,
size: 48,
color: scheme.error,
)
else if (vm.phase == OtaPhase.installing)
Icon(
Icons.settings_rounded,
size: 48,
color: scheme.primary,
)
else
Text(
'${(vm.progress * 100).toStringAsFixed(0)}%',
style: Theme.of(context).textTheme.headlineLarge,
),
const SizedBox(height: 4),
Text(
vm.phase == OtaPhase.installing ? l10n.installing : '',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: scheme.onSurface.withValues(alpha: 0.6),
),
),
],
),
],
),
),
const SizedBox(height: 24),
if (vm.phase == OtaPhase.downloading)
LinearProgressIndicator(
value: vm.progress,
minHeight: 6,
borderRadius: BorderRadius.circular(999),
),
],
);
}
Widget _buildStatus(UpdateProgressViewModel vm) {
final scheme = Theme.of(context).colorScheme;
final l10n = AppLocalizations.of(context);
final color = switch (vm.phase) {
OtaPhase.error => scheme.error,
OtaPhase.done => Colors.green,
_ => scheme.onSurface,
};
return Text(
l10n.updateStatus(vm.statusText),
style: Theme.of(context).textTheme.titleMedium?.copyWith(color: color),
textAlign: TextAlign.center,
);
}
Widget _buildVersionInfo(UpdateProgressViewModel vm) {
final l10n = AppLocalizations.of(context);
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.info_outline_rounded,
size: 14,
color: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.4),
),
const SizedBox(width: 6),
Text(
l10n.doNotCloseDuringUpdate,
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Theme.of(
context,
).colorScheme.onSurface.withValues(alpha: 0.4),
),
),
],
);
}
void _showCancelDialog() {
final l10n = AppLocalizations.of(context);
showDialog(
context: context,
builder: (context) => AlertDialog(
builder: (dialogContext) => AlertDialog(
title: Text(l10n.cancelUpdate),
content: Text(l10n.cancelUpdateDescription),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
onPressed: () => Navigator.pop(dialogContext),
child: Text(l10n.continueUpdate),
),
FilledButton(
style: FilledButton.styleFrom(
backgroundColor: Theme.of(context).colorScheme.error,
backgroundColor: Theme.of(dialogContext).colorScheme.error,
),
onPressed: () {
Navigator.pop(context);
Navigator.pop(dialogContext);
_vm.cancel();
this.context.popOrGo('/bar');
context.popOrGo('/bar');
},
child: Text(l10n.cancelUpdateAction),
),
@@ -313,3 +139,339 @@ class _UpdateProgressViewState extends State<UpdateProgressView> {
);
}
}
class _Header extends StatelessWidget {
final UpdateProgressViewModel vm;
const _Header({required this.vm});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
final theme = Theme.of(context);
final scheme = theme.colorScheme;
final (icon, background, foreground) = switch (vm.phase) {
UpdatePhase.downloading => (
Icons.download_rounded,
scheme.primaryContainer,
scheme.onPrimaryContainer,
),
UpdatePhase.installing => (
Icons.install_mobile_rounded,
scheme.primaryContainer,
scheme.onPrimaryContainer,
),
UpdatePhase.waitingForInstaller => (
Icons.touch_app_rounded,
scheme.tertiaryContainer,
scheme.onTertiaryContainer,
),
UpdatePhase.failed => (
Icons.error_outline_rounded,
scheme.errorContainer,
scheme.onErrorContainer,
),
};
return Column(
children: [
AnimatedContainer(
duration: const Duration(milliseconds: 250),
width: 88,
height: 88,
decoration: BoxDecoration(
color: background,
borderRadius: BorderRadius.circular(28),
),
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 250),
child: Icon(icon, key: ValueKey(icon), size: 44, color: foreground),
),
),
const SizedBox(height: 24),
Text(
l10n.updatingTo(vm.update.version),
style: theme.textTheme.headlineSmall?.copyWith(
fontWeight: FontWeight.w600,
),
textAlign: TextAlign.center,
),
if (vm.currentVersion case final current?) ...[
const SizedBox(height: 12),
_VersionChange(from: current, to: vm.update.version),
],
],
);
}
}
class _VersionChange extends StatelessWidget {
final String from;
final String to;
const _VersionChange({required this.from, required this.to});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final scheme = theme.colorScheme;
final style = theme.textTheme.labelLarge?.copyWith(
fontFeatures: const [FontFeature.tabularFigures()],
);
return Center(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 6),
decoration: BoxDecoration(
color: scheme.surfaceContainerHighest,
borderRadius: BorderRadius.circular(999),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(from, style: style?.copyWith(color: scheme.onSurfaceVariant)),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Icon(
Icons.arrow_forward_rounded,
size: 16,
color: scheme.onSurfaceVariant,
),
),
Text(to, style: style?.copyWith(color: scheme.primary)),
],
),
),
);
}
}
class _Progress extends StatelessWidget {
final UpdateProgressViewModel vm;
const _Progress({required this.vm});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
final theme = Theme.of(context);
final scheme = theme.colorScheme;
final installing = vm.phase == UpdatePhase.installing;
final progress = vm.progress;
final status = switch ((installing, progress)) {
(true, _) => l10n.installingUpdate,
(false, null) => l10n.preparingDownload,
(false, _) => l10n.downloadingUpdate,
};
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
Expanded(
child: Text(
status,
style: theme.textTheme.titleMedium?.copyWith(
color: scheme.onSurfaceVariant,
),
),
),
if (!installing)
Text(
'${((progress ?? 0) * 100).round()}%',
style: theme.textTheme.headlineMedium?.copyWith(
fontWeight: FontWeight.w600,
fontFeatures: const [FontFeature.tabularFigures()],
),
),
],
),
const SizedBox(height: 12),
TweenAnimationBuilder<double>(
tween: Tween(end: progress ?? 0),
duration: const Duration(milliseconds: 300),
curve: Curves.easeOut,
builder: (context, value, child) => LinearProgressIndicator(
value: installing || progress == null ? null : value,
minHeight: 12,
borderRadius: BorderRadius.circular(999),
backgroundColor: scheme.surfaceContainerHighest,
),
),
],
);
}
}
class _WaitingForInstaller extends StatelessWidget {
final VoidCallback onRetry;
const _WaitingForInstaller({required this.onRetry});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
final theme = Theme.of(context);
return _Panel(
color: theme.colorScheme.tertiaryContainer,
foreground: theme.colorScheme.onTertiaryContainer,
title: l10n.confirmInstallation,
message: l10n.confirmInstallationDescription,
actions: [
OutlinedButton.icon(
onPressed: onRetry,
icon: const Icon(Icons.refresh_rounded),
label: Text(l10n.openInstallerAgain),
),
],
);
}
}
class _Failed extends StatelessWidget {
final UpdateProgressViewModel vm;
final VoidCallback onClose;
const _Failed({required this.vm, required this.onClose});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
final scheme = Theme.of(context).colorScheme;
return _Panel(
color: scheme.errorContainer,
foreground: scheme.onErrorContainer,
title: l10n.updateFailed,
message: l10n.updateFailureText(vm.failure),
actions: [
TextButton(onPressed: onClose, child: Text(l10n.close)),
FilledButton.icon(
onPressed: vm.start,
icon: const Icon(Icons.refresh_rounded),
label: Text(l10n.retry),
),
],
);
}
}
class _Panel extends StatelessWidget {
final Color color;
final Color foreground;
final String title;
final String message;
final List<Widget> actions;
const _Panel({
required this.color,
required this.foreground,
required this.title,
required this.message,
required this.actions,
});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(20),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: theme.textTheme.titleMedium?.copyWith(
color: foreground,
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: 6),
Text(
message,
style: theme.textTheme.bodyMedium?.copyWith(color: foreground),
),
const SizedBox(height: 16),
Wrap(
alignment: WrapAlignment.end,
spacing: 8,
runSpacing: 8,
children: actions,
),
],
),
);
}
}
class _ReleaseNotes extends StatelessWidget {
final String notes;
const _ReleaseNotes({required this.notes});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
final theme = Theme.of(context);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
l10n.whatsNew,
style: theme.textTheme.titleSmall?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
),
),
const SizedBox(height: 8),
Container(
width: double.infinity,
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: theme.colorScheme.surfaceContainerLow,
borderRadius: BorderRadius.circular(16),
border: Border.all(color: theme.colorScheme.outlineVariant),
),
child: Text(notes, style: theme.textTheme.bodyMedium),
),
],
);
}
}
class _DoNotCloseHint extends StatelessWidget {
const _DoNotCloseHint();
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context);
final theme = Theme.of(context);
final color = theme.colorScheme.onSurfaceVariant;
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.info_outline_rounded, size: 16, color: color),
const SizedBox(width: 6),
Flexible(
child: Text(
l10n.doNotCloseDuringUpdate,
style: theme.textTheme.bodySmall?.copyWith(color: color),
),
),
],
);
}
}
lib/views/widgets/product_tile.dart
+5 -7
View File
@@ -26,10 +26,8 @@ class ProductTile extends StatelessWidget {
final scheme = theme.colorScheme;
final l10n = AppLocalizations.of(context);
final outOfStock = product.stockQuantity <= 0;
final lowStock =
product.stockQuantity > 0 &&
product.stockQuantity <= product.lowStockThreshold;
final outOfStock = product.isOutOfStock;
final lowStock = !outOfStock && product.isLowStock;
final hasImage = product.imagePath != null && product.imagePath!.isNotEmpty;
@@ -142,11 +140,11 @@ class _StockBadge extends StatelessWidget {
Widget build(BuildContext context) {
final scheme = Theme.of(context).colorScheme;
if (product.stockQuantity <= 0) {
if (product.isOutOfStock) {
return const SizedBox.shrink();
}
final low = product.stockQuantity <= product.lowStockThreshold;
final low = product.isLowStock;
return Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
@@ -157,7 +155,7 @@ class _StockBadge extends StatelessWidget {
borderRadius: BorderRadius.circular(999),
),
child: Text(
'${product.stockQuantity}',
product.infiniteStock ? '∞' : '${product.stockQuantity}',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w800,