sales.js

//library
import React from 'react';
import axios from 'axios';
import { connect } from 'react-redux';
import { Formik } from 'formik';
import { StyleSheet, Picker, View, Text, Alert, ScrollView, RefreshControl, FlatList } from 'react-native';
import * as Yup from 'yup';
import { Button } from 'react-native-elements';
import moment from 'moment';

//component
import InputForm from '../../components/_inputform';
import TransactionCard from '../../components/_transactioncard';
import TransactionPopup from '../../components/_transactionpopup';
import DatePickerButton from '../../components/_datepickerbutton';
import LoadingIndicator from '../../components/__loadingindicator';
import ConfirmationModal from '../../components/__confirmationmodal';

//states
import { onUpdateDateFrom, onUpdateDateTo } from '../../states/__dateutils';
import { transactionFetch } from '../../states/_transaction';
import { onUpdateOVT, onResetOVT } from '../../states/__utils';
import { onNoSale } from '../../states/_sale';

//selector
import { outletsUserSelector } from '../../states/selector/_outlet';
import { saleStatusSelector, NSCounterSelector } from '../../states/selector/__utils';
import { transactionsByDate } from '../../states/selector/_transaction';
import { OutletVsTransactionSelector } from '../../states/selector/__utils';

//other
import API_URL from '../../url';
import { color, common, utility } from '../../styles/theme';


export const OUTLETS_URL = `${API_URL}/warehouse`;

class SaleConsignment extends React.Component {

  state = {
    modalVisible: false,
    date: moment().format('YYYY-MM-DD'),
    dateTo: moment().format('YYYY-MM-DD'),
    outletName: "",
    is_approved: "",
    dataTransaction: [],
    // dataTransaction: '',
    popupIsOpen: false,
  };

    componentDidMount = () => {
        this.getOutlet()
    }

    //outlet
    handleOutlet = (outletCode) => {
        this.props.updateOVT(outletCode);
    };

    //date sales filtering
    handleFromDate = (dateFrom) => {
        this.props.updateDateFrom(dateFrom);
      };

      handleToDate = (dateTo) => {
        this.props.updateDateTo(dateTo);
      };

    handleModal = () => {
        this.setState({ modalVisible: !this.state.modalVisible });
        console.log('is submit data');

        if(this.state.outletName === ""){
            this.setState({outletName: this.state.outletFrist });
        }

        // if(this.state.is_approved === ""){
        //     this.setState({is_approved: "" });
        // }
    };

  //transaction

  openTransaction = () => {
    this.setState({
      popupIsOpen: true,
    });
  };

  transactionCard = ({ item, index }) => (
    <TransactionCard data={item} id={index} onOpen={this.openTransaction} editData={this.editData} />
  );

  editData = (data) =>{
    console.log('tess')
    console.log(data)
    this.props.navigation.navigate('NewTransaction', {data:data})
  }

  transactionCardItemKey = item => {
    return item.id
  };

  closeTransaction = () => {
    this.setState({
      popupIsOpen: false,
    });
  };

  getOutlet = () => {
    const { user } = this.props;

    axios({
      method: 'post',
      url: OUTLETS_URL,
      headers: {
        Authorization: `Bearer ${user}`,
      },
      data: {
        header: {
          page: 1,
          sort: 'ASC',
        },
        body: {},
      },
    }).then((response) => {
      if (response.data.header.response_code === '99') {
        this.setState({outletFrist: response.data.body[1].kd_gdg_art });
      } else {
        console.log("error" + response.body)
      }
    });
  }

  handleSubmit = () => {

    if(this.state.outletName === ""){
        this.setState({outletName: this.state.outletFrist });
    }

    const { user } = this.props;

    let dataReport = {
      kd_counter: this.state.outletName == '' ? this.state.outletFrist : this.state.outletName,
      start_date:  moment(this.state.date).format('YYYY-MM-DD'),
      end_date:  moment(this.state.dateTo).format('YYYY-MM-DD'),
      is_approved: ""
  };
  axios({
      method: 'post',
      url: API_URL+'/sales/filter',
      headers: {
        Authorization: `Bearer ${user}`,
      },
      data: {
        header: {
            id:0
        },
        body: {
            kd_counter: this.state.outletName == '' ? "" : this.state.outletName,
            start_date:  moment(this.state.date).format('YYYY-MM-DD'),
            end_date:  moment(this.state.dateTo).format('YYYY-MM-DD'),
            is_approved: ""
        }
    },
    }).then((response) => {
      // console.log('cek date response code' + response.data.header.response_code);
    //   console.warn(response)
    //   break;
      if (response.data.header.response_code === '99') {
        console.log("data report");
        console.log(dataReport);
        // console.warn(response.data.header.response_code)

        // console.log('sukses cui add no sales')

        this.setState({
            dataTransaction: response.data.body
        });
        console.warn(this.state.dataTransaction)


        console.log('cek data report outletss');
        console.log(this.state.dataTransaction);
        console.log('get length');

        console.log(this.state.dataTransaction.length);

        Alert.alert("Success", "Success Filtered");
        // console.warn(dataTransaction)
        // this.setState({ modalVisible: !this.state.modalVisible });
      }else{

        this.state.dataTransaction = [];
        Alert.alert("Failed", response.data.header.response_description);
        console.log(response.data.header);
      }
    });
  }

