added validation

This commit is contained in:
hannathkadher
2025-01-06 16:38:44 +04:00
parent a31eb27c92
commit 6ee650e9f8
6 changed files with 278 additions and 131 deletions

View File

@ -11,15 +11,17 @@ class AssignTagModelsDialog extends StatefulWidget {
final List<TagModel>? initialTags; final List<TagModel>? initialTags;
final ValueChanged<List<TagModel>>? onTagsAssigned; final ValueChanged<List<TagModel>>? onTagsAssigned;
final List<SelectedProduct> addedProducts; final List<SelectedProduct> addedProducts;
final List<String>? allTags;
const AssignTagModelsDialog({ const AssignTagModelsDialog(
Key? key, {Key? key,
required this.products, required this.products,
required this.subspaces, required this.subspaces,
required this.addedProducts, required this.addedProducts,
this.initialTags, this.initialTags,
this.onTagsAssigned, this.onTagsAssigned,
}) : super(key: key); this.allTags})
: super(key: key);
@override @override
AssignTagModelsDialogState createState() => AssignTagModelsDialogState(); AssignTagModelsDialogState createState() => AssignTagModelsDialogState();
@ -29,12 +31,15 @@ class AssignTagModelsDialogState extends State<AssignTagModelsDialog> {
late List<TagModel> tags; late List<TagModel> tags;
late List<SelectedProduct> selectedProducts; late List<SelectedProduct> selectedProducts;
late List<String> locations; late List<String> locations;
late List<String> otherTags;
late List<TextEditingController> controllers;
Set<String> usedTags = {};
String? errorMessage;
bool isSaveEnabled = true;
@override @override
void initState() { void initState() {
super.initState(); super.initState();
print(widget.addedProducts);
print(widget.subspaces);
// Initialize tags from widget.initialTags or create new ones if it's empty // Initialize tags from widget.initialTags or create new ones if it's empty
tags = widget.initialTags?.isNotEmpty == true tags = widget.initialTags?.isNotEmpty == true
@ -58,6 +63,39 @@ class AssignTagModelsDialogState extends State<AssignTagModelsDialog> {
? widget.subspaces!.map((subspace) => subspace.subspaceName).toList() ? widget.subspaces!.map((subspace) => subspace.subspaceName).toList()
: []; : [];
locations.add("None"); locations.add("None");
otherTags = widget.allTags != null ? widget.allTags! : [];
controllers = List.generate(
tags.length,
(index) => TextEditingController(text: tags[index].tag),
);
for (final tag in tags) {
if (tag.tag != null && tag.tag!.isNotEmpty) {
usedTags.add(tag.tag!);
}
}
_validateTags();
}
void _validateTags() {
// Disable save if any tag is empty
final hasEmptyTag =
tags.any((tag) => tag.tag == null || tag.tag!.trim().isEmpty);
setState(() {
isSaveEnabled = !hasEmptyTag;
});
}
@override
void dispose() {
// Dispose of controllers
for (final controller in controllers) {
controller.dispose();
}
super.dispose();
} }
@override @override
@ -66,123 +104,160 @@ class AssignTagModelsDialogState extends State<AssignTagModelsDialog> {
title: const Text('Assign Tags'), title: const Text('Assign Tags'),
backgroundColor: ColorsManager.whiteColors, backgroundColor: ColorsManager.whiteColors,
content: SingleChildScrollView( content: SingleChildScrollView(
child: Container( child: Column(
width: MediaQuery.of(context).size.width * 0.4, crossAxisAlignment: CrossAxisAlignment.start,
decoration: BoxDecoration( children: [
border: Border.all(color: ColorsManager.dataHeaderGrey, width: 1), Container(
borderRadius: BorderRadius.circular(20), width: MediaQuery.of(context).size.width * 0.4,
), decoration: BoxDecoration(
child: Theme( border:
data: Theme.of(context).copyWith( Border.all(color: ColorsManager.dataHeaderGrey, width: 1),
dataTableTheme: DataTableThemeData(
headingRowColor:
MaterialStateProperty.all(ColorsManager.dataHeaderGrey),
headingTextStyle: const TextStyle(
color: ColorsManager.blackColor,
fontWeight: FontWeight.bold,
),
),
),
child: DataTable(
border: TableBorder.all(
color: ColorsManager.dataHeaderGrey,
width: 1,
borderRadius: BorderRadius.circular(20), borderRadius: BorderRadius.circular(20),
), ),
columns: const [ child: DataTable(
DataColumn(label: Text('#')), border: TableBorder.all(
DataColumn(label: Text('Device')), color: ColorsManager.dataHeaderGrey,
DataColumn(label: Text('Tag')), width: 1,
DataColumn(label: Text('Location')), borderRadius: BorderRadius.circular(20),
], ),
rows: tags.asMap().entries.map((entry) { columns: const [
final index = entry.key + 1; DataColumn(label: Text('#')),
final tag = entry.value; DataColumn(label: Text('Device')),
DataColumn(label: Text('Tag')),
DataColumn(label: Text('Location')),
],
rows: List.generate(tags.length, (index) {
final tag = tags[index];
final controller = controllers[index];
return DataRow( return DataRow(
cells: [ cells: [
DataCell( DataCell(Center(child: Text(index.toString()))),
Center( DataCell(
child: Text(index.toString()), Center(child: Text(tag.product?.name ?? 'Unknown'))),
), DataCell(
), Row(
DataCell( children: [
Center( Expanded(
child: Text(tag.product?.catName ?? 'Unknown'), child: TextFormField(
), controller: controller,
), decoration: const InputDecoration(
DataCell( hintText: 'Enter Tag',
Center( border: InputBorder.none,
child: DropdownButton<String>( hintStyle: TextStyle(
value: tag.tag!.isNotEmpty ? tag.tag : null, color: Colors.grey,
onChanged: (value) { fontSize: 14,
setState(() { ),
tag.tag = value ?? ''; // Update tag value ),
}); style: const TextStyle(
}, color: Colors.black,
items: [ fontSize: 14,
const DropdownMenuItem( ),
value: null, onChanged: (value) {
child: Text('None'), setState(() {
tag.tag = value.trim();
_validateTags();
});
},
),
),
PopupMenuButton<String>(
icon: const Icon(Icons.arrow_drop_down,
color: Colors.black),
onSelected: (value) {
setState(() {
if (tag.tag != null && tag.tag!.isNotEmpty) {
usedTags.remove(tag.tag!);
}
controller.text = value;
tag.tag = value;
if (tag.tag != null && tag.tag!.isNotEmpty) {
usedTags.add(tag.tag!);
}
_validateTags(); // Validate after selection
});
},
color: Colors.white,
itemBuilder: (context) {
return widget.allTags!
.where((tagValue) =>
!usedTags.contains(tagValue))
.map((tagValue) {
return PopupMenuItem<String>(
value: tagValue,
child: Text(
tagValue,
style: const TextStyle(
color: Color(0xFF5D5D5D),
fontSize: 14,
),
),
);
}).toList();
},
), ),
...List.generate(10, (index) {
final tagName = 'Tag ${index + 1}';
return DropdownMenuItem(
value: tagName,
child: Text(tagName),
);
}),
], ],
), ),
), ),
), DataCell(
DataCell( Center(
Center( child: DropdownButtonHideUnderline(
child: DropdownButtonHideUnderline( child: DropdownButton<String>(
child: DropdownButton<String>( alignment: AlignmentDirectional.center,
alignment: AlignmentDirectional.centerEnd, value: locations.contains(tag.location)
value: locations.contains(tag.location) ? tag.location
? tag.location : null,
: null, // Validate value onChanged: (value) {
onChanged: (value) { setState(() {
setState(() { tag.location = value ?? 'None';
tag.location = });
value ?? 'None'; // Update location },
}); dropdownColor: ColorsManager.whiteColors,
}, icon: const Icon(Icons.arrow_drop_down,
dropdownColor: Colors.white, color: Colors.black),
icon: const Icon( style: const TextStyle(
Icons.arrow_drop_down, fontSize: 10,
color: Colors.black, fontWeight: FontWeight.w600,
), color: Colors.black,
style: const TextStyle( ),
fontSize: 16, isExpanded: true,
fontWeight: FontWeight.w600, items: locations
color: Colors.black, .map((location) => DropdownMenuItem(
), value: location,
isExpanded: true, child: Text(
items: locations location,
.map((location) => DropdownMenuItem( style: const TextStyle(
value: location, fontSize: 14,
child: Text( fontWeight: FontWeight.w400,
location, color: Color(0xFF5D5D5D),
style: const TextStyle( ),
fontSize: 14,
fontWeight: FontWeight.w400,
color: Colors.grey,
), ),
), ))
)) .toList(),
.toList(), ),
), ),
), ),
), ),
), ],
], );
); }),
}).toList(), ),
), ),
), if (errorMessage != null)
Container(
width: MediaQuery.of(context).size.width * 0.4,
padding: const EdgeInsets.only(top: 8.0, left: 12.0),
child: Text(
errorMessage!,
style: const TextStyle(
color: Colors.red,
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
),
],
), ),
), ),
actions: [ actions: [
@ -198,15 +273,19 @@ class AssignTagModelsDialogState extends State<AssignTagModelsDialog> {
), ),
), ),
ElevatedButton( ElevatedButton(
onPressed: () { onPressed: isSaveEnabled
Navigator.of(context).pop(); ? () {
if (widget.onTagsAssigned != null) { Navigator.of(context).pop();
widget.onTagsAssigned!(tags); if (widget.onTagsAssigned != null) {
} widget.onTagsAssigned!(tags);
}, }
}
: null, // Disable the button if validation fails
child: const Text('Save'), child: const Text('Save'),
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: ColorsManager.secondaryColor, backgroundColor: isSaveEnabled
? ColorsManager.secondaryColor
: Colors.grey, // Change button color when disabled
foregroundColor: ColorsManager.whiteColors, foregroundColor: ColorsManager.whiteColors,
), ),
), ),

View File

@ -61,7 +61,6 @@ class SpaceTemplateModel {
} }
} }
class UpdateSubspaceTemplateModel { class UpdateSubspaceTemplateModel {
final String uuid; final String uuid;
final Action action; final Action action;
@ -133,3 +132,28 @@ class UpdateTagModel {
}; };
} }
} }
extension SpaceTemplateExtensions on SpaceTemplateModel {
List<String> listAllTagValues() {
final List<String> tagValues = [];
if (tags != null) {
tagValues.addAll(
tags!.map((tag) => tag.tag ?? '').where((tag) => tag.isNotEmpty));
}
if (subspaceModels != null) {
for (final subspace in subspaceModels!) {
if (subspace.tags != null) {
tagValues.addAll(
subspace.tags!
.map((tag) => tag.tag ?? '')
.where((tag) => tag.isNotEmpty),
);
}
}
}
return tagValues;
}
}

