fix: detail quiz

This commit is contained in:
akhdanre 2025-05-02 03:09:22 +07:00
parent cf9483834e
commit c026a53d6f
19 changed files with 400 additions and 301 deletions

25
.vscode/launch.json vendored Normal file
View File

@ -0,0 +1,25 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "quiz_app",
"request": "launch",
"type": "dart"
},
// {
// "name": "quiz_app (profile mode)",
// "request": "launch",
// "type": "dart",
// "flutterMode": "profile"
// },
// {
// "name": "quiz_app (release mode)",
// "request": "launch",
// "type": "dart",
// "flutterMode": "release"
// }
]
}

View File

@ -3,9 +3,9 @@ import 'package:quiz_app/app/middleware/auth_middleware.dart';
import 'package:quiz_app/feature/history/binding/history_binding.dart'; import 'package:quiz_app/feature/history/binding/history_binding.dart';
import 'package:quiz_app/feature/home/binding/home_binding.dart'; import 'package:quiz_app/feature/home/binding/home_binding.dart';
import 'package:quiz_app/feature/home/view/home_page.dart'; import 'package:quiz_app/feature/home/view/home_page.dart';
import 'package:quiz_app/feature/library/binding/detail_quiz_binding.dart'; import 'package:quiz_app/feature/detail_quiz/binding/detail_quiz_binding.dart';
import 'package:quiz_app/feature/library/binding/library_binding.dart'; import 'package:quiz_app/feature/library/binding/library_binding.dart';
import 'package:quiz_app/feature/library/view/detail_quix_view.dart'; import 'package:quiz_app/feature/detail_quiz/view/detail_quix_view.dart';
import 'package:quiz_app/feature/login/bindings/login_binding.dart'; import 'package:quiz_app/feature/login/bindings/login_binding.dart';
import 'package:quiz_app/feature/login/view/login_page.dart'; import 'package:quiz_app/feature/login/view/login_page.dart';
import 'package:quiz_app/feature/navigation/bindings/navigation_binding.dart'; import 'package:quiz_app/feature/navigation/bindings/navigation_binding.dart';

View File

@ -4,11 +4,14 @@ import 'package:quiz_app/data/models/quiz/quiz_listing_model.dart';
class QuizContainerComponent extends StatelessWidget { class QuizContainerComponent extends StatelessWidget {
final QuizListingModel data; final QuizListingModel data;
const QuizContainerComponent({required this.data, super.key}); final Function(String) onTap;
const QuizContainerComponent({required this.data, required this.onTap, super.key});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return GestureDetector(
onTap: () => onTap(data.quizId),
child: Container(
padding: const EdgeInsets.all(14), padding: const EdgeInsets.all(14),
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppColors.background, color: AppColors.background,
@ -81,6 +84,7 @@ class QuizContainerComponent extends StatelessWidget {
) )
], ],
), ),
),
); );
} }
} }

View File

@ -0,0 +1,22 @@
import 'package:flutter/material.dart';
class LoadingWidget extends StatelessWidget {
const LoadingWidget({super.key});
@override
Widget build(BuildContext context) {
return const Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
CircularProgressIndicator(),
SizedBox(height: 12),
Text(
"Memuat data...",
style: TextStyle(color: Colors.grey, fontSize: 14),
),
],
),
);
}
}

View File

@ -5,9 +5,11 @@ import 'package:quiz_app/data/models/quiz/quiz_listing_model.dart';
class RecomendationComponent extends StatelessWidget { class RecomendationComponent extends StatelessWidget {
final String title; final String title;
final List<QuizListingModel> datas; final List<QuizListingModel> datas;
final Function(String) itemOnTap;
const RecomendationComponent({ const RecomendationComponent({
required this.title, required this.title,
required this.datas, required this.datas,
required this.itemOnTap,
super.key, super.key,
}); });
@ -24,7 +26,10 @@ class RecomendationComponent extends StatelessWidget {
shrinkWrap: true, shrinkWrap: true,
physics: NeverScrollableScrollPhysics(), physics: NeverScrollableScrollPhysics(),
itemCount: datas.length, itemCount: datas.length,
itemBuilder: (context, index) => QuizContainerComponent(data: datas[index]), itemBuilder: (context, index) => QuizContainerComponent(
data: datas[index],
onTap: itemOnTap,
),
) )
: SizedBox.shrink() : SizedBox.shrink()
], ],

