update position table, set selected table
This commit is contained in:
efrilm
@@ -2,12 +2,14 @@ import 'package:auto_route/auto_route.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||
|
||||
import '../../../../../application/table/table_form/table_form_bloc.dart';
|
||||
import '../../../../../application/table/table_loader/table_loader_bloc.dart';
|
||||
import '../../../../../common/extension/extension.dart';
|
||||
import '../../../../../common/theme/theme.dart';
|
||||
import '../../../../../domain/table/table.dart' as t;
|
||||
import '../../../../../injection.dart';
|
||||
import '../../../../components/loader/loader_with_text.dart';
|
||||
import 'widgets/floating_bottom_navbar.dart';
|
||||
import 'widgets/table_card.dart';
|
||||
|
||||
@RoutePage()
|
||||
@@ -18,16 +20,20 @@ class TablePage extends StatefulWidget implements AutoRouteWrapper {
|
||||
State<TablePage> createState() => _TablePageState();
|
||||
|
||||
@override
|
||||
Widget wrappedRoute(BuildContext context) => BlocProvider(
|
||||
create: (context) =>
|
||||
getIt<TableLoaderBloc>()
|
||||
..add(TableLoaderEvent.fetched(isRefresh: true)),
|
||||
Widget wrappedRoute(BuildContext context) => MultiBlocProvider(
|
||||
providers: [
|
||||
BlocProvider(
|
||||
create: (context) =>
|
||||
getIt<TableLoaderBloc>()
|
||||
..add(TableLoaderEvent.fetched(isRefresh: true)),
|
||||
),
|
||||
BlocProvider(create: (context) => getIt<TableFormBloc>()),
|
||||
],
|
||||
child: this,
|
||||
);
|
||||
}
|
||||
|
||||
class _TablePageState extends State<TablePage> {
|
||||
t.Table? selectedTable;
|
||||
t.Table? draggingTable;
|
||||
|
||||
Offset? tapPosition;
|
||||
@@ -134,7 +140,7 @@ class _TablePageState extends State<TablePage> {
|
||||
),
|
||||
),
|
||||
...state.tables.map((table) {
|
||||
final isSelected = selectedTable == table;
|
||||
final isSelected = state.selectedTable == table;
|
||||
return Positioned(
|
||||
left: table.positionX,
|
||||
top: table.positionY,
|
||||
@@ -165,42 +171,53 @@ class _TablePageState extends State<TablePage> {
|
||||
});
|
||||
},
|
||||
onDragEnd: (details) {
|
||||
final RenderBox box =
|
||||
context.findRenderObject()
|
||||
as RenderBox;
|
||||
final Offset local = box.globalToLocal(
|
||||
details.offset,
|
||||
);
|
||||
|
||||
final newX = local.dx.clamp(
|
||||
0.0,
|
||||
mapWidth - 120,
|
||||
);
|
||||
final newY = local.dy.clamp(
|
||||
0.0,
|
||||
mapHeight - 80,
|
||||
);
|
||||
|
||||
setState(() {
|
||||
draggingTable = null;
|
||||
final RenderBox box =
|
||||
context.findRenderObject()
|
||||
as RenderBox;
|
||||
final Offset local = box.globalToLocal(
|
||||
details.offset,
|
||||
);
|
||||
table = table.copyWith(
|
||||
positionX: local.dx.clamp(
|
||||
0,
|
||||
mapWidth - 120,
|
||||
),
|
||||
positionY: local.dy.clamp(
|
||||
0,
|
||||
mapHeight - 80,
|
||||
),
|
||||
);
|
||||
});
|
||||
// context.read<ChangePositionTableBloc>().add(
|
||||
// ChangePositionTableEvent.changePositionTable(
|
||||
// tableId: table.id ?? "",
|
||||
// position: Offset(
|
||||
// table.positionX ?? 0.0,
|
||||
// table.positionY ?? 0.0,
|
||||
// ),
|
||||
// ),
|
||||
// );
|
||||
|
||||
// Update position locally in bloc state
|
||||
context.read<TableLoaderBloc>().add(
|
||||
TableLoaderEvent.updatedPostion(
|
||||
id: table.id,
|
||||
position: Offset(newX, newY),
|
||||
),
|
||||
);
|
||||
context.read<TableFormBloc>().add(
|
||||
TableFormEvent.updated(
|
||||
id: table.id,
|
||||
position: Offset(newX, newY),
|
||||
),
|
||||
);
|
||||
},
|
||||
child: GestureDetector(
|
||||
onTap: () {},
|
||||
onTap: () {
|
||||
context.read<TableLoaderBloc>().add(
|
||||
TableLoaderEvent.setSelectedTable(
|
||||
table,
|
||||
),
|
||||
);
|
||||
},
|
||||
onTapDown: (details) =>
|
||||
tapPosition = details.globalPosition,
|
||||
onLongPress: () {
|
||||
if (table.status.isOccupied) {
|
||||
// _showPopupMenu(context, table);
|
||||
_showPopupMenu(context, table);
|
||||
}
|
||||
},
|
||||
child: TableCard(
|
||||
@@ -218,6 +235,7 @@ class _TablePageState extends State<TablePage> {
|
||||
),
|
||||
],
|
||||
),
|
||||
TableFloatingBottomNavbar(selectedTable: state.selectedTable),
|
||||
],
|
||||
),
|
||||
);
|
||||
@@ -235,4 +253,39 @@ class _TablePageState extends State<TablePage> {
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
void _showPopupMenu(BuildContext context, t.Table table) {
|
||||
final RenderBox overlay =
|
||||
Overlay.of(context).context.findRenderObject() as RenderBox;
|
||||
|
||||
showMenu(
|
||||
context: context,
|
||||
position: RelativeRect.fromRect(
|
||||
tapPosition != null
|
||||
? Rect.fromLTWH(tapPosition!.dx, tapPosition!.dy, 0, 0)
|
||||
: Rect.fromLTWH(100, 100, 0, 0),
|
||||
Offset.zero & overlay.size,
|
||||
),
|
||||
color: AppColor.white,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
|
||||
elevation: 1,
|
||||
items: [
|
||||
PopupMenuItem(
|
||||
onTap: () {
|
||||
// showDialog(
|
||||
// context: context,
|
||||
// builder: (context) => TransferTableDialog(fromTable: table),
|
||||
// );
|
||||
},
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Icons.swap_horiz),
|
||||
SizedBox(width: 8),
|
||||
Text('Transfer'),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,140 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||
import '../../../../../../application/table/table_loader/table_loader_bloc.dart';
|
||||
import '../../../../../../common/theme/theme.dart';
|
||||
import '../../../../../../domain/table/table.dart' as t;
|
||||
|
||||
class TableFloatingBottomNavbar extends StatelessWidget {
|
||||
final t.Table? selectedTable;
|
||||
const TableFloatingBottomNavbar({super.key, this.selectedTable});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Positioned(
|
||||
bottom: 20, // Jarak dari bawah
|
||||
left: 16, // Jarak dari kiri
|
||||
right: 16,
|
||||
child: AnimatedSlide(
|
||||
duration: const Duration(milliseconds: 400),
|
||||
curve: Curves.elasticOut,
|
||||
offset: selectedTable == null ? const Offset(0, 2) : Offset.zero,
|
||||
child: AnimatedOpacity(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
opacity: selectedTable == null ? 0.0 : 1.0,
|
||||
child: IgnorePointer(
|
||||
ignoring: selectedTable == null,
|
||||
child: Container(
|
||||
margin: const EdgeInsets.all(16),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
colors: [AppColor.primary, AppColor.primary.withOpacity(0.6)],
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(24),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: AppColor.primary.withOpacity(0.3),
|
||||
blurRadius: 20,
|
||||
offset: const Offset(0, 8),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
const Icon(Icons.table_bar, color: Colors.white, size: 24),
|
||||
const SizedBox(width: 12),
|
||||
Text(
|
||||
"1 Meja Dipilih",
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 16,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: Row(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 4),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 12,
|
||||
vertical: 6,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white.withOpacity(0.2),
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
selectedTable?.tableName ?? "",
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
GestureDetector(
|
||||
onTap: () {
|
||||
context.read<TableLoaderBloc>().add(
|
||||
TableLoaderEvent.setSelectedTable(null),
|
||||
);
|
||||
},
|
||||
child: const Icon(
|
||||
Icons.close,
|
||||
color: Colors.white,
|
||||
size: 16,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
ElevatedButton(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: Colors.white,
|
||||
foregroundColor: AppColor.primary,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 24,
|
||||
vertical: 12,
|
||||
),
|
||||
),
|
||||
onPressed: () {
|
||||
if (selectedTable?.status.isAvailable ?? false) {
|
||||
// context.pushReplacement(
|
||||
// DashboardPage(
|
||||
// table: selectedTable!,
|
||||
// items: widget.items,
|
||||
// ),
|
||||
// );
|
||||
} else {}
|
||||
},
|
||||
child: const Text(
|
||||
"Tempatkan Pesanan",
|
||||
style: TextStyle(fontWeight: FontWeight.bold),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user