changed chip to list

2025-07-10 15:17:31 +00:00 · 2025-01-14 12:14:48 +04:00
parent a4e7f30411
commit 12df07e681
9 changed files with 288 additions and 93 deletions
--- a/lib/pages/spaces_management/link_space_model/view/link_space_model_dialog.dart
+++ b/lib/pages/spaces_management/link_space_model/view/link_space_model_dialog.dart
@ -72,7 +72,7 @@ class LinkSpaceModelDialog extends StatelessWidget {
                                  ),
                                  borderRadius: BorderRadius.circular(8.0),
                                ),
-                                child: SpaceModelCardWidget(model: model),
+                              child: SpaceModelCardWidget(model: model,),
                              ),
                            );
                          },
--- a/lib/pages/spaces_management/space_model/widgets/dynamic_product_widget.dart
+++ b/lib/pages/spaces_management/space_model/widgets/dynamic_product_widget.dart
@ -0,0 +1,66 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/spaces_management/space_model/widgets/ellipsis_item_widget.dart';
+import 'package:syncrow_web/pages/spaces_management/space_model/widgets/flexible_item_widget.dart';
+
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class DynamicProductWidget extends StatelessWidget {
+  final Map<String, int> productTagCount;
+  final double maxWidth;
+  final double maxHeight;
+
+  const DynamicProductWidget({
+    Key? key,
+    required this.productTagCount,
+    required this.maxWidth,
+    required this.maxHeight,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    const double itemSpacing = 8.0;
+    const double lineSpacing = 8.0;
+    const double textPadding = 16.0;
+    const double itemHeight = 40.0;
+
+    List<Widget> productWidgets = [];
+    double currentLineWidth = 0.0;
+    double currentHeight = itemHeight;
+
+    for (final product in productTagCount.entries) {
+      final String prodType = product.key;
+      final int count = product.value;
+
+      final TextPainter textPainter = TextPainter(
+        text: TextSpan(
+          text: 'x$count',
+          style: Theme.of(context)
+              .textTheme
+              .bodySmall
+              ?.copyWith(color: ColorsManager.spaceColor),
+        ),
+        textDirection: TextDirection.ltr,
+      )..layout();
+
+      final double itemWidth = textPainter.width + textPadding + 20;
+
+      if (currentLineWidth + itemWidth + itemSpacing > maxWidth) {
+        currentHeight += itemHeight + lineSpacing;
+        if (currentHeight > maxHeight) {
+          productWidgets.add(const EllipsisItemWidget());
+          break;
+        }
+        currentLineWidth = 0.0;
+      }
+
+      productWidgets.add(FlexibleItemWidget(prodType: prodType, count: count));
+      currentLineWidth += itemWidth + itemSpacing;
+    }
+
+    return Wrap(
+      spacing: itemSpacing,
+      runSpacing: lineSpacing,
+      children: productWidgets,
+    );
+  }
+}
--- a/lib/pages/spaces_management/space_model/widgets/dynamic_room_widget.dart
+++ b/lib/pages/spaces_management/space_model/widgets/dynamic_room_widget.dart
@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/spaces_management/space_model/models/subspace_template_model.dart';
+import 'package:syncrow_web/pages/spaces_management/space_model/widgets/room_name_widget.dart';
+
+class DynamicRoomWidget extends StatelessWidget {
+  final List<SubspaceTemplateModel>? subspaceModels;
+  final double maxWidth;
+  final double maxHeight;
+
+  const DynamicRoomWidget({
+    Key? key,
+    required this.subspaceModels,
+    required this.maxWidth,
+    required this.maxHeight,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    const double itemSpacing = 8.0;
+    const double lineSpacing = 8.0;
+    const double textPadding = 16.0;
+    const double itemHeight = 30.0;
+
+    List<Widget> roomWidgets = [];
+    double currentLineWidth = 0.0;
+    double currentHeight = itemHeight;
+
+    for (final subspace in subspaceModels!) {
+      final TextPainter textPainter = TextPainter(
+        text: TextSpan(
+          text: subspace.subspaceName,
+          style: const TextStyle(fontSize: 16),
+        ),
+        textDirection: TextDirection.ltr,
+      )..layout();
+
+      final double itemWidth = textPainter.width + textPadding;
+
+      if (currentLineWidth + itemWidth + itemSpacing > maxWidth) {
+        currentHeight += itemHeight + lineSpacing;
+        if (currentHeight > maxHeight) {
+          roomWidgets.add(const RoomNameWidget(name: "..."));
+          break;
+        }
+        currentLineWidth = 0.0;
+      }
+
+      roomWidgets.add(RoomNameWidget(name: subspace.subspaceName));
+      currentLineWidth += itemWidth + itemSpacing;
+    }
+
+    return Wrap(
+      spacing: itemSpacing,
+      runSpacing: lineSpacing,
+      children: roomWidgets,
+    );
+  }
+}
--- a/lib/pages/spaces_management/space_model/widgets/ellipsis_item_widget.dart
+++ b/lib/pages/spaces_management/space_model/widgets/ellipsis_item_widget.dart
@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class EllipsisItemWidget extends StatelessWidget {
+  const EllipsisItemWidget({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
+      decoration: BoxDecoration(
+        color: ColorsManager.textFieldGreyColor,
+        borderRadius: BorderRadius.circular(8),
+        border: Border.all(color: ColorsManager.transparentColor),
+      ),
+      child: Text(
+        "...",
+        style: Theme.of(context)
+            .textTheme
+            .bodySmall
+            ?.copyWith(color: ColorsManager.spaceColor),
+      ),
+    );
+  }
+}
--- a/lib/pages/spaces_management/space_model/widgets/flexible_item_widget.dart
+++ b/lib/pages/spaces_management/space_model/widgets/flexible_item_widget.dart
@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class FlexibleItemWidget extends StatelessWidget {
+  final String prodType;
+  final int count;
+
+  const FlexibleItemWidget({
+    Key? key,
+    required this.prodType,
+    required this.count,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
+      decoration: BoxDecoration(
+        color: ColorsManager.textFieldGreyColor,
+        borderRadius: BorderRadius.circular(8),
+        border: Border.all(color: ColorsManager.transparentColor),
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          SvgPicture.asset(
+            prodType,
+            width: 15,
+            height: 16,
+          ),
+          const SizedBox(width: 4),
+          Text(
+            'x$count',
+            style: Theme.of(context)
+                .textTheme
+                .bodySmall
+                ?.copyWith(color: ColorsManager.spaceColor),
+          ),
+        ],
+      ),
+    );
+  }
+}
--- a/lib/pages/spaces_management/space_model/widgets/room_name_widget.dart
+++ b/lib/pages/spaces_management/space_model/widgets/room_name_widget.dart
@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class RoomNameWidget extends StatelessWidget {
+  final String name;
+
+  const RoomNameWidget({Key? key, required this.name}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
+      decoration: BoxDecoration(
+        color: ColorsManager.textFieldGreyColor,
+        borderRadius: BorderRadius.circular(8),
+        border: Border.all(color: ColorsManager.transparentColor),
+      ),
+      child: Text(
+        name,
+        style: Theme.of(context)
+            .textTheme
+            .bodySmall
+            ?.copyWith(color: ColorsManager.spaceColor),
+      ),
+    );
+  }
+}
--- a/lib/pages/spaces_management/space_model/widgets/space_model_card_widget.dart
+++ b/lib/pages/spaces_management/space_model/widgets/space_model_card_widget.dart
@ -1,7 +1,8 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/svg.dart';
 import 'package:syncrow_web/pages/spaces_management/space_model/models/space_template_model.dart';
