Diary response update
This commit is contained in:
Menaka
parent
eb2f78248c
commit
7dba6d1555
|
|
@ -14,6 +14,7 @@ import ImageView from "react-native-image-viewing"
|
|||
import RenderHtml, { IGNORED_TAGS } from "react-native-render-html"
|
||||
import { WebView } from 'react-native-webview'
|
||||
import AutoHeightWebView from 'react-native-autoheight-webview'
|
||||
import { RadioButton } from 'react-native-paper'
|
||||
|
||||
const Sepator = ({ style }: any) => <View style={[BaseStyles.separator, style]} />
|
||||
const contentWidth = Dimensions.get('window').width
|
||||
|
|
@ -43,7 +44,8 @@ class DiaryView extends React.PureComponent<any, any>{
|
|||
images: [],
|
||||
reply: "",
|
||||
academicYear: '',
|
||||
isFetching: false
|
||||
isFetching: false,
|
||||
records:[]
|
||||
};
|
||||
|
||||
constructor(props: any) {
|
||||
|
|
@ -108,7 +110,7 @@ class DiaryView extends React.PureComponent<any, any>{
|
|||
this.fetchDiaryDetailList()
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
componentDidUpdate(prevProps:any) {
|
||||
if (this.props.replyData.hasOwnProperty('status')) {
|
||||
if (this.props.replyData.status) {
|
||||
this.setState({ page: 1, reply: '' })
|
||||
|
|
@ -119,6 +121,9 @@ class DiaryView extends React.PureComponent<any, any>{
|
|||
})
|
||||
}
|
||||
}
|
||||
if(prevProps.records != this.props.records){
|
||||
this.setState({ records: this.props.records })
|
||||
}
|
||||
}
|
||||
|
||||
setImageVisible = () => {
|
||||
|
|
@ -161,9 +166,10 @@ class DiaryView extends React.PureComponent<any, any>{
|
|||
|
||||
toDiaryReply = (data: any, item: any) => {
|
||||
const diaryResponse: any = {
|
||||
reply: data
|
||||
reply: data,
|
||||
is_completed: item.is_completed
|
||||
}
|
||||
if (item?.id && data) {
|
||||
if ((item?.id && data && !item.is_homework) || (item.is_homework && this.isLoggedinAs === UserRoles.parent) || (item.is_homework && data)) {
|
||||
this.props.sendReplyDiary({
|
||||
token: this.token, id: item?.id, data: diaryResponse
|
||||
})
|
||||
|
|
@ -180,6 +186,16 @@ class DiaryView extends React.PureComponent<any, any>{
|
|||
this.props.navigation.navigate("DiaryCreate", { info: this.props.route.params.info })
|
||||
}
|
||||
}
|
||||
|
||||
handleOptionChange = (id:any, selectedOption:any) => {
|
||||
const is_completed = selectedOption == "true" ? true : false
|
||||
const updatedData = this.state.records.map((item:any) =>
|
||||
item.id === id ? { ...item, is_completed } : item
|
||||
);
|
||||
this.setState({ records: updatedData})
|
||||
|
||||
};
|
||||
|
||||
renderRow = ({ item }: any) => {
|
||||
const renderers = {
|
||||
oembed: (attribs:any) => {
|
||||
|
|
@ -261,6 +277,22 @@ class DiaryView extends React.PureComponent<any, any>{
|
|||
by <Text style={[BaseStyles.font700Bold]}>{item?.posted_by} </Text> {item?.created_at && <Text>{moment(item?.created_at).fromNow()}</Text>}
|
||||
</Text>
|
||||
</View>
|
||||
{item?.is_homework && (this.isLoggedinAs === UserRoles.parent) &&
|
||||
<View>
|
||||
<RadioButton.Group
|
||||
onValueChange={(value) => this.handleOptionChange(item.id, value)}
|
||||
value={item.is_completed ? "true" : "false"}
|
||||
>
|
||||
<View style={styles.radioContainer}>
|
||||
<RadioButton.Android value="true" />
|
||||
<Text style={styles.radioLabel}>Completed</Text>
|
||||
</View>
|
||||
<View style={styles.radioContainer}>
|
||||
<RadioButton.Android value="false" />
|
||||
<Text style={styles.radioLabel}>Incomplete</Text>
|
||||
</View>
|
||||
</RadioButton.Group>
|
||||
</View>}
|
||||
<View style={[{ flex: 1, flexDirection: 'row' }]}>
|
||||
<View style={[BaseStyles.padHorizontal10, AppStyles.DiaryReplyView, BaseStyles.marTop10, BaseStyles.marLeft10]} >
|
||||
<TextInput style={[AppStyles.DiaryReplyText, { height: 30 }]} keyboardType="default" placeholder="Enter your reply" multiline={true} editable={true}
|
||||
|
|
@ -272,42 +304,89 @@ class DiaryView extends React.PureComponent<any, any>{
|
|||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
{item?.reply && item?.reply.map((replyInfo: any, index: any) => (
|
||||
(this.signedUserId === replyInfo?.parent_id) ?
|
||||
|
||||
{! (item.is_homework && item.is_homework) ?
|
||||
item?.reply && item?.reply.map((replyInfo: any, index: any) => (
|
||||
(this.signedUserId === replyInfo?.parent_id) ?
|
||||
<View key={index} style={[BaseStyles.padHorizontal10, AppStyles.studentCard, { flexDirection: 'row-reverse', padding: 7, marginBottom: 0 }]}>
|
||||
<View style={[{ backgroundColor: BaseColors.headerStyleBackgroundColor, alignSelf: 'center', justifyContent: 'center' }, styles.listViewImage, BaseStyles.marRight10]}>
|
||||
<Text style={{ fontSize: 14, color: BaseColors.white, textAlign: 'center' }}>{replyInfo?.username && replyInfo?.username.charAt(0) || 'NA'}</Text>
|
||||
</View>
|
||||
<View style={[BaseStyles.marRight10, BaseStyles.padding10, { flexDirection: 'column', width: '85%', backgroundColor: "#f5f7f7", borderRadius: 20 }]}>
|
||||
<Text style={[AppStyles.nameLabel, BaseStyles.marLeft10, { fontSize: 15, fontFamily: "Quicksand_700Bold", color: "#000", alignItems: 'flex-end' }]}>
|
||||
{replyInfo?.username || 'NA'}
|
||||
<Text style={{ fontSize: 11, color: "#bab8b8" }}> {moment(replyInfo?.reply_date).fromNow()}</Text></Text>
|
||||
<Text style={[AppStyles.stdLabel, BaseStyles.marLeft10,]}>{replyInfo?.message}</Text>
|
||||
</View>
|
||||
</View> :
|
||||
<View key={index} style={[BaseStyles.padHorizontal10, AppStyles.studentCard, BaseStyles.marTop5, { padding: 7, marginBottom: 0 }]}>
|
||||
<View style={[{ backgroundColor: BaseColors.headerStyleBackgroundColor, alignSelf: 'center', justifyContent: 'center' }, styles.listViewImage, BaseStyles.marRight10]}>
|
||||
<Text style={{ fontSize: 14, color: BaseColors.white, textAlign: 'center' }}>{replyInfo?.username && replyInfo?.username.charAt(0) || 'NA'}</Text>
|
||||
</View>
|
||||
<View style={[BaseStyles.padding10, { flexDirection: 'column', width: '85%', backgroundColor: "#f5f7f7", borderRadius: 10 }]}>
|
||||
<Text style={[AppStyles.nameLabel, { fontSize: 15, fontFamily: "Quicksand_700Bold", color: "#000", }]}>{replyInfo?.username || 'NA'}
|
||||
<Text style={{ fontSize: 11, color: "#bab8b8" }}> {moment(replyInfo?.reply_date).fromNow()}</Text></Text>
|
||||
<Text style={[AppStyles.stdLabel]}>{replyInfo?.message}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))
|
||||
:
|
||||
<View>
|
||||
<View style={[BaseStyles.marHorizontal10, BaseStyles.padding10, BaseStyles.marTop5, { flexDirection: 'column', borderWidth:2, borderColor: "#bab8b8" }]}>
|
||||
<Text>No of Students: {item.class_list[0].no_of_assessments}</Text>
|
||||
<Text>No of completed: {item.class_list[0].no_of_completed}</Text>
|
||||
<Text>No of incompleted: {item.class_list[0].no_of_incompleted}</Text>
|
||||
</View>
|
||||
{item?.student_list.map((student: any, index: any) => (
|
||||
<View key={index} style={[BaseStyles.padHorizontal10, AppStyles.studentCard, { flexDirection: 'row-reverse', padding: 7, marginBottom: 0 }]}>
|
||||
<View style={[{ backgroundColor: BaseColors.headerStyleBackgroundColor, alignSelf: 'center', justifyContent: 'center' }, styles.listViewImage, BaseStyles.marRight10]}>
|
||||
<Text style={{ fontSize: 14, color: BaseColors.white, textAlign: 'center' }}>{replyInfo?.username && replyInfo?.username.charAt(0) || 'NA'}</Text>
|
||||
<Text style={{ fontSize: 14, color: BaseColors.white, textAlign: 'center' }}>{student?.student_name && student?.student_name.charAt(0) || 'NA'}</Text>
|
||||
</View>
|
||||
|
||||
<View style={[BaseStyles.marRight10, BaseStyles.padding10, { flexDirection: 'column', width: '85%', backgroundColor: "#f5f7f7", borderRadius: 20 }]}>
|
||||
<Text style={[AppStyles.nameLabel, BaseStyles.marLeft10, { fontSize: 15, fontFamily: "Quicksand_700Bold", color: "#000", alignItems: 'flex-end' }]}>
|
||||
{replyInfo?.username || 'NA'}
|
||||
<Text style={{ fontSize: 11, color: "#bab8b8" }}> {moment(replyInfo?.reply_date).fromNow()}</Text></Text>
|
||||
<Text style={[AppStyles.stdLabel, BaseStyles.marLeft10,]}>{replyInfo?.message}</Text>
|
||||
</View>
|
||||
</View> :
|
||||
<View key={index} style={[BaseStyles.padHorizontal10, AppStyles.studentCard, BaseStyles.marTop5, { padding: 7, marginBottom: 0 }]}>
|
||||
<View style={[{ backgroundColor: BaseColors.headerStyleBackgroundColor, alignSelf: 'center', justifyContent: 'center' }, styles.listViewImage, BaseStyles.marRight10]}>
|
||||
<Text style={{ fontSize: 14, color: BaseColors.white, textAlign: 'center' }}>{replyInfo?.username && replyInfo?.username.charAt(0) || 'NA'}</Text>
|
||||
</View>
|
||||
<View style={[BaseStyles.padding10, { flexDirection: 'column', width: '85%', backgroundColor: "#f5f7f7", borderRadius: 10 }]}>
|
||||
<Text style={[AppStyles.nameLabel, { fontSize: 15, fontFamily: "Quicksand_700Bold", color: "#000", }]}>{replyInfo?.username || 'NA'}
|
||||
<Text style={{ fontSize: 11, color: "#bab8b8" }}> {moment(replyInfo?.reply_date).fromNow()}</Text></Text>
|
||||
<Text style={[AppStyles.stdLabel]}>{replyInfo?.message}</Text>
|
||||
{student.student_name}
|
||||
<Text style={{ fontSize: 11, color: "#bab8b8" }}> {student?.reply_date && moment(student?.reply_date).fromNow()}</Text></Text>
|
||||
<Text style={[AppStyles.stdLabel, BaseStyles.marLeft10, { alignItems: 'flex-end' }]}>
|
||||
{student.is_completed ? "Completed" : "Incompleted"}
|
||||
<Text style={{ fontSize: 11, color: "#bab8b8" }}> {student?.reply && student?.reply}</Text></Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
))}
|
||||
|
||||
|
||||
|
||||
))}
|
||||
{item?.others_reply && item?.others_reply.map((replyInfo: any, index: any) => (
|
||||
(this.signedUserId === replyInfo?.parent_id) ?
|
||||
<View key={index} style={[BaseStyles.padHorizontal10, AppStyles.studentCard, { flexDirection: 'row-reverse', padding: 7, marginBottom: 0 }]}>
|
||||
<View style={[{ backgroundColor: BaseColors.headerStyleBackgroundColor, alignSelf: 'center', justifyContent: 'center' }, styles.listViewImage, BaseStyles.marRight10]}>
|
||||
<Text style={{ fontSize: 14, color: BaseColors.white, textAlign: 'center' }}>{replyInfo?.username && replyInfo?.username.charAt(0) || 'NA'}</Text>
|
||||
</View>
|
||||
<View style={[BaseStyles.marRight10, BaseStyles.padding10, { flexDirection: 'column', width: '85%', backgroundColor: "#f5f7f7", borderRadius: 20 }]}>
|
||||
<Text style={[AppStyles.nameLabel, BaseStyles.marLeft10, { fontSize: 15, fontFamily: "Quicksand_700Bold", color: "#000", alignItems: 'flex-end' }]}>
|
||||
{replyInfo?.username || 'NA'}
|
||||
<Text style={{ fontSize: 11, color: "#bab8b8" }}> {moment(replyInfo?.reply_date).fromNow()}</Text></Text>
|
||||
<Text style={[AppStyles.stdLabel, BaseStyles.marLeft10,]}>{replyInfo?.message}</Text>
|
||||
</View>
|
||||
</View> :
|
||||
<View key={index} style={[BaseStyles.padHorizontal10, AppStyles.studentCard, BaseStyles.marTop5, { padding: 7, marginBottom: 0 }]}>
|
||||
<View style={[{ backgroundColor: BaseColors.headerStyleBackgroundColor, alignSelf: 'center', justifyContent: 'center' }, styles.listViewImage, BaseStyles.marRight10]}>
|
||||
<Text style={{ fontSize: 14, color: BaseColors.white, textAlign: 'center' }}>{replyInfo?.username && replyInfo?.username.charAt(0) || 'NA'}</Text>
|
||||
</View>
|
||||
<View style={[BaseStyles.padding10, { flexDirection: 'column', width: '85%', backgroundColor: "#f5f7f7", borderRadius: 10 }]}>
|
||||
<Text style={[AppStyles.nameLabel, { fontSize: 15, fontFamily: "Quicksand_700Bold", color: "#000", }]}>{replyInfo?.username || 'NA'}
|
||||
<Text style={{ fontSize: 11, color: "#bab8b8" }}> {moment(replyInfo?.reply_date).fromNow()}</Text></Text>
|
||||
<Text style={[AppStyles.stdLabel]}>{replyInfo?.message}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
|
||||
if (this.props.records.length) {
|
||||
if (this.state.records.length) {
|
||||
|
||||
let diaryCategoryList: any = []
|
||||
if (this.props.categoryList.hasOwnProperty('status')) {
|
||||
|
|
@ -316,7 +395,7 @@ class DiaryView extends React.PureComponent<any, any>{
|
|||
}
|
||||
}
|
||||
|
||||
this.props.records.forEach((diaryInfo: any) => {
|
||||
this.state.records.forEach((diaryInfo: any) => {
|
||||
if (diaryCategoryList.length) {
|
||||
const findDiaryType: any = diaryCategoryList.find((item: any) => item.id === parseInt(diaryInfo.diary_type))
|
||||
if (findDiaryType) {
|
||||
|
|
@ -334,9 +413,9 @@ class DiaryView extends React.PureComponent<any, any>{
|
|||
|
||||
return (<View style={[AppStyles.containerWoPadding, {}]}>
|
||||
|
||||
{this.props.records && <FlatList
|
||||
{this.state.records && <FlatList
|
||||
style={{ marginVertical: 12, marginHorizontal: 16 }}
|
||||
data={this.props.records}
|
||||
data={this.state.records}
|
||||
renderItem={this.renderRow}
|
||||
keyExtractor={(item, index) => index.toString()}
|
||||
onEndReached={this.hasLoadMore}
|
||||
|
|
@ -346,7 +425,7 @@ class DiaryView extends React.PureComponent<any, any>{
|
|||
onRefresh={() => this.onRefresh()}
|
||||
refreshing={this.state.isFetching}
|
||||
/>}
|
||||
{!this.props.loading && this.props.records.length === 0 &&
|
||||
{!this.props.loading && this.state.records.length === 0 &&
|
||||
<Text style={[BaseStyles.font500Medium, { flex: 1, justifyContent: 'center', alignSelf: 'center' }]}>{common.noDataFound}</Text>}
|
||||
|
||||
{this.props.loading && <View style={[BaseStyles.marVertical20, { flex: 1, justifyContent: 'center' }]}>
|
||||
|
|
@ -394,8 +473,15 @@ const styles = StyleSheet.create({
|
|||
width: 35,
|
||||
height: 35,
|
||||
borderRadius: 50,
|
||||
|
||||
}
|
||||
},
|
||||
radioContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 10,
|
||||
},
|
||||
radioLabel: {
|
||||
marginLeft: 8,
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue