ammar/syncrow-web
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/web.git synced 2025-07-10 15:17:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

changed chip to list

Browse Source
This commit is contained in:
hannathkadher
2025-01-14 12:14:48 +04:00
parent a4e7f30411
commit 12df07e681
9 changed files with 288 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/pages/spaces_management/link_space_model/view/link_space_model_dialog.dart
View File

@ -72,7 +72,7 @@ class LinkSpaceModelDialog extends StatelessWidget {
),
borderRadius: BorderRadius.circular(8.0),
),
child: SpaceModelCardWidget(model: model),
child: SpaceModelCardWidget(model: model,),
),
);
},

2
lib/pages/spaces_management/space_model/view/space_model_page.dart
View File

@ -69,7 +69,7 @@ class SpaceModelPage extends StatelessWidget {
final model = spaceModels[index];
return Container(
margin: const EdgeInsets.all(8.0),
child: SpaceModelCardWidget(model: model),
child: SpaceModelCardWidget(model:model),
);
},
),

66
lib/pages/spaces_management/space_model/widgets/dynamic_product_widget.dart Normal file
View File

@ -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,
);
}
}

58
lib/pages/spaces_management/space_model/widgets/dynamic_room_widget.dart Normal file
View File

@ -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,
);
}
}

25
lib/pages/spaces_management/space_model/widgets/ellipsis_item_widget.dart Normal file
View File

@ -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),
),
);
}
}

44
lib/pages/spaces_management/space_model/widgets/flexible_item_widget.dart Normal file
View File

@ -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),
),
],
),
);
}
}

27
lib/pages/spaces_management/space_model/widgets/room_name_widget.dart Normal file
View File

@ -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),
),
);
}
}

127
lib/pages/spaces_management/space_model/widgets/space_model_card_widget.dart
View File

@ -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(
model.modelName,
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
color: ColorsManager.blackColor,
fontWeight: FontWeight.bold,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
Text(
model.modelName,
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
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),
Container(
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,
),
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(),
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(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
}
}
}

30
lib/pages/spaces_management/space_model/widgets/subspace_chip_widget.dart
View File

@ -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),
),
);
}
}