rework-onboarding (#7)
Onboarding completato, ora super rapido e top Reviewed-on: http://catelliub.zapto.org:3000/brontomark/flux/pulls/7 Co-authored-by: Mark M2 Macbook <marco@catelli.it> Co-committed-by: Mark M2 Macbook <marco@catelli.it>
This commit is contained in:
85
lib/features/onboarding/ui/company_onboarding_form.dart
Normal file
85
lib/features/onboarding/ui/company_onboarding_form.dart
Normal file
@@ -0,0 +1,85 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||
import 'package:flux/core/utils/validators.dart';
|
||||
import 'package:flux/core/widgets/flux_text_field.dart';
|
||||
import 'package:flux/features/company/models/company_model.dart';
|
||||
import 'package:flux/features/onboarding/blocs/onboarding_cubit.dart';
|
||||
import 'package:flux/features/onboarding/blocs/onboarding_state.dart';
|
||||
|
||||
class CompanyOnboardingForm extends StatefulWidget {
|
||||
final OnboardingState state;
|
||||
const CompanyOnboardingForm({super.key, required this.state});
|
||||
|
||||
@override
|
||||
State<CompanyOnboardingForm> createState() => _CompanyOnboardingFormState();
|
||||
}
|
||||
|
||||
class _CompanyOnboardingFormState extends State<CompanyOnboardingForm> {
|
||||
final _formKey = GlobalKey<FormState>();
|
||||
final _nameCtrl = TextEditingController();
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_nameCtrl.dispose();
|
||||
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(32),
|
||||
child: Form(
|
||||
key: _formKey,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
const Text(
|
||||
"Iniziamo! 🏢",
|
||||
style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
const Text(
|
||||
"Come si chiama la tua Azienda? \n(Potrai inserire i dati di fatturazione in seguito).",
|
||||
style: TextStyle(fontSize: 16, color: Colors.grey),
|
||||
),
|
||||
const SizedBox(height: 48),
|
||||
|
||||
FluxTextField(
|
||||
label: 'Ragione Sociale / Nome Azienda',
|
||||
controller: _nameCtrl,
|
||||
validator: notEmptyValidator,
|
||||
keyboardType: TextInputType.name,
|
||||
textCapitalization: TextCapitalization.words,
|
||||
autocorrect: false,
|
||||
onSubmitted: (_) => _submit(),
|
||||
),
|
||||
|
||||
const Spacer(),
|
||||
ElevatedButton(
|
||||
style: ElevatedButton.styleFrom(
|
||||
padding: const EdgeInsets.symmetric(vertical: 16),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
),
|
||||
onPressed: () => _submit(),
|
||||
child: const Text(
|
||||
"Salva e Prosegui",
|
||||
style: TextStyle(fontSize: 16),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _submit() {
|
||||
if (_formKey.currentState!.validate()) {
|
||||
context.read<OnboardingCubit>().saveCompany(_nameCtrl.text.trim());
|
||||
}
|
||||
}
|
||||
}
|
||||
115
lib/features/onboarding/ui/onboarding_screen.dart
Normal file
115
lib/features/onboarding/ui/onboarding_screen.dart
Normal file
@@ -0,0 +1,115 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||
import 'package:flux/core/blocs/session/session_cubit.dart';
|
||||
import 'package:flux/features/onboarding/blocs/onboarding_cubit.dart';
|
||||
import 'package:flux/features/onboarding/blocs/onboarding_state.dart';
|
||||
import 'package:flux/features/onboarding/ui/company_onboarding_form.dart';
|
||||
import 'package:flux/features/onboarding/ui/staff_onboarding_form.dart';
|
||||
import 'package:flux/features/onboarding/ui/store_onboarding_form.dart';
|
||||
|
||||
class OnboardingScreen extends StatefulWidget {
|
||||
const OnboardingScreen({super.key});
|
||||
|
||||
@override
|
||||
State<OnboardingScreen> createState() => _OnboardingScreenState();
|
||||
}
|
||||
|
||||
class _OnboardingScreenState extends State<OnboardingScreen> {
|
||||
late PageController _pageController;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
// Calcoliamo la pagina iniziale in base allo step salvato nel Cubit
|
||||
final initialStep = context.read<OnboardingCubit>().state.step;
|
||||
_pageController = PageController(initialPage: _getPageIndex(initialStep));
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_pageController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
int _getPageIndex(OnboardingStep step) {
|
||||
switch (step) {
|
||||
case OnboardingStep.company:
|
||||
return 0;
|
||||
case OnboardingStep.store:
|
||||
return 1;
|
||||
case OnboardingStep.staff:
|
||||
return 2;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return BlocConsumer<OnboardingCubit, OnboardingState>(
|
||||
// Ascoltiamo i cambi di stato per animare la pagina e mostrare errori
|
||||
listenWhen: (previous, current) =>
|
||||
previous.step != current.step || previous.error != current.error,
|
||||
listener: (context, state) {
|
||||
// Gestione Errori
|
||||
if (state.error != null) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(content: Text(state.error!), backgroundColor: Colors.red),
|
||||
);
|
||||
}
|
||||
|
||||
// Se ha finito, non animiamo nulla: il GoRouter prenderà il controllo a breve!
|
||||
if (state.step == OnboardingStep.completed) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text("Configurazione completata! Benvenuto a bordo 🚀"),
|
||||
backgroundColor: Colors.green,
|
||||
),
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Animazione cambio pagina
|
||||
if (state.step != OnboardingStep.completed) {
|
||||
final targetPage = _getPageIndex(state.step);
|
||||
if (_pageController.hasClients &&
|
||||
_pageController.page?.round() != targetPage) {
|
||||
_pageController.animateToPage(
|
||||
targetPage,
|
||||
duration: const Duration(milliseconds: 600),
|
||||
curve: Curves.easeInOutCubic, // Animazione super fluida
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
builder: (context, state) {
|
||||
return Scaffold(
|
||||
body: SafeArea(
|
||||
child: Stack(
|
||||
children: [
|
||||
// IL PAGEVIEW CORAZZATO
|
||||
PageView(
|
||||
controller: _pageController,
|
||||
physics:
|
||||
const NeverScrollableScrollPhysics(), // Vietato lo swipe manuale!
|
||||
children: [
|
||||
CompanyOnboardingForm(state: state),
|
||||
StoreOnboardingForm(state: state),
|
||||
StaffOnboardingForm(),
|
||||
],
|
||||
),
|
||||
|
||||
// OVERLAY CARICAMENTO
|
||||
if (state.isLoading)
|
||||
Container(
|
||||
color: Colors.black.withValues(alpha: 0.4),
|
||||
child: const Center(child: CircularProgressIndicator()),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
105
lib/features/onboarding/ui/staff_onboarding_form.dart
Normal file
105
lib/features/onboarding/ui/staff_onboarding_form.dart
Normal file
@@ -0,0 +1,105 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||
import 'package:flux/core/utils/validators.dart';
|
||||
import 'package:flux/core/widgets/flux_text_field.dart';
|
||||
import 'package:flux/features/master_data/staff/models/staff_member_model.dart';
|
||||
import 'package:flux/features/onboarding/blocs/onboarding_cubit.dart';
|
||||
|
||||
class StaffOnboardingForm extends StatefulWidget {
|
||||
const StaffOnboardingForm({super.key});
|
||||
|
||||
@override
|
||||
State<StaffOnboardingForm> createState() => _StaffOnboardingFormState();
|
||||
}
|
||||
|
||||
class _StaffOnboardingFormState extends State<StaffOnboardingForm> {
|
||||
final _formKey = GlobalKey<FormState>();
|
||||
final _nameCtrl = TextEditingController();
|
||||
final _emailCtrl = TextEditingController();
|
||||
final _jobTitleCtrl = TextEditingController();
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_nameCtrl.dispose();
|
||||
_emailCtrl.dispose();
|
||||
_jobTitleCtrl.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(32),
|
||||
child: Form(
|
||||
key: _formKey,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
const Text(
|
||||
"Il tuo Profilo 👤",
|
||||
style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
const Text(
|
||||
"Ultimo step! Crea il tuo profilo operativo per iniziare a usare FLUX.",
|
||||
style: TextStyle(fontSize: 16, color: Colors.grey),
|
||||
),
|
||||
const SizedBox(height: 48),
|
||||
FluxTextField(
|
||||
label: 'Nome',
|
||||
keyboardType: TextInputType.name,
|
||||
controller: _nameCtrl,
|
||||
validator: notEmptyValidator,
|
||||
textCapitalization: TextCapitalization.words,
|
||||
autocorrect: false,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
FluxTextField(
|
||||
label: 'Email',
|
||||
keyboardType: TextInputType.emailAddress,
|
||||
controller: _emailCtrl,
|
||||
textCapitalization: TextCapitalization.none,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
FluxTextField(
|
||||
label: 'Etichetta Ruolo (es. Titolare, Manager)',
|
||||
controller: _jobTitleCtrl,
|
||||
keyboardType: TextInputType.text,
|
||||
textCapitalization: TextCapitalization.words,
|
||||
onSubmitted: (_) => _submit(),
|
||||
),
|
||||
const Spacer(),
|
||||
ElevatedButton(
|
||||
style: ElevatedButton.styleFrom(
|
||||
padding: const EdgeInsets.symmetric(vertical: 16),
|
||||
backgroundColor: Colors.black, // O il tuo context.accent
|
||||
foregroundColor: Colors.white,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
),
|
||||
onPressed: () => _submit(),
|
||||
child: const Text(
|
||||
"Entra in FLUX",
|
||||
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _submit() {
|
||||
if (_formKey.currentState!.validate()) {
|
||||
final newStaff = StaffMemberModel.empty().copyWith(
|
||||
name: _nameCtrl.text.trim(),
|
||||
email: _emailCtrl.text.trim(),
|
||||
jobTitle: _jobTitleCtrl.text.trim(),
|
||||
);
|
||||
context.read<OnboardingCubit>().saveStaff(newStaff);
|
||||
}
|
||||
}
|
||||
}
|
||||
179
lib/features/onboarding/ui/store_onboarding_form.dart
Normal file
179
lib/features/onboarding/ui/store_onboarding_form.dart
Normal file
@@ -0,0 +1,179 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart'; // <-- IMPORTANTE per i formatter
|
||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||
import 'package:flux/core/widgets/flux_text_field.dart';
|
||||
import 'package:flux/features/master_data/store/models/store_model.dart';
|
||||
import 'package:flux/features/onboarding/blocs/onboarding_cubit.dart';
|
||||
import 'package:flux/features/onboarding/blocs/onboarding_state.dart';
|
||||
|
||||
class StoreOnboardingForm extends StatefulWidget {
|
||||
final OnboardingState state;
|
||||
const StoreOnboardingForm({super.key, required this.state});
|
||||
|
||||
@override
|
||||
State<StoreOnboardingForm> createState() => _StoreOnboardingFormState();
|
||||
}
|
||||
|
||||
class _StoreOnboardingFormState extends State<StoreOnboardingForm> {
|
||||
final _formKey = GlobalKey<FormState>();
|
||||
final _nameCtrl = TextEditingController();
|
||||
final _addressCtrl = TextEditingController();
|
||||
final _cityCtrl = TextEditingController();
|
||||
final _zipCodeCtrl = TextEditingController();
|
||||
final _provinceCtrl = TextEditingController();
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_nameCtrl.dispose();
|
||||
_addressCtrl.dispose();
|
||||
_cityCtrl.dispose();
|
||||
_zipCodeCtrl.dispose();
|
||||
_provinceCtrl.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(32.0),
|
||||
child: Form(
|
||||
key: _formKey,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
const Text(
|
||||
"Il tuo Negozio 🏪",
|
||||
style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
const Text(
|
||||
"Dove si trova il tuo punto vendita principale? (Potrai aggiungerne altri in seguito).",
|
||||
style: TextStyle(fontSize: 16),
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
|
||||
FluxTextField(
|
||||
controller: _nameCtrl,
|
||||
label: "Nome del Negozio",
|
||||
keyboardType: TextInputType.name,
|
||||
validator: (value) =>
|
||||
value == null || value.isEmpty ? "Obbligatorio" : null,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
FluxTextField(
|
||||
controller: _addressCtrl,
|
||||
keyboardType: TextInputType.streetAddress,
|
||||
label: "Indirizzo",
|
||||
validator: (value) =>
|
||||
value == null || value.isEmpty ? "Obbligatorio" : null,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// IL LAYOUT RESPONSIVO PREMIUM
|
||||
LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final isDesktop = constraints.maxWidth >= 600;
|
||||
|
||||
if (isDesktop) {
|
||||
// --- DESKTOP: Tutti su una riga ---
|
||||
return Row(
|
||||
crossAxisAlignment: CrossAxisAlignment
|
||||
.start, // Allinea in alto se ci sono errori
|
||||
children: [
|
||||
Expanded(flex: 2, child: _buildZipField()),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(flex: 5, child: _buildCityField()),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(flex: 2, child: _buildProvField()),
|
||||
],
|
||||
);
|
||||
} else {
|
||||
// --- MOBILE: Comune sopra, CAP e Provincia sotto ---
|
||||
return Column(
|
||||
children: [
|
||||
_buildCityField(),
|
||||
const SizedBox(height: 16),
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(flex: 3, child: _buildZipField()),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(flex: 2, child: _buildProvField()),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
},
|
||||
),
|
||||
|
||||
const Spacer(),
|
||||
ElevatedButton(
|
||||
style: ElevatedButton.styleFrom(
|
||||
padding: const EdgeInsets.symmetric(vertical: 16),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
),
|
||||
onPressed: () => _submit(),
|
||||
child: const Text(
|
||||
"Salva Negozio",
|
||||
style: TextStyle(fontSize: 16),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _submit() {
|
||||
if (_formKey.currentState!.validate()) {
|
||||
// MIRACOLO DELLA FACTORY EMPTY!
|
||||
final newStore = StoreModel.empty().copyWith(
|
||||
nome: _nameCtrl.text.trim(),
|
||||
indirizzo: _addressCtrl.text.trim(),
|
||||
comune: _cityCtrl.text.trim(),
|
||||
cap: _zipCodeCtrl.text.trim(),
|
||||
// Formattiamo in maiuscolo qui, al momento del salvataggio!
|
||||
provincia: _provinceCtrl.text.trim().toUpperCase(),
|
||||
);
|
||||
context.read<OnboardingCubit>().saveStore(newStore);
|
||||
}
|
||||
}
|
||||
|
||||
// --- WIDGET ESTRATTI PER PULIZIA ---
|
||||
|
||||
Widget _buildCityField() {
|
||||
return FluxTextField(
|
||||
label: 'Comune',
|
||||
controller: _cityCtrl,
|
||||
keyboardType: TextInputType.name,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildZipField() {
|
||||
return FluxTextField(
|
||||
label: 'CAP',
|
||||
controller: _zipCodeCtrl,
|
||||
keyboardType: TextInputType.number,
|
||||
// Trucchetto Premium: Limita i caratteri ma NASCONDE il contatore UI
|
||||
inputFormatters: [LengthLimitingTextInputFormatter(5)],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildProvField() {
|
||||
return FluxTextField(
|
||||
label: 'Prov.',
|
||||
controller: _provinceCtrl,
|
||||
keyboardType: TextInputType.text,
|
||||
// Rende la tastiera del telefono automaticamente maiuscola
|
||||
textCapitalization: TextCapitalization.characters,
|
||||
inputFormatters: [LengthLimitingTextInputFormatter(2)],
|
||||
onSubmitted: (_) => _submit(),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user