provider.js

import React, { Component } from 'react';
import {
    Button,Badge, Card, CardBody, CardHeader, Col, Pagination, PaginationItem, PaginationLink,
    Row, Table,Modal, ModalBody, ModalFooter, ModalHeader,
    Form,FormGroup,FormText,FormFeedback,Input,
    InputGroup,InputGroupAddon,InputGroupButtonDropdown,InputGroupText,Label, Nav, NavItem, NavLink,TabContent, TabPane
} from 'reactstrap';
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';
import default_image from '../../assets/public/default_user.png'
import loader from '../../assets/img/loading1.gif'
import '../../App.css';
import Helpers from '../../Helpers';
import axios from 'axios';
import qs from 'qs';

let form_data = {};

class Provider extends Component {
    constructor(props){
        super(props);
        this.state = {
            activeTab: new Array(2).fill('1'),
            modal: false,
            edit_modal:false,
            modalArchive:false,
            loading: true,
            providers:[],
            provider_info:[],
            providers_archive:[],
            providers_approved:[],
            form_data:{
                first_name:'',
                last_name:'',
                username:'',
                password:'',
                confirm_password:''
            },
            provider_id:0,
            comp_name:'',
            reason:'',
            status:0,
            response:'',
            msg:'',
            type:'',
        }
        this.toggle = this.toggle.bind(this);
        this.view_modal = this.view_modal.bind(this);
        this.edit_modal = this.edit_modal.bind(this);
        this.view_modal2 = this.view_modal2.bind(this);
        this.updateProvider = this.updateProvider.bind(this);
        this.handleChanges = this.handleChanges.bind(this);
        this.handleChange = this.handleChange.bind(this);
    }

    componentDidMount(){
        this.getAllUsers();
        this.getApprovedUsers();
        this.getArchiveUsers();
    }

    toggle(tabPane, tab) {
       const newArray = this.state.activeTab.slice()
       newArray[tabPane] = tab
       this.setState({
          activeTab: newArray,
       });
      }

    tabPane() {
       return (
          <>
           <TabPane tabId="1">
              {this.togglePages(1)}
           </TabPane>
           <TabPane tabId="2">
              {this.togglePages(2)}
           </TabPane>
           <TabPane tabId="3">
              {this.togglePages(3)}
           </TabPane>
          </>
       );
      }


    edit_modal() {
        this.setState({
            edit_modal: !this.state.edit_modal,
        });
    }

    view_modal() {
      const self = this;
      self.setState({
          modal: !self.state.modal,
      });
    }

    view_modal2() {
      const self = this;
      self.setState({
          modalArchive: !self.state.modalArchive,
      });
    }

    handleChanges(e){
      if (e.target.name === 'status') {
         this.setState({
            reason:'',
            status:0,
         });
      }
        this.setState({[e.target.name]:e.target.value});
    }

    handleChange(event) {
      this.setState({status: event.target.value});
    }

    getAllUsers(){
        const self = this;
        axios.post(Helpers.base_url+'provider').then(res => {
            const providers = res.data.providers;
            self.setState({providers});
            self.setState({loading: false});
        });
    }

    getArchiveUsers(){
        const self = this;
        axios.post(Helpers.base_url+'provider/get_archive').then(res => {
            const providers_archive = res.data.providers;
            self.setState({providers_archive:providers_archive});
        });
    }

    getApprovedUsers(){
        const self = this;
        axios.post(Helpers.base_url+'provider/get_approved').then(res => {
            const providers_approved = res.data.providers;
            self.setState({providers_approved:providers_approved});
        });
    }

    updateProvider(e){
        e.preventDefault();
        const self = this;
        const form_data = {
            status:this.state.status,
            reason:this.state.reason,
            provider_id:this.state.provider_id,
            staff_id:localStorage.getItem('user_id')
        }
        axios.post(Helpers.base_url+'provider/update_provider',qs.stringify(form_data)).then(res => {
            self.edit_modal();
            self.getAllUsers();
            self.getArchiveUsers();
        });
    }

    getProvider(id){
        const self = this;
        axios.get(Helpers.base_url+'provider/get_user/'+id).then(res => {
            const provider_info = res.data.providers;
            self.setState({provider_info});
            self.setState({
                modal: !self.state.modal,
            });
        });
    }

    getProvider2(id){
        const self = this;
        axios.get(Helpers.base_url+'provider/get_user/'+id).then(res => {
            const provider_id = id;
            const comp_name = res.data.providers[0].company_name;
            self.setState({comp_name,provider_id});
            self.setState({
                edit_modal: !self.state.edit_modal,
            });
            self.setState({
               reason:'',
               status:1,
            });
        });
    }

    getProviderInfo(id){
        const self = this;
        axios.get(Helpers.base_url+'provider/get_archive_provider/'+id).then(res => {
            const provider_info = res.data.providers;
            self.setState({provider_info});
            self.setState({
                modalArchive: !self.state.modalArchive,
            });
        });
    }

