csa-react-60/src/screens/repair/RepairHistory.js

import React,{Component} from 'react'

import {
	TouchableOpacity,
    TextInput,
    StyleSheet,
    View,
    ScrollView,
    Alert,
    Image,
    FlatList,
    ImageBackground,
    RefreshControl
} from 'react-native'
import Icon from "../../components/Icon";
import {  Button, Card, Body, Badge, ListItem, Left, Right,CheckBox, } from 'native-base'
import { BackgroundImage } from '../../components/BackgroundImage'
import Text from '../../components/Text';
import LinearGradient from 'react-native-linear-gradient';
import Color from '../../color';
import GetWidthHeightDevice from '../../components/GetWidthHeightDevice'
import {getRepairList} from '../../api/UserApi';
import IndicatorLoading from '../../components/IndicatorLoading';
import { t } from '../../utils/i18n'
import moment from "moment";
import {connect} from "react-redux";


class RepairHistory extends Component {

	constructor(props) {
    super(props)
    this.state = {
      isLoading: false,
      history_list:[]
    }
    this.onRefresh = this.onRefresh.bind(this)
    this.convertStatus = this.convertStatus.bind(this)
    this.convertColorStatus = this.convertColorStatus.bind(this)
  }

  componentDidMount = () => {
    this.getRepairHistoryList()
  };

  getRepairHistoryList(){
    this.setState({
      isLoading: true
    }, () => {
      let project_id = this.props.user && this.props.user.project_id;
      getRepairList(project_id)
        .then(res => {
          if(res.ok){
            console.log('check data response ----------> ',res.data.data);
            this.setState({
              history_list: res.data.data,
            })
          }
        }).finally(() => {
        this.setState({
          isLoading: false
        })
      })
    })
  }

  convertStatus(statusName){
    switch(statusName){
      case '1':
        return 'รอซ่อม'
      case '2':
        return 'กำลังซ่อม'
      case 'NewAppointment':
        return 'นัดหมายใหม่'
      case '4':
        return t('cancel')
      case '3':
        return 'เสร็จสิ้น'
      default:
        return t('request_repair')
    }
  }

  convertColorStatus(statusCode){
    switch(statusCode){
      case '1': //รอซ่อม
        return '#FF9500'
      case '2': //กำลังซ่อม
        return '#007AFF'
        // return '#FFCC00'
      case 'NewAppointment':
        return '#145EB3'
      case '4': //ยกเลิก
        return '#666666'
      case '3': //เสร็จสิ้น
        return '#2C7C0B'
      default:
        return '#C4C4C4'
    }
  }

  renderItem = (item) => {
    return <TouchableOpacity style={{ borderBottomColor: '#00000040', borderBottomWidth: 1, backgroundColor: 'white' }}
              onPress={() => {this.props.navigation.navigate('RepairHistoryDetail',{
                repair_id:item.id,
                project_id: this.props.user && this.props.user.project_id,
                getRepairHistoryList: () => {this.getRepairHistoryList()}
              })}}>
      <View style={{height: 104,justifyContent:'center',paddingHorizontal:16}}>
        <View style={{flexDirection:'row',justifyContent:'space-between'}}>
          <Text style={{color: Color.green_title, fontSize: 16,}}>{t('room')} {item.room_sap_code}</Text>
          <View style={{flexDirection:'row',alignItems:'center'}}>
            <View style={{height: 10,width: 10,borderRadius: 5,backgroundColor:this.convertColorStatus(item.status)}}/>
            <Text style={{marginLeft:10, fontSize:14, color:this.convertColorStatus(item.status)}}>{this.convertStatus(item.status)}</Text>
          </View>
        </View>
        <View style={{flexDirection:'row',justifyContent:'space-between',marginVertical:5}}>
          <Text style={{fontSize:14}}>{item.name}</Text>
          <Text style={{fontSize:14}}>#{item.code}</Text>
        </View>
        <View style={{flexDirection:'row',justifyContent:'space-between'}}>
          <View style={{flexDirection:'row',alignItems:'center'}}>
            <Icon name="ic_calendar_alt" size={14} color="#00000080" />
            <Text style={{marginLeft: 10, fontSize:12}}>
              { item.date ? item.date : item.status_name }
            </Text>
          </View>
          <Text style={{color: '#145EB3', fontSize: 12}}>{item.status === 'Success' && item.points ? item.points + ' คะแนน' : ''}</Text>
        </View>
      </View>
    </TouchableOpacity>
  }

  onRefresh(){
    this.getRepairHistoryList()
  }

  _keyExtractor = (item, index) => 'history_'+index

  render() {
    return (
      <ImageBackground source={require('../../../assets/images/tree2.png')} style={{width: '100%', height: '100%', backgroundColor:'#EEFFD7'}}>
        <FlatList
          refreshControl={
            <RefreshControl
              refreshing={this.state.isLoading}
              onRefresh={this.onRefresh}
            />
          }
          data={this.state.history_list}
          renderItem={({ item }) => this.renderItem(item)}
          pagingEnabled={true}
          extraData={this.state}
          style={{backgroundColor:'#EEFFD7'}}
          keyExtractor={this._keyExtractor}
          ListEmptyComponent={() => (
            <View style={{height:64,margin:16,alignItems:'center',justifyContent:'center',backgroundColor:'white',borderRadius:5}}>
              <Text style={{color:'black'}}>{t('no_repair_history')}</Text>
            </View>
          )}
        />
        <IndicatorLoading loadingVisible={this.state.isLoading}/>
      </ImageBackground>
    )
  }
}

const mapStateToProps = state => {
  return {
    user: state.app.user
  }
}

export default connect(mapStateToProps)(RepairHistory)