feat: detail histroy done
This commit is contained in:
parent
6bf48df48a
commit
8f7ca1b457
|
@ -1,6 +1,8 @@
|
||||||
import 'package:get/get_navigation/src/routes/get_route.dart';
|
import 'package:get/get_navigation/src/routes/get_route.dart';
|
||||||
import 'package:quiz_app/app/middleware/auth_middleware.dart';
|
import 'package:quiz_app/app/middleware/auth_middleware.dart';
|
||||||
|
import 'package:quiz_app/feature/history/binding/detail_history_binding.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/history/view/detail_history_view.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/detail_quiz/binding/detail_quiz_binding.dart';
|
import 'package:quiz_app/feature/detail_quiz/binding/detail_quiz_binding.dart';
|
||||||
|
@ -92,6 +94,11 @@ class AppPages {
|
||||||
name: AppRoutes.listingQuizPage,
|
name: AppRoutes.listingQuizPage,
|
||||||
page: () => ListingsQuizView(),
|
page: () => ListingsQuizView(),
|
||||||
binding: ListingQuizBinding(),
|
binding: ListingQuizBinding(),
|
||||||
|
),
|
||||||
|
GetPage(
|
||||||
|
name: AppRoutes.detailHistoryPage,
|
||||||
|
page: () => DetailHistoryView(),
|
||||||
|
binding: DetailHistoryBinding(),
|
||||||
)
|
)
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,4 +15,6 @@ abstract class AppRoutes {
|
||||||
|
|
||||||
static const playQuizPage = "/quiz/play";
|
static const playQuizPage = "/quiz/play";
|
||||||
static const resultQuizPage = "/quiz/result";
|
static const resultQuizPage = "/quiz/result";
|
||||||
|
|
||||||
|
static const detailHistoryPage = "/history/detail";
|
||||||
}
|
}
|
||||||
|
|
|
@ -45,7 +45,7 @@ class GlobalButton extends StatelessWidget {
|
||||||
backgroundColor: backgroundColor,
|
backgroundColor: backgroundColor,
|
||||||
foregroundColor: foregroundColor,
|
foregroundColor: foregroundColor,
|
||||||
elevation: isDisabled ? 0 : 4,
|
elevation: isDisabled ? 0 : 4,
|
||||||
shadowColor: !isDisabled ? backgroundColor.withOpacity(0.3) : Colors.transparent,
|
shadowColor: !isDisabled ? backgroundColor.withValues(alpha: 0.3) : Colors.transparent,
|
||||||
padding: const EdgeInsets.symmetric(vertical: 16),
|
padding: const EdgeInsets.symmetric(vertical: 16),
|
||||||
shape: RoundedRectangleBorder(
|
shape: RoundedRectangleBorder(
|
||||||
borderRadius: BorderRadius.circular(16),
|
borderRadius: BorderRadius.circular(16),
|
||||||
|
|
|
@ -24,7 +24,7 @@ class QuizContainerComponent extends StatelessWidget {
|
||||||
border: Border.all(color: const Color(0xFFE1E4E8)),
|
border: Border.all(color: const Color(0xFFE1E4E8)),
|
||||||
boxShadow: [
|
boxShadow: [
|
||||||
BoxShadow(
|
BoxShadow(
|
||||||
color: Colors.black.withOpacity(0.03),
|
color: Colors.black.withValues(alpha: 0.03),
|
||||||
blurRadius: 8,
|
blurRadius: 8,
|
||||||
offset: const Offset(0, 2),
|
offset: const Offset(0, 2),
|
||||||
),
|
),
|
||||||
|
|
|
@ -97,7 +97,7 @@ class QuestionContainerWidget extends StatelessWidget {
|
||||||
margin: const EdgeInsets.symmetric(vertical: 4),
|
margin: const EdgeInsets.symmetric(vertical: 4),
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
|
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
color: isCorrect ? AppColors.primaryBlue.withOpacity(0.1) : Colors.transparent,
|
color: isCorrect ? AppColors.primaryBlue.withValues(alpha: 0.1) : Colors.transparent,
|
||||||
borderRadius: BorderRadius.circular(8),
|
borderRadius: BorderRadius.circular(8),
|
||||||
),
|
),
|
||||||
child: Row(
|
child: Row(
|
||||||
|
@ -236,7 +236,7 @@ class QuestionContainerWidget extends StatelessWidget {
|
||||||
border: Border.all(color: AppColors.borderLight),
|
border: Border.all(color: AppColors.borderLight),
|
||||||
boxShadow: [
|
boxShadow: [
|
||||||
BoxShadow(
|
BoxShadow(
|
||||||
color: Colors.black.withOpacity(0.05),
|
color: Colors.black.withValues(alpha: 0.05),
|
||||||
blurRadius: 6,
|
blurRadius: 6,
|
||||||
offset: const Offset(2, 2),
|
offset: const Offset(2, 2),
|
||||||
),
|
),
|
||||||
|
|
|
@ -12,4 +12,5 @@ class APIEndpoint {
|
||||||
static const String quizSearch = "/quiz/search";
|
static const String quizSearch = "/quiz/search";
|
||||||
|
|
||||||
static const String historyQuiz = "/history";
|
static const String historyQuiz = "/history";
|
||||||
|
static const String detailHistoryQuiz = "/history/detail";
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,75 @@
|
||||||
|
class QuizAnswerResult {
|
||||||
|
final String answerId;
|
||||||
|
final String quizId;
|
||||||
|
final String title;
|
||||||
|
final String description;
|
||||||
|
final String authorId;
|
||||||
|
final String answeredAt;
|
||||||
|
final int totalCorrect;
|
||||||
|
final int totalScore;
|
||||||
|
final double totalSolveTime;
|
||||||
|
final List<QuestionAnswerItem> questionListings;
|
||||||
|
|
||||||
|
QuizAnswerResult({
|
||||||
|
required this.answerId,
|
||||||
|
required this.quizId,
|
||||||
|
required this.title,
|
||||||
|
required this.description,
|
||||||
|
required this.authorId,
|
||||||
|
required this.answeredAt,
|
||||||
|
required this.totalCorrect,
|
||||||
|
required this.totalScore,
|
||||||
|
required this.totalSolveTime,
|
||||||
|
required this.questionListings,
|
||||||
|
});
|
||||||
|
|
||||||
|
factory QuizAnswerResult.fromJson(Map<String, dynamic> json) {
|
||||||
|
return QuizAnswerResult(
|
||||||
|
answerId: json['answer_id'],
|
||||||
|
quizId: json['quiz_id'],
|
||||||
|
title: json['title'],
|
||||||
|
description: json['description'],
|
||||||
|
authorId: json['author_id'],
|
||||||
|
answeredAt: json['answered_at'],
|
||||||
|
totalCorrect: json['total_correct'],
|
||||||
|
totalScore: json['total_score'],
|
||||||
|
totalSolveTime: (json['total_solve_time'] as num).toDouble(),
|
||||||
|
questionListings: (json['question_listings'] as List).map((e) => QuestionAnswerItem.fromJson(e)).toList(),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class QuestionAnswerItem {
|
||||||
|
final int index;
|
||||||
|
final String question;
|
||||||
|
final String type;
|
||||||
|
final dynamic targetAnswer;
|
||||||
|
final dynamic userAnswer;
|
||||||
|
final bool isCorrect;
|
||||||
|
final double timeSpent;
|
||||||
|
final List<String>? options;
|
||||||
|
|
||||||
|
QuestionAnswerItem({
|
||||||
|
required this.index,
|
||||||
|
required this.question,
|
||||||
|
required this.type,
|
||||||
|
required this.targetAnswer,
|
||||||
|
required this.userAnswer,
|
||||||
|
required this.isCorrect,
|
||||||
|
required this.timeSpent,
|
||||||
|
this.options,
|
||||||
|
});
|
||||||
|
|
||||||
|
factory QuestionAnswerItem.fromJson(Map<String, dynamic> json) {
|
||||||
|
return QuestionAnswerItem(
|
||||||
|
index: json['index'],
|
||||||
|
question: json['question'],
|
||||||
|
type: json['type'],
|
||||||
|
targetAnswer: json['target_answer'],
|
||||||
|
userAnswer: json['user_answer'],
|
||||||
|
isCorrect: json['is_correct'],
|
||||||
|
timeSpent: (json['time_spent'] as num).toDouble(),
|
||||||
|
options: json['options'] != null ? List<String>.from(json['options']) : null,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -4,11 +4,11 @@ class FillInTheBlankQuestion extends BaseQuestionModel {
|
||||||
final String targetAnswer;
|
final String targetAnswer;
|
||||||
|
|
||||||
FillInTheBlankQuestion({
|
FillInTheBlankQuestion({
|
||||||
required int index,
|
required super.index,
|
||||||
required String question,
|
required super.question,
|
||||||
required int duration,
|
required super.duration,
|
||||||
required this.targetAnswer,
|
required this.targetAnswer,
|
||||||
}) : super(index: index, question: question, duration: duration, type: 'fill_the_blank');
|
}) : super(type: 'fill_the_blank');
|
||||||
|
|
||||||
factory FillInTheBlankQuestion.fromJson(Map<String, dynamic> json) {
|
factory FillInTheBlankQuestion.fromJson(Map<String, dynamic> json) {
|
||||||
return FillInTheBlankQuestion(
|
return FillInTheBlankQuestion(
|
||||||
|
|
|
@ -5,12 +5,12 @@ class OptionQuestion extends BaseQuestionModel {
|
||||||
final List<String> options;
|
final List<String> options;
|
||||||
|
|
||||||
OptionQuestion({
|
OptionQuestion({
|
||||||
required int index,
|
required super.index,
|
||||||
required String question,
|
required super.question,
|
||||||
required int duration,
|
required super.duration,
|
||||||
required this.targetAnswer,
|
required this.targetAnswer,
|
||||||
required this.options,
|
required this.options,
|
||||||
}) : super(index: index, question: question, duration: duration, type: 'option');
|
}) : super(type: 'option');
|
||||||
|
|
||||||
factory OptionQuestion.fromJson(Map<String, dynamic> json) {
|
factory OptionQuestion.fromJson(Map<String, dynamic> json) {
|
||||||
return OptionQuestion(
|
return OptionQuestion(
|
||||||
|
|
|
@ -4,11 +4,11 @@ class TrueFalseQuestion extends BaseQuestionModel {
|
||||||
final bool targetAnswer;
|
final bool targetAnswer;
|
||||||
|
|
||||||
TrueFalseQuestion({
|
TrueFalseQuestion({
|
||||||
required int index,
|
required super.index,
|
||||||
required String question,
|
required super.question,
|
||||||
required int duration,
|
required super.duration,
|
||||||
required this.targetAnswer,
|
required this.targetAnswer,
|
||||||
}) : super(index: index, question: question, duration: duration, type: 'true_false');
|
}) : super(type: 'true_false');
|
||||||
|
|
||||||
factory TrueFalseQuestion.fromJson(Map<String, dynamic> json) {
|
factory TrueFalseQuestion.fromJson(Map<String, dynamic> json) {
|
||||||
return TrueFalseQuestion(
|
return TrueFalseQuestion(
|
||||||
|
|
|
@ -3,6 +3,7 @@ import 'package:get/get.dart';
|
||||||
import 'package:quiz_app/core/endpoint/api_endpoint.dart';
|
import 'package:quiz_app/core/endpoint/api_endpoint.dart';
|
||||||
import 'package:quiz_app/core/utils/logger.dart';
|
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/history/detail_quiz_history.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/data/providers/dio_client.dart';
|
import 'package:quiz_app/data/providers/dio_client.dart';
|
||||||
|
|
||||||
|
@ -29,4 +30,19 @@ class HistoryService extends GetxService {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Future<BaseResponseModel<QuizAnswerResult>?> getDetailHistory(String answerId) async {
|
||||||
|
try {
|
||||||
|
final result = await _dio.get("${APIEndpoint.detailHistoryQuiz}/$answerId");
|
||||||
|
|
||||||
|
final parsedResponse = BaseResponseModel<QuizAnswerResult>.fromJson(
|
||||||
|
result.data,
|
||||||
|
(data) => QuizAnswerResult.fromJson(data as Map<String, dynamic>),
|
||||||
|
);
|
||||||
|
return parsedResponse;
|
||||||
|
} catch (e, stacktrace) {
|
||||||
|
logC.e(e, stackTrace: stacktrace);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -111,7 +111,7 @@ class DetailQuizView extends GetView<DetailQuizController> {
|
||||||
border: Border.all(color: AppColors.borderLight),
|
border: Border.all(color: AppColors.borderLight),
|
||||||
boxShadow: [
|
boxShadow: [
|
||||||
BoxShadow(
|
BoxShadow(
|
||||||
color: Colors.black.withOpacity(0.05),
|
color: Colors.black.withValues(alpha: 0.05),
|
||||||
blurRadius: 6,
|
blurRadius: 6,
|
||||||
offset: const Offset(2, 2),
|
offset: const Offset(2, 2),
|
||||||
),
|
),
|
||||||
|
|
|
@ -0,0 +1,11 @@
|
||||||
|
import 'package:get/get.dart';
|
||||||
|
import 'package:quiz_app/data/services/history_service.dart';
|
||||||
|
import 'package:quiz_app/feature/history/controller/detail_history_controller.dart';
|
||||||
|
|
||||||
|
class DetailHistoryBinding extends Bindings {
|
||||||
|
@override
|
||||||
|
void dependencies() {
|
||||||
|
if (!Get.isRegistered<HistoryService>()) Get.lazyPut(() => HistoryService());
|
||||||
|
Get.lazyPut<DetailHistoryController>(() => DetailHistoryController(Get.find<HistoryService>()));
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,30 @@
|
||||||
|
import 'package:get/get.dart';
|
||||||
|
import 'package:quiz_app/data/models/base/base_model.dart';
|
||||||
|
import 'package:quiz_app/data/models/history/detail_quiz_history.dart';
|
||||||
|
import 'package:quiz_app/data/services/history_service.dart';
|
||||||
|
|
||||||
|
class DetailHistoryController extends GetxController {
|
||||||
|
final HistoryService _historyService;
|
||||||
|
|
||||||
|
DetailHistoryController(this._historyService);
|
||||||
|
|
||||||
|
late QuizAnswerResult quizAnswer;
|
||||||
|
|
||||||
|
RxBool isLoading = true.obs;
|
||||||
|
|
||||||
|
@override
|
||||||
|
void onInit() {
|
||||||
|
_loadData();
|
||||||
|
super.onInit();
|
||||||
|
}
|
||||||
|
|
||||||
|
void _loadData() async {
|
||||||
|
String answerId = Get.arguments as String;
|
||||||
|
BaseResponseModel<QuizAnswerResult>? result = await _historyService.getDetailHistory(answerId);
|
||||||
|
if (result != null) {
|
||||||
|
if (result.data != null) quizAnswer = result.data!;
|
||||||
|
}
|
||||||
|
|
||||||
|
isLoading.value = false;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,11 +1,12 @@
|
||||||
import 'package:get/get.dart';
|
import 'package:get/get.dart';
|
||||||
|
import 'package:quiz_app/app/routes/app_pages.dart';
|
||||||
import 'package:quiz_app/data/controllers/user_controller.dart';
|
import 'package:quiz_app/data/controllers/user_controller.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/data/services/history_service.dart';
|
import 'package:quiz_app/data/services/history_service.dart';
|
||||||
|
|
||||||
class HistoryController extends GetxController {
|
class HistoryController extends GetxController {
|
||||||
HistoryService _historyService;
|
final HistoryService _historyService;
|
||||||
UserController _userController;
|
final UserController _userController;
|
||||||
|
|
||||||
HistoryController(this._historyService, this._userController);
|
HistoryController(this._historyService, this._userController);
|
||||||
|
|
||||||
|
@ -23,4 +24,6 @@ class HistoryController extends GetxController {
|
||||||
historyList.value = await _historyService.getHistory(_userController.userData!.id) ?? [];
|
historyList.value = await _historyService.getHistory(_userController.userData!.id) ?? [];
|
||||||
isLoading.value = false;
|
isLoading.value = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
void goToDetailHistory(String answerId) => Get.toNamed(AppRoutes.detailHistoryPage, arguments: answerId);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,160 @@
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:lucide_icons/lucide_icons.dart';
|
||||||
|
import 'package:quiz_app/app/const/colors/app_colors.dart';
|
||||||
|
import 'package:quiz_app/data/models/history/detail_quiz_history.dart';
|
||||||
|
|
||||||
|
class QuizItemComponent extends StatelessWidget {
|
||||||
|
final QuestionAnswerItem item;
|
||||||
|
|
||||||
|
const QuizItemComponent({super.key, required this.item});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final bool isOptionType = item.type == 'option';
|
||||||
|
|
||||||
|
return Container(
|
||||||
|
width: double.infinity,
|
||||||
|
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
|
||||||
|
padding: const EdgeInsets.all(20),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: Colors.white,
|
||||||
|
borderRadius: BorderRadius.circular(16),
|
||||||
|
boxShadow: [
|
||||||
|
BoxShadow(
|
||||||
|
color: Colors.black.withValues(alpha: 0.04),
|
||||||
|
blurRadius: 6,
|
||||||
|
offset: const Offset(0, 2),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
_buildQuestionText(),
|
||||||
|
const SizedBox(height: 16),
|
||||||
|
if (isOptionType && item.options != null) _buildOptions(),
|
||||||
|
const SizedBox(height: 12),
|
||||||
|
_buildAnswerIndicator(),
|
||||||
|
const SizedBox(height: 16),
|
||||||
|
const Divider(height: 24),
|
||||||
|
_buildMetadata(),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildQuestionText() {
|
||||||
|
return Text(
|
||||||
|
'${item.index}. ${item.question}',
|
||||||
|
style: const TextStyle(
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
fontSize: 16,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildOptions() {
|
||||||
|
return Column(
|
||||||
|
children: item.options!.asMap().entries.map((entry) {
|
||||||
|
final int index = entry.key;
|
||||||
|
final String text = entry.value;
|
||||||
|
|
||||||
|
final isCorrect = index == item.targetAnswer;
|
||||||
|
final isWrong = index == item.userAnswer && !isCorrect;
|
||||||
|
|
||||||
|
final Color? backgroundColor = isCorrect
|
||||||
|
? AppColors.primaryBlue.withValues(alpha: 0.15)
|
||||||
|
: isWrong
|
||||||
|
? Colors.red.withValues(alpha: 0.15)
|
||||||
|
: null;
|
||||||
|
|
||||||
|
return Container(
|
||||||
|
width: double.infinity,
|
||||||
|
margin: const EdgeInsets.symmetric(vertical: 6),
|
||||||
|
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 12),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: backgroundColor,
|
||||||
|
borderRadius: BorderRadius.circular(12),
|
||||||
|
border: Border.all(color: Colors.grey.shade300),
|
||||||
|
),
|
||||||
|
child: Row(
|
||||||
|
children: [
|
||||||
|
Icon(
|
||||||
|
LucideIcons.circle,
|
||||||
|
size: 16,
|
||||||
|
color: Colors.grey.shade600,
|
||||||
|
),
|
||||||
|
const SizedBox(width: 8),
|
||||||
|
Flexible(
|
||||||
|
child: Text(
|
||||||
|
text,
|
||||||
|
style: const TextStyle(fontSize: 14),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}).toList(),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildAnswerIndicator() {
|
||||||
|
final correctIcon = item.isCorrect ? LucideIcons.checkCircle2 : LucideIcons.xCircle;
|
||||||
|
final correctColor = item.isCorrect ? AppColors.primaryBlue : Colors.red;
|
||||||
|
|
||||||
|
final String userAnswerText = item.type == 'option' ? item.options![item.userAnswer] : item.userAnswer.toString();
|
||||||
|
|
||||||
|
final String correctAnswerText = item.targetAnswer.toString();
|
||||||
|
|
||||||
|
return Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
Row(
|
||||||
|
children: [
|
||||||
|
Icon(correctIcon, color: correctColor, size: 18),
|
||||||
|
const SizedBox(width: 8),
|
||||||
|
Text(
|
||||||
|
'Jawabanmu: $userAnswerText',
|
||||||
|
style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
if (item.type != 'option' && !item.isCorrect) ...[
|
||||||
|
const SizedBox(height: 6),
|
||||||
|
Row(
|
||||||
|
children: [
|
||||||
|
const SizedBox(width: 26), // offset icon size + spacing
|
||||||
|
Text(
|
||||||
|
'Jawaban benar: $correctAnswerText',
|
||||||
|
style: const TextStyle(fontSize: 14, color: Colors.black54),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildMetadata() {
|
||||||
|
return Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
children: [
|
||||||
|
_metaItem(icon: LucideIcons.helpCircle, label: item.type),
|
||||||
|
_metaItem(icon: LucideIcons.clock3, label: '${item.timeSpent}s'),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _metaItem({required IconData icon, required String label}) {
|
||||||
|
return Row(
|
||||||
|
children: [
|
||||||
|
Icon(icon, size: 16, color: AppColors.primaryBlue),
|
||||||
|
const SizedBox(width: 6),
|
||||||
|
Text(
|
||||||
|
label,
|
||||||
|
style: const TextStyle(fontSize: 13, color: Colors.black54),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,163 @@
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:get/get_state_manager/get_state_manager.dart';
|
||||||
|
import 'package:lucide_icons/lucide_icons.dart';
|
||||||
|
import 'package:quiz_app/app/const/colors/app_colors.dart';
|
||||||
|
import 'package:quiz_app/component/widget/loading_widget.dart';
|
||||||
|
import 'package:quiz_app/feature/history/controller/detail_history_controller.dart';
|
||||||
|
import 'package:quiz_app/feature/history/view/component/quiz_item_component.dart';
|
||||||
|
|
||||||
|
class DetailHistoryView extends GetView<DetailHistoryController> {
|
||||||
|
const DetailHistoryView({super.key});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Scaffold(
|
||||||
|
backgroundColor: AppColors.background,
|
||||||
|
appBar: AppBar(
|
||||||
|
backgroundColor: AppColors.background,
|
||||||
|
elevation: 0,
|
||||||
|
title: const Text(
|
||||||
|
'Detail history',
|
||||||
|
style: TextStyle(
|
||||||
|
color: AppColors.darkText,
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
centerTitle: true,
|
||||||
|
iconTheme: const IconThemeData(color: AppColors.darkText),
|
||||||
|
),
|
||||||
|
body: SafeArea(
|
||||||
|
child: Obx(() {
|
||||||
|
if (controller.isLoading.value) {
|
||||||
|
return Expanded(
|
||||||
|
child: Center(
|
||||||
|
child: LoadingWidget(),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return ListView(
|
||||||
|
children: [
|
||||||
|
quizMetaInfo(),
|
||||||
|
...quizListings(),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
List<Widget> quizListings() {
|
||||||
|
return controller.quizAnswer.questionListings.map((e) => QuizItemComponent(item: e)).toList();
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget quizMetaInfo() {
|
||||||
|
final quiz = controller.quizAnswer;
|
||||||
|
|
||||||
|
return Container(
|
||||||
|
width: double.infinity,
|
||||||
|
margin: const EdgeInsets.all(16),
|
||||||
|
padding: const EdgeInsets.all(20),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: Colors.white,
|
||||||
|
borderRadius: BorderRadius.circular(20),
|
||||||
|
boxShadow: [
|
||||||
|
BoxShadow(
|
||||||
|
color: Colors.black.withOpacity(0.05),
|
||||||
|
blurRadius: 8,
|
||||||
|
offset: const Offset(0, 4),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
Text(
|
||||||
|
quiz.title,
|
||||||
|
style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
|
||||||
|
),
|
||||||
|
const SizedBox(height: 8),
|
||||||
|
Text(
|
||||||
|
quiz.description,
|
||||||
|
style: const TextStyle(fontSize: 14, color: Colors.black54),
|
||||||
|
),
|
||||||
|
const SizedBox(height: 12),
|
||||||
|
Row(
|
||||||
|
children: [
|
||||||
|
const Icon(LucideIcons.calendar, size: 16, color: Colors.black45),
|
||||||
|
const SizedBox(width: 6),
|
||||||
|
Text(
|
||||||
|
quiz.answeredAt,
|
||||||
|
style: const TextStyle(fontSize: 13, color: Colors.black54),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
const SizedBox(height: 6),
|
||||||
|
Row(
|
||||||
|
children: [
|
||||||
|
const Icon(LucideIcons.clock, size: 16, color: Colors.black45),
|
||||||
|
const SizedBox(width: 6),
|
||||||
|
Text(
|
||||||
|
'12:00', // tanggal dan jam dipisahkan titik tengah
|
||||||
|
style: const TextStyle(fontSize: 13, color: Colors.black54),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
const SizedBox(height: 6),
|
||||||
|
const Divider(
|
||||||
|
height: 24,
|
||||||
|
thickness: 1,
|
||||||
|
color: AppColors.shadowPrimary,
|
||||||
|
),
|
||||||
|
Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||||
|
children: [
|
||||||
|
_buildStatItem(
|
||||||
|
icon: LucideIcons.checkCircle2,
|
||||||
|
label: 'Benar',
|
||||||
|
value: "${quiz.totalCorrect}/${quiz.questionListings.length}",
|
||||||
|
color: Colors.green,
|
||||||
|
),
|
||||||
|
_buildStatItem(
|
||||||
|
icon: LucideIcons.award,
|
||||||
|
label: 'Skor',
|
||||||
|
value: quiz.totalScore.toString(),
|
||||||
|
color: Colors.blueAccent,
|
||||||
|
),
|
||||||
|
_buildStatItem(
|
||||||
|
icon: LucideIcons.clock3,
|
||||||
|
label: 'Waktu',
|
||||||
|
value: '${quiz.totalSolveTime}s',
|
||||||
|
color: Colors.orange,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildStatItem({
|
||||||
|
required IconData icon,
|
||||||
|
required String label,
|
||||||
|
required String value,
|
||||||
|
required Color color,
|
||||||
|
}) {
|
||||||
|
return Column(
|
||||||
|
children: [
|
||||||
|
Icon(icon, color: color, size: 28),
|
||||||
|
const SizedBox(height: 4),
|
||||||
|
Text(
|
||||||
|
value,
|
||||||
|
style: const TextStyle(
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
fontSize: 16,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Text(
|
||||||
|
label,
|
||||||
|
style: const TextStyle(fontSize: 12, color: Colors.black54),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -67,7 +67,9 @@ class HistoryView extends GetView<HistoryController> {
|
||||||
}
|
}
|
||||||
|
|
||||||
Widget _buildHistoryCard(QuizHistory item) {
|
Widget _buildHistoryCard(QuizHistory item) {
|
||||||
return Container(
|
return GestureDetector(
|
||||||
|
onTap: () => controller.goToDetailHistory(item.answerId),
|
||||||
|
child: Container(
|
||||||
margin: const EdgeInsets.only(bottom: 16),
|
margin: const EdgeInsets.only(bottom: 16),
|
||||||
padding: const EdgeInsets.all(16),
|
padding: const EdgeInsets.all(16),
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
|
@ -129,6 +131,7 @@ class HistoryView extends GetView<HistoryController> {
|
||||||
)
|
)
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -88,7 +88,7 @@ class ButtonOption extends StatelessWidget {
|
||||||
borderRadius: BorderRadius.circular(16),
|
borderRadius: BorderRadius.circular(16),
|
||||||
boxShadow: [
|
boxShadow: [
|
||||||
BoxShadow(
|
BoxShadow(
|
||||||
color: gradientColors.last.withOpacity(0.4),
|
color: gradientColors.last.withValues(alpha: 0.4),
|
||||||
blurRadius: 6,
|
blurRadius: 6,
|
||||||
offset: const Offset(2, 4),
|
offset: const Offset(2, 4),
|
||||||
),
|
),
|
||||||
|
|
|
@ -86,7 +86,7 @@ class SearchComponent extends StatelessWidget {
|
||||||
borderRadius: BorderRadius.circular(12),
|
borderRadius: BorderRadius.circular(12),
|
||||||
boxShadow: [
|
boxShadow: [
|
||||||
BoxShadow(
|
BoxShadow(
|
||||||
color: Colors.black.withOpacity(0.05),
|
color: Colors.black.withValues(alpha: 0.05),
|
||||||
blurRadius: 6,
|
blurRadius: 6,
|
||||||
offset: Offset(0, 2),
|
offset: Offset(0, 2),
|
||||||
),
|
),
|
||||||
|
|
|
@ -74,7 +74,7 @@ class LibraryView extends GetView<LibraryController> {
|
||||||
borderRadius: BorderRadius.circular(12),
|
borderRadius: BorderRadius.circular(12),
|
||||||
boxShadow: [
|
boxShadow: [
|
||||||
BoxShadow(
|
BoxShadow(
|
||||||
color: Colors.black.withOpacity(0.05),
|
color: Colors.black.withValues(alpha: 0.05),
|
||||||
blurRadius: 6,
|
blurRadius: 6,
|
||||||
offset: const Offset(0, 2),
|
offset: const Offset(0, 2),
|
||||||
),
|
),
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import 'package:get/get.dart';
|
import 'package:get/get.dart';
|
||||||
|
import 'package:quiz_app/core/utils/logger.dart';
|
||||||
import 'package:quiz_app/data/controllers/user_controller.dart';
|
import 'package:quiz_app/data/controllers/user_controller.dart';
|
||||||
|
|
||||||
class ProfileController extends GetxController {
|
class ProfileController extends GetxController {
|
||||||
|
@ -12,10 +13,10 @@ class ProfileController extends GetxController {
|
||||||
final avgScore = 85.obs;
|
final avgScore = 85.obs;
|
||||||
|
|
||||||
void logout() {
|
void logout() {
|
||||||
print("Logout pressed");
|
logC.i("Logout pressed");
|
||||||
}
|
}
|
||||||
|
|
||||||
void editProfile() {
|
void editProfile() {
|
||||||
print("Edit profile pressed");
|
logC.i("Edit profile pressed");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
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/const/colors/app_colors.dart';
|
|
||||||
import 'package:quiz_app/component/global_text_field.dart';
|
|
||||||
import 'package:quiz_app/feature/quiz_play/controller/quiz_play_controller.dart';
|
import 'package:quiz_app/feature/quiz_play/controller/quiz_play_controller.dart';
|
||||||
|
|
||||||
class QuizPlayView extends GetView<QuizPlayController> {
|
class QuizPlayView extends GetView<QuizPlayController> {
|
||||||
|
|
|
@ -232,6 +232,14 @@ packages:
|
||||||
url: "https://pub.dev"
|
url: "https://pub.dev"
|
||||||
source: hosted
|
source: hosted
|
||||||
version: "2.5.0"
|
version: "2.5.0"
|
||||||
|
lucide_icons:
|
||||||
|
dependency: "direct main"
|
||||||
|
description:
|
||||||
|
name: lucide_icons
|
||||||
|
sha256: ad24d0fd65707e48add30bebada7d90bff2a1bba0a72d6e9b19d44246b0e83c4
|
||||||
|
url: "https://pub.dev"
|
||||||
|
source: hosted
|
||||||
|
version: "0.257.0"
|
||||||
matcher:
|
matcher:
|
||||||
dependency: transitive
|
dependency: transitive
|
||||||
description:
|
description:
|
||||||
|
|
|
@ -40,6 +40,7 @@ dependencies:
|
||||||
flutter_dotenv: ^5.2.1
|
flutter_dotenv: ^5.2.1
|
||||||
dio: ^5.8.0+1
|
dio: ^5.8.0+1
|
||||||
shared_preferences: ^2.5.3
|
shared_preferences: ^2.5.3
|
||||||
|
lucide_icons: ^0.257.0
|
||||||
|
|
||||||
dev_dependencies:
|
dev_dependencies:
|
||||||
flutter_test:
|
flutter_test:
|
||||||
|
|
Loading…
Reference in New Issue