View File

@ -5,7 +5,6 @@ import 'package:quiz_app/core/utils/logger.dart';
import 'package:quiz_app/data/models/base/base_model.dart'; import 'package:quiz_app/data/models/base/base_model.dart';
import 'package:quiz_app/data/models/quiz/library_quiz_model.dart'; import 'package:quiz_app/data/models/quiz/library_quiz_model.dart';
import 'package:quiz_app/data/models/quiz/question_create_request.dart'; import 'package:quiz_app/data/models/quiz/question_create_request.dart';
import 'package:quiz_app/data/models/quiz/question_listings_model.dart';
import 'package:quiz_app/data/models/quiz/quiz_listing_model.dart'; import 'package:quiz_app/data/models/quiz/quiz_listing_model.dart';
import 'package:quiz_app/data/providers/dio_client.dart'; import 'package:quiz_app/data/providers/dio_client.dart';
@ -91,4 +90,24 @@ class QuizService extends GetxService {
return null; return null;
} }
} }
Future<BaseResponseModel<QuizData>?> getQuizById(String quizId) async {
try {
final response = await _dio.get("${APIEndpoint.quiz}/$quizId");
if (response.statusCode == 200) {
final parsedResponse = BaseResponseModel<QuizData>.fromJson(
response.data,
(data) => QuizData.fromJson(data),
);
return parsedResponse;
} else {
logC.e("Failed to fetch quiz by id. Status: ${response.statusCode}");
return null;
}
} catch (e) {
logC.e("Error fetching quiz by id $e");
return null;
}
}
} }

View File

@ -0,0 +1,13 @@
import 'package:get/get.dart';
import 'package:quiz_app/data/services/quiz_service.dart';
import 'package:quiz_app/feature/detail_quiz/controller/detail_quiz_controller.dart';
class DetailQuizBinding extends Bindings {
@override
void dependencies() {
if (!Get.isRegistered<QuizService>()) {
Get.lazyPut<QuizService>(() => QuizService());
}
Get.lazyPut<DetailQuizController>(() => DetailQuizController(Get.find<QuizService>()));
}
}

View File

@ -0,0 +1,40 @@
import 'package:get/get.dart';
import 'package:quiz_app/app/routes/app_pages.dart';
import 'package:quiz_app/data/models/base/base_model.dart';
import 'package:quiz_app/data/models/quiz/library_quiz_model.dart';
import 'package:quiz_app/data/services/quiz_service.dart';
class DetailQuizController extends GetxController {
final QuizService _quizService;
DetailQuizController(this._quizService);
RxBool isLoading = true.obs;
late QuizData data;
@override
void onInit() {
super.onInit();
loadData();
}
void loadData() async {
final args = Get.arguments;
if (args is QuizData) {
data = args;
} else {
getQuizData(args);
}
}
void getQuizData(String quizId) async {
BaseResponseModel? response = await _quizService.getQuizById(quizId);
if (response != null) {
data = response.data;
}
isLoading.value = false;
}
void goToPlayPage() => Get.toNamed(AppRoutes.playQuizPage, arguments: data);
}

View File

