mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-07-10 07:07:19 +00:00
Refactor table layout to accommodate dynamic table size
This commit is contained in:
@ -21,6 +21,7 @@ class DynamicTable extends StatefulWidget {
|
||||
final List<String>? initialSelectedIds;
|
||||
final int uuidIndex;
|
||||
final Function(dynamic selectedRows)? onSelectionChanged;
|
||||
final Function(int rowIndex)? onSettingsPressed;
|
||||
const DynamicTable({
|
||||
super.key,
|
||||
required this.headers,
|
||||
@ -37,6 +38,7 @@ class DynamicTable extends StatefulWidget {
|
||||
this.initialSelectedIds,
|
||||
required this.uuidIndex,
|
||||
this.onSelectionChanged,
|
||||
this.onSettingsPressed,
|
||||
});
|
||||
|
||||
@override
|
||||
@ -48,11 +50,20 @@ class _DynamicTableState extends State<DynamicTable> {
|
||||
bool _selectAll = false;
|
||||
final ScrollController _verticalScrollController = ScrollController();
|
||||
final ScrollController _horizontalScrollController = ScrollController();
|
||||
|
||||
late ScrollController _horizontalHeaderScrollController;
|
||||
late ScrollController _horizontalBodyScrollController;
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_initializeSelection();
|
||||
_horizontalHeaderScrollController = ScrollController();
|
||||
_horizontalBodyScrollController = ScrollController();
|
||||
|
||||
// Synchronize horizontal scrolling
|
||||
_horizontalBodyScrollController.addListener(() {
|
||||
_horizontalHeaderScrollController
|
||||
.jumpTo(_horizontalBodyScrollController.offset);
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
@ -102,101 +113,87 @@ class _DynamicTableState extends State<DynamicTable> {
|
||||
context.read<DeviceManagementBloc>().add(UpdateSelection(_selectedRows));
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_horizontalHeaderScrollController.dispose();
|
||||
_horizontalBodyScrollController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
decoration: widget.cellDecoration,
|
||||
child: Scrollbar(
|
||||
controller: _verticalScrollController,
|
||||
thumbVisibility: true,
|
||||
trackVisibility: true,
|
||||
child: Scrollbar(
|
||||
controller: _horizontalScrollController,
|
||||
thumbVisibility: true,
|
||||
trackVisibility: true,
|
||||
notificationPredicate: (notif) => notif.depth == 1,
|
||||
child: SingleChildScrollView(
|
||||
controller: _verticalScrollController,
|
||||
child: Column(
|
||||
children: [
|
||||
Container(
|
||||
decoration: widget.headerDecoration ??
|
||||
const BoxDecoration(color: ColorsManager.boxColor),
|
||||
child: SingleChildScrollView(
|
||||
controller: _horizontalScrollController,
|
||||
scrollDirection: Axis.horizontal,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
controller: _horizontalHeaderScrollController,
|
||||
child: SizedBox(
|
||||
width: widget.size.width,
|
||||
child: Column(
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
decoration: widget.headerDecoration ??
|
||||
const BoxDecoration(
|
||||
color: ColorsManager.boxColor,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
if (widget.withCheckBox) _buildSelectAllCheckbox(),
|
||||
...List.generate(widget.headers.length, (index) {
|
||||
return _buildTableHeaderCell(
|
||||
widget.headers[index], index);
|
||||
})
|
||||
//...widget.headers.map((header) => _buildTableHeaderCell(header)),
|
||||
],
|
||||
),
|
||||
),
|
||||
widget.isEmpty
|
||||
? SizedBox(
|
||||
height: widget.size.height * 0.5,
|
||||
width: widget.size.width,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Column(
|
||||
children: [
|
||||
SvgPicture.asset(Assets.emptyTable),
|
||||
const SizedBox(
|
||||
height: 15,
|
||||
),
|
||||
Text(
|
||||
widget.tableName == 'AccessManagement'
|
||||
? 'No Password '
|
||||
: 'No Devices',
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.bodySmall!
|
||||
.copyWith(
|
||||
color:
|
||||
ColorsManager.grayColor),
|
||||
)
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
: Column(
|
||||
children:
|
||||
List.generate(widget.data.length, (index) {
|
||||
final row = widget.data[index];
|
||||
return Row(
|
||||
children: [
|
||||
if (widget.withCheckBox)
|
||||
_buildRowCheckbox(
|
||||
index, widget.size.height * 0.08),
|
||||
...row.map((cell) => _buildTableCell(
|
||||
cell.toString(),
|
||||
widget.size.height * 0.08)),
|
||||
],
|
||||
);
|
||||
}),
|
||||
),
|
||||
if (widget.withCheckBox) _buildSelectAllCheckbox(),
|
||||
...List.generate(widget.headers.length, (index) {
|
||||
return _buildTableHeaderCell(
|
||||
widget.headers[index], index);
|
||||
}),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Scrollbar(
|
||||
controller: _verticalScrollController,
|
||||
thumbVisibility: true,
|
||||
trackVisibility: true,
|
||||
child: SingleChildScrollView(
|
||||
controller: _verticalScrollController,
|
||||
child: Scrollbar(
|
||||
controller: _horizontalBodyScrollController,
|
||||
thumbVisibility: false,
|
||||
trackVisibility: false,
|
||||
notificationPredicate: (notif) => notif.depth == 1,
|
||||
child: SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
controller: _horizontalBodyScrollController,
|
||||
child: SizedBox(
|
||||
width: widget.size.width,
|
||||
child: widget.isEmpty
|
||||
? _buildEmptyState()
|
||||
: Column(
|
||||
children:
|
||||
List.generate(widget.data.length, (rowIndex) {
|
||||
final row = widget.data[rowIndex];
|
||||
return Row(
|
||||
children: [
|
||||
if (widget.withCheckBox)
|
||||
_buildRowCheckbox(
|
||||
rowIndex, widget.size.height * 0.08),
|
||||
...row.asMap().entries.map((entry) {
|
||||
return _buildTableCell(
|
||||
entry.value.toString(),
|
||||
widget.size.height * 0.08,
|
||||
rowIndex: rowIndex,
|
||||
columnIndex: entry.key,
|
||||
);
|
||||
}).toList(),
|
||||
],
|
||||
);
|
||||
}),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
@ -218,6 +215,32 @@ class _DynamicTableState extends State<DynamicTable> {
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildEmptyState() => Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Column(
|
||||
children: [
|
||||
SvgPicture.asset(Assets.emptyTable),
|
||||
const SizedBox(height: 15),
|
||||
Text(
|
||||
widget.tableName == 'AccessManagement'
|
||||
? 'No Password '
|
||||
: 'No Devices',
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.bodySmall!
|
||||
.copyWith(color: ColorsManager.grayColor),
|
||||
)
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
Widget _buildRowCheckbox(int index, double size) {
|
||||
return Container(
|
||||
width: 50,
|
||||
@ -272,13 +295,23 @@ class _DynamicTableState extends State<DynamicTable> {
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTableCell(String content, double size) {
|
||||
Widget _buildTableCell(
|
||||
String content,
|
||||
double size, {
|
||||
required int rowIndex,
|
||||
required int columnIndex,
|
||||
}) {
|
||||
bool isBatteryLevel = content.endsWith('%');
|
||||
double? batteryLevel;
|
||||
|
||||
if (isBatteryLevel) {
|
||||
batteryLevel = double.tryParse(content.replaceAll('%', '').trim());
|
||||
}
|
||||
bool isSettingsColumn = widget.headers[columnIndex] == 'Settings';
|
||||
|
||||
if (isSettingsColumn) {
|
||||
return _buildSettingsIcon(rowIndex, size);
|
||||
}
|
||||
|
||||
Color? statusColor;
|
||||
switch (content) {
|
||||
@ -330,4 +363,23 @@ class _DynamicTableState extends State<DynamicTable> {
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSettingsIcon(int rowIndex, double size) {
|
||||
return Container(
|
||||
height: size,
|
||||
width: 120,
|
||||
padding: const EdgeInsets.all(5.0),
|
||||
decoration: const BoxDecoration(
|
||||
border: Border(
|
||||
bottom: BorderSide(color: ColorsManager.boxDivider, width: 1.0),
|
||||
),
|
||||
color: Colors.white,
|
||||
),
|
||||
alignment: Alignment.center,
|
||||
child: IconButton(
|
||||
icon: SvgPicture.asset(Assets.settings),
|
||||
onPressed: () => widget.onSettingsPressed?.call(rowIndex),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user