SHARE
TWEET

Untitled

a guest Jun 16th, 2019 55 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component, Fragment } from 'react';
  2. import { Container, Row, Modal, ModalHeader, ModalBody, ModalFooter, Button, Form, FormGroup, Label, Input } from 'reactstrap';
  3. import Header from "../components/Header"
  4. import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  5. import { faEdit, faTrash, faPlus } from '@fortawesome/free-solid-svg-icons';
  6. import { Table } from 'antd';
  7. import 'antd/dist/antd.css';
  8. import "./admin.css"
  9.  
  10. import { connect } from "react-redux"
  11. import { getMedSystems, addMedSystem, saveMedSystem, deleteMedSystem } from "../actions/MedSystemsActions"
  12.  
  13.  
  14. class AdminMedSystems extends Component {
  15.   constructor(props) {
  16.     super(props);
  17.  
  18.     this.state = {
  19.       addMedSystemModal: false,
  20.       name: '',
  21.  
  22.       currentId: null,
  23.       editing: false,
  24.       newMedSystem: {
  25.         name: "",
  26.       },
  27.       tableConfig: {
  28.         bordered: true,
  29.         loading: true,
  30.       }
  31.     };
  32.     this.openAddMedSystemModal = this.openAddMedSystemModal.bind(this);
  33.     this.closeModal = this.closeModal.bind(this);
  34.   }
  35.  
  36.   componentDidMount() {
  37.     this.props.onGetMedSystems()
  38.     console.log(this.props.medSystems)
  39.   }
  40.  
  41.   openAddMedSystemModal = (e) => {
  42.     e.preventDefault();
  43.     this.setState({
  44.       addMedSystemModal: true,
  45.       name: '',
  46.     })
  47.   };
  48.  
  49.   closeModal = () => {
  50.     this.setState({
  51.       addMedSystemModal: false,
  52.     })
  53.   };
  54.  
  55.   modalRedirect = () => {
  56.     this.props.history.push('/med_systems');
  57.   }
  58.  
  59.   handleChange = (e) => {
  60.     this.setState({
  61.       [e.target.name]: e.target.value
  62.     })
  63.   };
  64.  
  65.   handleAddMedSystemModalSubmit = (e) => {
  66.     e.preventDefault();
  67.     const dataToSend = {
  68.       "name": this.state.name,
  69.     }
  70.     console.log(dataToSend);
  71.     this.props.onAddMedSystems(dataToSend).then(success => {
  72.       if (success) {
  73.         this.closeModal();
  74.         this.modalRedirect()
  75.       }
  76.     });
  77.  
  78.  
  79.     handleDeleteMedSystems = async (e) => {
  80.       console.log(this.props)
  81.       await this.props.onDeleteMedSystems(e.id)
  82.       this.props.onGetMedSystems()
  83.     }
  84.  
  85.     render() {
  86.       const columns = [
  87.         {
  88.           title: '№',
  89.           dataIndex: 'id',
  90.           width: '5%',
  91.           key: 'id',
  92.         },
  93.         {
  94.           title: 'Название системы',
  95.           dataIndex: 'name',
  96.           key: 'name',
  97.         },
  98.         {
  99.           title: 'Действия',
  100.           key: 'action',
  101.           width: '10%',
  102.           render: (text, id) =>
  103.             <Fragment>
  104.               <FontAwesomeIcon icon={faEdit} style={{ cursor: "pointer" }} color="orange" size='lg' className="mr-3" onClick={() => this.handleUpdateMedSystem(text)} />
  105.               <FontAwesomeIcon icon={faTrash} style={{ cursor: "pointer" }} color="red" size='lg' onClick={() => this.handleDeleteMedSystems(id)} />
  106.             </Fragment>
  107.         },
  108.       ]
  109.       return (
  110.         <Container className="mt-3">
  111.           <Header />
  112.           <Row className="d-flex flex-column justify-content-end p-3">
  113.             <div className="title">
  114.               <h2>Список медицинских систем</h2>
  115.               <span className="add"><FontAwesomeIcon icon={faPlus} style={{ cursor: "pointer" }} color="green" size='lg' onClick={this.openAddMedSystemModal} /></span>
  116.             </div>
  117.             <Table dataSource={this.props.medSystems} columns={columns} />
  118.           </Row>
  119.           <Modal
  120.             isOpen={this.state.addMedSystemModal}
  121.           >
  122.             <ModalHeader>Создание медицинского вопроса</ModalHeader>
  123.             <Form onSubmit={this.handleAddMedSystemModalSubmit}>
  124.               <ModalBody>
  125.                 <FormGroup>
  126.                   <Label>Название медицинского вопроса</Label>
  127.                   <Input
  128.                     type="name"
  129.                     name="name"
  130.                     value={this.state.name}
  131.                     onChange={this.handleChange}
  132.                     placeholder="Название вопроса"
  133.                   />
  134.                 </FormGroup>
  135.               </ModalBody>
  136.               <ModalFooter>
  137.                 <Button color="primary" type="submit">Вход</Button>{' '}
  138.                 <Button color="secondary" onClick={this.closeModal}>Отмена</Button>
  139.               </ModalFooter>
  140.             </Form>
  141.           </Modal>
  142.         </Container>
  143.       )
  144.     }
  145.   }
  146.  
  147.  
  148.   const mapStateToProps = state => ({
  149.     medSystems: state.medSystems.medSystems,
  150.   });
  151.  
  152.   const mapDispatchToProps = dispatch => ({
  153.     onGetMedSystems: () => dispatch(getMedSystems()),
  154.     onAddMedSystems: (name) => dispatch(addMedSystem(name)),
  155.     onSaveMedSystems: (text) => dispatch(saveMedSystem(text)),
  156.     onDeleteMedSystems: (id) => dispatch(deleteMedSystem(id)),
  157.   })
  158.  
  159.  
  160.   export default connect(mapStateToProps, mapDispatchToProps)(AdminMedSystems)
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