@ -0,0 +1,181 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:quiz_app/app/const/colors/app_colors.dart';
import 'package:quiz_app/component/global_button.dart';
import 'package:quiz_app/component/widget/loading_widget.dart';
import 'package:quiz_app/data/models/quiz/question_listings_model.dart';
import 'package:quiz_app/feature/detail_quiz/controller/detail_quiz_controller.dart';
class DetailQuizView extends GetView<DetailQuizController> {
const DetailQuizView({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColors.background,
appBar: AppBar(
backgroundColor: AppColors.background,
elevation: 0,
title: const Text(
'Detail Quiz',
style: TextStyle(
color: AppColors.darkText,
fontWeight: FontWeight.bold,
),
),
centerTitle: true,
iconTheme: const IconThemeData(color: AppColors.darkText),
),
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(20),
child: Obx(
() => controller.isLoading.value
? Center(child: LoadingWidget())
: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Header Section
Text(
controller.data.title,
style: const TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: AppColors.darkText,
),
),
const SizedBox(height: 8),
Text(
controller.data.description ?? "",
style: const TextStyle(
fontSize: 14,
color: AppColors.softGrayText,
),
),
const SizedBox(height: 16),
Row(
children: [
const Icon(Icons.calendar_today_rounded, size: 16, color: AppColors.softGrayText),
const SizedBox(width: 6),
Text(
controller.data.date ?? "",
style: const TextStyle(fontSize: 12, color: AppColors.softGrayText),
),
const SizedBox(width: 12),
const Icon(Icons.timer_rounded, size: 16, color: AppColors.softGrayText),
const SizedBox(width: 6),
Text(
'${controller.data.limitDuration ~/ 60} menit',
style: const TextStyle(fontSize: 12, color: AppColors.softGrayText),
),
],
),
const SizedBox(height: 20),
const SizedBox(height: 20),
GlobalButton(text: "Kerjakan", onPressed: controller.goToPlayPage),
const SizedBox(height: 20),
GlobalButton(text: "buat ruangan", onPressed: () {}),
const SizedBox(height: 20),
const Divider(thickness: 1.2, color: AppColors.borderLight),
const SizedBox(height: 20),
// Soal Section
ListView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: controller.data.questionListings.length,
itemBuilder: (context, index) {
final question = controller.data.questionListings[index];
return _buildQuestionItem(question, index + 1);
},
),
],
),
),
),
),
),
);
}
Widget _buildQuestionItem(QuestionListing question, int index) {
return Container(
width: double.infinity,
margin: const EdgeInsets.only(bottom: 16),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: AppColors.borderLight),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 6,
offset: const Offset(2, 2),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Soal $index',
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
color: AppColors.darkText,
),
),
const SizedBox(height: 8),
Text(
_mapQuestionTypeToText(question.type),
style: const TextStyle(
fontSize: 12,
fontStyle: FontStyle.italic,
color: AppColors.softGrayText,
),
),
const SizedBox(height: 12),
Text(
question.question,
style: const TextStyle(
fontSize: 14,
color: AppColors.darkText,
),
),
// const SizedBox(height: 12),
// Text(
// 'Jawaban: ${question.targetAnswer}',
// style: const TextStyle(
// fontSize: 14,
// color: AppColors.softGrayText,
// ),
// ),
const SizedBox(height: 8),
Text(
'Durasi: ${question.duration} detik',
style: const TextStyle(
fontSize: 12,
color: AppColors.softGrayText,
),
),
],
),
);
}
String _mapQuestionTypeToText(String? type) {
switch (type) {
case 'option':
return 'Pilihan Ganda';
case 'fill_the_blank':
return 'Isian Kosong';
case 'true_false':
return 'Benar / Salah';
default:
return 'Tipe Tidak Diketahui';
}
}
}

View File

@ -1,5 +1,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:quiz_app/component/widget/loading_widget.dart';
import 'package:quiz_app/data/models/history/quiz_history.dart'; import 'package:quiz_app/data/models/history/quiz_history.dart';
import 'package:quiz_app/feature/history/controller/history_controller.dart'; import 'package:quiz_app/feature/history/controller/history_controller.dart';
@ -36,12 +37,7 @@ class HistoryView extends GetView<HistoryController> {
const SizedBox(height: 20), const SizedBox(height: 20),
if (historyList.isEmpty) if (historyList.isEmpty)
const Expanded( const Expanded(
child: Center( child: Center(child: LoadingWidget()),
child: Text(
"Belum ada kuis yang dikerjakan.",
style: TextStyle(fontSize: 16, color: Colors.grey),
),
),
) )
else else
Expanded( Expanded(

View File

@ -29,4 +29,6 @@ class HomeController extends GetxController {
data.assignAll(response.data as List<QuizListingModel>); data.assignAll(response.data as List<QuizListingModel>);
} }
} }
void onRecommendationTap(String quizId) => Get.toNamed(AppRoutes.detailQuizPage, arguments: quizId);
} }

View File

