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: