apksel-dev/apskel-pos-flutter
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: table page

Browse Source
This commit is contained in:
efrilm
2025-08-05 12:34:41 +07:00
parent a436769ec1
commit 5af0259f0a
6 changed files with 1021 additions and 455 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/presentation/table/pages/table_page.dart
+374 -69
View File
@@ -1,10 +1,32 @@
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter/material.dart';
import 'package:enaklo_pos/core/components/components.dart';
import 'package:enaklo_pos/core/constants/colors.dart';
import 'package:enaklo_pos/core/extensions/build_context_ext.dart';
import 'package:enaklo_pos/data/models/response/table_model.dart';
import 'package:enaklo_pos/presentation/home/pages/dashboard_page.dart';
import 'package:enaklo_pos/presentation/table/blocs/change_position_table/change_position_table_bloc.dart';
import 'package:enaklo_pos/presentation/table/blocs/create_table/create_table_bloc.dart';
import 'package:enaklo_pos/presentation/table/blocs/get_table/get_table_bloc.dart';
import 'package:enaklo_pos/presentation/table/dialogs/form_table_dialog.dart';
import 'package:enaklo_pos/presentation/table/widgets/card_table_widget.dart';
import 'package:enaklo_pos/presentation/table/dialogs/form_table_new_dialog.dart';
import 'package:enaklo_pos/presentation/table/widgets/table_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
// Enum status meja
enum TableStatus { available, occupied, billed, availableSoon, unknown }
TableStatus parseStatus(String? status) {
switch (status) {
case 'available':
return TableStatus.available;
case 'occupied':
return TableStatus.occupied;
case 'billed':
return TableStatus.billed;
case 'available_soon':
return TableStatus.availableSoon;
default:
return TableStatus.unknown;
}
}
class TablePage extends StatefulWidget {
const TablePage({super.key});
@@ -14,6 +36,23 @@ class TablePage extends StatefulWidget {
}
class _TablePageState extends State<TablePage> {
TableModel? selectedTable;
// Untuk drag
TableModel? draggingTable;
// Ubah function toggleSelectTable menjadi selectTable
void selectTable(TableModel table) {
setState(() {
if (selectedTable == table) {
selectedTable = null; // Deselect jika table yang sama diklik
} else {
selectedTable =
table; // Select table baru (akan mengganti selection sebelumnya)
}
});
}
@override
void initState() {
context.read<GetTableBloc>().add(const GetTableEvent.getTables());
@@ -22,74 +61,340 @@ class _TablePageState extends State<TablePage> {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(24),
child: ListView(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Table Management",
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
color: AppColors.primary,
),
),
Button.filled(
onPressed: () {
showDialog(
context: context,
builder: (context) => FormTableDialog(),
);
},
label: 'Generate Table',
height: 48.0,
width: 200.0,
),
],
),
SpaceHeight(24.0),
BlocBuilder<GetTableBloc, GetTableState>(
builder: (context, state) {
return state.maybeWhen(
orElse: () {
return SizedBox.shrink();
},
loading: () {
return const CircularProgressIndicator();
},
success: (tables) {
if (tables.isEmpty) {
return const Center(
child: Text('No table available'),
);
}
return GridView.builder(
padding: EdgeInsets.zero,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 1.0,
crossAxisCount: 4,
mainAxisSpacing: 16,
crossAxisSpacing: 16,
),
itemCount: tables.length,
shrinkWrap: true,
physics: const ScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
return CardTableWidget(
table: tables[index],
);
},
);
},
);
final double mapWidth = context.deviceWidth * 2;
final double mapHeight = context.deviceHeight * 1.5;
return Scaffold(
appBar: AppBar(
title: const Text("Layout Meja"),
actions: [
BlocListener<CreateTableBloc, CreateTableState>(
listener: (context, state) {
state.maybeWhen(
orElse: () {},
success: (message) {
context
.read<GetTableBloc>()
.add(const GetTableEvent.getTables());
});
},
child: IconButton(
icon: const Icon(Icons.add),
onPressed: () {
showDialog(
context: context,
builder: (context) => FormTableNewDialog(),
);
},
),
),
],
backgroundColor: Colors.white,
foregroundColor: Colors.black,
elevation: 0.5,
bottom: PreferredSize(
preferredSize: const Size.fromHeight(60),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Row(
children: [
_buildLegendDot(Colors.blue[200]!, "Available"),
const SizedBox(width: 16),
_buildLegendDot(Colors.orange[200]!, "Occupied"),
const SizedBox(width: 16),
_buildLegendDot(Colors.green[200]!, "Billed"),
const SizedBox(width: 16),
_buildLegendDot(Colors.yellow[200]!, "Available soon"),
],
),
),
),
),
backgroundColor: const Color(0xFFF7F8FA),
body: BlocBuilder<GetTableBloc, GetTableState>(
builder: (context, state) {
return state.maybeWhen(
orElse: () => SizedBox.shrink(),
success: (tables) => SafeArea(
child: Stack(
children: [
// Main content area
Row(
children: [
// Area meja (zoom & pan & drag)
Expanded(
flex: 5,
child: InteractiveViewer(
panEnabled: true,
scaleEnabled: true,
constrained: false,
boundaryMargin: const EdgeInsets.all(80),
minScale: 0.3,
maxScale: 3.0,
alignment: Alignment.topLeft,
child: Container(
width: mapWidth,
height: mapHeight,
decoration: BoxDecoration(
color: const Color(0xFFF7F8FA),
border: Border.all(
color: Colors.grey[300]!, width: 2),
),
child: Stack(
children: [
// Optional: Grid background
...List.generate(
20,
(i) => Positioned(
left: i * 100.0,
top: 0,
bottom: 0,
child: Container(
width: 1,
color: Colors.grey[200]),
)),
...List.generate(
15,
(i) => Positioned(
top: i * 100.0,
left: 0,
right: 0,
child: Container(
height: 1,
color: Colors.grey[200]),
)),
// Tables
...tables.map((table) {
final isSelected = selectedTable == table;
return Positioned(
left: table.positionX,
top: table.positionY,
child: Draggable<TableModel>(
data: table,
feedback: Material(
color: Colors.transparent,
child: TableWidget(
table: table,
isSelected: isSelected,
),
),
childWhenDragging: Opacity(
opacity: 0.5,
child: TableWidget(
table: table,
isSelected: isSelected,
),
),
onDragStarted: () {
setState(() {
draggingTable = table;
});
},
onDraggableCanceled: (velocity, offset) {
setState(() {
draggingTable = null;
});
},
onDragEnd: (details) {
setState(() {
draggingTable = null;
final RenderBox box = context
.findRenderObject() as RenderBox;
final Offset local =
box.globalToLocal(details.offset);
table.positionX =
local.dx.clamp(0, mapWidth - 120);
table.positionY =
local.dy.clamp(0, mapHeight - 80);
context
.read<ChangePositionTableBloc>()
.add(ChangePositionTableEvent
.changePositionTable(
tableId: table.id ?? "",
position: details.offset,
));
});
},
child: GestureDetector(
onTap: () => selectTable(table),
child: TableWidget(
table: table,
isSelected: isSelected,
),
),
),
);
}).toList(),
],
),
),
),
),
// Sidebar bar tables
],
),
// Floating bottom bar - hanya muncul jika ada table yang dipilih
buildAlternativeFloatingBar(),
],
),
),
);
},
),
);
}
Widget buildAlternativeFloatingBar() {
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: [
AppColors.primary,
AppColors.primary.withOpacity(0.6)
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(24),
boxShadow: [
BoxShadow(
color: AppColors.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: () {
setState(() {
selectedTable = null;
});
},
child: const Icon(
Icons.close,
color: Colors.white,
size: 16,
),
),
],
),
),
),
]),
),
),
const SizedBox(width: 16),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
foregroundColor: AppColors.primary,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
padding: const EdgeInsets.symmetric(
horizontal: 24,
vertical: 12,
),
),
onPressed: () {
if (selectedTable?.status == 'available') {
context.push(DashboardPage(
table: selectedTable!,
));
} else {
// Handle occupied table click - load draft order and navigate to payment
// context.read<CheckoutBloc>().add(
// CheckoutEvent.loadDraftOrder(data!),
// );
// log("Data Draft Order: ${data!.toMap()}");
// context.push(PaymentTablePage(
// table: widget.table,
// draftOrder: data!,
// ));
}
},
child: const Text(
"Tempatkan Pesanan",
style: TextStyle(fontWeight: FontWeight.bold),
),
),
],
),
),
),
),
),
);
}
Widget _buildLegendDot(Color color, String label) {
return Row(
children: [
CircleAvatar(radius: 7, backgroundColor: color),
const SizedBox(width: 6),
Text(label, style: const TextStyle(fontSize: 14)),
],
);
}
}
lib/presentation/table/pages/table_page.dart.backup
+95
View File
@@ -0,0 +1,95 @@
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter/material.dart';
import 'package:enaklo_pos/core/components/components.dart';
import 'package:enaklo_pos/core/constants/colors.dart';
import 'package:enaklo_pos/presentation/table/blocs/get_table/get_table_bloc.dart';
import 'package:enaklo_pos/presentation/table/dialogs/form_table_dialog.dart';
import 'package:enaklo_pos/presentation/table/widgets/card_table_widget.dart';
class TablePage extends StatefulWidget {
const TablePage({super.key});
@override
State<TablePage> createState() => _TablePageState();
}
class _TablePageState extends State<TablePage> {
@override
void initState() {
context.read<GetTableBloc>().add(const GetTableEvent.getTables());
super.initState();
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(24),
child: ListView(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Table Management",
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
color: AppColors.primary,
),
),
Button.filled(
onPressed: () {
showDialog(
context: context,
builder: (context) => FormTableDialog(),
);
},
label: 'Generate Table',
height: 48.0,
width: 200.0,
),
],
),
SpaceHeight(24.0),
BlocBuilder<GetTableBloc, GetTableState>(
builder: (context, state) {
return state.maybeWhen(
orElse: () {
return SizedBox.shrink();
},
loading: () {
return const CircularProgressIndicator();
},
success: (tables) {
if (tables.isEmpty) {
return const Center(
child: Text('No table available'),
);
}
return GridView.builder(
padding: EdgeInsets.zero,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 1.0,
crossAxisCount: 4,
mainAxisSpacing: 16,
crossAxisSpacing: 16,
),
itemCount: tables.length,
shrinkWrap: true,
physics: const ScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
return CardTableWidget(
table: tables[index],
);
},
);
},
);
},
),
],
),
);
}
}