SHARE
TWEET

provider.js

a guest Aug 13th, 2019 176 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import {
  3.     Button,Badge, Card, CardBody, CardHeader, Col, Pagination, PaginationItem, PaginationLink,
  4.     Row, Table,Modal, ModalBody, ModalFooter, ModalHeader,
  5.     Form,FormGroup,FormText,FormFeedback,Input,
  6.     InputGroup,InputGroupAddon,InputGroupButtonDropdown,InputGroupText,Label, Nav, NavItem, NavLink,TabContent, TabPane
  7. } from 'reactstrap';
  8. import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';
  9. import default_image from '../../assets/public/default_user.png'
  10. import loader from '../../assets/img/loading1.gif'
  11. import '../../App.css';
  12. import Helpers from '../../Helpers';
  13. import axios from 'axios';
  14. import qs from 'qs';
  15.  
  16. let form_data = {};
  17.  
  18. class Provider extends Component {
  19.     constructor(props){
  20.         super(props);
  21.         this.state = {
  22.             activeTab: new Array(2).fill('1'),
  23.             modal: false,
  24.             edit_modal:false,
  25.             modalArchive:false,
  26.             loading: true,
  27.             providers:[],
  28.             provider_info:[],
  29.             providers_archive:[],
  30.             providers_approved:[],
  31.             form_data:{
  32.                 first_name:'',
  33.                 last_name:'',
  34.                 username:'',
  35.                 password:'',
  36.                 confirm_password:''
  37.             },
  38.             provider_id:0,
  39.             comp_name:'',
  40.             reason:'',
  41.             status:0,
  42.             response:'',
  43.             msg:'',
  44.             type:'',
  45.         }
  46.         this.toggle = this.toggle.bind(this);
  47.         this.view_modal = this.view_modal.bind(this);
  48.         this.edit_modal = this.edit_modal.bind(this);
  49.         this.view_modal2 = this.view_modal2.bind(this);
  50.         this.updateProvider = this.updateProvider.bind(this);
  51.         this.handleChanges = this.handleChanges.bind(this);
  52.         this.handleChange = this.handleChange.bind(this);
  53.     }
  54.  
  55.     componentDidMount(){
  56.         this.getAllUsers();
  57.         this.getApprovedUsers();
  58.         this.getArchiveUsers();
  59.     }
  60.  
  61.     toggle(tabPane, tab) {
  62.        const newArray = this.state.activeTab.slice()
  63.        newArray[tabPane] = tab
  64.        this.setState({
  65.           activeTab: newArray,
  66.        });
  67.       }
  68.  
  69.     tabPane() {
  70.        return (
  71.           <>
  72.            <TabPane tabId="1">
  73.               {this.togglePages(1)}
  74.            </TabPane>
  75.            <TabPane tabId="2">
  76.               {this.togglePages(2)}
  77.            </TabPane>
  78.            <TabPane tabId="3">
  79.               {this.togglePages(3)}
  80.            </TabPane>
  81.           </>
  82.        );
  83.       }
  84.  
  85.  
  86.     edit_modal() {
  87.         this.setState({
  88.             edit_modal: !this.state.edit_modal,
  89.         });
  90.     }
  91.  
  92.     view_modal() {
  93.       const self = this;
  94.       self.setState({
  95.           modal: !self.state.modal,
  96.       });
  97.     }
  98.  
  99.     view_modal2() {
  100.       const self = this;
  101.       self.setState({
  102.           modalArchive: !self.state.modalArchive,
  103.       });
  104.     }
  105.  
  106.     handleChanges(e){
  107.       if (e.target.name === 'status') {
  108.          this.setState({
  109.             reason:'',
  110.             status:0,
  111.          });
  112.       }
  113.         this.setState({[e.target.name]:e.target.value});
  114.     }
  115.  
  116.     handleChange(event) {
  117.       this.setState({status: event.target.value});
  118.     }
  119.  
  120.     getAllUsers(){
  121.         const self = this;
  122.         axios.post(Helpers.base_url+'provider').then(res => {
  123.             const providers = res.data.providers;
  124.             self.setState({providers});
  125.             self.setState({loading: false});
  126.         });
  127.     }
  128.  
  129.     getArchiveUsers(){
  130.         const self = this;
  131.         axios.post(Helpers.base_url+'provider/get_archive').then(res => {
  132.             const providers_archive = res.data.providers;
  133.             self.setState({providers_archive:providers_archive});
  134.         });
  135.     }
  136.  
  137.     getApprovedUsers(){
  138.         const self = this;
  139.         axios.post(Helpers.base_url+'provider/get_approved').then(res => {
  140.             const providers_approved = res.data.providers;
  141.             self.setState({providers_approved:providers_approved});
  142.         });
  143.     }
  144.  
  145.     updateProvider(e){
  146.         e.preventDefault();
  147.         const self = this;
  148.         const form_data = {
  149.             status:this.state.status,
  150.             reason:this.state.reason,
  151.             provider_id:this.state.provider_id,
  152.             staff_id:localStorage.getItem('user_id')
  153.         }
  154.         axios.post(Helpers.base_url+'provider/update_provider',qs.stringify(form_data)).then(res => {
  155.             self.edit_modal();
  156.             self.getAllUsers();
  157.             self.getArchiveUsers();
  158.         });
  159.     }
  160.  
  161.     getProvider(id){
  162.         const self = this;
  163.         axios.get(Helpers.base_url+'provider/get_user/'+id).then(res => {
  164.             const provider_info = res.data.providers;
  165.             self.setState({provider_info});
  166.             self.setState({
  167.                 modal: !self.state.modal,
  168.             });
  169.         });
  170.     }
  171.  
  172.     getProvider2(id){
  173.         const self = this;
  174.         axios.get(Helpers.base_url+'provider/get_user/'+id).then(res => {
  175.             const provider_id = id;
  176.             const comp_name = res.data.providers[0].company_name;
  177.             self.setState({comp_name,provider_id});
  178.             self.setState({
  179.                 edit_modal: !self.state.edit_modal,
  180.             });
  181.             self.setState({
  182.                reason:'',
  183.                status:1,
  184.             });
  185.         });
  186.     }
  187.  
  188.     getProviderInfo(id){
  189.         const self = this;
  190.         axios.get(Helpers.base_url+'provider/get_archive_provider/'+id).then(res => {
  191.             const provider_info = res.data.providers;
  192.             self.setState({provider_info});
  193.             self.setState({
  194.                 modalArchive: !self.state.modalArchive,
  195.             });
  196.         });
  197.     }
  198.  
  199.     displayResponse(){
  200.         return (
  201.             <Row>
  202.                 <Col xs="12" sm="12" md="12">
  203.                     <div className={"alert alert-"+this.state.type}>{ReactHtmlParser(this.state.msg)}</div>
  204.                 </Col>
  205.             </Row>
  206.         )
  207.     }
  208.  
  209.     togglePages(pageName) {
  210.  
  211.       if(pageName === 1){
  212.          const all_users = this.state.providers.map(provider => {
  213.              return (
  214.                 <tr key={provider.provider_id}>
  215.                      <td>{provider.company_name}</td>
  216.                      <td>{ReactHtmlParser("Telephone # : "+ provider.phone_number +'<br/>'+ "Mobile Number: " + provider.mobile_number)}</td>
  217.                      <td>{provider.date_created}</td>
  218.                      <td style={{width:'6%',textAlign:'center'}}>
  219.                      <div className="btn-group">
  220.                         <a href={"http://localhost:3003/providerprofile?"+provider.provider_id} target="_blank" className="list-a"><i className="icon-eye"></i></a>
  221.                          <Button color="warning" size="sm" onClick={() => this.getProvider2(provider.provider_id)}><i className="icon-note"></i></Button>
  222.                      </div>
  223.                      </td>
  224.                 </tr>
  225.              )
  226.          });
  227.  
  228.           return (
  229.              <Row>
  230.                  <Col>
  231.                      <Card>
  232.                          <CardHeader>
  233.                              <i className="fa fa-users"></i> Provider
  234.                          </CardHeader>
  235.                          <CardBody>
  236.                              <Row>
  237.                                  <Col>
  238.                                      <Modal isOpen={this.state.edit_modal} toggle={this.edit_modal} className={this.props.className}>
  239.                                         <Form onSubmit={this.updateProvider} className="form-horizontal">
  240.                                           <ModalHeader toggle={this.edit_modal}>Update Provider</ModalHeader>
  241.                                           <ModalBody>
  242.                                               <Row>
  243.                                                   <Col xs="12" sm="12">
  244.                                                      <FormGroup>
  245.                                                       <Label htmlFor="status">Company Name:</Label>
  246.                                                         <InputGroup>
  247.                                                         <InputGroupAddon addonType="prepend">
  248.                                                            <InputGroupText><i className="fa fa-globe"></i></InputGroupText>
  249.                                                         </InputGroupAddon>
  250.                                                         <Input type="text" id="username1" name="username1" value={this.state.comp_name} autoComplete="name" disabled />
  251.                                                        </InputGroup>
  252.                                                      </FormGroup>
  253.                                                       <FormGroup>
  254.                                                           <Label htmlFor="status">Status:</Label>
  255.                                                           <Input type="select" name="status" id="status" onChange = {this.handleChanges}>
  256.                                                             <option value="1">Approve</option>
  257.                                                             <option value="2">Disapprove</option>
  258.                                                           </Input>
  259.                                                       </FormGroup>
  260.                                                       <FormGroup style={this.state.status == 2 ? {} : { display: 'none' }}>
  261.                                                           <Label htmlFor="reason">Reason:</Label>
  262.                                                           <Input type="textarea" name="reason" id="reason" rows="9" value={this.state.reason} onChange={this.handleChanges} placeholder="Content..." />
  263.                                                       </FormGroup>
  264.                                                   </Col>
  265.                                               </Row>
  266.                                           </ModalBody>
  267.                                           <ModalFooter>
  268.                                               <Button type="submit" color="primary">Save changes</Button>
  269.                                               <Button color="secondary" color="danger" onClick={this.edit_modal}>Close</Button>
  270.                                           </ModalFooter>
  271.                                          </Form>
  272.                                        </Modal>
  273.                                  </Col>
  274.                              </Row>
  275.                              <Table hover bordered striped responsive size="sm">
  276.                                  <thead>
  277.                                      <tr>
  278.                                          <th>Company Name</th>
  279.                                          <th>Contact #</th>
  280.                                          <th>Date Applied</th>
  281.                                          <th style={{textAlign:'center'}}>Action</th>
  282.                                      </tr>
  283.                                  </thead>
  284.                                  <tbody>
  285.                                      <tr className="text-center" style={this.state.loading === true? {} : { display: 'none' }}>
  286.                                          <td colspan="6"><img src={loader} alt="loader"/></td>
  287.                                      </tr>
  288.                                      <tr className="text-center" style={this.state.providers.length != 0 ? { display: 'none' } : { }}>
  289.                                          <td colspan="6">No data found</td>
  290.                                      </tr>
  291.                                      {all_users}
  292.                                  </tbody>
  293.                              </Table>
  294.                          </CardBody>
  295.                      </Card>
  296.                  </Col>
  297.              </Row>)
  298.       }if(pageName === 2){
  299.          const all_users = this.state.providers_approved.map(provider => {
  300.              return (
  301.                 <tr key={provider.provider_id}>
  302.                      <td>{provider.company_name}</td>
  303.                      <td>{ReactHtmlParser("Telephone # : "+ provider.phone_number +'<br/>'+ "Mobile Number: " + provider.mobile_number)}</td>
  304.                      <td>{provider.date_updated}</td>
  305.                      <td style={{width:'6%',textAlign:'center'}}>
  306.                      <div className="btn-group">
  307.                         <a href={"http://localhost:3003/providerprofile?"+provider.provider_id} target="_blank" className="list-a"><i className="icon-eye"></i></a>
  308.                      </div>
  309.                      </td>
  310.                 </tr>
  311.              )
  312.          });
  313.  
  314.           return (
  315.              <Row>
  316.                  <Col>
  317.                      <Card>
  318.                          <CardHeader>
  319.                              <i className="fa fa-users"></i> Provider
  320.                          </CardHeader>
  321.                          <CardBody>
  322.                              <Table hover bordered striped responsive size="sm">
  323.                                  <thead>
  324.                                      <tr>
  325.                                          <th>Company Name</th>
  326.                                          <th>Contact #</th>
  327.                                          <th>Date Updated</th>
  328.                                          <th style={{textAlign:'center'}}>Action</th>
  329.                                      </tr>
  330.                                  </thead>
  331.                                  <tbody>
  332.                                      <tr className="text-center" style={this.state.loading === true? {} : { display: 'none' }}>
  333.                                          <td colspan="6"><img src={loader} alt="loader"/></td>
  334.                                      </tr>
  335.                                      <tr className="text-center" style={this.state.providers_approved.length != 0 ? { display: 'none' } : { }}>
  336.                                          <td colspan="6">No data found</td>
  337.                                      </tr>
  338.                                      {all_users}
  339.                                  </tbody>
  340.                              </Table>
  341.                          </CardBody>
  342.                      </Card>
  343.                  </Col>
  344.              </Row>)
  345.       }else if (pageName === 3) {
  346.           const all_users = this.state.providers_archive.map(provider => {
  347.               return (
  348.                  <tr key={provider.provider_id}>
  349.                       <td>{provider.company_name}</td>
  350.                       <td>{ReactHtmlParser("Telephone # : "+ provider.phone_number +'<br/>'+ "Mobile Number: " + provider.mobile_number)}</td>
  351.                       <td>{provider.date_updated}</td>
  352.                       <td style={{width:'6%',textAlign:'center'}}>
  353.                       <div className="btn-group">
  354.                           <Button color="primary" size="sm" onClick={() => this.getProviderInfo(provider.provider_id)}><i className="icon-eye"></i></Button>
  355.                       </div>
  356.                       </td>
  357.                  </tr>
  358.               )
  359.           });
  360.  
  361.           const provider_info = this.state.provider_info.map(provider =>{
  362.               return (
  363.                  <Form className="form-horizontal">
  364.                    <ModalHeader toggle={this.view_modal2}>Provider's Information</ModalHeader>
  365.                    <ModalBody>
  366.                        <Row>
  367.                            <Col xs="12" sm="12">
  368.                               <FormGroup>
  369.                                   <div className="profile">
  370.                                     <img src={default_image} className="profile_picture" alt="default_image"/>
  371.                                   </div>
  372.                               </FormGroup>
  373.                               <FormGroup>
  374.                                   <Label htmlFor="comp_name">Company Name: </Label>
  375.                                   <Input type="text" id="comp_name" value={provider.company_name} name="comp_name" disabled/>
  376.                               </FormGroup>
  377.                               <FormGroup>
  378.                                   <Label htmlFor="comp_office">Disapproved By: </Label>
  379.                                   <Input type="text" id="comp_office" value={provider.username} name="comp_office" disabled/>
  380.                               </FormGroup>
  381.                               <FormGroup>
  382.                                   <Label htmlFor="comp_email">Date disapproved: </Label>
  383.                                   <Input type="text" id="comp_email" value={provider.date_updated} name="comp_email" disabled/>
  384.                               </FormGroup>
  385.                               <FormGroup>
  386.                                   <Label htmlFor="comp_email">Reason: </Label>
  387.                                   <Input type="text" id="comp_email" value={provider.note} name="comp_email" disabled/>
  388.                               </FormGroup>
  389.                            </Col>
  390.                        </Row>
  391.                    </ModalBody>
  392.                    <ModalFooter>
  393.                        <Button color="secondary" color="danger" onClick={this.view_modal2}>Close</Button>
  394.                    </ModalFooter>
  395.                </Form>
  396.               )
  397.           });
  398.  
  399.            return (
  400.               <Row>
  401.                   <Col>
  402.                       <Card>
  403.                           <CardHeader>
  404.                               <i className="fa fa-users"></i> Provider
  405.                           </CardHeader>
  406.                           <CardBody>
  407.                           <Modal isOpen={this.state.modalArchive} toggle={this.view_modal2} className={'modal-lg '+ this.props.className}>
  408.                           {provider_info}
  409.                           </Modal>
  410.                               <Table hover bordered striped responsive size="sm">
  411.                                   <thead>
  412.                                       <tr>
  413.                                           <th>Company Name</th>
  414.                                           <th>Contact #</th>
  415.                                           <th>Date Updated</th>
  416.                                           <th style={{textAlign:'center'}}>Action</th>
  417.                                       </tr>
  418.                                   </thead>
  419.                                   <tbody>
  420.                                       <tr className="text-center" style={this.state.providers_archive.length != 0 ? { display: 'none' } : { }}>
  421.                                           <td colspan="6">No data found</td>
  422.                                       </tr>
  423.                                       {all_users}
  424.                                   </tbody>
  425.                               </Table>
  426.                           </CardBody>
  427.                       </Card>
  428.                   </Col>
  429.               </Row>)
  430.       }
  431.  
  432.     }
  433.  
  434.     render() {
  435.         return (
  436.             <div className="animated fadeIn">
  437.                <Row>
  438.                    <Col className="mb-4">
  439.                      <Nav tabs>
  440.                        <NavItem>
  441.                          <NavLink
  442.                            active={this.state.activeTab[0] === '1'}
  443.                            onClick={() => { this.toggle(0, '1'); }}>
  444.                            Pending
  445.                          </NavLink>
  446.                        </NavItem>
  447.                        <NavItem>
  448.                          <NavLink
  449.                            active={this.state.activeTab[0] === '2'}
  450.                            onClick={() => { this.toggle(0, '2'); }}>
  451.                            Approved
  452.                          </NavLink>
  453.                        </NavItem>
  454.                        <NavItem>
  455.                          <NavLink
  456.                            active={this.state.activeTab[0] === '3'}
  457.                            onClick={() => { this.toggle(0, '3'); }}>
  458.                            Archive
  459.                          </NavLink>
  460.                        </NavItem>
  461.                      </Nav>
  462.                      <TabContent activeTab={this.state.activeTab[0]}>
  463.                        {this.tabPane()}
  464.                      </TabContent>
  465.                    </Col>
  466.                </Row>
  467.             </div>
  468.  
  469.         );
  470.     }
  471. }
  472.  
  473. export default Provider;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top