From 053386a887990acfe4d24b0f629aa62bc7ec9fc6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?SUGGESTIED=20=E2=9C=A8?= <74950245+suggestied@users.noreply.github.com> Date: Sat, 15 Feb 2025 13:03:42 +0100 Subject: [PATCH] Create components for models Add UI components for various models to be used in the app with just their model passed. * **Brand Component** - Add `lib/ui/widgets/brand/brand_component.dart` to display brand name. * **Community Post Components** - Add `lib/ui/widgets/community_post/community_post_component.dart` to display post content and user profile. - Add `lib/ui/widgets/community_post_comment/community_post_comment_component.dart` to display comment and user profile. - Add `lib/ui/widgets/community_post_like/community_post_like_component.dart` to display user profile who liked the post. * **Item Components** - Add `lib/ui/widgets/item_category/item_category_component.dart` to display item category name. - Add `lib/ui/widgets/item_metadata/item_metadata_component.dart` to display item metadata details. - Add `lib/ui/widgets/lookbook_item/lookbook_item_component.dart` to display lookbook item details. - Add `lib/ui/widgets/outfit_item/outfit_item_component.dart` to display outfit item details. - Add `lib/ui/widgets/use_item/use_item_component.dart` to display use item details. - Add `lib/ui/widgets/use_outfit/use_outfit_component.dart` to display use outfit details. --- lib/ui/widgets/brand/brand_component.dart | 19 ++++++++++ .../community_post_component.dart | 30 ++++++++++++++++ .../community_post_comment_component.dart | 28 +++++++++++++++ .../community_post_like_component.dart | 23 ++++++++++++ .../item_category_component.dart | 19 ++++++++++ .../item_metadata_component.dart | 34 ++++++++++++++++++ .../lookbook_item_component.dart | 35 +++++++++++++++++++ .../outfit_item/outfit_item_component.dart | 30 ++++++++++++++++ .../widgets/use_item/use_item_component.dart | 35 +++++++++++++++++++ .../use_outfit/use_outfit_component.dart | 35 +++++++++++++++++++ 10 files changed, 288 insertions(+) create mode 100644 lib/ui/widgets/brand/brand_component.dart create mode 100644 lib/ui/widgets/community_post/community_post_component.dart create mode 100644 lib/ui/widgets/community_post_comment/community_post_comment_component.dart create mode 100644 lib/ui/widgets/community_post_like/community_post_like_component.dart create mode 100644 lib/ui/widgets/item_category/item_category_component.dart create mode 100644 lib/ui/widgets/item_metadata/item_metadata_component.dart create mode 100644 lib/ui/widgets/lookbook_item/lookbook_item_component.dart create mode 100644 lib/ui/widgets/outfit_item/outfit_item_component.dart create mode 100644 lib/ui/widgets/use_item/use_item_component.dart create mode 100644 lib/ui/widgets/use_outfit/use_outfit_component.dart diff --git a/lib/ui/widgets/brand/brand_component.dart b/lib/ui/widgets/brand/brand_component.dart new file mode 100644 index 0000000..3cc2091 --- /dev/null +++ b/lib/ui/widgets/brand/brand_component.dart @@ -0,0 +1,19 @@ +import 'package:flutter/material.dart'; +import 'package:openwardrobe/brick/models/brand.model.dart'; + +class BrandComponent extends StatelessWidget { + final Brand brand; + + const BrandComponent({super.key, required this.brand}); + + @override + Widget build(BuildContext context) { + return Container( + padding: const EdgeInsets.all(10), + child: Text( + brand.name, + style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold), + ), + ); + } +} diff --git a/lib/ui/widgets/community_post/community_post_component.dart b/lib/ui/widgets/community_post/community_post_component.dart new file mode 100644 index 0000000..fb3882d --- /dev/null +++ b/lib/ui/widgets/community_post/community_post_component.dart @@ -0,0 +1,30 @@ +import 'package:flutter/material.dart'; +import 'package:openwardrobe/brick/models/community_post.model.dart'; +import 'package:openwardrobe/ui/widgets/user_profile/user_profile_component.dart'; + +class CommunityPostComponent extends StatelessWidget { + final CommunityPost post; + + const CommunityPostComponent({super.key, required this.post}); + + @override + Widget build(BuildContext context) { + return Container( + padding: const EdgeInsets.all(10), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + if (post.userProfile != null) + UserProfileComponent(item: post.userProfile!), + const SizedBox(height: 8), + Text( + post.content, + style: const TextStyle(fontSize: 16), + ), + if (post.imageUrl != null) + Image.network(post.imageUrl!), + ], + ), + ); + } +} diff --git a/lib/ui/widgets/community_post_comment/community_post_comment_component.dart b/lib/ui/widgets/community_post_comment/community_post_comment_component.dart new file mode 100644 index 0000000..e22c785 --- /dev/null +++ b/lib/ui/widgets/community_post_comment/community_post_comment_component.dart @@ -0,0 +1,28 @@ +import 'package:flutter/material.dart'; +import 'package:openwardrobe/brick/models/community_post_comment.model.dart'; +import 'package:openwardrobe/ui/widgets/user_profile/user_profile_component.dart'; + +class CommunityPostCommentComponent extends StatelessWidget { + final CommunityPostComment comment; + + const CommunityPostCommentComponent({super.key, required this.comment}); + + @override + Widget build(BuildContext context) { + return Container( + padding: const EdgeInsets.all(10), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + if (comment.userProfile != null) + UserProfileComponent(item: comment.userProfile!), + const SizedBox(height: 8), + Text( + comment.comment, + style: const TextStyle(fontSize: 16), + ), + ], + ), + ); + } +} diff --git a/lib/ui/widgets/community_post_like/community_post_like_component.dart b/lib/ui/widgets/community_post_like/community_post_like_component.dart new file mode 100644 index 0000000..4937cdc --- /dev/null +++ b/lib/ui/widgets/community_post_like/community_post_like_component.dart @@ -0,0 +1,23 @@ +import 'package:flutter/material.dart'; +import 'package:openwardrobe/brick/models/community_post_like.model.dart'; +import 'package:openwardrobe/ui/widgets/user_profile/user_profile_component.dart'; + +class CommunityPostLikeComponent extends StatelessWidget { + final CommunityPostLike like; + + const CommunityPostLikeComponent({super.key, required this.like}); + + @override + Widget build(BuildContext context) { + return Container( + padding: const EdgeInsets.all(10), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + if (like.userProfile != null) + UserProfileComponent(item: like.userProfile!), + ], + ), + ); + } +} diff --git a/lib/ui/widgets/item_category/item_category_component.dart b/lib/ui/widgets/item_category/item_category_component.dart new file mode 100644 index 0000000..2741b1b --- /dev/null +++ b/lib/ui/widgets/item_category/item_category_component.dart @@ -0,0 +1,19 @@ +import 'package:flutter/material.dart'; +import 'package:openwardrobe/brick/models/item_category.model.dart'; + +class ItemCategoryComponent extends StatelessWidget { + final ItemCategory itemCategory; + + const ItemCategoryComponent({super.key, required this.itemCategory}); + + @override + Widget build(BuildContext context) { + return Container( + padding: const EdgeInsets.all(10), + child: Text( + itemCategory.name, + style: Theme.of(context).textTheme.headline6, + ), + ); + } +} diff --git a/lib/ui/widgets/item_metadata/item_metadata_component.dart b/lib/ui/widgets/item_metadata/item_metadata_component.dart new file mode 100644 index 0000000..503194c --- /dev/null +++ b/lib/ui/widgets/item_metadata/item_metadata_component.dart @@ -0,0 +1,34 @@ +import 'package:flutter/material.dart'; +import 'package:openwardrobe/brick/models/item_metadata.model.dart'; + +class ItemMetadataComponent extends StatelessWidget { + final ItemMetadata item; + + const ItemMetadataComponent({super.key, required this.item}); + + @override + Widget build(BuildContext context) { + return Container( + padding: const EdgeInsets.all(10), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Item Metadata Details', + style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold), + ), + const SizedBox(height: 8), + Text('Bought For: ${item.boughtFor ?? 'N/A'} ${item.currency}'), + Text('Purchase Date: ${item.purchaseDate ?? 'N/A'}'), + Text('Condition: ${item.condition ?? 'N/A'}'), + Text('Material: ${item.material ?? 'N/A'}'), + Text('Size: ${item.size ?? 'N/A'}'), + Text('Color: ${item.color ?? 'N/A'}'), + Text('Notes: ${item.notes ?? 'N/A'}'), + Text('Created At: ${item.createdAt}'), + Text('Updated At: ${item.updatedAt}'), + ], + ), + ); + } +} diff --git a/lib/ui/widgets/lookbook_item/lookbook_item_component.dart b/lib/ui/widgets/lookbook_item/lookbook_item_component.dart new file mode 100644 index 0000000..aa02116 --- /dev/null +++ b/lib/ui/widgets/lookbook_item/lookbook_item_component.dart @@ -0,0 +1,35 @@ +import 'package:flutter/material.dart'; +import 'package:openwardrobe/brick/models/lookbook_item.model.dart'; + +class LookbookItemComponent extends StatelessWidget { + final LookbookItem item; + + const LookbookItemComponent({super.key, required this.item}); + + @override + Widget build(BuildContext context) { + return Container( + padding: const EdgeInsets.all(10), + constraints: BoxConstraints(maxWidth: 400), // Set max width like a card + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + item.itemId, + style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold), + ), + const SizedBox(height: 8), + Text( + item.itemType, + style: TextStyle(fontSize: 16), + ), + const SizedBox(height: 8), + Text( + item.createdAt.toString(), + style: TextStyle(fontSize: 16), + ), + ], + ), + ); + } +} diff --git a/lib/ui/widgets/outfit_item/outfit_item_component.dart b/lib/ui/widgets/outfit_item/outfit_item_component.dart new file mode 100644 index 0000000..b275fa9 --- /dev/null +++ b/lib/ui/widgets/outfit_item/outfit_item_component.dart @@ -0,0 +1,30 @@ +import 'package:flutter/material.dart'; +import 'package:openwardrobe/brick/models/outfit_item.model.dart'; + +class OutfitItemComponent extends StatelessWidget { + final OutfitItem item; + + const OutfitItemComponent({super.key, required this.item}); + + @override + Widget build(BuildContext context) { + return Container( + padding: const EdgeInsets.all(10), + constraints: const BoxConstraints(maxWidth: 400), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + item.outfit.name, + style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold), + ), + const SizedBox(height: 8), + Text( + item.wardrobeItem.imagePath, + style: const TextStyle(fontSize: 16), + ), + ], + ), + ); + } +} diff --git a/lib/ui/widgets/use_item/use_item_component.dart b/lib/ui/widgets/use_item/use_item_component.dart new file mode 100644 index 0000000..7ccaee9 --- /dev/null +++ b/lib/ui/widgets/use_item/use_item_component.dart @@ -0,0 +1,35 @@ +import 'package:flutter/material.dart'; +import 'package:openwardrobe/brick/models/use_item.model.dart'; + +class UseItemComponent extends StatelessWidget { + final UseItem item; + + const UseItemComponent({super.key, required this.item}); + + @override + Widget build(BuildContext context) { + return Container( + padding: const EdgeInsets.all(10), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Used At: ${item.usedAt}', + style: const TextStyle(fontSize: 16), + ), + const SizedBox(height: 8), + Text( + 'Wardrobe Item: ${item.wardrobeItem.id}', + style: const TextStyle(fontSize: 16), + ), + const SizedBox(height: 8), + if (item.userProfile != null) + Text( + 'User: ${item.userProfile!.username}', + style: const TextStyle(fontSize: 16), + ), + ], + ), + ); + } +} diff --git a/lib/ui/widgets/use_outfit/use_outfit_component.dart b/lib/ui/widgets/use_outfit/use_outfit_component.dart new file mode 100644 index 0000000..553a345 --- /dev/null +++ b/lib/ui/widgets/use_outfit/use_outfit_component.dart @@ -0,0 +1,35 @@ +import 'package:flutter/material.dart'; +import 'package:openwardrobe/brick/models/use_outfit.model.dart'; + +class UseOutfitComponent extends StatelessWidget { + final UseOutfit item; + + const UseOutfitComponent({super.key, required this.item}); + + @override + Widget build(BuildContext context) { + return Container( + padding: const EdgeInsets.all(10), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Outfit: ${item.outfit.name}', + style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold), + ), + const SizedBox(height: 8), + Text( + 'Used at: ${item.usedAt}', + style: const TextStyle(fontSize: 16), + ), + const SizedBox(height: 8), + if (item.userProfile != null) + Text( + 'User: ${item.userProfile!.username}', + style: const TextStyle(fontSize: 16), + ), + ], + ), + ); + } +}