View File

@ -1,7 +1,5 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:syncrow_web/pages/spaces_management/all_spaces/model/product_model.dart'; import 'package:syncrow_web/pages/spaces_management/all_spaces/model/product_model.dart';
import 'package:syncrow_web/pages/spaces_management/space_model/bloc/create_space_model_bloc.dart';
import 'package:syncrow_web/pages/spaces_management/space_model/models/space_template_model.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/dialog/create_space_model_dialog.dart'; import 'package:syncrow_web/pages/spaces_management/space_model/widgets/dialog/create_space_model_dialog.dart';
import 'package:syncrow_web/pages/spaces_management/space_model/widgets/space_model_card_widget.dart'; import 'package:syncrow_web/pages/spaces_management/space_model/widgets/space_model_card_widget.dart';
@ -16,6 +14,7 @@ class SpaceModelPage extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final allTagValues = getAllTagValues();
return Scaffold( return Scaffold(
backgroundColor: ColorsManager.whiteColors, backgroundColor: ColorsManager.whiteColors,
body: Padding( body: Padding(
@ -24,11 +23,11 @@ class SpaceModelPage extends StatelessWidget {
//clipBehavior: Clip.none, //clipBehavior: Clip.none,
shrinkWrap: false, shrinkWrap: false,
physics: const AlwaysScrollableScrollPhysics(), physics: const AlwaysScrollableScrollPhysics(),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3, crossAxisCount: 3,
crossAxisSpacing: 13.0, crossAxisSpacing: 13.0,
mainAxisSpacing: 13.0, mainAxisSpacing: 13.0,
childAspectRatio: 3.5, childAspectRatio: calculateChildAspectRatio(context),
), ),
itemCount: spaceModels.length + 1, itemCount: spaceModels.length + 1,
itemBuilder: (context, index) { itemBuilder: (context, index) {
@ -38,7 +37,7 @@ class SpaceModelPage extends StatelessWidget {
showDialog( showDialog(
context: context, context: context,
builder: (BuildContext context) { builder: (BuildContext context) {
return CreateSpaceModelDialog(products: products); return CreateSpaceModelDialog(products: products,allTags: allTagValues,);
}, },
); );
}, },
@ -91,4 +90,31 @@ class SpaceModelPage extends StatelessWidget {
), ),
); );
} }
double calculateChildAspectRatio(BuildContext context) {
double screenWidth = MediaQuery.of(context).size.width;
// Adjust the aspect ratio based on the screen width
if (screenWidth > 1600) {
return 4.0; // For large screens
}
if (screenWidth > 1200) {
return 3.2; // For large screens
} else if (screenWidth > 800) {
return 3.0; // For medium screens
} else {
return 2.0; // For small screens
}
}
List<String> getAllTagValues() {
final List<String> allTags = [];
for (final spaceModel in spaceModels) {
if (spaceModel.tags != null) {
allTags.addAll(spaceModel.listAllTagValues());
}
}
return allTags;
}
} }

