Merge pull request #208 from SyncrowIOT/SP-1603-FE-Freeze-First-Row-in-All-Table-Views-Across-the-Platform

Refactor table layout to accommodate dynamic table size

lib/pages/common/custom_table.dart

@@ -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,102 +113,88 @@ 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: SingleChildScrollView(
-              controller: _horizontalScrollController,
-              scrollDirection: Axis.horizontal,
-              child: SizedBox(
-                width: widget.size.width,
       child: Column(
         children: [
           Container(
             decoration: widget.headerDecoration ??
-                          const BoxDecoration(
+                const BoxDecoration(color: ColorsManager.boxColor),
-                            color: ColorsManager.boxColor,
+            child: SingleChildScrollView(
-                          ),
+              scrollDirection: Axis.horizontal,
+              physics: const NeverScrollableScrollPhysics(),
+              controller: _horizontalHeaderScrollController,
+              child: SizedBox(
+                width: widget.size.width,
                 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,
+          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: Column(
+                      child: widget.isEmpty
-                              mainAxisAlignment: MainAxisAlignment.center,
+                          ? _buildEmptyState()
-                              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) {
+                                  List.generate(widget.data.length, (rowIndex) {
-                              final row = widget.data[index];
+                                final row = widget.data[rowIndex];
                                 return Row(
                                   children: [
                                     if (widget.withCheckBox)
                                       _buildRowCheckbox(
-                                        index, widget.size.height * 0.08),
+                                          rowIndex, widget.size.height * 0.08),
-                                  ...row.map((cell) => _buildTableCell(
+                                    ...row.asMap().entries.map((entry) {
-                                      cell.toString(),
+                                      return _buildTableCell(
-                                      widget.size.height * 0.08)),
+                                        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),
+      ),
+    );
+  }
 }

lib/pages/roles_and_permission/users_page/users_table/view/name_filter.dart

@@ -5,7 +5,7 @@ import 'package:syncrow_web/utils/constants/assets.dart';
 Future<void> showNameMenu({
   required BuildContext context,
   Function()? aToZTap,
-  Function()? zToaTap,
+  Function()? zToATap,
   String? isSelected,
 }) async {
   final RenderBox overlay =
@@ -46,7 +46,7 @@ Future<void> showNameMenu({
         ),
       ),
       PopupMenuItem(
-        onTap: zToaTap,
+        onTap: zToATap,
         child: ListTile(
           leading: Image.asset(
             Assets.ZtoAIcon,

lib/pages/roles_and_permission/users_page/users_table/view/user_table.dart

@@ -95,7 +95,7 @@ class _TableRow extends StatelessWidget {
           ],
         ),
         if (!isLast)
-          Divider(
+          const Divider(
             height: 1,
             thickness: 1,
             color: ColorsManager.boxDivider,
@@ -110,12 +110,14 @@ class DynamicTableScreen extends StatefulWidget {
   final List<String> titles;
   final List<List<Widget>> rows;
   final void Function(int columnIndex)? onFilter;
+  final double tableSize;
 
   const DynamicTableScreen({
     required this.titles,
     required this.rows,
     required this.onFilter,
     Key? key,
+    required this.tableSize,
   }) : super(key: key);
 
   @override
@@ -205,7 +207,8 @@ class _DynamicTableScreenState extends State<DynamicTableScreen> {
           bottomRight: Radius.circular(15),
         ),
       ),
-      child: Column(
+      child: ListView(
+        shrinkWrap: true,
         children: [
           for (int rowIndex = 0; rowIndex < widget.rows.length; rowIndex++)
             _TableRow(
@@ -253,7 +256,7 @@ class _DynamicTableScreenState extends State<DynamicTableScreen> {
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 _buildHeader(),
-                _buildBody(),
+                Container(height: widget.tableSize - 37, child: _buildBody()),
               ],
             ),
           ),

lib/pages/roles_and_permission/users_page/users_table/view/users_page.dart

@@ -27,7 +27,8 @@ class UsersPage extends StatelessWidget {
   Widget build(BuildContext context) {
     final TextEditingController searchController = TextEditingController();
 
-    Widget actionButton({bool isActive = false, required String title, Function()? onTap}) {
+    Widget actionButton(
+        {bool isActive = false, required String title, Function()? onTap}) {
       return InkWell(
         onTap: onTap,
         child: Padding(
@@ -60,7 +61,8 @@ class UsersPage extends StatelessWidget {
                     : ColorsManager.disabledPink.withOpacity(0.5),
           ),
           child: Padding(
-            padding: const EdgeInsets.only(left: 10, right: 10, bottom: 5, top: 5),
+            padding:
+                const EdgeInsets.only(left: 10, right: 10, bottom: 5, top: 5),
             child: Row(
               crossAxisAlignment: CrossAxisAlignment.center,
               mainAxisAlignment: MainAxisAlignment.center,
@@ -84,12 +86,15 @@ class UsersPage extends StatelessWidget {
     }
 
     Widget changeIconStatus(
-        {required String userId, required String status, required Function()? onTap}) {
+        {required String userId,
+        required String status,
+        required Function()? onTap}) {
       return Center(
         child: InkWell(
           onTap: onTap,
           child: Padding(
-            padding: const EdgeInsets.only(left: 5, right: 5, bottom: 5, top: 5),
+            padding:
+                const EdgeInsets.only(left: 5, right: 5, bottom: 5, top: 5),
             child: SvgPicture.asset(
               status == "invited"
                   ? Assets.invitedIcon
@@ -114,8 +119,7 @@ class UsersPage extends StatelessWidget {
             padding: const EdgeInsets.all(20),
             child: Align(
               alignment: Alignment.topCenter,
-              child: ListView(
+              child: Column(
-                shrinkWrap: true,
                 children: [
                   Row(
                     children: [
@@ -188,18 +192,25 @@ class UsersPage extends StatelessWidget {
                       ),
                     ],
                   ),
-                  const SizedBox(height: 25),
+                  const SizedBox(height: 20),
-                  DynamicTableScreen(
+                  Container(
+                    height: screenSize.height * 0.65,
+                    child: DynamicTableScreen(
+                      tableSize: screenSize.height * 0.65,
                       onFilter: (columnIndex) {
                         if (columnIndex == 0) {
                           showNameMenu(
                             context: context,
                             isSelected: _blocRole.currentSortOrder,
                             aToZTap: () {
-                            context.read<UserTableBloc>().add(const SortUsersByNameAsc());
+                              context
+                                  .read<UserTableBloc>()
+                                  .add(const SortUsersByNameAsc());
                             },
-                          zToaTap: () {
+                            zToATap: () {
-                            context.read<UserTableBloc>().add(const SortUsersByNameDesc());
+                              context
+                                  .read<UserTableBloc>()
+                                  .add(const SortUsersByNameDesc());
                             },
                           );
                         }
@@ -208,8 +219,9 @@ class UsersPage extends StatelessWidget {
                             for (var item in _blocRole.jobTitle)
                               item: _blocRole.selectedJobTitles.contains(item),
                           };
-                        final RenderBox overlay =
+                          final RenderBox overlay = Overlay.of(context)
-                            Overlay.of(context).context.findRenderObject() as RenderBox;
+                              .context
+                              .findRenderObject() as RenderBox;
 
                           showPopUpFilterMenu(
                             position: RelativeRect.fromLTRB(
@@ -249,8 +261,9 @@ class UsersPage extends StatelessWidget {
                             for (var item in _blocRole.roleTypes)
                               item: _blocRole.selectedRoles.contains(item),
                           };
-                        final RenderBox overlay =
+                          final RenderBox overlay = Overlay.of(context)
-                            Overlay.of(context).context.findRenderObject() as RenderBox;
+                              .context
+                              .findRenderObject() as RenderBox;
                           showPopUpFilterMenu(
                             position: RelativeRect.fromLTRB(
                               overlay.size.width / 4,
@@ -270,7 +283,8 @@ class UsersPage extends StatelessWidget {
                                   .map((entry) => entry.key)
                                   .toList();
                               Navigator.of(context).pop();
-                            context.read<UserTableBloc>().add(FilterUsersByRoleEvent(
+                              context.read<UserTableBloc>().add(
+                                  FilterUsersByRoleEvent(
                                       selectedRoles: selectedItems,
                                       sortOrder: _blocRole.currentSortRole));
                             },
@@ -287,10 +301,14 @@ class UsersPage extends StatelessWidget {
                             context: context,
                             isSelected: _blocRole.currentSortOrder,
                             aToZTap: () {
-                            context.read<UserTableBloc>().add(const DateNewestToOldestEvent());
+                              context
+                                  .read<UserTableBloc>()
+                                  .add(const DateNewestToOldestEvent());
                             },
                             zToaTap: () {
-                            context.read<UserTableBloc>().add(const DateOldestToNewestEvent());
+                              context
+                                  .read<UserTableBloc>()
+                                  .add(const DateOldestToNewestEvent());
                             },
                           );
                         }
@@ -299,8 +317,9 @@ class UsersPage extends StatelessWidget {
                             for (var item in _blocRole.createdBy)
                               item: _blocRole.selectedCreatedBy.contains(item),
                           };
-                        final RenderBox overlay =
+                          final RenderBox overlay = Overlay.of(context)
-                            Overlay.of(context).context.findRenderObject() as RenderBox;
+                              .context
+                              .findRenderObject() as RenderBox;
                           showPopUpFilterMenu(
                             position: RelativeRect.fromLTRB(
                               overlay.size.width / 1,
@@ -338,8 +357,9 @@ class UsersPage extends StatelessWidget {
                               item: _blocRole.selectedStatuses.contains(item),
                           };
 
-                        final RenderBox overlay =
+                          final RenderBox overlay = Overlay.of(context)
-                            Overlay.of(context).context.findRenderObject() as RenderBox;
+                              .context
+                              .findRenderObject() as RenderBox;
                           showPopUpFilterMenu(
                             position: RelativeRect.fromLTRB(
                               overlay.size.width / 0,
@@ -376,10 +396,14 @@ class UsersPage extends StatelessWidget {
                             context: context,
                             isSelected: _blocRole.currentSortOrderDate,
                             aToZTap: () {
-                            context.read<UserTableBloc>().add(const DateNewestToOldestEvent());
+                              context
+                                  .read<UserTableBloc>()
+                                  .add(const DateNewestToOldestEvent());
                             },
                             zToaTap: () {
-                            context.read<UserTableBloc>().add(const DateOldestToNewestEvent());
+                              context
+                                  .read<UserTableBloc>()
+                                  .add(const DateOldestToNewestEvent());
                             },
                           );
                         }
@@ -406,17 +430,23 @@ class UsersPage extends StatelessWidget {
                           Text(user.createdTime ?? ''),
                           Text(user.invitedBy),
                           status(
-                          status: user.isEnabled == false ? 'disabled' : user.status,
+                            status: user.isEnabled == false
+                                ? 'disabled'
+                                : user.status,
                           ),
                           changeIconStatus(
-                          status: user.isEnabled == false ? 'disabled' : user.status,
+                            status: user.isEnabled == false
+                                ? 'disabled'
+                                : user.status,
                             userId: user.uuid,
                             onTap: user.status != "invited"
                                 ? () {
-                                  context.read<UserTableBloc>().add(ChangeUserStatus(
+                                    context.read<UserTableBloc>().add(
+                                        ChangeUserStatus(
                                             userId: user.uuid,
-                                      newStatus:
+                                            newStatus: user.isEnabled == false
-                                          user.isEnabled == false ? 'disabled' : user.status));
+                                                ? 'disabled'
+                                                : user.status));
                                   }
                                 : null,
                           ),
@@ -427,12 +457,15 @@ class UsersPage extends StatelessWidget {
                                       isActive: true,
                                       title: "Edit",
                                       onTap: () {
-                                      context.read<SpaceTreeBloc>().add(ClearCachedData());
+                                        context
+                                            .read<SpaceTreeBloc>()
+                                            .add(ClearCachedData());
                                         showDialog(
                                           context: context,
                                           barrierDismissible: false,
                                           builder: (BuildContext context) {
-                                          return EditUserDialog(userId: user.uuid);
+                                            return EditUserDialog(
+                                                userId: user.uuid);
                                           },
                                         ).then((v) {
                                           if (v != null) {
@@ -453,10 +486,13 @@ class UsersPage extends StatelessWidget {
                                     context: context,
                                     barrierDismissible: false,
                                     builder: (BuildContext context) {
-                                    return DeleteUserDialog(onTapDelete: () async {
+                                      return DeleteUserDialog(
+                                          onTapDelete: () async {
                                         try {
-                                        _blocRole.add(DeleteUserEvent(user.uuid, context));
+                                          _blocRole.add(DeleteUserEvent(
-                                        await Future.delayed(const Duration(seconds: 2));
+                                              user.uuid, context));
+                                          await Future.delayed(
+                                              const Duration(seconds: 2));
                                           return true;
                                         } catch (e) {
                                           return false;
@@ -475,6 +511,7 @@ class UsersPage extends StatelessWidget {
                         ];
                       }).toList(),
                     ),
+                  ),
                   Padding(
                     padding: const EdgeInsets.all(8.0),
                     child: Row(
@@ -486,14 +523,20 @@ class UsersPage extends StatelessWidget {
                             visiblePagesCount: 4,
                             buttonRadius: 10,
                             selectedButtonColor: ColorsManager.secondaryColor,
-                            buttonUnSelectedBorderColor: ColorsManager.grayBorder,
+                            buttonUnSelectedBorderColor:
-                            lastPageIcon: const Icon(Icons.keyboard_double_arrow_right),
+                                ColorsManager.grayBorder,
-                            firstPageIcon: const Icon(Icons.keyboard_double_arrow_left),
+                            lastPageIcon:
-                            totalPages:
+                                const Icon(Icons.keyboard_double_arrow_right),
-                                (_blocRole.totalUsersCount.length / _blocRole.itemsPerPage).ceil(),
+                            firstPageIcon:
+                                const Icon(Icons.keyboard_double_arrow_left),
+                            totalPages: (_blocRole.totalUsersCount.length /
+                                    _blocRole.itemsPerPage)
+                                .ceil(),
                             currentPage: _blocRole.currentPage,
                             onPageChanged: (int pageNumber) {
-                              context.read<UserTableBloc>().add(ChangePage(pageNumber));
+                              context
+                                  .read<UserTableBloc>()
+                                  .add(ChangePage(pageNumber));
                             },
                           ),
                         ),