Added Appointments Design and Payments
FaizHashmiCS22
1 year ago
parent
521ff9ca38
commit
528adf68e8
@ -0,0 +1,325 @@
|
||||
import 'package:car_customer_app/view_models/appointments_view_model.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:mc_common_app/classes/consts.dart';
|
||||
import 'package:mc_common_app/extensions/int_extensions.dart';
|
||||
import 'package:mc_common_app/extensions/string_extensions.dart';
|
||||
import 'package:mc_common_app/models/widgets_models.dart';
|
||||
import 'package:mc_common_app/theme/colors.dart';
|
||||
import 'package:mc_common_app/views/advertisement/custom_add_button.dart';
|
||||
import 'package:mc_common_app/widgets/button/show_fill_button.dart';
|
||||
import 'package:mc_common_app/widgets/common_widgets/app_bar.dart';
|
||||
import 'package:mc_common_app/widgets/dropdown/dropdow_field.dart';
|
||||
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
|
||||
import 'package:mc_common_app/widgets/txt_field.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
class BookAppointmentServicesView extends StatelessWidget {
|
||||
const BookAppointmentServicesView({Key? key}) : super(key: key);
|
||||
|
||||
void openTheAddServiceBottomSheet(BuildContext context) {
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
enableDrag: true,
|
||||
builder: (BuildContext context) {
|
||||
AppointmentsVM appointmentsVM = context.watch<AppointmentsVM>();
|
||||
return SizedBox(
|
||||
height: MediaQuery.of(context).size.height * 0.85,
|
||||
child: Column(
|
||||
children: [
|
||||
Container(
|
||||
margin: const EdgeInsets.all(8),
|
||||
height: 8,
|
||||
width: 60,
|
||||
decoration: const BoxDecoration(color: MyColors.lightTextColor, borderRadius: BorderRadius.all(Radius.circular(20))),
|
||||
),
|
||||
12.height,
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
children: [
|
||||
"Select Category".toText(fontSize: 24, isBold: true),
|
||||
],
|
||||
),
|
||||
30.height,
|
||||
Expanded(
|
||||
child: ListView(
|
||||
children: [
|
||||
Builder(
|
||||
builder: (context) {
|
||||
List<DropValue> serviceCategories = [];
|
||||
for (var element in appointmentsVM.providerCategories) {
|
||||
if (!element.isSelected!) {
|
||||
serviceCategories.add(DropValue(element.id?.toInt() ?? 0, element.categoryName ?? "", ""));
|
||||
}
|
||||
}
|
||||
return DropdownField(
|
||||
(DropValue value) => appointmentsVM.updateProviderCategoryId(SelectionModel(selectedId: value.id, selectedOption: value.value, itemPrice: value.subValue)),
|
||||
list: serviceCategories,
|
||||
hint: "Select Category",
|
||||
dropdownValue: appointmentsVM.providerCategoryId.selectedId != -1
|
||||
? DropValue(appointmentsVM.providerCategoryId.selectedId, appointmentsVM.providerCategoryId.selectedOption, "")
|
||||
: null,
|
||||
);
|
||||
},
|
||||
),
|
||||
if (appointmentsVM.isFetchingServices) ...[
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [const CircularProgressIndicator().paddingAll(10)],
|
||||
),
|
||||
] else if (appointmentsVM.providerServices.isNotEmpty) ...[
|
||||
8.height,
|
||||
Builder(
|
||||
builder: (context) {
|
||||
List<DropValue> serviceCategories = [];
|
||||
for (var element in appointmentsVM.providerServices) {
|
||||
if (!element.isSelected!) {
|
||||
serviceCategories.add(DropValue(element.id?.toInt() ?? 0, element.id.toString(), ""));
|
||||
}
|
||||
}
|
||||
return DropdownField(
|
||||
(DropValue value) => appointmentsVM.updateProviderServiceId(SelectionModel(selectedId: value.id, selectedOption: value.value, itemPrice: value.subValue)),
|
||||
list: serviceCategories,
|
||||
hint: "Select Services",
|
||||
dropdownValue: appointmentsVM.providerServiceId.selectedId != -1
|
||||
? DropValue(appointmentsVM.providerServiceId.selectedId, appointmentsVM.providerServiceId.selectedOption, "")
|
||||
: null,
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
if (appointmentsVM.providerServiceId.selectedId != -1 && !appointmentsVM.isFetchingServices) ...[
|
||||
16.height,
|
||||
Row(
|
||||
children: [
|
||||
"Select Service Location".toText(
|
||||
fontSize: 16,
|
||||
isBold: true,
|
||||
color: MyColors.black,
|
||||
),
|
||||
],
|
||||
),
|
||||
8.height,
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: ShowFillButton(
|
||||
isFilled: appointmentsVM.isHomeTapped,
|
||||
maxHeight: 48,
|
||||
title: "Home",
|
||||
txtColor: appointmentsVM.isHomeTapped ? MyColors.white : MyColors.darkTextColor,
|
||||
onPressed: () => appointmentsVM.updateIsHomeTapped(true),
|
||||
),
|
||||
),
|
||||
12.width,
|
||||
Expanded(
|
||||
child: ShowFillButton(
|
||||
isFilled: !appointmentsVM.isHomeTapped,
|
||||
txtColor: !appointmentsVM.isHomeTapped ? MyColors.white : MyColors.darkTextColor,
|
||||
maxHeight: 48,
|
||||
title: "Workshop",
|
||||
onPressed: () => appointmentsVM.updateIsHomeTapped(false),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
if (appointmentsVM.isHomeTapped) ...[
|
||||
8.height,
|
||||
TxtField(
|
||||
hint: 'Pick Home Location',
|
||||
value: appointmentsVM.pickedHomeLocation,
|
||||
isNeedClickAll: true,
|
||||
postfixData: Icons.location_on,
|
||||
postFixDataColor: MyColors.darkTextColor,
|
||||
onTap: () {
|
||||
//TODO: open the place picked to pick the location and save it in provider.
|
||||
appointmentsVM.updatePickedHomeLocation("PM58+F97, Al Olaya, Riyadh 12333");
|
||||
},
|
||||
),
|
||||
14.height,
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.warning,
|
||||
color: MyColors.adPendingStatusColor,
|
||||
size: 19,
|
||||
).paddingOnly(bottom: 2),
|
||||
3.width,
|
||||
"Some services are not available on home location.".toText(
|
||||
color: MyColors.adPendingStatusColor,
|
||||
fontSize: 12,
|
||||
isItalic: true,
|
||||
),
|
||||
],
|
||||
),
|
||||
]
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: Column(
|
||||
children: [
|
||||
if (appointmentsVM.isHomeTapped && !appointmentsVM.isFetchingServices) ...[
|
||||
const Divider(thickness: 1, height: 1),
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
// TODO: This Price will be decided according to the service selected
|
||||
150.toString().toText(fontSize: 30, isBold: true),
|
||||
"SAR".toText(fontSize: 15, isBold: true, color: MyColors.lightTextColor).paddingOnly(bottom: 5),
|
||||
],
|
||||
),
|
||||
"These charges are additional to the actual service charges. For heavy items the charges may vary.".toText(fontSize: 12, color: MyColors.lightTextColor),
|
||||
22.height,
|
||||
],
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: ShowFillButton(
|
||||
maxHeight: 55,
|
||||
title: "Next",
|
||||
onPressed: () {},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
).paddingOnly(bottom: 20)
|
||||
],
|
||||
)).horPaddingMain();
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: CustomAppBar(
|
||||
title: "Book Appointment",
|
||||
isRemoveBackButton: false,
|
||||
isDrawerEnabled: false,
|
||||
actions: [MyAssets.searchIcon.buildSvg().paddingOnly(right: 21)],
|
||||
onBackButtonTapped: () => Navigator.pop(context),
|
||||
),
|
||||
body: Consumer(
|
||||
builder: (BuildContext context, AppointmentsVM appointmentsVM, Widget? child) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
21.height,
|
||||
CustomAddButton(
|
||||
onTap: () => {openTheAddServiceBottomSheet(context)},
|
||||
text: "Add Services",
|
||||
icon: Container(
|
||||
height: 24,
|
||||
width: 24,
|
||||
decoration: const BoxDecoration(shape: BoxShape.circle, color: MyColors.darkTextColor),
|
||||
child: const Icon(Icons.add, color: MyColors.white),
|
||||
),
|
||||
),
|
||||
// 20.height,
|
||||
// ListView.builder(
|
||||
// physics: const NeverScrollableScrollPhysics(),
|
||||
// shrinkWrap: true,
|
||||
// itemCount: adVM.specialServiceCards.length,
|
||||
// itemBuilder: (BuildContext context, int index) {
|
||||
// SpecialServiceCard specialServicesCard = adVM.specialServiceCards[index];
|
||||
// return Column(
|
||||
// crossAxisAlignment: CrossAxisAlignment.start,
|
||||
// children: [
|
||||
// Column(
|
||||
// children: [
|
||||
// Row(
|
||||
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
// children: [
|
||||
// Expanded(
|
||||
// child: specialServicesCard.serviceSelectedId!.selectedOption.toText(fontSize: 16, isBold: true),
|
||||
// ),
|
||||
// Align(
|
||||
// alignment: Alignment.topRight,
|
||||
// child: MyAssets.closeWithOrangeBg.buildSvg(
|
||||
// fit: BoxFit.fill,
|
||||
// height: 30,
|
||||
// width: 30,
|
||||
// ),
|
||||
// ).onPress(() => adVM.removeSpecialServiceCard(index))
|
||||
// ],
|
||||
// ),
|
||||
// Builder(builder: (context) {
|
||||
// return Column(
|
||||
// crossAxisAlignment: CrossAxisAlignment.start,
|
||||
// children: [
|
||||
// if (specialServicesCard.serviceSelectedId!.selectedId != 1 && specialServicesCard.serviceSelectedId!.selectedId != 3) ...[
|
||||
// // Row(
|
||||
// // crossAxisAlignment: CrossAxisAlignment.start,
|
||||
// // children: [
|
||||
// // "Duration: ".toText(fontSize: 12, color: MyColors.lightTextColor, isBold: true),
|
||||
// // (specialServicesCard.duration ?? "").toText(fontSize: 12, isBold: true).expand(),
|
||||
// // ],
|
||||
// // ),
|
||||
// 8.height,
|
||||
// Row(
|
||||
// crossAxisAlignment: CrossAxisAlignment.start,
|
||||
// children: [
|
||||
// "Description: ".toText(fontSize: 12, color: MyColors.lightTextColor, isBold: true),
|
||||
// (specialServicesCard.description ?? "").toText(fontSize: 12, isBold: true).expand(),
|
||||
// ],
|
||||
// ),
|
||||
// ],
|
||||
// if (specialServicesCard.serviceSelectedId!.selectedId == 1 || specialServicesCard.serviceSelectedId!.selectedId == 3) ...[
|
||||
// Row(
|
||||
// crossAxisAlignment: CrossAxisAlignment.start,
|
||||
// children: [
|
||||
// const Icon(
|
||||
// weight: 2,
|
||||
// Icons.location_on_outlined,
|
||||
// color: MyColors.primaryColor,
|
||||
// size: 17,
|
||||
// ),
|
||||
// "${specialServicesCard.duration} km".toText(fontSize: 10, color: MyColors.primaryColor),
|
||||
// ],
|
||||
// ),
|
||||
// 8.height,
|
||||
// Row(
|
||||
// crossAxisAlignment: CrossAxisAlignment.start,
|
||||
// children: [
|
||||
// "Branch Address: ".toText(fontSize: 12, color: MyColors.lightTextColor, isBold: true),
|
||||
// (specialServicesCard.address ?? "").toText(fontSize: 12, isBold: true).expand(),
|
||||
// ],
|
||||
// ),
|
||||
// Row(
|
||||
// crossAxisAlignment: CrossAxisAlignment.start,
|
||||
// children: [
|
||||
// "Appointment Time: ".toText(fontSize: 12, color: MyColors.lightTextColor, isBold: true),
|
||||
// "${specialServicesCard.serviceDate} - ${specialServicesCard.serviceTime}".toText(fontSize: 12, isBold: true).expand(),
|
||||
// ],
|
||||
// ),
|
||||
// ],
|
||||
// 6.height,
|
||||
// Row(
|
||||
// crossAxisAlignment: CrossAxisAlignment.end,
|
||||
// children: [
|
||||
// (specialServicesCard.serviceSelectedId!.itemPrice).toText(fontSize: 20, isBold: true),
|
||||
// 2.width,
|
||||
// "SAR".toText(color: MyColors.lightTextColor, fontSize: 14),
|
||||
// ],
|
||||
// ),
|
||||
// ],
|
||||
// );
|
||||
// }),
|
||||
// 3.height,
|
||||
// const Divider(thickness: 1.5)
|
||||
// ],
|
||||
// ),
|
||||
// 10.height,
|
||||
// ],
|
||||
// );
|
||||
// },
|
||||
// ),
|
||||
],
|
||||
);
|
||||
},
|
||||
).horPaddingMain());
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue