mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-07-09 22:57:21 +00:00
459 lines
16 KiB
Dart
459 lines
16 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_bloc/flutter_bloc.dart';
|
|
import 'package:flutter_svg/flutter_svg.dart';
|
|
import 'package:syncrow_web/pages/device_managment/all_devices/bloc/device_mgmt_bloc/device_managment_bloc.dart';
|
|
import 'package:syncrow_web/utils/color_manager.dart';
|
|
import 'package:syncrow_web/utils/constants/assets.dart';
|
|
import 'package:syncrow_web/utils/extension/build_context_x.dart';
|
|
|
|
class DynamicTable extends StatefulWidget {
|
|
final List<String> headers;
|
|
final String? tableName;
|
|
final List<List<dynamic>> data;
|
|
final BoxDecoration? headerDecoration;
|
|
final BoxDecoration? cellDecoration;
|
|
final Size size;
|
|
final bool withCheckBox;
|
|
final bool withSelectAll;
|
|
final bool isEmpty;
|
|
final void Function(bool?)? selectAll;
|
|
final void Function(int, bool, dynamic)? onRowSelected;
|
|
final List<String>? initialSelectedIds;
|
|
final int uuidIndex;
|
|
final Function(dynamic selectedRows)? onSelectionChanged;
|
|
final Function(int rowIndex)? onSettingsPressed;
|
|
const DynamicTable({
|
|
super.key,
|
|
required this.headers,
|
|
required this.data,
|
|
required this.size,
|
|
this.tableName,
|
|
required this.isEmpty,
|
|
required this.withCheckBox,
|
|
required this.withSelectAll,
|
|
this.headerDecoration,
|
|
this.cellDecoration,
|
|
this.selectAll,
|
|
this.onRowSelected,
|
|
this.initialSelectedIds,
|
|
required this.uuidIndex,
|
|
this.onSelectionChanged,
|
|
this.onSettingsPressed,
|
|
});
|
|
|
|
@override
|
|
_DynamicTableState createState() => _DynamicTableState();
|
|
}
|
|
|
|
class _DynamicTableState extends State<DynamicTable> {
|
|
late List<bool> _selectedRows;
|
|
bool _selectAll = false;
|
|
final ScrollController _verticalScrollController = ScrollController();
|
|
final ScrollController _horizontalScrollController = ScrollController();
|
|
static const double _fixedRowHeight = 60;
|
|
static const double _checkboxColumnWidth = 50;
|
|
static const double _settingsColumnWidth = 100;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_initializeSelection();
|
|
}
|
|
|
|
@override
|
|
void didUpdateWidget(DynamicTable oldWidget) {
|
|
super.didUpdateWidget(oldWidget);
|
|
if (!_compareListOfLists(oldWidget.data, widget.data)) {
|
|
_initializeSelection();
|
|
}
|
|
}
|
|
|
|
bool _compareListOfLists(
|
|
List<List<dynamic>> oldList, List<List<dynamic>> newList) {
|
|
if (oldList.length != newList.length) return false;
|
|
|
|
for (int i = 0; i < oldList.length; i++) {
|
|
if (oldList[i].length != newList[i].length) return false;
|
|
|
|
for (int j = 0; j < oldList[i].length; j++) {
|
|
if (oldList[i][j] != newList[i][j]) return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
void _initializeSelection() {
|
|
_selectedRows = List<bool>.filled(widget.data.length, false);
|
|
_selectAll = false;
|
|
}
|
|
|
|
void _toggleRowSelection(int index) {
|
|
setState(() {
|
|
_selectedRows[index] = !_selectedRows[index];
|
|
_selectAll = _selectedRows.every((isSelected) => isSelected);
|
|
});
|
|
widget.onSelectionChanged?.call(_selectedRows);
|
|
context.read<DeviceManagementBloc>().add(UpdateSelection(_selectedRows));
|
|
}
|
|
|
|
void _toggleSelectAll(bool? value) {
|
|
setState(() {
|
|
_selectAll = value ?? false;
|
|
_selectedRows = List<bool>.filled(widget.data.length, _selectAll);
|
|
});
|
|
widget.onSelectionChanged?.call(_selectedRows);
|
|
context.read<DeviceManagementBloc>().add(UpdateSelection(_selectedRows));
|
|
}
|
|
|
|
double get _totalTableWidth {
|
|
final hasSettings = widget.headers.contains('Settings');
|
|
final base = (widget.withCheckBox ? _checkboxColumnWidth : 0) +
|
|
(hasSettings ? _settingsColumnWidth : 0);
|
|
final regularCount = widget.headers.length - (hasSettings ? 1 : 0);
|
|
final regularWidth = (widget.size.width - base) / regularCount;
|
|
return base + regularCount * regularWidth;
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
width: widget.size.width,
|
|
height: widget.size.height,
|
|
decoration: widget.cellDecoration,
|
|
child: ScrollConfiguration(
|
|
behavior: const ScrollBehavior().copyWith(scrollbars: false),
|
|
child: Scrollbar(
|
|
controller: _horizontalScrollController,
|
|
thumbVisibility: true,
|
|
trackVisibility: true,
|
|
notificationPredicate: (notif) =>
|
|
notif.metrics.axis == Axis.horizontal,
|
|
child: SingleChildScrollView(
|
|
controller: _horizontalScrollController,
|
|
scrollDirection: Axis.horizontal,
|
|
child: SizedBox(
|
|
width: _totalTableWidth,
|
|
child: Column(
|
|
children: [
|
|
Container(
|
|
height: _fixedRowHeight,
|
|
decoration: widget.headerDecoration ??
|
|
const BoxDecoration(color: ColorsManager.boxColor),
|
|
child: Row(
|
|
children: [
|
|
if (widget.withCheckBox)
|
|
_buildSelectAllCheckbox(_checkboxColumnWidth),
|
|
for (var i = 0; i < widget.headers.length; i++)
|
|
_buildTableHeaderCell(
|
|
widget.headers[i],
|
|
widget.headers[i] == 'Settings'
|
|
? _settingsColumnWidth
|
|
: (_totalTableWidth -
|
|
(widget.withCheckBox
|
|
? _checkboxColumnWidth
|
|
: 0) -
|
|
(widget.headers.contains('Settings')
|
|
? _settingsColumnWidth
|
|
: 0)) /
|
|
(widget.headers.length -
|
|
(widget.headers.contains('Settings')
|
|
? 1
|
|
: 0)),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
Expanded(
|
|
child: widget.isEmpty
|
|
? _buildEmptyState()
|
|
: Scrollbar(
|
|
controller: _verticalScrollController,
|
|
thumbVisibility: true,
|
|
trackVisibility: true,
|
|
notificationPredicate: (notif) =>
|
|
notif.metrics.axis == Axis.vertical,
|
|
child: ListView.builder(
|
|
controller: _verticalScrollController,
|
|
itemCount: widget.data.length,
|
|
itemBuilder: (_, rowIndex) {
|
|
final row = widget.data[rowIndex];
|
|
return SizedBox(
|
|
height: _fixedRowHeight,
|
|
child: Row(
|
|
children: [
|
|
if (widget.withCheckBox)
|
|
_buildRowCheckbox(
|
|
rowIndex,
|
|
_checkboxColumnWidth,
|
|
),
|
|
for (var colIndex = 0;
|
|
colIndex < row.length;
|
|
colIndex++)
|
|
widget.headers[colIndex] == 'Settings'
|
|
? buildSettingsIcon(
|
|
width: _settingsColumnWidth,
|
|
onTap: () => widget
|
|
.onSettingsPressed
|
|
?.call(rowIndex),
|
|
)
|
|
: _buildTableCell(
|
|
row[colIndex].toString(),
|
|
width: widget.headers[
|
|
colIndex] ==
|
|
'Settings'
|
|
? _settingsColumnWidth
|
|
: (_totalTableWidth -
|
|
(widget.withCheckBox
|
|
? _checkboxColumnWidth
|
|
: 0) -
|
|
(widget.headers
|
|
.contains(
|
|
'Settings')
|
|
? _settingsColumnWidth
|
|
: 0)) /
|
|
(widget.headers.length -
|
|
(widget.headers
|
|
.contains(
|
|
'Settings')
|
|
? 1
|
|
: 0)),
|
|
rowIndex: rowIndex,
|
|
columnIndex: colIndex,
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildEmptyState() => Container(
|
|
height: widget.size.height,
|
|
color: ColorsManager.whiteColors,
|
|
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),
|
|
)
|
|
],
|
|
),
|
|
],
|
|
),
|
|
SizedBox(height: widget.size.height * 0.5),
|
|
],
|
|
),
|
|
);
|
|
|
|
Widget _buildSelectAllCheckbox(double width) {
|
|
return Container(
|
|
width: width,
|
|
decoration: const BoxDecoration(
|
|
border: Border.symmetric(
|
|
vertical: BorderSide(color: ColorsManager.boxDivider),
|
|
),
|
|
),
|
|
child: Checkbox(
|
|
value: _selectAll,
|
|
onChanged: widget.withSelectAll && widget.data.isNotEmpty
|
|
? _toggleSelectAll
|
|
: null,
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildRowCheckbox(int index, double width) {
|
|
return Container(
|
|
width: width,
|
|
padding: const EdgeInsets.all(8.0),
|
|
height: _fixedRowHeight,
|
|
decoration: const BoxDecoration(
|
|
border: Border(
|
|
bottom: BorderSide(
|
|
color: ColorsManager.boxDivider,
|
|
width: 1.0,
|
|
),
|
|
),
|
|
color: ColorsManager.whiteColors,
|
|
),
|
|
alignment: Alignment.centerLeft,
|
|
child: Center(
|
|
child: Checkbox(
|
|
value: _selectedRows[index],
|
|
onChanged: (bool? value) {
|
|
_toggleRowSelection(index);
|
|
},
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildTableHeaderCell(String title, double width) {
|
|
return Container(
|
|
width: width,
|
|
decoration: const BoxDecoration(
|
|
border: Border.symmetric(
|
|
vertical: BorderSide(color: ColorsManager.boxDivider),
|
|
),
|
|
),
|
|
constraints: BoxConstraints(minHeight: 40, maxHeight: _fixedRowHeight),
|
|
alignment: Alignment.centerLeft,
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4),
|
|
child: Text(
|
|
title,
|
|
style: context.textTheme.titleSmall!.copyWith(
|
|
color: ColorsManager.grayColor,
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.w400,
|
|
),
|
|
maxLines: 2,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildTableCell(String content,
|
|
{required double width,
|
|
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(
|
|
width: width, onTap: () => widget.onSettingsPressed?.call(rowIndex));
|
|
}
|
|
|
|
Color? statusColor;
|
|
switch (content) {
|
|
case 'Effective':
|
|
statusColor = ColorsManager.textGreen;
|
|
break;
|
|
case 'Expired':
|
|
statusColor = ColorsManager.red;
|
|
break;
|
|
case 'To be effective':
|
|
statusColor = ColorsManager.yaGreen;
|
|
break;
|
|
case 'Online':
|
|
statusColor = ColorsManager.green;
|
|
break;
|
|
case 'Offline':
|
|
statusColor = ColorsManager.red;
|
|
break;
|
|
default:
|
|
statusColor = Colors.black;
|
|
}
|
|
|
|
return Container(
|
|
width: width,
|
|
height: _fixedRowHeight,
|
|
padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4),
|
|
decoration: const BoxDecoration(
|
|
border: Border(
|
|
bottom: BorderSide(
|
|
color: ColorsManager.boxDivider,
|
|
width: 1.0,
|
|
),
|
|
),
|
|
color: Colors.white,
|
|
),
|
|
alignment: Alignment.centerLeft,
|
|
child: Text(
|
|
content,
|
|
style: TextStyle(
|
|
color: (batteryLevel != null && batteryLevel < 20)
|
|
? ColorsManager.red
|
|
: (batteryLevel != null && batteryLevel > 20)
|
|
? ColorsManager.green
|
|
: statusColor,
|
|
fontSize: 13,
|
|
fontWeight: FontWeight.w400,
|
|
),
|
|
maxLines: 2,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget buildSettingsIcon({required double width, VoidCallback? onTap}) {
|
|
return Container(
|
|
width: width,
|
|
height: _fixedRowHeight,
|
|
padding: const EdgeInsets.only(left: 15, top: 10, bottom: 10),
|
|
decoration: const BoxDecoration(
|
|
color: ColorsManager.whiteColors,
|
|
border: Border(
|
|
bottom: BorderSide(
|
|
color: ColorsManager.boxDivider,
|
|
width: 1.0,
|
|
),
|
|
),
|
|
),
|
|
child: Align(
|
|
alignment: Alignment.centerLeft,
|
|
child: Container(
|
|
width: 50,
|
|
decoration: BoxDecoration(
|
|
color: const Color(0xFFF7F8FA),
|
|
borderRadius: BorderRadius.circular(20),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.17),
|
|
blurRadius: 14,
|
|
offset: const Offset(0, 4),
|
|
),
|
|
],
|
|
),
|
|
child: InkWell(
|
|
onTap: onTap,
|
|
child: Padding(
|
|
padding: EdgeInsets.all(8.0),
|
|
child: Center(
|
|
child: SvgPicture.asset(
|
|
Assets.settings,
|
|
width: 40,
|
|
height: 20,
|
|
color: ColorsManager.primaryColor,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|