You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
513 lines
23 KiB
Dart
513 lines
23 KiB
Dart
import 'package:flutter/cupertino.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_svg/flutter_svg.dart';
|
|
import 'package:shared_preferences/shared_preferences.dart';
|
|
import 'package:tangheem/api/admin_configuration_api_client.dart';
|
|
import 'package:tangheem/api/tangheem_user_api_client.dart';
|
|
import 'package:tangheem/app_state/app_state.dart';
|
|
import 'package:tangheem/classes/colors.dart';
|
|
import 'package:tangheem/classes/consts.dart';
|
|
import 'package:tangheem/classes/utils.dart';
|
|
import 'package:tangheem/models/aya_tangheem_type_mapped.dart';
|
|
import 'package:tangheem/models/discussion_model.dart';
|
|
import 'package:tangheem/ui/dialogs/discussion_input_dialog.dart';
|
|
import 'package:tangheem/widgets/aya_player_widget.dart';
|
|
import 'package:tangheem/widgets/aya_record_widget.dart';
|
|
import 'package:tangheem/widgets/text_highlight_widget.dart';
|
|
import 'package:tangheem/extensions/string_extensions.dart';
|
|
import 'login_screen.dart';
|
|
|
|
class TangheemDetailScreen extends StatefulWidget {
|
|
static const String routeName = "/tangheem_detail";
|
|
final List<AyatTangheemTypeMappedData> ayatTangheemTypeMappedDataList;
|
|
// final AyatTangheemTypeMappedData ayatTangheemTypeMappedData;
|
|
TangheemDetailScreen({Key key, this.ayatTangheemTypeMappedDataList}) : super(key: key);
|
|
|
|
@override
|
|
_TangheemDetailScreenState createState() {
|
|
return _TangheemDetailScreenState();
|
|
}
|
|
}
|
|
|
|
class _TangheemDetailScreenState extends State<TangheemDetailScreen> {
|
|
GlobalKey _globalKey = GlobalKey();
|
|
|
|
List<VoiceNote> voiceNoteList = [];
|
|
|
|
List<AyatTangheemTypeMappedData> ayatTangheemTypeMappedDataList = [];
|
|
|
|
int _discussionPage = -1;
|
|
AyatTangheemTypeMappedData _ayatTangheemTypeMappedFirstData;
|
|
DiscussionModel _discussionModel;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
|
|
ayatTangheemTypeMappedDataList = widget.ayatTangheemTypeMappedDataList;
|
|
_ayatTangheemTypeMappedFirstData = ayatTangheemTypeMappedDataList.first;
|
|
filterVoiceListData();
|
|
getPrefs();
|
|
getTangheemDiscussion();
|
|
}
|
|
|
|
double fontSize = 18;
|
|
|
|
SharedPreferences prefs;
|
|
void getPrefs() async {
|
|
prefs = await SharedPreferences.getInstance();
|
|
fontSize = (prefs.getInt(GlobalConsts.fontZoomSize) ?? 18) + 0.0;
|
|
setState(() {});
|
|
}
|
|
|
|
String getArabicIndexWord(int index) {
|
|
if (index == 0) {
|
|
return 'الأولى';
|
|
} else if (index == 1) {
|
|
return 'الثانية';
|
|
} else if (index == 2) {
|
|
return 'الثالثة';
|
|
} else if (index == 3) {
|
|
return 'الرابعة';
|
|
} else if (index == 4) {
|
|
return 'الخامسة';
|
|
}
|
|
return "";
|
|
}
|
|
|
|
void getTangheemDiscussion() async {
|
|
Utils.showLoading(context);
|
|
try {
|
|
_discussionModel = await TangheemUserApiClient().getDiscussionByTangheemID(_discussionPage, _ayatTangheemTypeMappedFirstData.ayaTangheemTypeId);
|
|
Utils.hideLoading(context);
|
|
setState(() {});
|
|
} catch (ex, tr) {
|
|
Utils.handleException(ex, null);
|
|
Utils.hideLoading(context);
|
|
}
|
|
}
|
|
|
|
void sendComment(String discussionText) async {
|
|
Utils.showLoading(context);
|
|
try {
|
|
await AdminConfigurationApiClient().addDiscussion(discussionText, _ayatTangheemTypeMappedFirstData.ayaTangheemTypeId);
|
|
Utils.showToast("تم إرسال التعليق ، سيكون مرئيًا بمجرد موافقة المسؤول عليه");
|
|
Utils.hideLoading(context);
|
|
Navigator.pop(context);
|
|
} catch (ex, tr) {
|
|
print(ex);
|
|
Utils.handleException(ex, null);
|
|
Utils.hideLoading(context);
|
|
}
|
|
}
|
|
|
|
void filterVoiceListData() {
|
|
ayatTangheemTypeMappedDataList.forEach((element) {
|
|
voiceNoteList.addAll(element.voiceNote);
|
|
});
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
padding: EdgeInsets.fromLTRB(16, 24, 16, 0),
|
|
width: double.infinity,
|
|
child: _ayatTangheemTypeMappedFirstData == null
|
|
? SizedBox()
|
|
: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
_ayatTangheemTypeMappedFirstData.tangheemTypeName ?? "",
|
|
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: ColorConsts.primaryBlue, height: 1.5),
|
|
),
|
|
SizedBox(height: 8),
|
|
Text(
|
|
"هنا نضع\" تعريف بالاستفهام وتداخل الأساليب\"",
|
|
style: TextStyle(fontSize: 14, color: ColorConsts.textGrey, height: 1),
|
|
),
|
|
SizedBox(height: 8),
|
|
Expanded(
|
|
child: ListView(
|
|
physics: BouncingScrollPhysics(),
|
|
padding: EdgeInsets.only(bottom: 16),
|
|
children: [
|
|
Container(
|
|
margin: EdgeInsets.only(top: 4, bottom: 4),
|
|
padding: EdgeInsets.only(top: 8, bottom: 8, right: 4, left: 4),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: SingleChildScrollView(
|
|
physics: NeverScrollableScrollPhysics(),
|
|
child: RepaintBoundary(
|
|
key: _globalKey,
|
|
child: Material(
|
|
color: Colors.white,
|
|
child: ListView.builder(
|
|
physics: NeverScrollableScrollPhysics(),
|
|
shrinkWrap: true,
|
|
itemCount: ayatTangheemTypeMappedDataList.length > 5 ? 5 : ayatTangheemTypeMappedDataList.length,
|
|
itemBuilder: (context, index) {
|
|
var _ayatTangheemTypeMappedData = ayatTangheemTypeMappedDataList[index];
|
|
List<TangheemProperty> _tangheemInsideTableTrueList = [];
|
|
List<TangheemProperty> _tangheemInsideTableValueList = [];
|
|
List<TangheemProperty> _tangheemInsideTableEmptyList = [];
|
|
List<String> _tangheemWords = [];
|
|
|
|
_tangheemWords.add(_ayatTangheemTypeMappedData.highlightText ?? "");
|
|
_tangheemInsideTableTrueList =
|
|
_ayatTangheemTypeMappedData?.property?.where((element) => (element.isInsideTable) && (element.propertyValue ?? "").isNotEmpty)?.toList() ?? [];
|
|
_tangheemInsideTableValueList =
|
|
_ayatTangheemTypeMappedData?.property?.where((element) => (!element.isInsideTable) && (element.propertyValue ?? "").isNotEmpty)?.toList() ?? [];
|
|
// _tangheemInsideTableEmptyList = _ayatTangheemTypeMappedData?.property?.where((element) => (!element.isInsideTable) && (element.propertyValue ?? "").isEmpty)?.toList() ?? [];
|
|
|
|
return ListView(
|
|
physics: NeverScrollableScrollPhysics(),
|
|
shrinkWrap: true,
|
|
padding: EdgeInsets.all(4),
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Text(
|
|
" جمله ${_ayatTangheemTypeMappedData.tangheemTypeName} ${getArabicIndexWord(index)} ",
|
|
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white, backgroundColor: ColorConsts.primaryBlue),
|
|
),
|
|
Expanded(
|
|
child: Container(height: 2, color: ColorConsts.primaryBlue),
|
|
),
|
|
],
|
|
),
|
|
SizedBox(height: 8),
|
|
TextHighLightWidget(
|
|
text: _ayatTangheemTypeMappedData.reverseAyatNumber() ?? "",
|
|
valueColor: ColorConsts.primaryBlue,
|
|
highlights: _tangheemWords,
|
|
highLightFontSize: fontSize,
|
|
style: TextStyle(
|
|
fontFamily: "UthmanicHafs",
|
|
fontSize: fontSize,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
SizedBox(height: 16),
|
|
ListView.separated(
|
|
itemCount: _tangheemInsideTableValueList.length,
|
|
physics: NeverScrollableScrollPhysics(),
|
|
shrinkWrap: true,
|
|
separatorBuilder: (context, index) {
|
|
return Divider(
|
|
color: Colors.white,
|
|
height: 1,
|
|
thickness: 0,
|
|
);
|
|
},
|
|
itemBuilder: (context, index) {
|
|
return Row(
|
|
children: [
|
|
Expanded(
|
|
child: Container(
|
|
height: 40,
|
|
padding: EdgeInsets.only(left: 4, right: 8),
|
|
alignment: Alignment.centerRight,
|
|
child: Text(
|
|
_tangheemInsideTableValueList[index].propertyText,
|
|
style: TextStyle(fontWeight: FontWeight.bold, color: ColorConsts.secondaryOrange),
|
|
),
|
|
color: ColorConsts.secondaryWhite,
|
|
),
|
|
),
|
|
SizedBox(width: 8),
|
|
Expanded(
|
|
child: Container(
|
|
height: 40,
|
|
padding: EdgeInsets.only(left: 4, right: 8),
|
|
alignment: Alignment.centerRight,
|
|
child: Text(
|
|
_tangheemInsideTableValueList[index].propertyValue,
|
|
style: TextStyle(color: ColorConsts.primaryBlack),
|
|
),
|
|
color: ColorConsts.secondaryWhite,
|
|
),
|
|
)
|
|
],
|
|
);
|
|
}),
|
|
if (_tangheemInsideTableTrueList.isNotEmpty)
|
|
Container(
|
|
color: ColorConsts.primaryBlue,
|
|
margin: EdgeInsets.only(top: 8, bottom: 8),
|
|
padding: EdgeInsets.all(8),
|
|
child: Column(
|
|
children: [
|
|
Text(
|
|
_ayatTangheemTypeMappedData.tangheemTypeName ?? "",
|
|
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
|
|
),
|
|
SizedBox(height: 8),
|
|
tangheemPropertyView(_tangheemInsideTableTrueList)
|
|
],
|
|
),
|
|
),
|
|
tangheemPropertyView(_tangheemInsideTableEmptyList)
|
|
],
|
|
);
|
|
})),
|
|
),
|
|
),
|
|
),
|
|
SizedBox(height: 8),
|
|
discussionView(_discussionModel?.data ?? []),
|
|
SizedBox(height: 16),
|
|
AyaRecordWidget()
|
|
],
|
|
),
|
|
),
|
|
AyaPlayerWidget(surahName: _ayatTangheemTypeMappedFirstData?.surahNameAr ?? "", globalKey: _globalKey, voiceNoteList: voiceNoteList)
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget nextOptionButton(String icon, String text, VoidCallback onPressed) {
|
|
return InkWell(
|
|
onTap: onPressed,
|
|
child: onPressed == null
|
|
? SizedBox()
|
|
: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
SvgPicture.asset(icon, height: 12, width: 12),
|
|
SizedBox(width: 4),
|
|
Text(
|
|
text,
|
|
style: TextStyle(color: ColorConsts.textGrey),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget previousOptionButton(String icon, String text, VoidCallback onPressed) {
|
|
return InkWell(
|
|
onTap: onPressed,
|
|
child: onPressed == null
|
|
? SizedBox()
|
|
: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(
|
|
text,
|
|
style: TextStyle(color: ColorConsts.textGrey),
|
|
),
|
|
SizedBox(width: 4),
|
|
SvgPicture.asset(icon, height: 12, width: 12),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget tangheemPropertyView(List<TangheemProperty> tangheemPropertyList) {
|
|
return Container(
|
|
color: Colors.white,
|
|
child: ListView.separated(
|
|
itemCount: tangheemPropertyList.length,
|
|
physics: NeverScrollableScrollPhysics(),
|
|
padding: EdgeInsets.zero,
|
|
shrinkWrap: true,
|
|
separatorBuilder: (context, index) {
|
|
return Divider(
|
|
color: Colors.white,
|
|
height: 1,
|
|
thickness: 0,
|
|
);
|
|
},
|
|
itemBuilder: (context, index) {
|
|
return Container(
|
|
color: ColorConsts.secondaryWhite,
|
|
padding: EdgeInsets.all(8),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Text(
|
|
tangheemPropertyList[index].propertyText ?? "",
|
|
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12, color: ColorConsts.secondaryOrange),
|
|
),
|
|
SizedBox(height: 4),
|
|
Text(
|
|
tangheemPropertyList[index].propertyValue ?? "",
|
|
style: TextStyle(fontSize: 12, color: ColorConsts.secondaryPink),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget discussionView(List<DiscussionModelData> _discussionList) {
|
|
return Stack(
|
|
alignment: Alignment.bottomCenter,
|
|
children: [
|
|
Container(
|
|
margin: EdgeInsets.only(top: 4, bottom: 25),
|
|
padding: EdgeInsets.all(8),
|
|
width: double.infinity,
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: _discussionList.length > 1
|
|
? ListView.separated(
|
|
padding: EdgeInsets.only(top: 4, bottom: 24),
|
|
shrinkWrap: true,
|
|
physics: NeverScrollableScrollPhysics(),
|
|
itemCount: _discussionList.length,
|
|
separatorBuilder: (context, index) => SizedBox(height: 16),
|
|
itemBuilder: (context, index) {
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
SvgPicture.asset(
|
|
"assets/icons/chat_user.svg",
|
|
width: 60,
|
|
height: 60,
|
|
),
|
|
SizedBox(width: 8),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Text(
|
|
"تعليق على الآية ${_ayatTangheemTypeMappedFirstData.ayatNumberInSurah}",
|
|
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16, color: ColorConsts.primaryBlue, height: 1.5),
|
|
),
|
|
SizedBox(height: 4),
|
|
Text(
|
|
_discussionList[index].date.toFormattedDate(),
|
|
style: TextStyle(fontSize: 12, color: ColorConsts.textGrey, height: 1),
|
|
),
|
|
],
|
|
)
|
|
],
|
|
),
|
|
SizedBox(height: 4),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
"تعليق من: " + _discussionList[index].userName,
|
|
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14, color: ColorConsts.primaryBlue, height: 1.5),
|
|
),
|
|
Text(
|
|
_discussionList[index].discussionText,
|
|
style: TextStyle(fontSize: 14, color: ColorConsts.textGrey, height: 1.4),
|
|
),
|
|
if ((_discussionList[index]?.adminResponse ?? "").isNotEmpty) SizedBox(height: 4),
|
|
if ((_discussionList[index]?.adminResponse ?? "").isNotEmpty)
|
|
Text(
|
|
"تعليق من: " + _discussionList[index].adminResponse,
|
|
style: TextStyle(fontSize: 14, color: ColorConsts.textGrey, height: 1.4),
|
|
),
|
|
],
|
|
)
|
|
],
|
|
);
|
|
},
|
|
)
|
|
: Text(
|
|
"لا يوجد تعليقات",
|
|
style: TextStyle(fontSize: 12, color: ColorConsts.primaryBlue, height: 1.5),
|
|
),
|
|
),
|
|
Positioned(
|
|
bottom: 0,
|
|
child: InkWell(
|
|
borderRadius: BorderRadius.circular(30),
|
|
onTap: () async {
|
|
if (!AppState().isUserLogin) {
|
|
Widget cancelButton = FlatButton(
|
|
child: Text("أرغب بالتسجيل"),
|
|
onPressed: () async {
|
|
Navigator.pop(context);
|
|
await Navigator.pushNamed(context, LoginScreen.routeName);
|
|
if (!AppState().isUserLogin) {
|
|
return;
|
|
}
|
|
},
|
|
);
|
|
Widget continueButton = FlatButton(
|
|
child: Text("استمرار كضيف"),
|
|
onPressed: () {
|
|
Navigator.pop(context);
|
|
return;
|
|
},
|
|
);
|
|
|
|
// set up the AlertDialog
|
|
AlertDialog alert = AlertDialog(
|
|
content: Text("هذه الخاصية متاحه فقط للأعضاء المسجلين"),
|
|
actions: [
|
|
cancelButton,
|
|
continueButton,
|
|
],
|
|
);
|
|
|
|
// show the dialog
|
|
showDialog(
|
|
context: context,
|
|
builder: (BuildContext context) {
|
|
return alert;
|
|
},
|
|
);
|
|
|
|
return;
|
|
}
|
|
showDialog(
|
|
context: context,
|
|
barrierColor: ColorConsts.secondaryWhite.withOpacity(0.8),
|
|
builder: (BuildContext context) => DiscussionInputDialog(onCommentPress: (comment) {
|
|
sendComment(comment);
|
|
}),
|
|
);
|
|
},
|
|
child: Container(
|
|
height: 40,
|
|
padding: EdgeInsets.only(left: 24, right: 24),
|
|
alignment: Alignment.centerRight,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(30),
|
|
color: ColorConsts.gradientPink,
|
|
gradient: LinearGradient(
|
|
stops: [0.0, 0.5],
|
|
begin: Alignment.topCenter,
|
|
end: Alignment.bottomCenter,
|
|
colors: [ColorConsts.gradientPink, ColorConsts.gradientOrange],
|
|
),
|
|
),
|
|
child: Text(
|
|
"أضافة تعليق",
|
|
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14, color: Colors.white, height: 1.5),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|