View File

@ -16,8 +16,9 @@ import '../../models/subspace_template_model.dart';
class CreateSpaceModelDialog extends StatelessWidget { class CreateSpaceModelDialog extends StatelessWidget {
final List<ProductModel>? products; final List<ProductModel>? products;
final List<String>? allTags;
const CreateSpaceModelDialog({Key? key, this.products}) : super(key: key); const CreateSpaceModelDialog({Key? key, this.products, this.allTags}) : super(key: key);
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -79,6 +80,7 @@ class CreateSpaceModelDialog extends StatelessWidget {
builder: (context) => AddDeviceTypeModelWidget( builder: (context) => AddDeviceTypeModelWidget(
products: products, products: products,
subspaces: subspaces, subspaces: subspaces,
allTags: allTags,
), ),
); );
if (result == true) { if (result == true) {

View File

@ -69,7 +69,8 @@ class SpaceModelCardWidget extends StatelessWidget {
spacing: 3.0, spacing: 3.0,
runSpacing: 3.0, runSpacing: 3.0,
children: [ children: [
for (var subspace in model.subspaceModels!.take(3)) for (var subspace in model.subspaceModels!
.take(calculateTakeCount(context)))
SubspaceChipWidget(subspace: subspace.subspaceName), SubspaceChipWidget(subspace: subspace.subspaceName),
], ],
), ),
@ -126,4 +127,16 @@ class SpaceModelCardWidget extends StatelessWidget {
), ),
); );
} }
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
}
}
} }

View File

@ -15,13 +15,15 @@ class AddDeviceTypeModelWidget extends StatelessWidget {
final ValueChanged<List<SelectedProduct>>? onProductsSelected; final ValueChanged<List<SelectedProduct>>? onProductsSelected;
final List<SelectedProduct>? initialSelectedProducts; final List<SelectedProduct>? initialSelectedProducts;
final List<SubspaceTemplateModel>? subspaces; final List<SubspaceTemplateModel>? subspaces;
final List<String>? allTags;
const AddDeviceTypeModelWidget( const AddDeviceTypeModelWidget(
{super.key, {super.key,
this.products, this.products,
this.initialSelectedProducts, this.initialSelectedProducts,
this.onProductsSelected, this.onProductsSelected,
this.subspaces}); this.subspaces,
this.allTags});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -80,6 +82,7 @@ class AddDeviceTypeModelWidget extends StatelessWidget {
products: products, products: products,
subspaces: subspaces, subspaces: subspaces,
addedProducts: currentState, addedProducts: currentState,
allTags: allTags,
), ),
); );
} }