    displayResponse(){
        return (
            <Row>
                <Col xs="12" sm="12" md="12">
                    <div className={"alert alert-"+this.state.type}>{ReactHtmlParser(this.state.msg)}</div>
                </Col>
            </Row>
        )
    }

    togglePages(pageName) {

      if(pageName === 1){
         const all_users = this.state.providers.map(provider => {
             return (
                <tr key={provider.provider_id}>
                     <td>{provider.company_name}</td>
                     <td>{ReactHtmlParser("Telephone # : "+ provider.phone_number +'<br/>'+ "Mobile Number: " + provider.mobile_number)}</td>
                     <td>{provider.date_created}</td>
                     <td style={{width:'6%',textAlign:'center'}}>
                     <div className="btn-group">
                        <a href={"http://localhost:3003/providerprofile?"+provider.provider_id} target="_blank" className="list-a"><i className="icon-eye"></i></a>
                         <Button color="warning" size="sm" onClick={() => this.getProvider2(provider.provider_id)}><i className="icon-note"></i></Button>
                     </div>
                     </td>
                </tr>
             )
         });

          return (
             <Row>
                 <Col>
                     <Card>
                         <CardHeader>
                             <i className="fa fa-users"></i> Provider
                         </CardHeader>
                         <CardBody>
                             <Row>
                                 <Col>
                                     <Modal isOpen={this.state.edit_modal} toggle={this.edit_modal} className={this.props.className}>
                                        <Form onSubmit={this.updateProvider} className="form-horizontal">
                                          <ModalHeader toggle={this.edit_modal}>Update Provider</ModalHeader>
                                          <ModalBody>
                                              <Row>
                                                  <Col xs="12" sm="12">
                                                     <FormGroup>
                                                      <Label htmlFor="status">Company Name:</Label>
                                                        <InputGroup>
                                                        <InputGroupAddon addonType="prepend">
                                                           <InputGroupText><i className="fa fa-globe"></i></InputGroupText>
                                                        </InputGroupAddon>
                                                        <Input type="text" id="username1" name="username1" value={this.state.comp_name} autoComplete="name" disabled />
                                                       </InputGroup>
                                                     </FormGroup>
                                                      <FormGroup>
                                                          <Label htmlFor="status">Status:</Label>
                                                          <Input type="select" name="status" id="status" onChange = {this.handleChanges}>
                                                            <option value="1">Approve</option>
                                                            <option value="2">Disapprove</option>
                                                          </Input>
                                                      </FormGroup>
                                                      <FormGroup style={this.state.status == 2 ? {} : { display: 'none' }}>
                                                          <Label htmlFor="reason">Reason:</Label>
                                                          <Input type="textarea" name="reason" id="reason" rows="9" value={this.state.reason} onChange={this.handleChanges} placeholder="Content..." />
                                                      </FormGroup>
                                                  </Col>
                                              </Row>
                                          </ModalBody>
                                          <ModalFooter>
                                              <Button type="submit" color="primary">Save changes</Button>
                                              <Button color="secondary" color="danger" onClick={this.edit_modal}>Close</Button>
                                          </ModalFooter>
                                         </Form>
                                       </Modal>
                                 </Col>
                             </Row>
                             <Table hover bordered striped responsive size="sm">
                                 <thead>
                                     <tr>
                                         <th>Company Name</th>
                                         <th>Contact #</th>
                                         <th>Date Applied</th>
                                         <th style={{textAlign:'center'}}>Action</th>
                                     </tr>
                                 </thead>
                                 <tbody>
                                     <tr className="text-center" style={this.state.loading === true? {} : { display: 'none' }}>
                                         <td colspan="6"><img src={loader} alt="loader"/></td>
                                     </tr>
                                     <tr className="text-center" style={this.state.providers.length != 0 ? { display: 'none' } : { }}>
                                         <td colspan="6">No data found</td>
                                     </tr>
                                     {all_users}
                                 </tbody>
                             </Table>
                         </CardBody>
                     </Card>
                 </Col>
             </Row>)
      }if(pageName === 2){
         const all_users = this.state.providers_approved.map(provider => {
             return (
                <tr key={provider.provider_id}>
                     <td>{provider.company_name}</td>
                     <td>{ReactHtmlParser("Telephone # : "+ provider.phone_number +'<br/>'+ "Mobile Number: " + provider.mobile_number)}</td>
                     <td>{provider.date_updated}</td>
                     <td style={{width:'6%',textAlign:'center'}}>
                     <div className="btn-group">
                        <a href={"http://localhost:3003/providerprofile?"+provider.provider_id} target="_blank" className="list-a"><i className="icon-eye"></i></a>
                     </div>
                     </td>
                </tr>
             )
         });

          return (
             <Row>
                 <Col>
                     <Card>
                         <CardHeader>
                             <i className="fa fa-users"></i> Provider
                         </CardHeader>
                         <CardBody>
                             <Table hover bordered striped responsive size="sm">
                                 <thead>
                                     <tr>
                                         <th>Company Name</th>
                                         <th>Contact #</th>
                                         <th>Date Updated</th>
                                         <th style={{textAlign:'center'}}>Action</th>
                                     </tr>
                                 </thead>
                                 <tbody>
                                     <tr className="text-center" style={this.state.loading === true? {} : { display: 'none' }}>
                                         <td colspan="6"><img src={loader} alt="loader"/></td>
                                     </tr>
                                     <tr className="text-center" style={this.state.providers_approved.length != 0 ? { display: 'none' } : { }}>
                                         <td colspan="6">No data found</td>
                                     </tr>
                                     {all_users}
                                 </tbody>
                             </Table>
                         </CardBody>
                     </Card>
                 </Col>
             </Row>)
      }else if (pageName === 3) {
          const all_users = this.state.providers_archive.map(provider => {
              return (
                 <tr key={provider.provider_id}>
                      <td>{provider.company_name}</td>
                      <td>{ReactHtmlParser("Telephone # : "+ provider.phone_number +'<br/>'+ "Mobile Number: " + provider.mobile_number)}</td>
                      <td>{provider.date_updated}</td>
                      <td style={{width:'6%',textAlign:'center'}}>
                      <div className="btn-group">
                          <Button color="primary" size="sm" onClick={() => this.getProviderInfo(provider.provider_id)}><i className="icon-eye"></i></Button>
                      </div>
                      </td>
                 </tr>
              )
          });

          const provider_info = this.state.provider_info.map(provider =>{
              return (
                 <Form className="form-horizontal">
                   <ModalHeader toggle={this.view_modal2}>Provider's Information</ModalHeader>
                   <ModalBody>
                       <Row>
                           <Col xs="12" sm="12">
                              <FormGroup>
                                  <div className="profile">
                                    <img src={default_image} className="profile_picture" alt="default_image"/>
                                  </div>
                              </FormGroup>
                              <FormGroup>
                                  <Label htmlFor="comp_name">Company Name: </Label>
                                  <Input type="text" id="comp_name" value={provider.company_name} name="comp_name" disabled/>
                              </FormGroup>
                              <FormGroup>
                                  <Label htmlFor="comp_office">Disapproved By: </Label>
                                  <Input type="text" id="comp_office" value={provider.username} name="comp_office" disabled/>
                              </FormGroup>
                              <FormGroup>
                                  <Label htmlFor="comp_email">Date disapproved: </Label>
                                  <Input type="text" id="comp_email" value={provider.date_updated} name="comp_email" disabled/>
                              </FormGroup>
                              <FormGroup>
                                  <Label htmlFor="comp_email">Reason: </Label>
                                  <Input type="text" id="comp_email" value={provider.note} name="comp_email" disabled/>
                              </FormGroup>
                           </Col>
                       </Row>
                   </ModalBody>
                   <ModalFooter>
                       <Button color="secondary" color="danger" onClick={this.view_modal2}>Close</Button>
                   </ModalFooter>
               </Form>
              )
          });

           return (
              <Row>
                  <Col>
                      <Card>
                          <CardHeader>
                              <i className="fa fa-users"></i> Provider
                          </CardHeader>
                          <CardBody>
                          <Modal isOpen={this.state.modalArchive} toggle={this.view_modal2} className={'modal-lg '+ this.props.className}>
                          {provider_info}
                          </Modal>
                              <Table hover bordered striped responsive size="sm">
                                  <thead>
                                      <tr>
                                          <th>Company Name</th>
                                          <th>Contact #</th>
                                          <th>Date Updated</th>
                                          <th style={{textAlign:'center'}}>Action</th>
                                      </tr>
                                  </thead>
                                  <tbody>
                                      <tr className="text-center" style={this.state.providers_archive.length != 0 ? { display: 'none' } : { }}>
                                          <td colspan="6">No data found</td>
                                      </tr>
                                      {all_users}
                                  </tbody>
                              </Table>
                          </CardBody>
                      </Card>
                  </Col>
              </Row>)
      }

    }

    render() {
        return (
            <div className="animated fadeIn">
               <Row>
                   <Col className="mb-4">
                     <Nav tabs>
                       <NavItem>
                         <NavLink
                           active={this.state.activeTab[0] === '1'}
                           onClick={() => { this.toggle(0, '1'); }}>
                           Pending
                         </NavLink>
                       </NavItem>
                       <NavItem>
                         <NavLink
                           active={this.state.activeTab[0] === '2'}
                           onClick={() => { this.toggle(0, '2'); }}>
                           Approved
                         </NavLink>
                       </NavItem>
                       <NavItem>
                         <NavLink
                           active={this.state.activeTab[0] === '3'}
                           onClick={() => { this.toggle(0, '3'); }}>
                           Archive
                         </NavLink>
                       </NavItem>
                     </Nav>
                     <TabContent activeTab={this.state.activeTab[0]}>
                       {this.tabPane()}
                     </TabContent>
                   </Col>
               </Row>
            </div>

        );
    }
}

export default Provider;