diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/assign_commitments.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/assign_commitments.dart index 45806a1..29df058 100644 --- a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/assign_commitments.dart +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/assign_commitments.dart @@ -1,11 +1,11 @@ import 'package:collaction_cms/application/crowdaction/crowdaction_creation/commitments/commitments_bloc.dart'; import 'package:collaction_cms/domain/crowdaction/crowdaction.dart'; +import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart'; import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assigned_commitments/commitment_form_controller.dart'; import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assigned_commitments/commitment_item_form.dart'; import 'package:collaction_cms/presentation/shared/buttons/button_outlined.dart'; import 'package:collaction_cms/presentation/shared/buttons/combo_buttons.dart'; import 'package:collaction_cms/presentation/shared/composition/text_composition.dart'; -import 'package:collaction_cms/presentation/theme/constants.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; @@ -84,14 +84,7 @@ class _AssignCommitmentsState extends State { color: const Color(0xFFDADADA), )), child: !onOrOffNotifier.value - ? Container( - padding: const EdgeInsets.only(top: 105), - alignment: Alignment.topCenter, - child: const SelectableText( - "Not yet supported", - style: CollactionTextStyles.body, - ), - ) + ? CommitmentTemplate(fullWidth: fullWidth) : Container( padding: const EdgeInsets.symmetric( vertical: 10, horizontal: 20), diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart new file mode 100644 index 0000000..80127cf --- /dev/null +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template.dart @@ -0,0 +1,32 @@ +import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_list_pages.dart'; +import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/tag_search.dart'; +import 'package:collaction_cms/presentation/theme/constants.dart'; +import 'package:flutter/material.dart'; + +class CommitmentTemplate extends StatefulWidget { + final double fullWidth; + const CommitmentTemplate({super.key, required this.fullWidth}); + + @override + State createState() => _CommitmentTemplateState(); +} + +class _CommitmentTemplateState extends State { + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.all(18.0), + child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ + const Padding( + padding: EdgeInsets.only(bottom: 5.0), + child: TagSearchSection(), + ), + const Divider( + color: kCommitmentDividerColor, + thickness: 1, + ), + CommitmentListPages(fullWidth: widget.fullWidth), + ]), + ); + } +} diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_list_pages.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_list_pages.dart new file mode 100644 index 0000000..8fac14e --- /dev/null +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_list_pages.dart @@ -0,0 +1,102 @@ +import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/dummy_data.dart'; +import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/expandable_card_list.dart'; +import 'package:collaction_cms/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/previousNextButton.dart'; +import 'package:collaction_cms/presentation/shared/extra/list_counter.dart'; +import 'package:collection/collection.dart'; +import 'package:flutter/material.dart'; + +import '../../../../../../../theme/constants.dart'; + +class CommitmentListPages extends StatefulWidget { + final double fullWidth; + const CommitmentListPages({super.key, required this.fullWidth}); + + @override + State createState() => _CommitmentListPagesState(); +} + +class _CommitmentListPagesState extends State { + final PageController controller = PageController(); + int _currentPage = 0; + List pages = []; + static const _kDuration = Duration(milliseconds: 300); + static const _kCurve = Curves.ease; + + @override + void dispose() { + controller.dispose(); + super.dispose(); + } + + @override + void initState() { + buildPages(dummyData); + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Column( + children: [ + Container( + margin: const EdgeInsets.only(top: 10), + child: Row( + children: [ + const SelectableText( + "Commitments", + style: CollactionTextStyles.captionStyleBold, + ), + Center( + child: Counter( + counter: dummyData.length.toString(), + height: 15, + width: 15, + textStyle: + CollactionTextStyles.captionStyle.copyWith(height: 0), + )), + const Spacer(), + PreviousNextbutton( + buttonText: 'Previous', + buttonAction: () => controller.previousPage( + duration: _kDuration, curve: _kCurve), + ), + SelectableText( + "Page ${_currentPage + 1} of ${pages.length.toString()}", + style: + CollactionTextStyles.captionStyleLight.copyWith(height: -1), + ), + PreviousNextbutton( + buttonText: 'Next', + buttonAction: () => + controller.nextPage(duration: _kDuration, curve: _kCurve), + ), + ], + ), + ), + SizedBox(height: widget.fullWidth - 100, child: buildPages(dummyData)), + ], + ); + } + + Widget buildPages(List itemsList) { + pages.clear(); + List itemLists = itemsList.slices(4).toList(); + for (var i = 0; i < itemLists.length; i++) { + ExpandableCardList item = ExpandableCardList( + itemList: itemLists[i], + height: widget.fullWidth - 100, + ); + pages.add(item); + } + return PageView.builder( + controller: controller, + itemCount: pages.length, + itemBuilder: (BuildContext context, int index) { + return pages[index % pages.length]; + }, + onPageChanged: (page) => setState(() { + _currentPage = page; + }), + ); + } +} diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart new file mode 100644 index 0000000..ae5462d --- /dev/null +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/commitment_template_expandablecard.dart @@ -0,0 +1,142 @@ +import 'package:collaction_cms/presentation/shared/buttons/button_outlined.dart'; +import 'package:flutter/material.dart'; +import '../../../../../../../theme/constants.dart'; + +class ExpandableTemplateCard extends StatefulWidget { + final String label; + final IconData icons; + final List tags; + final String description; + final String points; + + const ExpandableTemplateCard( + {super.key, + required this.label, + required this.icons, + required this.tags, + required this.description, + required this.points}); + + @override + State createState() => _ExpandableTemplateCardState(); +} + +class _ExpandableTemplateCardState extends State { + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.only( + top: 5, + bottom: 5, + ), + child: ExpansionTile( + backgroundColor: kScaffoldColorWhite, + collapsedBackgroundColor: kScaffoldColorWhite, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(10.0), + side: const BorderSide( + color: kBlackPrimary100, + ), + ), + collapsedShape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(10.0), + side: const BorderSide( + color: kBlackPrimary100, + ), + ), + iconColor: kBlackPrimary300, + title: Row( + children: [ + Padding( + padding: const EdgeInsets.only(right: 10.0, top: 5, bottom: 5), + child: Container( + alignment: Alignment.center, + decoration: BoxDecoration( + color: kBlackPrimary0, + borderRadius: BorderRadius.circular(30), + ), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Icon( + widget.icons, + color: kAccentColor, + ), + ), + ), + ), + SelectableText( + widget.label, + style: CollactionTextStyles.bodyLabelRegular, + ), + const Spacer(), + const SmallOutlinedButton( + smallOutlinedButtonType: SmallOutlinedButtonType.add, + callback: null, + ) + ], + ), + children: [ + ListTile( + title: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Divider( + color: kCommitmentDividerColor, + thickness: 1, + height: 8, + ), + Padding( + padding: const EdgeInsets.only(top: 5.0, bottom: 5, left: 15), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SelectableText.rich(TextSpan( + text: "Tags: ", + style: CollactionTextStyles.bodySemiBold.copyWith( + fontSize: 14, + fontWeight: FontWeight.w500, + color: const Color(0xFF707070)), + children: [ + TextSpan( + text: widget.tags.toString(), + style: CollactionTextStyles.body14, + ) + ])), + const SizedBox(height: 5), + SelectableText.rich(TextSpan( + text: "Description: ", + style: CollactionTextStyles.bodySemiBold.copyWith( + fontSize: 14, + fontWeight: FontWeight.w500, + color: const Color(0xFF707070)), + children: [ + TextSpan( + text: widget.description, + style: CollactionTextStyles.body14, + ) + ])), + const SizedBox(height: 5), + SelectableText.rich(TextSpan( + text: "Points: ", + style: CollactionTextStyles.bodySemiBold.copyWith( + fontSize: 14, + fontWeight: FontWeight.w500, + color: const Color(0xFF707070)), + children: [ + TextSpan( + text: widget.points, + style: CollactionTextStyles.body14, + ) + ])), + const SizedBox(height: 5), + ], + ), + ) + ], + ), + ) + ], + ), + ); + } +} diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/dummy_data.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/dummy_data.dart new file mode 100644 index 0000000..903b2bf --- /dev/null +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/dummy_data.dart @@ -0,0 +1,46 @@ +import 'package:collaction_cms/presentation/core/icons/collaction_icons.dart'; +import 'package:flutter/material.dart'; + +class DummyModel { + final String label; + final List tags; + final String description; + final String points; + final IconData commitmentIcon; + + DummyModel(this.label, this.tags, this.description, this.points, + this.commitmentIcon); +} + +List dummyData = [ + DummyModel( + "1 days per week", + ["Days", "Veganuary", "Diet"], + "Commit to eating a vegan diet 4 day per week", + "10", + CollactionIcons.vegan), + DummyModel( + "2 days per week", + ["Days", "Veganuary", "Diet"], + "Commit to eating a vegan diet 4 day per week", + "20", + CollactionIcons.vegan), + DummyModel( + "3 days per week", + ["Days", "Veganuary", "Diet"], + "Commit to eating a vegan diet 4 day per week", + "30", + CollactionIcons.vegan), + DummyModel( + "4 days per week", + ["Days", "Veganuary", "Diet"], + "Commit to eating a vegan diet 4 day per week", + "40", + CollactionIcons.vegan), + DummyModel( + "5 days per week", + ["Days", "Veganuary", "Diet"], + "Commit to eating a vegan diet 4 day per week", + "50", + CollactionIcons.vegan), +]; diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/expandable_card_list.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/expandable_card_list.dart new file mode 100644 index 0000000..e714db5 --- /dev/null +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/expandable_card_list.dart @@ -0,0 +1,37 @@ +import 'package:flutter/material.dart'; + +import 'commitment_template_expandablecard.dart'; + +class ExpandableCardList extends StatelessWidget { + final double height; + final List itemList; + + const ExpandableCardList( + {super.key, required this.height, required this.itemList}); + + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.only( + top: 16, + ), + child: SizedBox( + height: height, + child: SingleChildScrollView( + child: ListView.builder( + itemCount: itemList.length, + shrinkWrap: true, + itemBuilder: (BuildContext context, int index) { + return ExpandableTemplateCard( + label: itemList[index].label, + icons: itemList[index].commitmentIcon, + tags: itemList[index].tags, + description: itemList[index].description, + points: itemList[index].points); + }, + ), + ), + ), + ); + } +} diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/previousNextButton.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/previousNextButton.dart new file mode 100644 index 0000000..d042478 --- /dev/null +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/previousNextButton.dart @@ -0,0 +1,31 @@ +import 'package:flutter/material.dart'; + +import '../../../../../../../theme/constants.dart'; + +class PreviousNextbutton extends StatelessWidget { + final String buttonText; + final VoidCallback buttonAction; + const PreviousNextbutton( + {super.key, required this.buttonText, required this.buttonAction}); + + @override + Widget build(BuildContext context) { + return Container( + height: 25, + margin: const EdgeInsets.only(left: 10, right: 10), + alignment: Alignment.center, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(30), + border: Border.all( + color: kBlackPrimary200, + ), + ), + child: TextButton( + onPressed: buttonAction, + child: Text( + buttonText, + style: CollactionTextStyles.captionStyleLight.copyWith(height: -1), + )), + ); + } +} diff --git a/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/tag_search.dart b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/tag_search.dart new file mode 100644 index 0000000..ce55654 --- /dev/null +++ b/lib/presentation/crowdactions/crowdaction_form/sections/commitments_section/assign_commitments/commitment_template/commitment_template_widgets/tag_search.dart @@ -0,0 +1,108 @@ +import 'dart:ui'; + +import 'package:flutter/material.dart'; + +import '../../../../../../../shared/extra/tags_pills.dart'; +import '../../../../../../../theme/constants.dart'; + +class TagSearchSection extends StatefulWidget { + const TagSearchSection({super.key}); + + @override + State createState() => _TagSearchSectionState(); +} + +class _TagSearchSectionState extends State { + List tags = ["Days", "Veganuary", "Diet"]; + String hintText = 'Search commitment-template tags'; + FocusNode focusNode = FocusNode(); + + @override + void initState() { + super.initState(); + focusNode.addListener(() { + setState(() { + if (focusNode.hasFocus) { + hintText = ''; + } else { + hintText = 'Search commitment-template tags'; + } + }); + }); + } + + @override + Widget build(BuildContext context) { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SizedBox( + height: 24, + child: TextField( + cursorHeight: 12, + focusNode: focusNode, + cursorColor: kBlackPrimary200, + decoration: InputDecoration( + isDense: true, + contentPadding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 13.0), + prefixIcon: const Padding( + padding: EdgeInsets.only(right: 14.0, bottom: 10), + child: Icon( + Icons.search, + ), + ), + prefixIconColor: kBlackPrimary300, + suffixIcon: const Padding( + padding: EdgeInsets.only(bottom: 10.0), + child: Icon(Icons.add_circle_outline), + ), + suffixIconColor: kBlackPrimary300, + hintText: hintText, + hintStyle: CollactionTextStyles.captionStyle.copyWith( + color: const Color(0xFF707070), fontWeight: FontWeight.w200), + enabledBorder: const UnderlineInputBorder( + borderSide: BorderSide(color: kCommitmentDividerColor), + ), + focusedBorder: const UnderlineInputBorder( + borderSide: BorderSide(color: kCommitmentDividerColor), + ), + ), + onSubmitted: (seachedTag) { + setState(() { + tags.add(seachedTag); + }); + }, + ), + ), + const Padding( + padding: EdgeInsets.fromLTRB(10, 10, 0, 8), + child: Text( + "Selected tags:", + style: CollactionTextStyles.captionStyleLight, + ), + ), + buildTagsRow(tags), + ], + ); + } + + Widget buildTagsRow(List tags) { + List rowItems = []; + for (var i = 0; i < tags.length; i++) { + Widget rowItem = Padding( + padding: const EdgeInsets.only(left: 5, right: 5), + child: TagPill( + value: tags[i], + callback: () { + setState(() { + tags.removeAt(i); + }); + }), + ); + rowItems.add(rowItem); + } + return Row( + children: rowItems, + ); + } +} diff --git a/lib/presentation/shared/extra/list_counter.dart b/lib/presentation/shared/extra/list_counter.dart index ce925b8..e50336e 100644 --- a/lib/presentation/shared/extra/list_counter.dart +++ b/lib/presentation/shared/extra/list_counter.dart @@ -1,29 +1,40 @@ import 'package:flutter/material.dart'; class Counter extends StatelessWidget { - const Counter({Key? key, required this.counter}) : super(key: key); - + const Counter( + {Key? key, + required this.counter, + this.width, + this.height, + this.textStyle}) + : super(key: key); + final double? width; + final double? height; + final TextStyle? textStyle; final String counter; @override Widget build(BuildContext context) { return Container( alignment: Alignment.center, - width: 25, - height: 25, + width: width ?? 25, + height: height ?? 25, decoration: BoxDecoration( shape: BoxShape.circle, color: Colors.white, border: Border.all(color: const Color(0xFFE7E7E7))), child: Container( transform: Matrix4.translationValues(2.2, 0, 0), - child: SelectableText( - counter, - style: const TextStyle( - fontSize: 14, - fontWeight: FontWeight.w600, - fontFamily: "Rubik", - color: Color(0xFF575757)), + child: Center( + child: SelectableText( + counter, + style: textStyle ?? + const TextStyle( + fontSize: 14, + fontWeight: FontWeight.w600, + fontFamily: "Rubik", + color: Color(0xFF575757)), + ), ), ), ); diff --git a/lib/presentation/shared/extra/tags_pills.dart b/lib/presentation/shared/extra/tags_pills.dart index 434a621..88a5599 100644 --- a/lib/presentation/shared/extra/tags_pills.dart +++ b/lib/presentation/shared/extra/tags_pills.dart @@ -23,7 +23,7 @@ class TagPill extends StatelessWidget { padding: const EdgeInsets.all(5), decoration: BoxDecoration( color: backgroundColor, - borderRadius: BorderRadius.circular(15), + borderRadius: BorderRadius.circular(12), border: Border.all( color: const Color(0xFF707070).withOpacity(0.5), )), @@ -41,10 +41,13 @@ class TagPill extends StatelessWidget { ), ), const SizedBox(width: 5), - Text( - value, - style: CollactionTextStyles.captionStyleBold.copyWith( - color: const Color(0xFF585858), + Padding( + padding: const EdgeInsets.only(left: 5, right: 5), + child: Text( + value, + style: CollactionTextStyles.captionStyleBold.copyWith( + color: const Color(0xFF585858), + ), ), ) ], diff --git a/lib/presentation/theme/constants.dart b/lib/presentation/theme/constants.dart index a854f2b..8f14407 100644 --- a/lib/presentation/theme/constants.dart +++ b/lib/presentation/theme/constants.dart @@ -22,6 +22,7 @@ const kNavItemInactiveColor = Color(0xFF777777); const kNavItemActiveBackgroundColor = Color(0xFFF4F4F4); const kDividerColor = Color(0xFFBFBFBF); +const kCommitmentDividerColor = Color(0xFFDADADA); const kFillInputTextColor = Color(0xFFEFEFEF); const kPlaceholderTextColor = Color(0xFFB5B5B5); diff --git a/lib/presentation/theme/text.dart b/lib/presentation/theme/text.dart index 646b634..8b40a43 100644 --- a/lib/presentation/theme/text.dart +++ b/lib/presentation/theme/text.dart @@ -61,6 +61,13 @@ class CollactionTextStyles { color: kBlackPrimary300, ); + ///Figma - Add Button Commitment Template #1 + static const addButton = TextStyle( + fontFamily: "Rubik", + fontSize: 12, + color: kAccentColor, + ); + ///Figma - Body static const body = TextStyle( fontFamily: "Rubik", diff --git a/pubspec.lock b/pubspec.lock index 313136a..fd203d4 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -1079,5 +1079,5 @@ packages: source: hosted version: "3.1.1" sdks: - dart: ">=2.18.0 <3.0.0" + dart: ">=2.18.0 <4.0.0" flutter: ">=3.3.0"