@ -47,6 +47,7 @@ class HomeView extends GetView<HomeController> {
() => RecomendationComponent( () => RecomendationComponent(
title: "Quiz Rekomendasi", title: "Quiz Rekomendasi",
datas: controller.data.toList(), datas: controller.data.toList(),
itemOnTap: controller.onRecommendationTap,
), ),
), ),
], ],

View File

@ -1,9 +0,0 @@
import 'package:get/get.dart';
import 'package:quiz_app/feature/library/controller/detail_quiz_controller.dart';
class DetailQuizBinding extends Bindings {
@override
void dependencies() {
Get.lazyPut<DetailQuizController>(() => DetailQuizController());
}
}

View File

@ -6,8 +6,9 @@ import 'package:quiz_app/feature/library/controller/library_controller.dart';
class LibraryBinding extends Bindings { class LibraryBinding extends Bindings {
@override @override
void dependencies() { void dependencies() {
if (!Get.isRegistered<QuizService>()) {
Get.lazyPut<QuizService>(() => QuizService()); Get.lazyPut<QuizService>(() => QuizService());
}
Get.lazyPut<LibraryController>(() => LibraryController(Get.find<QuizService>(), Get.find<UserController>())); Get.lazyPut<LibraryController>(() => LibraryController(Get.find<QuizService>(), Get.find<UserController>()));
} }
} }

View File

@ -1,18 +0,0 @@
import 'package:get/get.dart';
import 'package:quiz_app/app/routes/app_pages.dart';
import 'package:quiz_app/data/models/quiz/library_quiz_model.dart';
class DetailQuizController extends GetxController {
late QuizData data;
@override
void onInit() {
loadData();
super.onInit();
}
void loadData() {
data = Get.arguments as QuizData;
}
void goToPlayPage() => Get.toNamed(AppRoutes.playQuizPage, arguments: data);
}

View File

@ -1,176 +0,0 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:quiz_app/app/const/colors/app_colors.dart';
import 'package:quiz_app/component/global_button.dart';
import 'package:quiz_app/data/models/quiz/question_listings_model.dart';
import 'package:quiz_app/feature/library/controller/detail_quiz_controller.dart';
class DetailQuizView extends GetView<DetailQuizController> {
const DetailQuizView({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColors.background,
appBar: AppBar(
backgroundColor: AppColors.background,
elevation: 0,
title: const Text(
'Detail Quiz',
style: TextStyle(
color: AppColors.darkText,
fontWeight: FontWeight.bold,
),
),
centerTitle: true,
iconTheme: const IconThemeData(color: AppColors.darkText),
),
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(20),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Header Section
Text(
controller.data.title,
style: const TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: AppColors.darkText,
),
),
const SizedBox(height: 8),
Text(
controller.data.description ?? "",
style: const TextStyle(
fontSize: 14,
color: AppColors.softGrayText,
),
),
const SizedBox(height: 16),
Row(
children: [
const Icon(Icons.calendar_today_rounded, size: 16, color: AppColors.softGrayText),
const SizedBox(width: 6),
Text(
controller.data.date ?? "",
style: const TextStyle(fontSize: 12, color: AppColors.softGrayText),
),
const SizedBox(width: 12),
const Icon(Icons.timer_rounded, size: 16, color: AppColors.softGrayText),
const SizedBox(width: 6),
Text(
'${controller.data.limitDuration ~/ 60} menit',
style: const TextStyle(fontSize: 12, color: AppColors.softGrayText),
),
],
),
const SizedBox(height: 20),
const SizedBox(height: 20),
GlobalButton(text: "Kerjakan", onPressed: controller.goToPlayPage),
const SizedBox(height: 20),
GlobalButton(text: "buat ruangan", onPressed: () {}),
const SizedBox(height: 20),
const Divider(thickness: 1.2, color: AppColors.borderLight),
const SizedBox(height: 20),
// Soal Section
ListView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: controller.data.questionListings.length,
itemBuilder: (context, index) {
final question = controller.data.questionListings[index];
return _buildQuestionItem(question, index + 1);
},
),
],
),
),
),
),
);
}
Widget _buildQuestionItem(QuestionListing question, int index) {
return Container(
width: double.infinity,
margin: const EdgeInsets.only(bottom: 16),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: AppColors.borderLight),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 6,
offset: const Offset(2, 2),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Soal $index',
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
color: AppColors.darkText,
),
),
const SizedBox(height: 8),
Text(
_mapQuestionTypeToText(question.type),
style: const TextStyle(
fontSize: 12,
fontStyle: FontStyle.italic,
color: AppColors.softGrayText,
),
),
const SizedBox(height: 12),
Text(
question.question,
style: const TextStyle(
fontSize: 14,
color: AppColors.darkText,
),
),
// const SizedBox(height: 12),
// Text(
// 'Jawaban: ${question.targetAnswer}',
// style: const TextStyle(
// fontSize: 14,
// color: AppColors.softGrayText,
// ),
// ),
const SizedBox(height: 8),
Text(
'Durasi: ${question.duration} detik',
style: const TextStyle(
fontSize: 12,
color: AppColors.softGrayText,
),
),
],
),
);
}
String _mapQuestionTypeToText(String? type) {
switch (type) {
case 'option':
return 'Pilihan Ganda';
case 'fill_the_blank':
return 'Isian Kosong';
case 'true_false':
return 'Benar / Salah';
default:
return 'Tipe Tidak Diketahui';
}
}
}

