From 456dc4bd770a070dcb4ec4524e7444c42249273b Mon Sep 17 00:00:00 2001 From: zaid_daoud Date: Tue, 7 Nov 2023 13:18:27 +0300 Subject: [PATCH 1/7] Testing Dashboard Chart --- .../progress_fragment.dart | 49 +++++++++++++++++-- pubspec.lock | 8 +++ pubspec.yaml | 1 + 3 files changed, 55 insertions(+), 3 deletions(-) diff --git a/lib/new_views/pages/land_page/dashboard_fragments/progress_fragment.dart b/lib/new_views/pages/land_page/dashboard_fragments/progress_fragment.dart index 89de3701..3b037be6 100644 --- a/lib/new_views/pages/land_page/dashboard_fragments/progress_fragment.dart +++ b/lib/new_views/pages/land_page/dashboard_fragments/progress_fragment.dart @@ -1,11 +1,54 @@ import 'package:flutter/material.dart'; +import 'package:pie_chart/pie_chart.dart'; +import 'package:test_sa/extensions/int_extensions.dart'; +import 'package:test_sa/extensions/text_extensions.dart'; +import 'package:test_sa/extensions/widget_extensions.dart'; +import 'package:test_sa/new_views/app_style/app_color.dart'; +import 'package:test_sa/views/app_style/colors.dart'; class ProgressFragment extends StatelessWidget { - ProgressFragment({Key key}) : super(key: key); + const ProgressFragment({Key key}) : super(key: key); @override Widget build(BuildContext context) { - // TODO: implement build - return Container(); + const Map statuses = { + "Completed": 12, + "In Progress": 12, + "Open": 12, + }; + return Column( + children: [ + Card( + child: Stack( + alignment: Alignment.center, + children: [ + PieChart( + dataMap: statuses, + animationDuration: const Duration(milliseconds: 800), + chartRadius: 190.toScreenWidth, + colorList: [AColors.statusGreen, AColors.statusBlue, AColors.statusYellowLight], + initialAngleInDegree: 270, + chartType: ChartType.ring, + ringStrokeWidth: 40.toScreenWidth, + legendOptions: const LegendOptions(showLegends: false), + chartValuesOptions: ChartValuesOptions( + chartValueBackgroundColor: Colors.transparent, + chartValueStyle: AppTextStyles.heading6.copyWith(color: AppColor.neutral20), + showChartValuesOutside: true, + ), + ), + Column( + mainAxisAlignment: MainAxisAlignment.center, + mainAxisSize: MainAxisSize.min, + children: [ + "Total".heading5(context), + "20".heading6(context).custom(color: AppColor.neutral20), + ], + ) + ], + ).paddingAll(23), + ), + ], + ).paddingOnly(start: 16, end: 16); } } diff --git a/pubspec.lock b/pubspec.lock index 05694b26..2f19d78f 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -877,6 +877,14 @@ packages: url: "https://pub.dev" source: hosted version: "5.1.0" + pie_chart: + dependency: "direct main" + description: + name: pie_chart + sha256: "5dba6d0eb4718e8ed00a9079361cd8947c3f84ac5a5d76f05a27f4ec5e27589e" + url: "https://pub.dev" + source: hosted + version: "5.3.2" platform: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index 9997be3c..9379bdc4 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -72,6 +72,7 @@ dependencies: lottie: ^2.3.0 shimmer: ^2.0.0 flutter_advanced_switch: ^3.0.1 + pie_chart: ^5.3.2 dev_dependencies: flutter_test: From 49377d2418003596c85ec70939889ba4dbc75437 Mon Sep 17 00:00:00 2001 From: Sikander Saleem Date: Tue, 7 Nov 2023 14:45:59 +0300 Subject: [PATCH 2/7] calender cont. --- assets/images/calender_bottom.svg | 11 ++ lib/extensions/widget_extensions.dart | 18 +++ lib/l10n/app_en.arb | 3 +- .../common_widgets/app_bottom_nav_bar.dart | 7 +- .../calender_fragments/daily_fragment.dart | 30 ++++ .../calender_fragments/monthly_fragment.dart | 63 ++++++++ .../calender_fragments/weekly_fragment.dart | 65 ++++++++ .../pages/land_page/calender_page.dart | 145 ++++++++++++++++++ lib/new_views/pages/land_page/land_page.dart | 32 ++-- pubspec.lock | 16 ++ pubspec.yaml | 1 + 11 files changed, 379 insertions(+), 12 deletions(-) create mode 100644 assets/images/calender_bottom.svg create mode 100644 lib/new_views/pages/land_page/calender_fragments/daily_fragment.dart create mode 100644 lib/new_views/pages/land_page/calender_fragments/monthly_fragment.dart create mode 100644 lib/new_views/pages/land_page/calender_fragments/weekly_fragment.dart create mode 100644 lib/new_views/pages/land_page/calender_page.dart diff --git a/assets/images/calender_bottom.svg b/assets/images/calender_bottom.svg new file mode 100644 index 00000000..7c5af60f --- /dev/null +++ b/assets/images/calender_bottom.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/lib/extensions/widget_extensions.dart b/lib/extensions/widget_extensions.dart index 9ba4acd3..a2f2a14b 100644 --- a/lib/extensions/widget_extensions.dart +++ b/lib/extensions/widget_extensions.dart @@ -19,6 +19,24 @@ extension WidgetExtensions on Widget { Padding(padding: EdgeInsetsDirectional.only(start: start.toScreenWidth, end: end.toScreenWidth, top: top.toScreenHeight, bottom: bottom.toScreenHeight), child: this); Widget toExpanded({int flex = 1}) => Expanded(flex: flex, child: this); + + Widget get toShadowContainer => Container( + padding: const EdgeInsets.all(16), + decoration: ShapeDecoration( + color: Colors.white, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(20), + ), + shadows: const [ + BoxShadow( + color: Color(0x07000000), + blurRadius: 14, + offset: Offset(0, 0), + spreadRadius: 0, + ) + ], + ), + child: this); } extension DividerExtension on Divider { diff --git a/lib/l10n/app_en.arb b/lib/l10n/app_en.arb index d76461ad..74acf4f6 100644 --- a/lib/l10n/app_en.arb +++ b/lib/l10n/app_en.arb @@ -310,5 +310,6 @@ "requesterName" : "Requester Name", "updateWorkOrder" : "Update Work Order", "createPreventiveMaintenanceRequest" : "Create Preventive Maintenance Request", - "createNewRequest" : "Create New Request" + "createNewRequest" : "Create New Request", + "calender" : "Calender" } \ No newline at end of file diff --git a/lib/new_views/common_widgets/app_bottom_nav_bar.dart b/lib/new_views/common_widgets/app_bottom_nav_bar.dart index ea36ea54..612eb60b 100644 --- a/lib/new_views/common_widgets/app_bottom_nav_bar.dart +++ b/lib/new_views/common_widgets/app_bottom_nav_bar.dart @@ -1,8 +1,11 @@ import 'package:flutter/material.dart'; import 'package:flutter_svg/svg.dart'; +import 'package:provider/provider.dart'; +import 'package:test_sa/controllers/providers/api/user_provider.dart'; import 'package:test_sa/extensions/context_extension.dart'; import 'package:test_sa/extensions/int_extensions.dart'; import 'package:test_sa/extensions/text_extensions.dart'; +import 'package:test_sa/models/enums/user_types.dart'; import 'package:test_sa/new_views/app_style/app_color.dart'; import '../../models/enums/translation_keys.dart'; @@ -19,6 +22,7 @@ class AppBottomNavigationBar extends StatelessWidget { @override Widget build(BuildContext context) { + bool isEngineer = (Provider.of(context).user.type) == UsersTypes.engineer; return ClipRRect( borderRadius: const BorderRadius.only(topLeft: Radius.circular(20.0), topRight: Radius.circular(20.0)), child: Container( @@ -39,7 +43,8 @@ class AppBottomNavigationBar extends StatelessWidget { navBarItem(context, index: 0, iconName: "overview", label: context.translation.overview), navBarItem(context, index: 1, iconName: "requests", label: context.translation.myRequests), navBarItem(context, index: 2, iconName: "assets", label: context.translation.myAssets), - navBarItem(context, index: 3, iconName: "message", label: context.translation.contactUs), + if (isEngineer) navBarItem(context, index: 3, iconName: "calender_bottom", label: context.translation.calender), + navBarItem(context, index: isEngineer ? 4 : 3, iconName: "message", label: context.translation.contactUs), ], currentIndex: selectedIndex, onTap: onPressed, diff --git a/lib/new_views/pages/land_page/calender_fragments/daily_fragment.dart b/lib/new_views/pages/land_page/calender_fragments/daily_fragment.dart new file mode 100644 index 00000000..3d9c85ac --- /dev/null +++ b/lib/new_views/pages/land_page/calender_fragments/daily_fragment.dart @@ -0,0 +1,30 @@ +import 'package:flutter/material.dart'; + +class DailyFragment extends StatefulWidget { + DailyFragment({Key key}) : super(key: key); + + @override + _DailyFragmentState createState() { + return _DailyFragmentState(); + } +} + +class _DailyFragmentState extends State { + DateTime currentDateTime = DateTime.now(); + + @override + void initState() { + super.initState(); + } + + @override + void dispose() { + super.dispose(); + } + + @override + Widget build(BuildContext context) { + // TODO: implement build + return null; + } +} diff --git a/lib/new_views/pages/land_page/calender_fragments/monthly_fragment.dart b/lib/new_views/pages/land_page/calender_fragments/monthly_fragment.dart new file mode 100644 index 00000000..fdff4e54 --- /dev/null +++ b/lib/new_views/pages/land_page/calender_fragments/monthly_fragment.dart @@ -0,0 +1,63 @@ +import 'package:flutter/material.dart'; +import 'package:table_calendar/table_calendar.dart'; +import 'package:test_sa/extensions/int_extensions.dart'; +import 'package:test_sa/extensions/text_extensions.dart'; +import 'package:test_sa/extensions/widget_extensions.dart'; +import 'package:test_sa/new_views/app_style/app_color.dart'; + +class MonthlyFragment extends StatefulWidget { + MonthlyFragment({Key key}) : super(key: key); + + @override + _MonthlyFragmentState createState() { + return _MonthlyFragmentState(); + } +} + +class _MonthlyFragmentState extends State { + DateTime currentDateTime = DateTime.now(); + + @override + void initState() { + super.initState(); + } + + @override + void dispose() { + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Column( + children: [ + 1.divider.paddingOnly(top: 16, bottom: 16), + TableCalendar( + headerVisible: false, + firstDay: DateTime.utc(2010, 10, 16), + lastDay: DateTime.utc(2030, 3, 14), + focusedDay: currentDateTime, + currentDay: currentDateTime, + rowHeight: 37, + calendarStyle: CalendarStyle( + todayDecoration: cellDecoration(), + todayTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), + selectedTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), + rangeStartTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), + rangeEndTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), + ), + daysOfWeekStyle: DaysOfWeekStyle( + weekdayStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), + weekendStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), + ), + availableGestures: AvailableGestures.none, + ), + ], + ).toShadowContainer; + } + + BoxDecoration cellDecoration({Color color}) => BoxDecoration( + color: color ?? Colors.transparent, + shape: BoxShape.circle, + ); +} diff --git a/lib/new_views/pages/land_page/calender_fragments/weekly_fragment.dart b/lib/new_views/pages/land_page/calender_fragments/weekly_fragment.dart new file mode 100644 index 00000000..e804789a --- /dev/null +++ b/lib/new_views/pages/land_page/calender_fragments/weekly_fragment.dart @@ -0,0 +1,65 @@ +import 'package:flutter/material.dart'; +import 'package:table_calendar/table_calendar.dart'; +import 'package:test_sa/extensions/int_extensions.dart'; +import 'package:test_sa/extensions/text_extensions.dart'; +import 'package:test_sa/extensions/widget_extensions.dart'; +import 'package:test_sa/new_views/app_style/app_color.dart'; + +class WeeklyFragment extends StatefulWidget { + WeeklyFragment({Key key}) : super(key: key); + + @override + _WeeklyFragmentState createState() { + return _WeeklyFragmentState(); + } +} + +class _WeeklyFragmentState extends State { + DateTime currentDateTime = DateTime.now(); + + @override + void initState() { + super.initState(); + } + + @override + void dispose() { + super.dispose(); + } + + @override + Widget build(BuildContext context) { + + return Column( + children: [ + 1.divider.paddingOnly(top: 16, bottom: 16), + TableCalendar( + headerVisible: false, + calendarFormat: CalendarFormat.week, + firstDay: DateTime.utc(2010, 10, 16), + lastDay: DateTime.utc(2030, 3, 14), + focusedDay: currentDateTime, + currentDay: currentDateTime, + rowHeight: 37, + calendarStyle: CalendarStyle( + todayDecoration: cellDecoration(), + todayTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), + selectedTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), + rangeStartTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), + rangeEndTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), + ), + daysOfWeekStyle: DaysOfWeekStyle( + weekdayStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), + weekendStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), + ), + availableGestures: AvailableGestures.none, + ), + ], + ).toShadowContainer; + } + + BoxDecoration cellDecoration({Color color}) => BoxDecoration( + color: color ?? Colors.transparent, + shape: BoxShape.circle, + ); +} diff --git a/lib/new_views/pages/land_page/calender_page.dart b/lib/new_views/pages/land_page/calender_page.dart new file mode 100644 index 00000000..42e0d6ac --- /dev/null +++ b/lib/new_views/pages/land_page/calender_page.dart @@ -0,0 +1,145 @@ +import 'package:flutter/material.dart'; +import 'package:table_calendar/table_calendar.dart'; +import 'package:test_sa/extensions/int_extensions.dart'; +import 'package:test_sa/extensions/text_extensions.dart'; +import 'package:test_sa/extensions/widget_extensions.dart'; +import 'package:test_sa/new_views/app_style/app_color.dart'; +import 'package:test_sa/new_views/pages/land_page/calender_fragments/monthly_fragment.dart'; +import 'package:test_sa/new_views/pages/land_page/calender_fragments/weekly_fragment.dart'; + +class CalenderPage extends StatefulWidget { + CalenderPage({Key key}) : super(key: key); + + @override + _CalenderPageState createState() { + return _CalenderPageState(); + } +} + +class _CalenderPageState extends State { + int selectedIndex = 0; + DateTime currentDateTime = DateTime.now(); + + PageController _pageController; + + @override + void initState() { + _pageController = PageController(); + super.initState(); + } + + @override + void dispose() { + _pageController.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Column( + children: [ + // todo @sikander, hiding My shift view, later when they add data, then will us it. + Container( + width: double.infinity, + padding: const EdgeInsets.all(16), + decoration: ShapeDecoration( + color: Colors.white, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(20), + ), + shadows: const [ + BoxShadow( + color: Color(0x07000000), + blurRadius: 14, + offset: Offset(0, 0), + spreadRadius: 0, + ) + ], + ), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: [ + Text( + 'My Shift', + style: AppTextStyles.heading5.copyWith(color: AppColor.neutral50), + ), + 8.height, + Text( + 'Sunday to Thursday', + style: AppTextStyles.bodyText.copyWith(color: const Color(0xFF757575)), + ), + Text( + '09:00 to 18:00', + style: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), + ), + ], + ), + ), + + Container( + width: double.infinity, + padding: const EdgeInsets.all(4), + decoration: ShapeDecoration( + color: const Color(0xFFEAF1F4), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(16), + ), + shadows: const [ + BoxShadow( + color: Color(0x07000000), + blurRadius: 14, + offset: Offset(0, 0), + spreadRadius: 0, + ) + ], + ), + child: Row( + children: [ + tabItem("Monthly", 0, selectedIndex, () => onTabPress(0)), + tabItem("Weekly", 1, selectedIndex, () => onTabPress(1)), + tabItem("Daily", 2, selectedIndex, () => onTabPress(2)), + ], + ), + ), + 8.height, + PageView( + controller: _pageController, + onPageChanged: (index) => onTabPress(index), + children: [ + MonthlyFragment(), + WeeklyFragment(), + Container(), + ], + ).expanded, + ], + ), + ); + } + + void onTabPress(index) { + if (selectedIndex != index) { + setState(() { + selectedIndex = index; + }); + _pageController.jumpToPage(index); + } + } + + Widget tabItem(String title, int index, int selectedIndex, VoidCallback onPress) { + return Container( + alignment: Alignment.center, + padding: const EdgeInsets.only(top: 14, bottom: 14), + decoration: ShapeDecoration( + color: index == selectedIndex ? Colors.white : Colors.transparent, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(13), + ), + ), + child: Text( + title, + style: AppTextStyles.bodyText.copyWith(color: index == selectedIndex ? AppColor.neutral60 : const Color(0xFF757575)), + )).onPress(onPress).expanded; + } +} diff --git a/lib/new_views/pages/land_page/land_page.dart b/lib/new_views/pages/land_page/land_page.dart index 242cc74f..ef9bbc24 100644 --- a/lib/new_views/pages/land_page/land_page.dart +++ b/lib/new_views/pages/land_page/land_page.dart @@ -2,7 +2,11 @@ import 'dart:io'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; +import 'package:provider/provider.dart'; +import 'package:test_sa/controllers/providers/api/user_provider.dart'; import 'package:test_sa/extensions/int_extensions.dart'; +import 'package:test_sa/models/enums/user_types.dart'; +import 'package:test_sa/new_views/pages/land_page/calender_page.dart'; import 'package:test_sa/new_views/pages/land_page/home_app_bar.dart'; import 'package:test_sa/new_views/pages/land_page/my_assets_page.dart'; import 'package:test_sa/new_views/pages/land_page/my_request/my_requests_page.dart'; @@ -30,22 +34,29 @@ class _LandPageState extends State { int currentPageIndex = 0; bool showAppbar = true; List _pages; + UserProvider _userProvider; @override void initState() { - _pages = [ - DashboardPage(onDrawerPress: (() { - _scaffoldKey.currentState.isDrawerOpen ? _scaffoldKey.currentState.closeDrawer() : _scaffoldKey.currentState.openDrawer(); - })), - old_page.LandPage(), - SingleDevicePicker(), - MyRequestsPage(), - ]; + _pages = []; super.initState(); } @override Widget build(BuildContext context) { + if (_userProvider == null) { + _userProvider = Provider.of(context); + _pages = [ + DashboardPage(onDrawerPress: (() { + _scaffoldKey.currentState.isDrawerOpen ? _scaffoldKey.currentState.closeDrawer() : _scaffoldKey.currentState.openDrawer(); + })), + old_page.LandPage(), + SingleDevicePicker(), + if (_userProvider.user.type == UsersTypes.engineer) CalenderPage(), + MyRequestsPage(), + ]; + } + return WillPopScope( onWillPop: () async { /// TODO [zaid] : show dialog before exit @@ -72,7 +83,9 @@ class _LandPageState extends State { bottomNavigationBar: AppBottomNavigationBar( selectedIndex: currentPageIndex, onPressed: (index) { - if (index == 3) { + bool isEngineer = _userProvider.user.type == UsersTypes.engineer; + + if (index == (isEngineer ? 4 : 3)) { showModalBottomSheet( context: context, useSafeArea: true, @@ -83,7 +96,6 @@ class _LandPageState extends State { setState(() { currentPageIndex = index; }); - if (index == 1) { setState(() { showAppbar = false; diff --git a/pubspec.lock b/pubspec.lock index 05694b26..22d8f886 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -1045,6 +1045,14 @@ packages: url: "https://pub.dev" source: hosted version: "5.3.0" + simple_gesture_detector: + dependency: transitive + description: + name: simple_gesture_detector + sha256: "86d08f85f1f58583b7b4b941d989f48ea6ce08c1724a1d10954a277c2ec36592" + url: "https://pub.dev" + source: hosted + version: "0.2.0" sky_engine: dependency: transitive description: flutter @@ -1130,6 +1138,14 @@ packages: url: "https://pub.dev" source: hosted version: "3.1.0" + table_calendar: + dependency: "direct main" + description: + name: table_calendar + sha256: "7f1270313c0cdb245b583ed8518982c01d4a7e95869b3c30abcbae3b642c45d0" + url: "https://pub.dev" + source: hosted + version: "3.0.8" term_glyph: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index 9997be3c..bfb88adc 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -72,6 +72,7 @@ dependencies: lottie: ^2.3.0 shimmer: ^2.0.0 flutter_advanced_switch: ^3.0.1 + table_calendar: ^3.0.8 dev_dependencies: flutter_test: From 1091af7f23acd131c81b71c1dec98a3be9f1cff9 Mon Sep 17 00:00:00 2001 From: zaid_daoud Date: Tue, 7 Nov 2023 16:55:32 +0300 Subject: [PATCH 3/7] Working On Calendar --- assets/images/calendar2.svg | 11 ++ lib/l10n/app_ar.arb | 3 +- lib/l10n/app_en.arb | 3 +- .../common_widgets/app_bottom_nav_bar.dart | 9 +- .../pages/land_page/calendar_page.dart | 140 ++++++++++++++++++ .../pages/land_page/dashboard_page.dart | 5 +- lib/new_views/pages/land_page/land_page.dart | 26 ++-- .../my_request/my_requests_page.dart | 29 ++-- pubspec.lock | 16 ++ pubspec.yaml | 1 + 10 files changed, 204 insertions(+), 39 deletions(-) create mode 100644 assets/images/calendar2.svg create mode 100644 lib/new_views/pages/land_page/calendar_page.dart diff --git a/assets/images/calendar2.svg b/assets/images/calendar2.svg new file mode 100644 index 00000000..c12d08b4 --- /dev/null +++ b/assets/images/calendar2.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/lib/l10n/app_ar.arb b/lib/l10n/app_ar.arb index 9523a7d9..187e9b99 100644 --- a/lib/l10n/app_ar.arb +++ b/lib/l10n/app_ar.arb @@ -306,5 +306,6 @@ "requesterName" : "اسم الطالب", "updateWorkOrder" : "تعديل طلب العمل", "createPreventiveMaintenanceRequest" : "إنشاء طلب صيانة وقائية", - "createNewRequest" : "إنشاء طلب جديد" + "createNewRequest" : "إنشاء طلب جديد", + "calendar" : "التقويم" } \ No newline at end of file diff --git a/lib/l10n/app_en.arb b/lib/l10n/app_en.arb index d76461ad..7b7ebad3 100644 --- a/lib/l10n/app_en.arb +++ b/lib/l10n/app_en.arb @@ -310,5 +310,6 @@ "requesterName" : "Requester Name", "updateWorkOrder" : "Update Work Order", "createPreventiveMaintenanceRequest" : "Create Preventive Maintenance Request", - "createNewRequest" : "Create New Request" + "createNewRequest" : "Create New Request", + "calendar" : "Calendar" } \ No newline at end of file diff --git a/lib/new_views/common_widgets/app_bottom_nav_bar.dart b/lib/new_views/common_widgets/app_bottom_nav_bar.dart index ea36ea54..23978393 100644 --- a/lib/new_views/common_widgets/app_bottom_nav_bar.dart +++ b/lib/new_views/common_widgets/app_bottom_nav_bar.dart @@ -1,12 +1,13 @@ import 'package:flutter/material.dart'; import 'package:flutter_svg/svg.dart'; +import 'package:provider/provider.dart'; +import 'package:test_sa/controllers/providers/api/user_provider.dart'; import 'package:test_sa/extensions/context_extension.dart'; import 'package:test_sa/extensions/int_extensions.dart'; import 'package:test_sa/extensions/text_extensions.dart'; +import 'package:test_sa/models/enums/user_types.dart'; import 'package:test_sa/new_views/app_style/app_color.dart'; -import '../../models/enums/translation_keys.dart'; - class AppBottomNavigationBar extends StatelessWidget { final Function(int index) onPressed; final int selectedIndex; @@ -19,6 +20,7 @@ class AppBottomNavigationBar extends StatelessWidget { @override Widget build(BuildContext context) { + final user = Provider.of(context, listen: false).user; return ClipRRect( borderRadius: const BorderRadius.only(topLeft: Radius.circular(20.0), topRight: Radius.circular(20.0)), child: Container( @@ -39,7 +41,8 @@ class AppBottomNavigationBar extends StatelessWidget { navBarItem(context, index: 0, iconName: "overview", label: context.translation.overview), navBarItem(context, index: 1, iconName: "requests", label: context.translation.myRequests), navBarItem(context, index: 2, iconName: "assets", label: context.translation.myAssets), - navBarItem(context, index: 3, iconName: "message", label: context.translation.contactUs), + navBarItem(context, index: 3, iconName: "calendar2", label: context.translation.calendar), + if (user.type == UsersTypes.engineer) navBarItem(context, index: 4, iconName: "message", label: context.translation.contactUs), ], currentIndex: selectedIndex, onTap: onPressed, diff --git a/lib/new_views/pages/land_page/calendar_page.dart b/lib/new_views/pages/land_page/calendar_page.dart new file mode 100644 index 00000000..ce98fd56 --- /dev/null +++ b/lib/new_views/pages/land_page/calendar_page.dart @@ -0,0 +1,140 @@ +import 'package:flutter/material.dart'; +import 'package:table_calendar/table_calendar.dart'; +import 'package:test_sa/extensions/int_extensions.dart'; +import 'package:test_sa/extensions/text_extensions.dart'; +import 'package:test_sa/extensions/widget_extensions.dart'; +import 'package:test_sa/new_views/app_style/app_color.dart'; + +import '../../common_widgets/default_app_bar.dart'; + +class CalendarPage extends StatefulWidget { + const CalendarPage({Key key}) : super(key: key); + + @override + State createState() => _CalendarPageState(); +} + +class _CalendarPageState extends State with SingleTickerProviderStateMixin { + TabController _tabController; + + @override + void initState() { + super.initState(); + _tabController = TabController(length: 3, vsync: this); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: const DefaultAppBar(title: ""), + body: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Card( + child: Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + "My Shift".heading5(context), + 8.height, + "Sunday to Thursday".bodyText(context), + "09:00 to 18:00".bodyText(context).custom(color: AppColor.neutral50), + ], + ).paddingAll(16), + ), + 16.height, + Container( + decoration: BoxDecoration(color: AppColor.neutral30, borderRadius: BorderRadius.circular(16)), + child: TabBar( + controller: _tabController, + padding: EdgeInsets.zero, + labelColor: AppColor.neutral60, + unselectedLabelColor: AppColor.neutral20, + indicatorPadding: const EdgeInsets.all(4), + indicator: BoxDecoration(color: Theme.of(context).cardColor, borderRadius: BorderRadius.circular(13)), + onTap: (index) { + setState(() {}); + }, + tabs: [ + Tab(text: "Monthly", height: 57.toScreenHeight), + Tab(text: "Weekly", height: 57.toScreenHeight), + Tab(text: "Daily", height: 57.toScreenHeight), + ], + ), + ), + 8.height, + TabBarView( + physics: const NeverScrollableScrollPhysics(), + controller: _tabController, + children: [ + CalendarCard( + calendarFormat: CalendarFormat.month, + child: Column( + children: [ + 16.height, + Row( + children: [ + const CircleAvatar(backgroundColor: AppColor.primary40, radius: 8), + 8.width, + "My Requests".heading6(context), + ], + ), + 16.height, + Row( + children: [ + const CircleAvatar(backgroundColor: AppColor.green50, radius: 8), + 8.width, + "My Team Requests".heading6(context), + ], + ), + ], + ), + ), + CalendarCard( + calendarFormat: CalendarFormat.week, + child: Column( + children: [ + const Divider().defaultStyle(context), + ], + ), + ), + Container(), + ], + ).expanded, + ], + ).paddingAll(16), + ); + } +} + +class CalendarCard extends StatelessWidget { + final CalendarFormat calendarFormat; + final Widget child; + const CalendarCard({this.calendarFormat, this.child, Key key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Card( + child: Column( + children: [ + TableCalendar( + firstDay: DateTime.utc(2010, 10, 16), + lastDay: DateTime.utc(2030, 3, 14), + focusedDay: DateTime.now(), + calendarFormat: calendarFormat, + weekendDays: const [], + headerStyle: HeaderStyle( + leftChevronIcon: null, + leftChevronMargin: EdgeInsets.zero, + leftChevronPadding: EdgeInsets.zero, + rightChevronMargin: EdgeInsets.zero, + rightChevronPadding: EdgeInsets.only(bottom: 16.toScreenHeight), + formatButtonVisible: false, + rightChevronIcon: const Icon(Icons.calendar_today, color: AppColor.neutral60, size: 18), + ), + ), + child, + ], + ).paddingOnly(start: 16, end: 16, top: 8, bottom: 8), + ); + } +} diff --git a/lib/new_views/pages/land_page/dashboard_page.dart b/lib/new_views/pages/land_page/dashboard_page.dart index d359cd1c..c952968a 100644 --- a/lib/new_views/pages/land_page/dashboard_page.dart +++ b/lib/new_views/pages/land_page/dashboard_page.dart @@ -3,10 +3,7 @@ import 'package:test_sa/extensions/context_extension.dart'; import 'package:test_sa/extensions/int_extensions.dart'; import 'package:test_sa/extensions/text_extensions.dart'; import 'package:test_sa/extensions/widget_extensions.dart'; -import 'package:test_sa/models/enums/translation_keys.dart'; import 'package:test_sa/new_views/app_style/app_color.dart'; -import 'package:test_sa/new_views/common_widgets/app_drawer.dart'; -import 'package:test_sa/new_views/common_widgets/app_floating_action_button.dart'; import 'package:test_sa/new_views/pages/land_page/dashboard_fragments/progress_fragment.dart'; import 'package:test_sa/new_views/pages/land_page/dashboard_fragments/recent_activites_fragment.dart'; import 'package:test_sa/new_views/pages/land_page/dashboard_fragments/requests_fragment.dart'; @@ -122,7 +119,7 @@ class _DashboardPageState extends State { onPageChanged: (index) => setState(() => _currentPage = index), children: [ RequestsFragment(), - ProgressFragment(), + const ProgressFragment(), RecentActivitiesFragment(), ], ).expanded, diff --git a/lib/new_views/pages/land_page/land_page.dart b/lib/new_views/pages/land_page/land_page.dart index 242cc74f..3c687f09 100644 --- a/lib/new_views/pages/land_page/land_page.dart +++ b/lib/new_views/pages/land_page/land_page.dart @@ -2,17 +2,15 @@ import 'dart:io'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; -import 'package:test_sa/extensions/int_extensions.dart'; -import 'package:test_sa/new_views/pages/land_page/home_app_bar.dart'; -import 'package:test_sa/new_views/pages/land_page/my_assets_page.dart'; -import 'package:test_sa/new_views/pages/land_page/my_request/my_requests_page.dart'; -import 'package:test_sa/views/pages/device_transfer/asset_search_screen.dart'; +import 'package:provider/provider.dart'; import 'package:test_sa/views/pages/user/land_page.dart' as old_page; import 'package:test_sa/views/widgets/equipment/single_device_picker.dart'; +import '../../../controllers/providers/api/user_provider.dart'; +import '../../../models/enums/user_types.dart'; import '../../common_widgets/app_bottom_nav_bar.dart'; import '../../common_widgets/app_drawer.dart'; -import '../../common_widgets/app_floating_action_button.dart'; +import 'calendar_page.dart'; import 'contact_us_bottom_sheet.dart'; import 'dashboard_page.dart'; @@ -32,16 +30,18 @@ class _LandPageState extends State { List _pages; @override - void initState() { + void didChangeDependencies() { + final user = Provider.of(context, listen: false).user; _pages = [ DashboardPage(onDrawerPress: (() { _scaffoldKey.currentState.isDrawerOpen ? _scaffoldKey.currentState.closeDrawer() : _scaffoldKey.currentState.openDrawer(); })), - old_page.LandPage(), - SingleDevicePicker(), - MyRequestsPage(), + const old_page.LandPage(), + // const MyRequestsPage(), + const SingleDevicePicker(), + if (user.type == UsersTypes.engineer) const CalendarPage(), ]; - super.initState(); + super.didChangeDependencies(); } @override @@ -67,12 +67,12 @@ class _LandPageState extends State { }, child: Scaffold( key: _scaffoldKey, - drawer: AppDrawer(), + drawer: const AppDrawer(), body: _pages[currentPageIndex], bottomNavigationBar: AppBottomNavigationBar( selectedIndex: currentPageIndex, onPressed: (index) { - if (index == 3) { + if (index == _pages.length) { showModalBottomSheet( context: context, useSafeArea: true, diff --git a/lib/new_views/pages/land_page/my_request/my_requests_page.dart b/lib/new_views/pages/land_page/my_request/my_requests_page.dart index c40406d5..7c9b8179 100644 --- a/lib/new_views/pages/land_page/my_request/my_requests_page.dart +++ b/lib/new_views/pages/land_page/my_request/my_requests_page.dart @@ -1,41 +1,36 @@ import 'package:flutter/material.dart'; import 'package:test_sa/extensions/context_extension.dart'; -import 'package:test_sa/models/enums/translation_keys.dart'; import '../../../app_style/app_color.dart'; import '../../../common_widgets/app_search_field.dart'; class MyRequestsPage extends StatelessWidget { - const MyRequestsPage({Key key}) : super(key: key); - + const MyRequestsPage({Key key}) : super(key: key); @override Widget build(BuildContext context) { - return Scaffold( + return Scaffold( appBar: AppBar( - leadingWidth: 0, title: Padding( padding: const EdgeInsets.only(bottom: 10), child: Row( crossAxisAlignment: CrossAxisAlignment.center, children: [ - Expanded(child: SizedBox( - height: 50, - child: AppSearchField())), - SizedBox(width: 20,), - Text(context.translation.filter, style: TextStyle( - color: AppColor.primary50, - fontSize: Theme.of(context).textTheme.bodySmall.fontSize, - fontWeight: FontWeight.w500 - ),) + const Expanded(child: SizedBox(height: 50, child: AppSearchField())), + const SizedBox( + width: 20, + ), + Text( + context.translation.filter, + style: TextStyle(color: AppColor.primary50, fontSize: Theme.of(context).textTheme.bodySmall.fontSize, fontWeight: FontWeight.w500), + ) ], ), ), ), - - body: TabBarView( - children: const [ + body: const TabBarView( + children: [ Center( child: Text(""), ), diff --git a/pubspec.lock b/pubspec.lock index 2f19d78f..591827a5 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -1053,6 +1053,14 @@ packages: url: "https://pub.dev" source: hosted version: "5.3.0" + simple_gesture_detector: + dependency: transitive + description: + name: simple_gesture_detector + sha256: "86d08f85f1f58583b7b4b941d989f48ea6ce08c1724a1d10954a277c2ec36592" + url: "https://pub.dev" + source: hosted + version: "0.2.0" sky_engine: dependency: transitive description: flutter @@ -1138,6 +1146,14 @@ packages: url: "https://pub.dev" source: hosted version: "3.1.0" + table_calendar: + dependency: "direct main" + description: + name: table_calendar + sha256: "7f1270313c0cdb245b583ed8518982c01d4a7e95869b3c30abcbae3b642c45d0" + url: "https://pub.dev" + source: hosted + version: "3.0.8" term_glyph: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index 9379bdc4..3c61f20d 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -73,6 +73,7 @@ dependencies: shimmer: ^2.0.0 flutter_advanced_switch: ^3.0.1 pie_chart: ^5.3.2 + table_calendar: ^3.0.0 dev_dependencies: flutter_test: From 9f0de18ea63453a87a04e3415b66399e749489a4 Mon Sep 17 00:00:00 2001 From: zaid_daoud Date: Wed, 8 Nov 2023 08:34:18 +0300 Subject: [PATCH 4/7] Working On Calendar --- .../pages/land_page/calendar_page.dart | 40 ++++++++++++------- 1 file changed, 25 insertions(+), 15 deletions(-) diff --git a/lib/new_views/pages/land_page/calendar_page.dart b/lib/new_views/pages/land_page/calendar_page.dart index ce98fd56..3c254387 100644 --- a/lib/new_views/pages/land_page/calendar_page.dart +++ b/lib/new_views/pages/land_page/calendar_page.dart @@ -116,22 +116,32 @@ class CalendarCard extends StatelessWidget { return Card( child: Column( children: [ - TableCalendar( - firstDay: DateTime.utc(2010, 10, 16), - lastDay: DateTime.utc(2030, 3, 14), - focusedDay: DateTime.now(), - calendarFormat: calendarFormat, - weekendDays: const [], - headerStyle: HeaderStyle( - leftChevronIcon: null, - leftChevronMargin: EdgeInsets.zero, - leftChevronPadding: EdgeInsets.zero, - rightChevronMargin: EdgeInsets.zero, - rightChevronPadding: EdgeInsets.only(bottom: 16.toScreenHeight), - formatButtonVisible: false, - rightChevronIcon: const Icon(Icons.calendar_today, color: AppColor.neutral60, size: 18), + SingleChildScrollView( + child: TableCalendar( + firstDay: DateTime.utc(2010, 10, 16), + lastDay: DateTime.utc(2030, 3, 14), + focusedDay: DateTime.now(), + calendarFormat: calendarFormat, + weekendDays: const [], + calendarStyle: CalendarStyle( + isTodayHighlighted: false, + cellMargin: const EdgeInsets.all(8), + cellPadding: EdgeInsets.zero, + defaultTextStyle: AppTextStyles.bodyText, + defaultDecoration: const BoxDecoration(shape: BoxShape.circle, color: AppColor.neutral30), + ), + headerStyle: HeaderStyle( + leftChevronIcon: null, + leftChevronMargin: EdgeInsets.zero, + leftChevronPadding: EdgeInsets.zero, + rightChevronMargin: EdgeInsets.zero, + formatButtonVisible: false, + rightChevronPadding: EdgeInsets.only(bottom: 16.toScreenHeight), + rightChevronIcon: const Icon(Icons.calendar_today, color: AppColor.neutral60, size: 18), + titleTextStyle: AppTextStyles.heading5, + ), ), - ), + ).expanded, child, ], ).paddingOnly(start: 16, end: 16, top: 8, bottom: 8), From c93e249519f5495fea76484d74b836f1f09d5d25 Mon Sep 17 00:00:00 2001 From: Sikander Saleem Date: Wed, 8 Nov 2023 09:22:46 +0300 Subject: [PATCH 5/7] improvement. --- .../pages/land_page/calendar_page.dart | 26 ++-- .../calender_fragments/daily_fragment.dart | 3 +- .../pages/land_page/calender_page.dart | 145 ------------------ .../pages/land_page/calender_page12.dart | 145 ++++++++++++++++++ lib/new_views/pages/land_page/land_page.dart | 4 +- 5 files changed, 160 insertions(+), 163 deletions(-) delete mode 100644 lib/new_views/pages/land_page/calender_page.dart create mode 100644 lib/new_views/pages/land_page/calender_page12.dart diff --git a/lib/new_views/pages/land_page/calendar_page.dart b/lib/new_views/pages/land_page/calendar_page.dart index 3c254387..b8635aab 100644 --- a/lib/new_views/pages/land_page/calendar_page.dart +++ b/lib/new_views/pages/land_page/calendar_page.dart @@ -4,6 +4,8 @@ import 'package:test_sa/extensions/int_extensions.dart'; import 'package:test_sa/extensions/text_extensions.dart'; import 'package:test_sa/extensions/widget_extensions.dart'; import 'package:test_sa/new_views/app_style/app_color.dart'; +import 'package:test_sa/new_views/pages/land_page/calender_fragments/daily_fragment.dart'; +import 'package:test_sa/new_views/pages/land_page/calender_fragments/weekly_fragment.dart'; import '../../common_widgets/default_app_bar.dart'; @@ -26,20 +28,22 @@ class _CalendarPageState extends State with SingleTickerProviderSt @override Widget build(BuildContext context) { return Scaffold( - appBar: const DefaultAppBar(title: ""), body: Column( mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, children: [ - Card( + // todo @sikander, hiding My shift view, later when they add data, then will us it. + SizedBox( + width: double.infinity, child: Column( - crossAxisAlignment: CrossAxisAlignment.stretch, + crossAxisAlignment: CrossAxisAlignment.start, children: [ "My Shift".heading5(context), 8.height, "Sunday to Thursday".bodyText(context), "09:00 to 18:00".bodyText(context).custom(color: AppColor.neutral50), ], - ).paddingAll(16), + ).toShadowContainer, ), 16.height, Container( @@ -89,19 +93,12 @@ class _CalendarPageState extends State with SingleTickerProviderSt ], ), ), - CalendarCard( - calendarFormat: CalendarFormat.week, - child: Column( - children: [ - const Divider().defaultStyle(context), - ], - ), - ), - Container(), + WeeklyFragment(), + DailyFragment(), ], ).expanded, ], - ).paddingAll(16), + ), ); } } @@ -109,6 +106,7 @@ class _CalendarPageState extends State with SingleTickerProviderSt class CalendarCard extends StatelessWidget { final CalendarFormat calendarFormat; final Widget child; + const CalendarCard({this.calendarFormat, this.child, Key key}) : super(key: key); @override diff --git a/lib/new_views/pages/land_page/calender_fragments/daily_fragment.dart b/lib/new_views/pages/land_page/calender_fragments/daily_fragment.dart index 3d9c85ac..4d38ad20 100644 --- a/lib/new_views/pages/land_page/calender_fragments/daily_fragment.dart +++ b/lib/new_views/pages/land_page/calender_fragments/daily_fragment.dart @@ -24,7 +24,6 @@ class _DailyFragmentState extends State { @override Widget build(BuildContext context) { - // TODO: implement build - return null; + return Container(); } } diff --git a/lib/new_views/pages/land_page/calender_page.dart b/lib/new_views/pages/land_page/calender_page.dart deleted file mode 100644 index 42e0d6ac..00000000 --- a/lib/new_views/pages/land_page/calender_page.dart +++ /dev/null @@ -1,145 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:table_calendar/table_calendar.dart'; -import 'package:test_sa/extensions/int_extensions.dart'; -import 'package:test_sa/extensions/text_extensions.dart'; -import 'package:test_sa/extensions/widget_extensions.dart'; -import 'package:test_sa/new_views/app_style/app_color.dart'; -import 'package:test_sa/new_views/pages/land_page/calender_fragments/monthly_fragment.dart'; -import 'package:test_sa/new_views/pages/land_page/calender_fragments/weekly_fragment.dart'; - -class CalenderPage extends StatefulWidget { - CalenderPage({Key key}) : super(key: key); - - @override - _CalenderPageState createState() { - return _CalenderPageState(); - } -} - -class _CalenderPageState extends State { - int selectedIndex = 0; - DateTime currentDateTime = DateTime.now(); - - PageController _pageController; - - @override - void initState() { - _pageController = PageController(); - super.initState(); - } - - @override - void dispose() { - _pageController.dispose(); - super.dispose(); - } - - @override - Widget build(BuildContext context) { - return Scaffold( - body: Column( - children: [ - // todo @sikander, hiding My shift view, later when they add data, then will us it. - Container( - width: double.infinity, - padding: const EdgeInsets.all(16), - decoration: ShapeDecoration( - color: Colors.white, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(20), - ), - shadows: const [ - BoxShadow( - color: Color(0x07000000), - blurRadius: 14, - offset: Offset(0, 0), - spreadRadius: 0, - ) - ], - ), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisSize: MainAxisSize.min, - children: [ - Text( - 'My Shift', - style: AppTextStyles.heading5.copyWith(color: AppColor.neutral50), - ), - 8.height, - Text( - 'Sunday to Thursday', - style: AppTextStyles.bodyText.copyWith(color: const Color(0xFF757575)), - ), - Text( - '09:00 to 18:00', - style: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), - ), - ], - ), - ), - - Container( - width: double.infinity, - padding: const EdgeInsets.all(4), - decoration: ShapeDecoration( - color: const Color(0xFFEAF1F4), - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(16), - ), - shadows: const [ - BoxShadow( - color: Color(0x07000000), - blurRadius: 14, - offset: Offset(0, 0), - spreadRadius: 0, - ) - ], - ), - child: Row( - children: [ - tabItem("Monthly", 0, selectedIndex, () => onTabPress(0)), - tabItem("Weekly", 1, selectedIndex, () => onTabPress(1)), - tabItem("Daily", 2, selectedIndex, () => onTabPress(2)), - ], - ), - ), - 8.height, - PageView( - controller: _pageController, - onPageChanged: (index) => onTabPress(index), - children: [ - MonthlyFragment(), - WeeklyFragment(), - Container(), - ], - ).expanded, - ], - ), - ); - } - - void onTabPress(index) { - if (selectedIndex != index) { - setState(() { - selectedIndex = index; - }); - _pageController.jumpToPage(index); - } - } - - Widget tabItem(String title, int index, int selectedIndex, VoidCallback onPress) { - return Container( - alignment: Alignment.center, - padding: const EdgeInsets.only(top: 14, bottom: 14), - decoration: ShapeDecoration( - color: index == selectedIndex ? Colors.white : Colors.transparent, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(13), - ), - ), - child: Text( - title, - style: AppTextStyles.bodyText.copyWith(color: index == selectedIndex ? AppColor.neutral60 : const Color(0xFF757575)), - )).onPress(onPress).expanded; - } -} diff --git a/lib/new_views/pages/land_page/calender_page12.dart b/lib/new_views/pages/land_page/calender_page12.dart new file mode 100644 index 00000000..812f7e5a --- /dev/null +++ b/lib/new_views/pages/land_page/calender_page12.dart @@ -0,0 +1,145 @@ +// import 'package:flutter/material.dart'; +// import 'package:table_calendar/table_calendar.dart'; +// import 'package:test_sa/extensions/int_extensions.dart'; +// import 'package:test_sa/extensions/text_extensions.dart'; +// import 'package:test_sa/extensions/widget_extensions.dart'; +// import 'package:test_sa/new_views/app_style/app_color.dart'; +// import 'package:test_sa/new_views/pages/land_page/calender_fragments/monthly_fragment.dart'; +// import 'package:test_sa/new_views/pages/land_page/calender_fragments/weekly_fragment.dart'; +// +// class CalenderPage extends StatefulWidget { +// CalenderPage({Key key}) : super(key: key); +// +// @override +// _CalenderPageState createState() { +// return _CalenderPageState(); +// } +// } +// +// class _CalenderPageState extends State { +// int selectedIndex = 0; +// DateTime currentDateTime = DateTime.now(); +// +// PageController _pageController; +// +// @override +// void initState() { +// _pageController = PageController(); +// super.initState(); +// } +// +// @override +// void dispose() { +// _pageController.dispose(); +// super.dispose(); +// } +// +// @override +// Widget build(BuildContext context) { +// return Scaffold( +// body: Column( +// children: [ +// // todo @sikander, hiding My shift view, later when they add data, then will us it. +// Container( +// width: double.infinity, +// padding: const EdgeInsets.all(16), +// decoration: ShapeDecoration( +// color: Colors.white, +// shape: RoundedRectangleBorder( +// borderRadius: BorderRadius.circular(20), +// ), +// shadows: const [ +// BoxShadow( +// color: Color(0x07000000), +// blurRadius: 14, +// offset: Offset(0, 0), +// spreadRadius: 0, +// ) +// ], +// ), +// child: Column( +// crossAxisAlignment: CrossAxisAlignment.start, +// mainAxisSize: MainAxisSize.min, +// children: [ +// Text( +// 'My Shift', +// style: AppTextStyles.heading5.copyWith(color: AppColor.neutral50), +// ), +// 8.height, +// Text( +// 'Sunday to Thursday', +// style: AppTextStyles.bodyText.copyWith(color: const Color(0xFF757575)), +// ), +// Text( +// '09:00 to 18:00', +// style: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), +// ), +// ], +// ), +// ), +// +// Container( +// width: double.infinity, +// padding: const EdgeInsets.all(4), +// decoration: ShapeDecoration( +// color: const Color(0xFFEAF1F4), +// shape: RoundedRectangleBorder( +// borderRadius: BorderRadius.circular(16), +// ), +// shadows: const [ +// BoxShadow( +// color: Color(0x07000000), +// blurRadius: 14, +// offset: Offset(0, 0), +// spreadRadius: 0, +// ) +// ], +// ), +// child: Row( +// children: [ +// tabItem("Monthly", 0, selectedIndex, () => onTabPress(0)), +// tabItem("Weekly", 1, selectedIndex, () => onTabPress(1)), +// tabItem("Daily", 2, selectedIndex, () => onTabPress(2)), +// ], +// ), +// ), +// 8.height, +// PageView( +// controller: _pageController, +// onPageChanged: (index) => onTabPress(index), +// children: [ +// MonthlyFragment(), +// WeeklyFragment(), +// Container(), +// ], +// ).expanded, +// ], +// ), +// ); +// } +// +// void onTabPress(index) { +// if (selectedIndex != index) { +// setState(() { +// selectedIndex = index; +// }); +// _pageController.jumpToPage(index); +// } +// } +// +// Widget tabItem(String title, int index, int selectedIndex, VoidCallback onPress) { +// return Container( +// alignment: Alignment.center, +// padding: const EdgeInsets.only(top: 14, bottom: 14), +// decoration: ShapeDecoration( +// color: index == selectedIndex ? Colors.white : Colors.transparent, +// shape: RoundedRectangleBorder( +// borderRadius: BorderRadius.circular(13), +// ), +// ), +// child: Text( +// title, +// style: AppTextStyles.bodyText.copyWith(color: index == selectedIndex ? AppColor.neutral60 : const Color(0xFF757575)), +// )).onPress(onPress).expanded; +// } +// } diff --git a/lib/new_views/pages/land_page/land_page.dart b/lib/new_views/pages/land_page/land_page.dart index acac87d3..d15b2992 100644 --- a/lib/new_views/pages/land_page/land_page.dart +++ b/lib/new_views/pages/land_page/land_page.dart @@ -6,7 +6,7 @@ import 'package:provider/provider.dart'; import 'package:test_sa/controllers/providers/api/user_provider.dart'; import 'package:test_sa/extensions/int_extensions.dart'; import 'package:test_sa/models/enums/user_types.dart'; -import 'package:test_sa/new_views/pages/land_page/calender_page.dart'; +import 'package:test_sa/new_views/pages/land_page/calendar_page.dart'; import 'package:test_sa/new_views/pages/land_page/home_app_bar.dart'; import 'package:test_sa/new_views/pages/land_page/my_assets_page.dart'; import 'package:test_sa/new_views/pages/land_page/my_request/my_requests_page.dart'; @@ -52,7 +52,7 @@ class _LandPageState extends State { })), old_page.LandPage(), SingleDevicePicker(), - if (_userProvider.user.type == UsersTypes.engineer) CalenderPage(), + if (_userProvider.user.type == UsersTypes.engineer) CalendarPage(), MyRequestsPage(), ]; } From 3af18cb884f209662c1a913d74ca01c4368cdb9a Mon Sep 17 00:00:00 2001 From: zaid_daoud Date: Wed, 8 Nov 2023 11:15:04 +0300 Subject: [PATCH 6/7] Working On Calendar --- .../pages/land_page/calendar_page.dart | 163 ++++++------------ .../calender_fragments/calendar_header.dart | 32 ++++ .../calender_days_card.dart | 40 +++++ .../calender_fragments/daily_fragment.dart | 9 +- .../calender_fragments/monthly_fragment.dart | 114 ++++++------ .../calender_fragments/weekly_fragment.dart | 61 ++++--- 6 files changed, 224 insertions(+), 195 deletions(-) create mode 100644 lib/new_views/pages/land_page/calender_fragments/calendar_header.dart create mode 100644 lib/new_views/pages/land_page/calender_fragments/calender_days_card.dart diff --git a/lib/new_views/pages/land_page/calendar_page.dart b/lib/new_views/pages/land_page/calendar_page.dart index b8635aab..22fd80e9 100644 --- a/lib/new_views/pages/land_page/calendar_page.dart +++ b/lib/new_views/pages/land_page/calendar_page.dart @@ -1,5 +1,4 @@ import 'package:flutter/material.dart'; -import 'package:table_calendar/table_calendar.dart'; import 'package:test_sa/extensions/int_extensions.dart'; import 'package:test_sa/extensions/text_extensions.dart'; import 'package:test_sa/extensions/widget_extensions.dart'; @@ -7,7 +6,7 @@ import 'package:test_sa/new_views/app_style/app_color.dart'; import 'package:test_sa/new_views/pages/land_page/calender_fragments/daily_fragment.dart'; import 'package:test_sa/new_views/pages/land_page/calender_fragments/weekly_fragment.dart'; -import '../../common_widgets/default_app_bar.dart'; +import 'calender_fragments/monthly_fragment.dart'; class CalendarPage extends StatefulWidget { const CalendarPage({Key key}) : super(key: key); @@ -28,121 +27,57 @@ class _CalendarPageState extends State with SingleTickerProviderSt @override Widget build(BuildContext context) { return Scaffold( - body: Column( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - // todo @sikander, hiding My shift view, later when they add data, then will us it. - SizedBox( - width: double.infinity, - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - "My Shift".heading5(context), - 8.height, - "Sunday to Thursday".bodyText(context), - "09:00 to 18:00".bodyText(context).custom(color: AppColor.neutral50), - ], - ).toShadowContainer, - ), - 16.height, - Container( - decoration: BoxDecoration(color: AppColor.neutral30, borderRadius: BorderRadius.circular(16)), - child: TabBar( - controller: _tabController, - padding: EdgeInsets.zero, - labelColor: AppColor.neutral60, - unselectedLabelColor: AppColor.neutral20, - indicatorPadding: const EdgeInsets.all(4), - indicator: BoxDecoration(color: Theme.of(context).cardColor, borderRadius: BorderRadius.circular(13)), - onTap: (index) { - setState(() {}); - }, - tabs: [ - Tab(text: "Monthly", height: 57.toScreenHeight), - Tab(text: "Weekly", height: 57.toScreenHeight), - Tab(text: "Daily", height: 57.toScreenHeight), - ], + body: SafeArea( + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + // todo @sikander, hiding My shift view, later when they add data, then will us it. + SizedBox( + width: double.infinity, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + "My Shift".heading5(context), + 8.height, + "Sunday to Thursday".bodyText(context), + "09:00 to 18:00".bodyText(context).custom(color: AppColor.neutral50), + ], + ).toShadowContainer, ), - ), - 8.height, - TabBarView( - physics: const NeverScrollableScrollPhysics(), - controller: _tabController, - children: [ - CalendarCard( - calendarFormat: CalendarFormat.month, - child: Column( - children: [ - 16.height, - Row( - children: [ - const CircleAvatar(backgroundColor: AppColor.primary40, radius: 8), - 8.width, - "My Requests".heading6(context), - ], - ), - 16.height, - Row( - children: [ - const CircleAvatar(backgroundColor: AppColor.green50, radius: 8), - 8.width, - "My Team Requests".heading6(context), - ], - ), - ], - ), - ), - WeeklyFragment(), - DailyFragment(), - ], - ).expanded, - ], - ), - ); - } -} - -class CalendarCard extends StatelessWidget { - final CalendarFormat calendarFormat; - final Widget child; - - const CalendarCard({this.calendarFormat, this.child, Key key}) : super(key: key); - - @override - Widget build(BuildContext context) { - return Card( - child: Column( - children: [ - SingleChildScrollView( - child: TableCalendar( - firstDay: DateTime.utc(2010, 10, 16), - lastDay: DateTime.utc(2030, 3, 14), - focusedDay: DateTime.now(), - calendarFormat: calendarFormat, - weekendDays: const [], - calendarStyle: CalendarStyle( - isTodayHighlighted: false, - cellMargin: const EdgeInsets.all(8), - cellPadding: EdgeInsets.zero, - defaultTextStyle: AppTextStyles.bodyText, - defaultDecoration: const BoxDecoration(shape: BoxShape.circle, color: AppColor.neutral30), - ), - headerStyle: HeaderStyle( - leftChevronIcon: null, - leftChevronMargin: EdgeInsets.zero, - leftChevronPadding: EdgeInsets.zero, - rightChevronMargin: EdgeInsets.zero, - formatButtonVisible: false, - rightChevronPadding: EdgeInsets.only(bottom: 16.toScreenHeight), - rightChevronIcon: const Icon(Icons.calendar_today, color: AppColor.neutral60, size: 18), - titleTextStyle: AppTextStyles.heading5, + 16.height, + Container( + decoration: BoxDecoration(color: AppColor.neutral30, borderRadius: BorderRadius.circular(16)), + child: TabBar( + controller: _tabController, + padding: EdgeInsets.zero, + labelColor: AppColor.neutral60, + unselectedLabelColor: AppColor.neutral20, + indicatorPadding: const EdgeInsets.all(4), + indicator: BoxDecoration(color: Theme.of(context).cardColor, borderRadius: BorderRadius.circular(13)), + onTap: (index) { + setState(() {}); + }, + tabs: [ + Tab(text: "Monthly", height: 57.toScreenHeight), + Tab(text: "Weekly", height: 57.toScreenHeight), + Tab(text: "Daily", height: 57.toScreenHeight), + ], ), ), - ).expanded, - child, - ], - ).paddingOnly(start: 16, end: 16, top: 8, bottom: 8), + 8.height, + TabBarView( + physics: const NeverScrollableScrollPhysics(), + controller: _tabController, + children: const [ + MonthlyFragment(), + WeeklyFragment(), + DailyFragment(), + ], + ).expanded, + ], + ).paddingAll(16), + ), ); } } diff --git a/lib/new_views/pages/land_page/calender_fragments/calendar_header.dart b/lib/new_views/pages/land_page/calender_fragments/calendar_header.dart new file mode 100644 index 00000000..63a46837 --- /dev/null +++ b/lib/new_views/pages/land_page/calender_fragments/calendar_header.dart @@ -0,0 +1,32 @@ +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; +import 'package:test_sa/extensions/int_extensions.dart'; +import 'package:test_sa/extensions/text_extensions.dart'; +import 'package:test_sa/extensions/widget_extensions.dart'; + +import '../../../app_style/app_color.dart'; + +class CalendarHeader extends StatelessWidget { + final DateTime dateTime; + final DateFormat dateFormat; + const CalendarHeader({@required this.dateTime, @required this.dateFormat, Key key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Column( + children: [ + Row( + children: [ + dateFormat.format(dateTime).heading5(context), + 6.width, + const Align(alignment: AlignmentDirectional.centerEnd, child: Icon(Icons.keyboard_arrow_down_sharp, color: AppColor.neutral60, size: 24)), + const Spacer(), + const Align(alignment: AlignmentDirectional.centerEnd, child: Icon(Icons.calendar_today, color: AppColor.neutral60, size: 18)), + ], + ), + 8.height, + const Divider().defaultStyle(context), + ], + ); + } +} diff --git a/lib/new_views/pages/land_page/calender_fragments/calender_days_card.dart b/lib/new_views/pages/land_page/calender_fragments/calender_days_card.dart new file mode 100644 index 00000000..925929b6 --- /dev/null +++ b/lib/new_views/pages/land_page/calender_fragments/calender_days_card.dart @@ -0,0 +1,40 @@ +import 'package:flutter/material.dart'; +import 'package:test_sa/extensions/int_extensions.dart'; +import 'package:test_sa/extensions/text_extensions.dart'; + +import '../../../app_style/app_color.dart'; + +class CalendarDaysCard extends StatelessWidget { + final String day; + const CalendarDaysCard({Key key, @required this.day}) : super(key: key); + + @override + Widget build(BuildContext context) { + final bgColor = day == "1" ? AppColor.neutral30 : (day == "2" ? AppColor.primary40 : AppColor.green50).withOpacity(0.3); + final dotColor = (day == "1" + ? Colors.transparent + : day == "2" + ? AppColor.primary40 + : AppColor.green50); + return SizedBox( + height: 45.toScreenWidth, + width: 45.toScreenWidth, + child: Stack( + children: [ + Container( + height: 37.toScreenWidth, + width: 37.toScreenWidth, + alignment: Alignment.center, + decoration: BoxDecoration(shape: BoxShape.circle, color: bgColor), + child: day.bodyText(context).custom(color: AppColor.neutral50), + ), + PositionedDirectional( + bottom: 16.toScreenHeight, + end: 16.toScreenWidth, + child: CircleAvatar(backgroundColor: dotColor, radius: 2.5), + ), + ], + ), + ); + } +} diff --git a/lib/new_views/pages/land_page/calender_fragments/daily_fragment.dart b/lib/new_views/pages/land_page/calender_fragments/daily_fragment.dart index 4d38ad20..c0182e20 100644 --- a/lib/new_views/pages/land_page/calender_fragments/daily_fragment.dart +++ b/lib/new_views/pages/land_page/calender_fragments/daily_fragment.dart @@ -1,7 +1,8 @@ import 'package:flutter/material.dart'; +import 'package:test_sa/extensions/text_extensions.dart'; class DailyFragment extends StatefulWidget { - DailyFragment({Key key}) : super(key: key); + const DailyFragment({Key key}) : super(key: key); @override _DailyFragmentState createState() { @@ -24,6 +25,10 @@ class _DailyFragmentState extends State { @override Widget build(BuildContext context) { - return Container(); + return SingleChildScrollView( + child: Column( + children: ["Daily".heading5(context)], + ), + ); } } diff --git a/lib/new_views/pages/land_page/calender_fragments/monthly_fragment.dart b/lib/new_views/pages/land_page/calender_fragments/monthly_fragment.dart index fdff4e54..10152d24 100644 --- a/lib/new_views/pages/land_page/calender_fragments/monthly_fragment.dart +++ b/lib/new_views/pages/land_page/calender_fragments/monthly_fragment.dart @@ -1,63 +1,81 @@ import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; import 'package:table_calendar/table_calendar.dart'; import 'package:test_sa/extensions/int_extensions.dart'; -import 'package:test_sa/extensions/text_extensions.dart'; import 'package:test_sa/extensions/widget_extensions.dart'; -import 'package:test_sa/new_views/app_style/app_color.dart'; + +import '../../../../extensions/text_extensions.dart'; +import '../../../app_style/app_color.dart'; +import 'calendar_header.dart'; +import 'calender_days_card.dart'; class MonthlyFragment extends StatefulWidget { - MonthlyFragment({Key key}) : super(key: key); + const MonthlyFragment({Key key}) : super(key: key); @override - _MonthlyFragmentState createState() { - return _MonthlyFragmentState(); - } + State createState() => _MonthlyFragmentState(); } class _MonthlyFragmentState extends State { - DateTime currentDateTime = DateTime.now(); - - @override - void initState() { - super.initState(); - } - - @override - void dispose() { - super.dispose(); - } - + PageController _controller; @override Widget build(BuildContext context) { - return Column( - children: [ - 1.divider.paddingOnly(top: 16, bottom: 16), - TableCalendar( - headerVisible: false, - firstDay: DateTime.utc(2010, 10, 16), - lastDay: DateTime.utc(2030, 3, 14), - focusedDay: currentDateTime, - currentDay: currentDateTime, - rowHeight: 37, - calendarStyle: CalendarStyle( - todayDecoration: cellDecoration(), - todayTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), - selectedTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), - rangeStartTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), - rangeEndTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), - ), - daysOfWeekStyle: DaysOfWeekStyle( - weekdayStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), - weekendStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), - ), - availableGestures: AvailableGestures.none, - ), - ], - ).toShadowContainer; + return Card( + child: SingleChildScrollView( + child: Column( + children: [ + TableCalendar( + firstDay: DateTime.utc(2010, 10, 16), + lastDay: DateTime.utc(2030, 3, 14), + focusedDay: DateTime.now(), + calendarFormat: CalendarFormat.month, + weekendDays: const [], + onCalendarCreated: (controller) { + _controller = controller; + }, + calendarBuilders: CalendarBuilders( + headerTitleBuilder: (context, dateTime) => CalendarHeader(dateFormat: DateFormat("MMMM, yyyy"), dateTime: dateTime), + dowBuilder: (context, dateTime) { + final day = DateFormat("EE").format(dateTime).toUpperCase(); + return Align(alignment: Alignment.center, child: day.bodyText(context).custom(color: AppColor.neutral50)); + }, + defaultBuilder: (context, dateTime, _) { + final day = DateFormat("d").format(dateTime); + return CalendarDaysCard(day: day); + }, + ), + daysOfWeekHeight: 35.toScreenHeight, + headerStyle: const HeaderStyle(leftChevronVisible: false, rightChevronVisible: false, formatButtonVisible: false), + calendarStyle: CalendarStyle( + isTodayHighlighted: false, + defaultTextStyle: AppTextStyles.bodyText, + defaultDecoration: const BoxDecoration(shape: BoxShape.circle, color: AppColor.neutral30), + ), + ), + Column( + mainAxisSize: MainAxisSize.min, + children: [ + 16.height, + Row( + children: [ + const CircleAvatar(backgroundColor: AppColor.primary40, radius: 8), + 8.width, + "My Requests".heading6(context), + ], + ), + 16.height, + Row( + children: [ + const CircleAvatar(backgroundColor: AppColor.green50, radius: 8), + 8.width, + "My Team Requests".heading6(context), + ], + ), + ], + ), + ], + ).paddingOnly(start: 16, end: 16, top: 8, bottom: 8), + ), + ); } - - BoxDecoration cellDecoration({Color color}) => BoxDecoration( - color: color ?? Colors.transparent, - shape: BoxShape.circle, - ); } diff --git a/lib/new_views/pages/land_page/calender_fragments/weekly_fragment.dart b/lib/new_views/pages/land_page/calender_fragments/weekly_fragment.dart index e804789a..c32e1a41 100644 --- a/lib/new_views/pages/land_page/calender_fragments/weekly_fragment.dart +++ b/lib/new_views/pages/land_page/calender_fragments/weekly_fragment.dart @@ -6,7 +6,7 @@ import 'package:test_sa/extensions/widget_extensions.dart'; import 'package:test_sa/new_views/app_style/app_color.dart'; class WeeklyFragment extends StatefulWidget { - WeeklyFragment({Key key}) : super(key: key); + const WeeklyFragment({Key key}) : super(key: key); @override _WeeklyFragmentState createState() { @@ -29,37 +29,36 @@ class _WeeklyFragmentState extends State { @override Widget build(BuildContext context) { - - return Column( - children: [ - 1.divider.paddingOnly(top: 16, bottom: 16), - TableCalendar( - headerVisible: false, - calendarFormat: CalendarFormat.week, - firstDay: DateTime.utc(2010, 10, 16), - lastDay: DateTime.utc(2030, 3, 14), - focusedDay: currentDateTime, - currentDay: currentDateTime, - rowHeight: 37, - calendarStyle: CalendarStyle( - todayDecoration: cellDecoration(), - todayTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), - selectedTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), - rangeStartTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), - rangeEndTextStyle: AppTextStyles.bodyText.copyWith(color: Color(0xFF2B353E)), - ), - daysOfWeekStyle: DaysOfWeekStyle( - weekdayStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), - weekendStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), + return SingleChildScrollView( + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + 1.divider.paddingOnly(top: 16, bottom: 16), + TableCalendar( + headerVisible: false, + calendarFormat: CalendarFormat.week, + firstDay: DateTime.utc(2010, 10, 16), + lastDay: DateTime.utc(2030, 3, 14), + focusedDay: currentDateTime, + currentDay: currentDateTime, + rowHeight: 37, + calendarStyle: CalendarStyle( + todayDecoration: cellDecoration(), + todayTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)), + selectedTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)), + rangeStartTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)), + rangeEndTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)), + ), + daysOfWeekStyle: DaysOfWeekStyle( + weekdayStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), + weekendStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), + ), + availableGestures: AvailableGestures.none, ), - availableGestures: AvailableGestures.none, - ), - ], - ).toShadowContainer; + ], + ).toShadowContainer, + ); } - BoxDecoration cellDecoration({Color color}) => BoxDecoration( - color: color ?? Colors.transparent, - shape: BoxShape.circle, - ); + BoxDecoration cellDecoration({Color color}) => BoxDecoration(color: color ?? Colors.transparent, shape: BoxShape.circle); } From d908fe1c9d15569558a5fa6404d84880e26f4457 Mon Sep 17 00:00:00 2001 From: zaid_daoud Date: Wed, 8 Nov 2023 11:52:13 +0300 Subject: [PATCH 7/7] Weekly Calendar Design --- .../calender_fragments/weekly_fragment.dart | 70 ++++++++++++++----- 1 file changed, 54 insertions(+), 16 deletions(-) diff --git a/lib/new_views/pages/land_page/calender_fragments/weekly_fragment.dart b/lib/new_views/pages/land_page/calender_fragments/weekly_fragment.dart index c32e1a41..12d55447 100644 --- a/lib/new_views/pages/land_page/calender_fragments/weekly_fragment.dart +++ b/lib/new_views/pages/land_page/calender_fragments/weekly_fragment.dart @@ -1,10 +1,13 @@ import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; import 'package:table_calendar/table_calendar.dart'; import 'package:test_sa/extensions/int_extensions.dart'; import 'package:test_sa/extensions/text_extensions.dart'; import 'package:test_sa/extensions/widget_extensions.dart'; import 'package:test_sa/new_views/app_style/app_color.dart'; +import 'calender_days_card.dart'; + class WeeklyFragment extends StatefulWidget { const WeeklyFragment({Key key}) : super(key: key); @@ -16,6 +19,7 @@ class WeeklyFragment extends StatefulWidget { class _WeeklyFragmentState extends State { DateTime currentDateTime = DateTime.now(); + PageController _controller; @override void initState() { @@ -33,28 +37,62 @@ class _WeeklyFragmentState extends State { child: Column( mainAxisSize: MainAxisSize.min, children: [ - 1.divider.paddingOnly(top: 16, bottom: 16), TableCalendar( - headerVisible: false, - calendarFormat: CalendarFormat.week, firstDay: DateTime.utc(2010, 10, 16), lastDay: DateTime.utc(2030, 3, 14), - focusedDay: currentDateTime, - currentDay: currentDateTime, - rowHeight: 37, - calendarStyle: CalendarStyle( - todayDecoration: cellDecoration(), - todayTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)), - selectedTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)), - rangeStartTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)), - rangeEndTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)), + focusedDay: DateTime.now(), + calendarFormat: CalendarFormat.week, + weekendDays: const [], + onCalendarCreated: (controller) { + _controller = controller; + }, + calendarBuilders: CalendarBuilders( + headerTitleBuilder: (context, dateTime) => Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + DateFormat("EEEE, d MMMM, yyyy").format(dateTime).heading5(context), + 8.height, + const Divider().defaultStyle(context), + ], + ), + dowBuilder: (context, dateTime) { + final day = DateFormat("EE").format(dateTime).toUpperCase(); + return Align(alignment: Alignment.center, child: day.bodyText(context).custom(color: AppColor.neutral50)); + }, + defaultBuilder: (context, dateTime, _) { + final day = DateFormat("d").format(dateTime); + return CalendarDaysCard(day: day); + }, ), - daysOfWeekStyle: DaysOfWeekStyle( - weekdayStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), - weekendStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), + daysOfWeekHeight: 35.toScreenHeight, + headerStyle: const HeaderStyle(leftChevronVisible: false, rightChevronVisible: false, formatButtonVisible: false), + calendarStyle: CalendarStyle( + isTodayHighlighted: false, + defaultTextStyle: AppTextStyles.bodyText, + defaultDecoration: const BoxDecoration(shape: BoxShape.circle, color: AppColor.neutral30), ), - availableGestures: AvailableGestures.none, ), + // TableCalendar( + // headerVisible: false, + // calendarFormat: CalendarFormat.week, + // firstDay: DateTime.utc(2010, 10, 16), + // lastDay: DateTime.utc(2030, 3, 14), + // focusedDay: currentDateTime, + // currentDay: currentDateTime, + // rowHeight: 37, + // calendarStyle: CalendarStyle( + // todayDecoration: cellDecoration(), + // todayTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)), + // selectedTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)), + // rangeStartTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)), + // rangeEndTextStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xFF2B353E)), + // ), + // daysOfWeekStyle: DaysOfWeekStyle( + // weekdayStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), + // weekendStyle: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), + // ), + // availableGestures: AvailableGestures.none, + // ), ], ).toShadowContainer, );