import 'package:auto_size_text/auto_size_text.dart'; import 'package:flutter/material.dart'; import 'package:manager_app/Components/rounded_button.dart'; import 'package:manager_app/app_context.dart'; import 'package:manager_app/constants.dart'; import 'package:manager_api_new/api.dart'; import 'dart:convert'; import 'package:provider/provider.dart'; import 'new_update_question_quizz.dart'; import 'new_update_score_quizz.dart'; class QuizzConfig extends StatefulWidget { final String? color; final String? label; final String initialValue; final ValueChanged onChanged; const QuizzConfig({ Key? key, this.color, this.label, required this.initialValue, required this.onChanged, }) : super(key: key); @override _QuizzConfigState createState() => _QuizzConfigState(); } class _QuizzConfigState extends State { late QuizzDTO quizzDTO; @override void initState() { super.initState(); quizzDTO = QuizzDTO.fromJson(json.decode(widget.initialValue))!; List test = new List.from(quizzDTO.questions!); quizzDTO.questions = test; quizzDTO.questions!.sort((a, b) => a.order!.compareTo(b.order!)); } @override Widget build(BuildContext context) { final appContext = Provider.of(context); Size size = MediaQuery.of(context).size; void _onReorder(int oldIndex, int newIndex) { setState( () { if (newIndex > oldIndex) { newIndex -= 1; } final QuestionDTO item = quizzDTO.questions!.removeAt(oldIndex); quizzDTO.questions!.insert(newIndex, item); var i = 0; quizzDTO.questions!.forEach((question) { question.order = i; i++; }); widget.onChanged(jsonEncode(quizzDTO).toString()); }, ); } return SingleChildScrollView( child: Column( children: [ Container( height: size.height * 0.1, width: double.infinity, child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ // Bad Container( height: 50, child: RoundedButton( text: "Mauvais score", color: kPrimaryColor, textColor: kWhite, icon: Icons.message, press: () async { var result = await showNewOrUpdateScoreQuizz(quizzDTO.badLevel, appContext, context, "Message pour un mauvais score"); if (result != null) { setState(() { quizzDTO.badLevel = result; widget.onChanged(jsonEncode(quizzDTO).toString()); }); } }, fontSize: 20, horizontal: 10, vertical: 10 ), ), // Medium Container( height: 50, child: RoundedButton( text: "Moyen score", color: kPrimaryColor, textColor: kWhite, icon: Icons.message, press: () async { var result = await showNewOrUpdateScoreQuizz(quizzDTO.mediumLevel, appContext, context, "Message pour un moyen score"); if (result != null) { setState(() { quizzDTO.mediumLevel = result; widget.onChanged(jsonEncode(quizzDTO).toString()); }); } }, fontSize: 20, horizontal: 10, vertical: 10 ), ), // Good Container( height: 50, child: RoundedButton( text: "Bon score", color: kPrimaryColor, textColor: kWhite, icon: Icons.message, press: () async { var result = await showNewOrUpdateScoreQuizz(quizzDTO.goodLevel, appContext, context, "Message pour un bon score"); if (result != null) { setState(() { quizzDTO.goodLevel = result; widget.onChanged(jsonEncode(quizzDTO).toString()); }); } }, fontSize: 20, horizontal: 10, vertical: 10 ), ), // Great Container( height: 50, child: RoundedButton( text: "Excellent score", color: kPrimaryColor, textColor: kWhite, icon: Icons.message, press: () async { var result = await showNewOrUpdateScoreQuizz(quizzDTO.greatLevel, appContext, context, "Message pour un excellent score"); if (result != null) { setState(() { quizzDTO.greatLevel = result; widget.onChanged(jsonEncode(quizzDTO).toString()); }); } }, fontSize: 20, horizontal: 10, vertical: 10 ), ), ], ), ), Padding( padding: const EdgeInsets.all(8.0), child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(25), border: Border.all(width: 1.5, color: kSecond) ), child: Stack( children: [ Padding( padding: const EdgeInsets.only(top: 40, left: 10, right: 10, bottom: 10), child: Container( height: quizzDTO.questions!.length == 0 ? 75 : null, child: ReorderableListView.builder( shrinkWrap: true, padding: const EdgeInsets.only(right: 125), itemBuilder: (BuildContext context, int index) { return Container( key: ValueKey(index), decoration: boxDecoration(), padding: const EdgeInsets.all(2), margin: EdgeInsets.symmetric(vertical: 3, horizontal: 3), child: getElement(index, quizzDTO.questions![index], size, appContext), ); }, itemCount: quizzDTO.questions!.length, onReorder: _onReorder ), ) ), Positioned( top: 10, left: 10, child: Text( "Questions", style: TextStyle(fontSize: 15, fontWeight: FontWeight.w500), ), ), Positioned( bottom: 10, right: 10, child: InkWell( onTap: () async { QuestionDTO? result = await showNewOrUpdateQuestionQuizz(null, appContext, context, "Question"); if (result != null) { setState(() { result.order = quizzDTO.questions!.length; quizzDTO.questions!.add(result); widget.onChanged(jsonEncode(quizzDTO).toString()); }); } }, child: Container( height: MediaQuery.of(context).size.width * 0.04, width: MediaQuery.of(context).size.width * 0.04, child: Icon( Icons.add, color: kTextLightColor, size: 30.0, ), decoration: BoxDecoration( color: kSuccess, shape: BoxShape.rectangle, borderRadius: BorderRadius.circular(20.0), boxShadow: [ BoxShadow( color: kSecond, spreadRadius: 0.5, blurRadius: 5, offset: Offset(0, 1.5), // changes position of shadow ), ], ), ), ), ) ]), ), ), ], ), ); } getElement(int index, QuestionDTO question, Size size, AppContext appContext) { return Stack( children: [ Container( width: size.width *0.8, height: 75, child: Row( children: [ if(question.resourceUrl != null) Container( height: 60, width: 60, decoration: imageBoxDecoration(question, appContext), margin: EdgeInsets.symmetric(horizontal: 10), ), Center( child: Padding( padding: const EdgeInsets.all(2.0), child: AutoSizeText( question.label == null ? "" : question.label![0].value!, style: new TextStyle(fontSize: 15), maxLines: 2, textAlign: TextAlign.center, ), ), ), ], ), ), Positioned( right: 35, bottom: 18, child: Row( children: [ Tooltip( message: "Modifier", child: InkWell( onTap: () async { var result = await showNewOrUpdateQuestionQuizz( question, appContext, context, "Modifier la question" ); if (result != null) { setState(() { quizzDTO.questions![question.order!] = result; widget.onChanged(jsonEncode(quizzDTO).toString()); }); } }, child: Padding( padding: const EdgeInsets.all(8.0), child: Icon( Icons.edit, color: kPrimaryColor, size: 25.0, ), ) ), ), Tooltip( message: "Supprimer", child: InkWell( onTap: () { setState(() { quizzDTO.questions!.removeAt(question.order!); widget.onChanged(jsonEncode(quizzDTO).toString()); }); }, child: Padding( padding: const EdgeInsets.all(8.0), child: Icon( Icons.delete, color: kError, size: 25.0, ), ) ), ), ], ) ), ], ); } } boxDecoration() { return BoxDecoration( color: kBackgroundColor, shape: BoxShape.rectangle, border: Border.all(width: 1.5, color: kSecond), borderRadius: BorderRadius.circular(10.0), boxShadow: [ BoxShadow( color: kSecond, spreadRadius: 0.5, blurRadius: 5, offset: Offset(0, 1.5), // changes position of shadow ), ], ); } imageBoxDecoration(QuestionDTO questionDTO, appContext) { return BoxDecoration( color: kBackgroundColor, shape: BoxShape.rectangle, border: Border.all(width: 1.5, color: kSecond), borderRadius: BorderRadius.circular(10.0), image: questionDTO.resourceUrl != null ? new DecorationImage( fit: BoxFit.cover, image: new NetworkImage( questionDTO.resourceUrl!, ), ) : null, ); }