-import 'package:syncrow_web/pages/spaces_management/space_model/widgets/subspace_chip_widget.dart';
+import 'package:syncrow_web/pages/spaces_management/space_model/widgets/dynamic_product_widget.dart';
+import 'package:syncrow_web/pages/spaces_management/space_model/widgets/dynamic_room_widget.dart';
+import 'package:syncrow_web/pages/spaces_management/space_model/widgets/room_name_widget.dart';
 import 'package:syncrow_web/utils/color_manager.dart';

 class SpaceModelCardWidget extends StatelessWidget {
@ -32,111 +33,81 @@ class SpaceModelCardWidget extends StatelessWidget {
    }

    return Container(
+      padding: const EdgeInsets.all(16.0),
      decoration: BoxDecoration(
-        color: ColorsManager.whiteColors,
+        color: Colors.white,
        borderRadius: BorderRadius.circular(10),
        boxShadow: [
          BoxShadow(
-            color: ColorsManager.lightGrayColor.withOpacity(0.5),
+            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 2,
            blurRadius: 5,
            offset: const Offset(0, 3),
          ),
        ],
      ),
-      padding: const EdgeInsets.fromLTRB(16.0, 14.0, 8.0, 8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
-          Flexible(
-            child: Text(
+          Text(
            model.modelName,
            style: Theme.of(context).textTheme.headlineMedium?.copyWith(
-                    color: ColorsManager.blackColor,
+                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                ),
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
-          ),
          const SizedBox(height: 10),
          Expanded(
            child: Row(
-              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
+                // Left Container
                Expanded(
-                  child: Wrap(
-                    spacing: 3.0,
-                    runSpacing: 3.0,
-                    children: [
-                      for (var subspace in model.subspaceModels!
-                          .take(calculateTakeCount(context)))
-                        SubspaceChipWidget(subspace: subspace.subspaceName),
-                    ],
+                  flex: 1, // Distribute space proportionally
+                  child: Container(
+                    padding: const EdgeInsets.all(8.0),
+                    child: LayoutBuilder(
+                      builder: (context, constraints) {
+                        return Align(
+                          alignment: Alignment.topLeft,
+                          child: DynamicRoomWidget(
+                            subspaceModels: model.subspaceModels,
+                            maxWidth: constraints.maxWidth,
+                            maxHeight: constraints.maxHeight,
+                          ),
+                        );
+                      },
+                    ),
                  ),
                ),
-                if (productTagCount.isNotEmpty)
                Container(
-                    width: 1,
-                    height: double.infinity,
-                    color: ColorsManager.softGray,
-                    margin: const EdgeInsets.symmetric(horizontal: 4.0),
-                  ),
-                const SizedBox(width: 7),
+                  width: 1.0, // Thickness of the line
+                  color: ColorsManager.softGray, // Subtle grey color
+                  margin: const EdgeInsets.symmetric(
+                      vertical: 6.0), // Top and bottom spacing
+                ), // Right Container
                Expanded(
-                  child: Wrap(
-                    spacing: 4.0,
-                    runSpacing: 4.0,
-                    children: productTagCount.entries.map((entry) {
-                      final prodType = entry.key;
-                      final count = entry.value;
-
-                      return Chip(
-                        label: Row(
-                          mainAxisSize: MainAxisSize.min,
-                          children: [
-                            SvgPicture.asset(
-                              prodType,
-                              width: 15,
-                              height: 16,
+                  flex: 1, // Distribute space proportionally
+                  child: Container(
+                    padding: const EdgeInsets.all(8.0),
+                    child: LayoutBuilder(
+                      builder: (context, constraints) {
+                        return Align(
+                            alignment: Alignment.topLeft,
+                            child: DynamicProductWidget(
+                                productTagCount: productTagCount,
+                                maxWidth: constraints.maxWidth,
+                                maxHeight: constraints.maxHeight));
+                      },
                    ),
-                            const SizedBox(width: 4),
-                            Text(
-                              'x$count', // Product count
-                              style: const TextStyle(fontSize: 12),
-                            ),
-                          ],
-                        ),
-                        backgroundColor: ColorsManager.textFieldGreyColor,
-                        shape: RoundedRectangleBorder(
-                          borderRadius: BorderRadius.circular(8),
-                          side: const BorderSide(
-                            color: ColorsManager.transparentColor,
-                            width: 0,
-                          ),
-                        ),
-                      );
-                    }).toList(),
                  ),
                ),
              ],
            ),
          ),
-          const SizedBox(height: 5),
        ],
      ),
    );
  }
-
-  int calculateTakeCount(BuildContext context) {
-    double screenWidth = MediaQuery.of(context).size.width;
-    // Adjust the count based on the screen width
-    if (screenWidth > 1500) {
-      return 3; // For large screens
-    } else if (screenWidth > 1200) {
-      return 2;
-    } else {
-      return 1; // For smaller screens
-    }
-  }
 }
--- a/lib/pages/spaces_management/space_model/widgets/subspace_chip_widget.dart
+++ b/lib/pages/spaces_management/space_model/widgets/subspace_chip_widget.dart
@ -1,6 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:syncrow_web/utils/color_manager.dart';

+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
 class SubspaceChipWidget extends StatelessWidget {
  final String subspace;

@ -11,24 +14,25 @@ class SubspaceChipWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    return Chip(
-      label: Text(
-        subspace,
-        overflow: TextOverflow.ellipsis,
-        maxLines: 1,
-      ),
-      backgroundColor: ColorsManager.textFieldGreyColor,
-      labelStyle: Theme.of(context)
-          .textTheme
-          .bodySmall
-          ?.copyWith(color: ColorsManager.spaceColor),
-      shape: RoundedRectangleBorder(
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+      decoration: BoxDecoration(
+        color: ColorsManager.textFieldGreyColor,
        borderRadius: BorderRadius.circular(8),
-        side: const BorderSide(
+        border: Border.all(
          color: ColorsManager.transparentColor,
          width: 0,
        ),
      ),
+      child: Text(
+        subspace,
+        overflow: TextOverflow.ellipsis,
+        maxLines: 1,
+        style: Theme.of(context)
+            .textTheme
+            .bodySmall
+            ?.copyWith(color: ColorsManager.spaceColor),
+      ),
    );
  }
 }