diff --git a/lib/pages/add_phone/view/add_phone_page_view.dart b/lib/pages/add_phone/view/add_phone_page_view.dart index 394fbcc..8203f9a 100644 --- a/lib/pages/add_phone/view/add_phone_page_view.dart +++ b/lib/pages/add_phone/view/add_phone_page_view.dart @@ -1,14 +1,225 @@ import 'package:flutter/material.dart'; +import 'package:flutter_ecommerce_website_demo/pages/add_phone/view_model/add_phone_page_view_model.dart'; +import 'package:flutter_ecommerce_website_demo/services/form_service.dart'; +import 'package:flutter_ecommerce_website_demo/widgets/busy_button.dart'; +import 'package:flutter_ecommerce_website_demo/widgets/text_input/orange_text_form_field.dart'; +import 'package:responsive_builder/responsive_builder.dart'; +import 'package:stacked/stacked.dart'; + +import '../../../locator.dart'; class AddPhonePageView extends StatelessWidget { const AddPhonePageView({Key? key}) : super(key: key); @override Widget build(BuildContext context) { - return Center( - child: Text('Add Phone Page', - style: Theme.of(context).textTheme.headline4, - ), + return ViewModelBuilder.reactive( + viewModelBuilder: () => AddPhonePageViewModel(), + builder: ( + BuildContext context, + AddPhonePageViewModel model, + Widget? child, + ) { + final _modelController = TextEditingController(); + final _imageUrlController = TextEditingController(); + final _socController = TextEditingController(); + final _ramController = TextEditingController(); + final _storageController = TextEditingController(); + final _screenSizeController = TextEditingController(); + final _batteryController = TextEditingController(); + final _cameraController = TextEditingController(); + final _priceController = TextEditingController(); + final _stockController = TextEditingController(); + final _sarContrller = TextEditingController(); + + final _modelInputfield = OrangeTextFormField( + controller: _modelController, + labelText: 'Model', + validator: model.validateModel, + keyboardType: TextInputType.text, + ); + final _imageUrlInputfield = OrangeTextFormField( + controller: _imageUrlController, + labelText: 'Image Url', + validator: model.validateImageUrl, + keyboardType: TextInputType.url, + ); + final _socInputfield = OrangeTextFormField( + controller: _socController, + labelText: 'Soc', + validator: model.validateSoc, + keyboardType: TextInputType.text, + ); + final _ramInputfield = OrangeTextFormField( + controller: _ramController, + labelText: 'Ram', + validator: model.validateRam, + keyboardType: TextInputType.number, + ); + final _storageInputfield = OrangeTextFormField( + controller: _storageController, + labelText: 'Storage', + validator: model.validateStorage, + keyboardType: TextInputType.text, + ); + final _screenSizeInputfield = OrangeTextFormField( + controller: _screenSizeController, + labelText: 'Screen Size', + validator: model.validateScreenSize, + keyboardType: TextInputType.number, + ); + final _batteryInputfield = OrangeTextFormField( + controller: _batteryController, + labelText: 'Battery', + validator: model.validateBattery, + keyboardType: TextInputType.number, + ); + final _cameraInputfield = OrangeTextFormField( + controller: _cameraController, + labelText: 'Camera', + validator: model.validateCamera, + keyboardType: TextInputType.text, + ); + final _priceInputfield = OrangeTextFormField( + controller: _priceController, + labelText: 'Price', + validator: model.validatePrice, + keyboardType: TextInputType.number, + ); + final _stockInputfield = OrangeTextFormField( + controller: _stockController, + labelText: 'Stock', + validator: model.validateStock, + keyboardType: TextInputType.number, + ); + final _sarInputfield = OrangeTextFormField( + controller: _sarContrller, + labelText: 'Sar', + validator: model.validateSar, + keyboardType: TextInputType.number, + ); + + final _addPhoneformFields = [ + _modelInputfield, + _imageUrlInputfield, + _socInputfield, + _ramInputfield, + _storageInputfield, + _screenSizeInputfield, + _batteryInputfield, + _cameraInputfield, + _priceInputfield, + _stockInputfield, + _sarInputfield, + ]; + + return ResponsiveBuilder(builder: (context, sizingInformation) { + return SingleChildScrollView( + child: Align( + alignment: Alignment.topCenter, + child: AnimatedContainer( + constraints: sizingInformation.isDesktop + ? const BoxConstraints(maxWidth: 1200) + : BoxConstraints( + maxWidth: sizingInformation.screenSize.width, + ), + duration: const Duration(milliseconds: 60), + padding: sizingInformation.isDesktop + ? const EdgeInsets.symmetric(horizontal: 90) + : const EdgeInsets.symmetric(horizontal: 30), + child: Form( + key: locator().addPhoneFormKey, + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Add Phone', + style: Theme.of(context).textTheme.headline2, + softWrap: true, + overflow: TextOverflow.visible, + ), + if (!sizingInformation.isMobile) + Row( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: _addPhoneformFields.sublist(0, 6).map( + (item) { + return Padding( + padding: const EdgeInsets.symmetric( + vertical: 9, + ), + child: item, + ); + }, + ).toList(), + ), + ), + const SizedBox(width: 18), + Expanded( + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: _addPhoneformFields.sublist(6).map( + (item) { + return Padding( + padding: const EdgeInsets.symmetric( + vertical: 9, + ), + child: item, + ); + }, + ).toList(), + ), + ), + ], + ) + else + ..._addPhoneformFields, + BusyButton( + title: 'Add Phone', + busy: model.isBusy, + onPressed: () { + model.addPhone( + context: context, + model: _modelController.text, + imageUrl: _imageUrlController.text, + soc: _socController.text, + ram: _ramController.text, + storage: _storageController.text, + screenSize: _screenSizeController.text, + battery: _batteryController.text, + camera: _cameraController.text, + price: _priceController.text, + stock: _stockController.text, + sar: _sarContrller.text, + ); + }, + ), + ].map( + (item) { + return Padding( + padding: const EdgeInsets.symmetric(vertical: 9), + child: item, + ); + }, + ).toList(), + ), + ), + ), + ), + ); + }); + }, ); } -} \ No newline at end of file +} diff --git a/lib/pages/sign_up/view/sign_up_page_view.dart b/lib/pages/sign_up/view/sign_up_page_view.dart index 9714d9d..a765f8a 100644 --- a/lib/pages/sign_up/view/sign_up_page_view.dart +++ b/lib/pages/sign_up/view/sign_up_page_view.dart @@ -41,32 +41,24 @@ class SignUpPageView extends StatelessWidget { TextEditingController(); final OrangeTextFormField _firstNameInputField = OrangeTextFormField( - onChanged: (value) => - locator().signUpFormKey.currentState!.save(), labelText: 'First Name', controller: _firstNameController, keyboardType: TextInputType.name, validator: model.validateFirstName, ); final OrangeTextFormField _lastNameInputField = OrangeTextFormField( - onChanged: (value) => - locator().signUpFormKey.currentState!.save(), labelText: 'Last Name', controller: _lastNameController, keyboardType: TextInputType.name, validator: model.validateLastName, ); final OrangeTextFormField _emailInputField = OrangeTextFormField( - onChanged: (value) => - locator().signUpFormKey.currentState!.save(), labelText: 'Email', controller: _emailController, keyboardType: TextInputType.emailAddress, validator: model.validateEmail, ); final OrangeTextFormField _passwordInputField = OrangeTextFormField( - onChanged: (value) => - locator().signUpFormKey.currentState!.save(), labelText: 'Password', controller: _passwordController, keyboardType: TextInputType.visiblePassword, @@ -75,8 +67,6 @@ class SignUpPageView extends StatelessWidget { ); final OrangeTextFormField _confirmPasswordInputField = OrangeTextFormField( - onChanged: (value) => - locator().signUpFormKey.currentState!.save(), labelText: 'Confirmation Password', controller: _confirmPasswordController, keyboardType: TextInputType.visiblePassword, @@ -92,8 +82,6 @@ class SignUpPageView extends StatelessWidget { isPasswordField: true, ); final OrangeTextFormField _phoneNumberInputField = OrangeTextFormField( - onChanged: (value) => - locator().signUpFormKey.currentState!.save(), labelText: 'Phone Number', controller: _phoneNumberController, keyboardType: TextInputType.phone, @@ -101,24 +89,18 @@ class SignUpPageView extends StatelessWidget { ); final OrangeTextFormField _streetAddressInputField = OrangeTextFormField( - onChanged: (value) => - locator().signUpFormKey.currentState!.save(), labelText: 'Address', controller: _streetAddressController, keyboardType: TextInputType.text, validator: model.validateStreetAddress, ); final OrangeTextFormField _cityInputField = OrangeTextFormField( - onChanged: (value) => - locator().signUpFormKey.currentState!.save(), labelText: 'City', controller: _cityController, keyboardType: TextInputType.text, validator: model.validateCity, ); final OrangeTextFormField _postalCodeInputField = OrangeTextFormField( - onChanged: (value) => - locator().signUpFormKey.currentState!.save(), labelText: 'Postal Code', controller: _postalCodeController, keyboardType: TextInputType.number, @@ -187,7 +169,7 @@ class SignUpPageView extends StatelessWidget { ], ), ), - if (sizingInformation.isDesktop) + if (!sizingInformation.isMobile) Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.start, diff --git a/lib/widgets/busy_button.dart b/lib/widgets/busy_button.dart index 7580a14..0e6f515 100644 --- a/lib/widgets/busy_button.dart +++ b/lib/widgets/busy_button.dart @@ -31,18 +31,19 @@ class _BusyButtonState extends State { child: AnimatedContainer( duration: const Duration(milliseconds: 300), alignment: Alignment.center, - padding: const EdgeInsets.all(15), + padding: const EdgeInsets.all(12), decoration: BoxDecoration( color: widget.enabled ? Colors.orange : Colors.grey[800], - borderRadius: BorderRadius.circular(6), + borderRadius: BorderRadius.circular(21), ), child: !widget.busy ? Text( widget.title, - style: Theme.of(context) - .textTheme - .button! - .copyWith(color: Colors.white), + style: Theme.of(context).textTheme.button!.copyWith( + color: Colors.white, + fontWeight: FontWeight.w600, + fontSize: 18, + ), ) : const CircularProgressIndicator( strokeWidth: 2,