tes
/* Core */
import React, { Component } from 'react';
/* Presentational */
import { View, Text, TouchableOpacity, TouchableWithoutFeedback } from 'react-native';
import styles from './styles';
//Icon
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { faUser, faUserCheck, faUserTag, faUserTimes } from '@fortawesome/free-solid-svg-icons';
//Modal
import Presence from "../../Modal/Presence";
export default class FrequencyItem extends Component {
constructor(props) {
super(props);
this.state = {
switchPresenca: this.props.frequency.presenca,
showHandlerPresence: false,
frequencia: props.frequency,
periodoAbono: false,
currentDate: this.props.currentDate,
};
}
updateFrequency = () => {
this.props.onUpdateFrequency({ ...this.state })
}
handlerPresence = (data) => {
this.setState({ showHandlerPresence: false })
this.setState({ switchPresenca: data.value });
}
showPresence = () => {
// TODO: Preencher periodo abono quando currentDate for a última data
if(this.state.periodoAbono === true){
this.setState({ showHandlerPresence: true })
}else{
if(this.state.switchPresenca === 'PRE' ){
this.setState({ switchPresenca: 'FAL' })
}else{
this.setState({ switchPresenca: 'PRE' })
}
}
}
onFrequencyStudent = (frequencia) => {
this.props.navigation.navigate('Student', { frequencia });
}
updateFrequenciaList = () => {
this.props.updateFrequenciaList();
}
// teste de soluça de bug
componentDidMount() {
const frequencia = this.props.frequency;
const presenca = this.props.frequency.presenca;
this.setState({frequencia: frequencia, presenca: presenca})
}
componentWillReceiveProps (nextProps) {
if (nextProps.frequency.presenca !== this.props.frequency.presenca) {
this.setState({ switchPresenca: nextProps.frequency.presenca });
}
}
render() {
const frequencia = this.state.frequencia;
const presenca = this.state.switchPresenca;
const currentDate = this.props.currentDate;
let presentButton;
if (presenca === 'PRE') {
presentButton = <View style={styles.groupIcon}>
<View style={[styles.iconBack, styles.iconPresent]} >
<FontAwesomeIcon icon={ faUserCheck } size={25} color="#FFF" />
</View>
<Text style={styles.textPre}>Presente</Text>
</View>
} else if (presenca === 'FAL') {
presentButton = <View style={styles.groupIcon}>
<View style={[styles.iconBack, styles.iconAbsence]} >
<FontAwesomeIcon icon={ faUserTimes } size={25} color="#FFF" />
</View>
<Text style={styles.textFal}>Faltou</Text>
</View>
}else if (presenca === 'ABO'){
presentButton = <View style={styles.groupIcon}>
<View style={[styles.iconBack, styles.iconAllow]} >
<FontAwesomeIcon icon={ faUserTag } size={25} color="#FFF" />
</View>
<Text style={styles.textAbo}>Abonado</Text>
</View>
}else if (presenca === '-') {
presentButton = <View style={styles.groupIcon}>
<View style={[styles.iconBack, styles.iconNeutral]} >
<FontAwesomeIcon icon={ faUser } size={25} color="#FFF" />
</View>
<Text style={styles.textNeutro}>Neutro</Text>
</View>
}else {
presentButton = <View style={styles.groupIcon}>
<View style={styles.iconBack} >
{/* <Icon name="user" size={25} color="#CFCFCF" style="solid" /> */}
<FontAwesomeIcon icon={ faUser } size={25} color="#CFCFCF" />
</View>
</View>
}
return (
<View style={styles.container}>
<Presence isVisible={this.state.showHandlerPresence} filterData={currentDate}
onSave={this.handlerPresence}
onCancel={() => this.setState({ showHandlerPresence: false })} />
<TouchableOpacity style={styles.studentContainer}
onPress={() => this.onFrequencyStudent(frequencia)}>
<View >
<Text style={styles.title}>{frequencia.nome}</Text>
<Text style={styles.mat}>Matrícula: {frequencia.registration} </Text>
<View style={styles.groupFalta}>
<Text style={styles.description}>Faltas Acumuladas</Text>
{frequencia.accAbsences> 25 ? (
<Text style={[styles.perc,styles.textFal]}> {frequencia.accAbsences} </Text>
) : (
<Text style={styles.perc}> {frequencia.accAbsences}</Text>
)}
</View>
</View>
</TouchableOpacity>
<TouchableWithoutFeedback style={styles.infoContainer}
onPress={() => this.showPresence() } >
{presentButton}
</TouchableWithoutFeedback>
</View>
)
}
}