View File

@ -1,5 +1,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:quiz_app/component/widget/loading_widget.dart';
import 'package:quiz_app/data/models/quiz/library_quiz_model.dart'; import 'package:quiz_app/data/models/quiz/library_quiz_model.dart';
import 'package:quiz_app/feature/library/controller/library_controller.dart'; import 'package:quiz_app/feature/library/controller/library_controller.dart';
@ -36,19 +37,7 @@ class LibraryView extends GetView<LibraryController> {
Expanded( Expanded(
child: Obx(() { child: Obx(() {
if (controller.isLoading.value) { if (controller.isLoading.value) {
return const Center( return LoadingWidget();
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
CircularProgressIndicator(),
SizedBox(height: 12),
Text(
"Memuat data...",
style: TextStyle(color: Colors.grey, fontSize: 14),
),
],
),
);
} }
if (controller.quizs.isEmpty) { if (controller.quizs.isEmpty) {

View File

@ -1,5 +1,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:quiz_app/app/routes/app_pages.dart';
import 'package:quiz_app/data/models/base/base_model.dart'; import 'package:quiz_app/data/models/base/base_model.dart';
import 'package:quiz_app/data/models/quiz/quiz_listing_model.dart'; import 'package:quiz_app/data/models/quiz/quiz_listing_model.dart';
import 'package:quiz_app/data/services/quiz_service.dart'; import 'package:quiz_app/data/services/quiz_service.dart';
@ -44,6 +45,8 @@ class SearchQuizController extends GetxController {
} }
} }
void goToDetailPage(String quizId) => Get.toNamed(AppRoutes.detailQuizPage, arguments: quizId);
@override @override
void onClose() { void onClose() {
searchController.dispose(); searchController.dispose();

View File

@ -23,15 +23,15 @@ class SearchView extends GetView<SearchQuizController> {
if (isSearching) ...[ if (isSearching) ...[
_buildCategoryFilter(), _buildCategoryFilter(),
const SizedBox(height: 20), const SizedBox(height: 20),
...controller.searchQData.map( ...controller.searchQData.map(
(e) => QuizContainerComponent(data: e), (e) => QuizContainerComponent(data: e, onTap: controller.goToDetailPage),
) )
] else ...[ ] else ...[
Obx( Obx(
() => RecomendationComponent( () => RecomendationComponent(
title: "Quiz Rekomendasi", title: "Quiz Rekomendasi",
datas: controller.recommendationQData.toList(), datas: controller.recommendationQData.toList(),
itemOnTap: controller.goToDetailPage,
), ),
), ),
const SizedBox(height: 30), const SizedBox(height: 30),
@ -39,6 +39,7 @@ class SearchView extends GetView<SearchQuizController> {
() => RecomendationComponent( () => RecomendationComponent(
title: "Quiz Populer", title: "Quiz Populer",
datas: controller.recommendationQData.toList(), datas: controller.recommendationQData.toList(),
itemOnTap: controller.goToDetailPage,
), ),
), ),
], ],