  render() {
    const { dataOutlet, noTransaction } = this.props;
    return (
      // <View style={[utility.containerStart, utility.screenContainer, common.backgroundBase]}>
      <ScrollView
        contentContainerStyle={[
          utility.containerBetween,
          utility.screenContainer,
          common.backgroundBase,
        ]}
      >
        <Formik
          initialValues={{
            transactionNo: noTransaction,
            outletName: [],
            transactionDate: moment(),
            transactionDateTo: moment(),
          }}
          onSubmit={(values) => {
            this.setState({ modalVisible: false });

            setTimeout(() => {
              this.props.navigation.navigate('Main');
            }, 2000);
          }}
          render={({
            values, errors, touched, handleSubmit, setFieldValue, setFieldTouched,
          }) => (
            <React.Fragment>
              <View style={common.formContainer}>
                <View style={common.pickerContainer}>
                    {/* <Picker
                        mode="dialog"
                        selectedValue={selectedOutlet}
                        style={common.pickerContent}
                        onValueChange={itemValue => this.handleOutlet(itemValue)}
                    >
                        <Picker.Item key="" label="CHOOSE OUTLET" value="" />
                        {dataOutlet.map(outlet => (
                            <Picker.Item
                                label={outlet.keterangan}
                                value={outlet.kd_gdg_art}
                                key={outlet.id}
                            />
                        ))}
                    </Picker> */}

                    <Picker
                    mode="dialog"
                    selectedValue={values.outletName}
                    style={common.pickerContent}
                    // prompt="Choose Outlet"
                    onValueChange={(outlet) => {
                      setFieldValue('outletName', outlet);
                      this.setState({outletName: outlet });
                    }}
                  >
                  <Picker.Item label='CHOOSE OUTLET' value='' key=''  />
                    {dataOutlet.map(outlet => (
                      <Picker.Item
                        label={outlet.keterangan}
                        value={outlet.kd_gdg_art}
                        key={outlet.id}
                      />
                    ))}
                  </Picker>
                </View>
                <DatePickerButton
                  label="From"
                  content={moment(values.transactionDate).format('DD MMMM YYYY')}
                  onConfirm={(date) => {
                    setFieldValue('transactionDate', date);
                    this.setState({date: date });
                  }}
                />

                <DatePickerButton
                  label="To"
                  content={moment(values.transactionDateTo).format('DD MMMM YYYY')}
                  onConfirm={(date) => {
                    setFieldValue('transactionDateTo', date);
                    this.setState({dateTo: date });
                  }}
                />

                {/* <View style={common.pickerContainer}>
                  <Picker
                  mode="dialog"
                  selectedValue={values.is_approved}
                  style={common.pickerContent}
                  prompt="Choose Status"
                  onValueChange={(status) => {
                    setFieldValue('is_approved', status)
                    this.setState({is_approved: status})
                  }}
                  >
                    <Picker.Item key="" label='All' value='' />
                    <Picker.Item key="0" label='Open' value='0' />
                    <Picker.Item key="1" label='Approved' value='1' />
                  </Picker>
                </View> */}

                {/* <View style={common.pickerContainer}>
                  <Picker
                    mode="dialog"
                    selectedValue={values.outletName}
                    style={common.pickerContent}
                    prompt="Choose Outlet"
                    onValueChange={(outlet) => {
                      setFieldValue('outletName', outlet);
                      this.setState({outletName: outlet });
                    }}
                  >
                    {dataOutlet.map(outlet => (
                      <Picker.Item
                        label={outlet.keterangan}
                        value={outlet.kd_gdg_art}
                        key={outlet.id}
                      />
                    ))}
                  </Picker>
                </View> */}

                <Button
                    buttonStyle={common.buttonMain}
                    containerStyle={common.buttonBlock}
                    title="Refresh"
                    onPress={this.handleSubmit}
                />
              </View>
            </React.Fragment>
          )}
        />

        {/* <View
          style={{
            borderBottomColor: 'grey',
            borderBottomWidth: 1,
            paddingTop:0
          }}
        /> */}

        {this.state.dataTransaction.length === 0 ? (
            //console.warn(this.state.dataTransaction)
            <Text style={common.textCenter}>Data Not Found</Text>
        ) : (
              <FlatList
                  data={this.state.dataTransaction}
                  renderItem={this.transactionCard}
                  keyExtractor={this.transactionCardItemKey}
                  contentContainerStyle={{ paddingHorizontal: 19 }}
              />
        )}
        {/* <LoadingIndicator isShowing={this.props.transactionStatus} /> */}
        <TransactionPopup isOpen={this.state.popupIsOpen} onClose={this.closeTransaction} />
        <View style={[utility.itemsCenter, styles.buttonBottom]}>
          <Button
            title="Add New Transactions"
            containerStyle={common.buttonFull}
            buttonStyle={common.buttonValid}
            onPress={() => this.props.navigation.navigate('NewTransaction', {data: []})}
          />
        </View>
        </ScrollView>

    );
  }
}


const styles = StyleSheet.create({
  transactionCardContainer: {
    padding: 4,
    paddingHorizontal: 16,
    marginBottom: 8,
    borderRadius: 4,
    justifyContent: 'center',
    backgroundColor: color.colorOff,
  },
  buttonBottom: {
    bottom: 0,
    position: 'absolute',
    width: '100%'
  }
});

const mapStateToProps = state => ({
    transactionStore: state.transactionStore,
    dataOutlet: outletsUserSelector(state),
    //   transactionStatus: saleStatusSelector(state),
    noTransaction: NSCounterSelector(state),
    dataTransaction: transactionsByDate(state),
    selectedOutlet: OutletVsTransactionSelector(state),
    user: state.userStore.userToken,
});

const mapDispatchToProps = dispatch => ({
    onFetch: () => {
        dispatch(transactionFetch());
    },
    updateDateFrom: (dateFrom) => {
        dispatch(onUpdateDateFrom(dateFrom));
    },
    updateDateTo: (dateTo) => {
        dispatch(onUpdateDateTo(dateTo));
    },
    updateOVT: (outletCode) => {
        dispatch(onUpdateOVT(outletCode));
    },
    resetOVT: () => {
        dispatch(onResetOVT());
    },
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(SaleConsignment);