SHARE
TWEET

Untitled

a guest May 23rd, 2019 74 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import {
  2.   Table,
  3.   Input,
  4.   InputNumber,
  5.   Form,
  6.   Typography,
  7.   Button,
  8.   Icon,
  9.   notification
  10. } from 'antd';
  11. import React from 'react';
  12.  
  13. // import "./AddJenisTool.css";
  14.  
  15. const { Text } = Typography;
  16. const FormItem = Form.Item;
  17. const EditableContext = React.createContext();
  18.  
  19. const openNotificationWithIcon = (type, msg) => {
  20.   notification[type]({
  21.     message: 'Notification',
  22.     description: msg
  23.   });
  24. };
  25.  
  26. class EditableCell extends React.Component {
  27.   getInput = () => {
  28.     if (this.props.inputType === 'number') {
  29.       return <InputNumber style={{ width: '80%' }} />;
  30.     }
  31.     return <Input style={{ width: '80%' }} />;
  32.   };
  33.  
  34.   render() {
  35.     const {
  36.       editing,
  37.       dataIndex,
  38.       title,
  39.       inputType,
  40.       record,
  41.       index,
  42.       ...restProps
  43.     } = this.props;
  44.     return (
  45.       <EditableContext.Consumer>
  46.         {form => {
  47.           const { getFieldDecorator } = form;
  48.           return (
  49.             <td {...restProps}>
  50.               {editing ? (
  51.                 <FormItem style={{ margin: 0 }}>
  52.                   {getFieldDecorator(dataIndex, {
  53.                     rules: [
  54.                       {
  55.                         required: true,
  56.                         message: `Please Input ${title}!`
  57.                       }
  58.                     ],
  59.                     initialValue: record[dataIndex]
  60.                   })(this.getInput())}
  61.                 </FormItem>
  62.               ) : (
  63.                 restProps.children
  64.               )}
  65.             </td>
  66.           );
  67.         }}
  68.       </EditableContext.Consumer>
  69.     );
  70.   }
  71. }
  72.  
  73. class EditableOrderTable extends React.Component {
  74.   constructor(props) {
  75.     super(props);
  76.     this.state = { editingKey: '', data: [], searchText: '' };
  77.     this.columns = [
  78.       {
  79.         title: 'No Order',
  80.         dataIndex: 'id',
  81.         dataType: 'text',
  82.         width: '25%',
  83.         editable: true,
  84.         ...this.getColumnSearchProps('id')
  85.       },
  86.       {
  87.         title: 'Customer',
  88.         dataIndex: 'customerName',
  89.         dataType: 'select',
  90.         width: '10%',
  91.         editable: true,
  92.         ...this.getColumnSearchProps('customerName')
  93.       },
  94.       {
  95.         title: 'Contact',
  96.         dataIndex: 'contact',
  97.         dataType: 'text',
  98.         width: '10%',
  99.         editable: true,
  100.         ...this.getColumnSearchProps('contact')
  101.       },
  102.       {
  103.         title: 'Address',
  104.         dataIndex: 'address',
  105.         dataType: 'text',
  106.         width: '10%',
  107.         editable: true,
  108.         ...this.getColumnSearchProps('address')
  109.       },
  110.       {
  111.         title: 'Jenis Tool',
  112.         dataIndex: 'jenisTool',
  113.         dataType: 'text',
  114.         width: '10%',
  115.         editable: true,
  116.         ...this.getColumnSearchProps('jenisTool')
  117.       },
  118.       {
  119.         title: 'PO Number',
  120.         dataIndex: 'poNumber',
  121.         dataType: 'text',
  122.         width: '10%',
  123.         editable: true,
  124.         ...this.getColumnSearchProps('poNumber')
  125.       },
  126.       {
  127.         title: 'Quantity',
  128.         dataIndex: 'toolsId.length',
  129.         dataType: 'text',
  130.         width: '10%',
  131.         editable: true,
  132.         ...this.getColumnSearchProps('toolsId.length')
  133.       },
  134.       {
  135.         title: 'Action',
  136.         dataIndex: 'operation',
  137.         render: (text, record) => {
  138.           const editable = this.isEditing(record);
  139.           return (
  140.             <div>
  141.               {editable ? (
  142.                 <span>
  143.                   <EditableContext.Consumer>
  144.                     {form => (
  145.                       <Text
  146.                         onClick={() => this.save(form, record.id)}
  147.                         style={{
  148.                           marginRight: 8,
  149.                           cursor: 'pointer',
  150.                           color: '#40a9ff'
  151.                         }}
  152.                       >
  153.                         {' '}
  154.                         Save
  155.                       </Text>
  156.                     )}
  157.                   </EditableContext.Consumer>
  158.                   <Text
  159.                     onClick={() => this.cancel()}
  160.                     style={{ cursor: 'pointer', color: 'red' }}
  161.                   >
  162.                     {' '}
  163.                     Cancel
  164.                   </Text>
  165.                 </span>
  166.               ) : (
  167.                 <Text
  168.                   onClick={() => this.edit(record.id)}
  169.                   style={{
  170.                     marginRight: 8,
  171.                     cursor: 'pointer',
  172.                     color: '#40a9ff'
  173.                   }}
  174.                 >
  175.                   {' '}
  176.                   Edit
  177.                 </Text>
  178.               )}
  179.               {editable ? (
  180.                 <span />
  181.               ) : (
  182.                 <Text
  183.                   onClick={() => this.delete(record.id)}
  184.                   style={{ cursor: 'pointer', color: 'red' }}
  185.                 >
  186.                   {' '}
  187.                   Delete
  188.                 </Text>
  189.               )}
  190.             </div>
  191.           );
  192.         }
  193.       }
  194.     ];
  195.   }
  196.  
  197.   componentDidMount() {
  198.     const token = JSON.parse(localStorage.getItem('jwt')).token;
  199.     fetch('/getallorders', {
  200.       method: 'GET',
  201.       headers: {
  202.         Authorization: 'Bearer ' + token
  203.       }
  204.     })
  205.       .then(res => res.json())
  206.       .then(data => {
  207.         if (data.success) {
  208.           this.setState({
  209.             data: data.message
  210.           });
  211.         } else {
  212.           openNotificationWithIcon('error', 'Gagal mengambil vendor');
  213.         }
  214.       });
  215.   }
  216.  
  217.   componentDidUpdate(prevProps, prevState) {
  218.     if (prevProps.data !== this.props.data) {
  219.       this.setState({ data: this.props.data });
  220.     }
  221.   }
  222.  
  223.   isEditing = record => record.id === this.state.editingKey;
  224.  
  225.   cancel = () => {
  226.     this.setState({ editingKey: '' });
  227.   };
  228.  
  229.   save = (form, key) => {
  230.     form.validateFields((error, row) => {
  231.       if (error) {
  232.         return;
  233.       }
  234.       const token = JSON.parse(localStorage.getItem('jwt')).token;
  235.       fetch(`/updatejenistool/${key}`, {
  236.         method: 'put',
  237.         headers: {
  238.           'Content-Type': 'application/json',
  239.           Authorization: 'Bearer ' + token
  240.         },
  241.         body: JSON.stringify(row)
  242.       })
  243.         .then(res => res.json())
  244.         .then(res => {
  245.           if (res.success) {
  246.             let { data } = this.state;
  247.             let newData = data.find(
  248.               updateJenisTool => updateJenisTool.id === res.message.id
  249.             );
  250.             newData.jenis = res.message.jenis;
  251.             newData.lifetime = res.message.lifetime;
  252.             newData.diameter = res.message.diameter;
  253.             newData.panjang = res.message.panjang;
  254.             newData.vendor = res.message.vendor;
  255.             newData.CT = res.message.CT;
  256.             this.setState({
  257.               data: [
  258.                 ...this.state.data.filter(value => value.id !== res.message.id),
  259.                 newData
  260.               ],
  261.               editingKey: ''
  262.             });
  263.           } else {
  264.             alert('Gagal update jenis tool');
  265.           }
  266.         })
  267.         .catch(err => console.log(err));
  268.     });
  269.   };
  270.  
  271.   edit = key => {
  272.     this.setState({ editingKey: key });
  273.   };
  274.  
  275.   delete = key => {
  276.     console.log('key : ', key);
  277.     const token = JSON.parse(localStorage.getItem('jwt')).token;
  278.     fetch(`/deleteorder/${key}`, {
  279.       method: 'delete',
  280.       headers: {
  281.         Authorization: 'Bearer ' + token
  282.       }
  283.     })
  284.       .then(res => res.json())
  285.       .then(res => {
  286.         if (res.success) {
  287.           let newData = this.state.data.filter(
  288.             value => value.id !== res.message.id
  289.           );
  290.           this.setState({
  291.             data: newData
  292.           });
  293.         } else {
  294.           alert('Gagal menghapus jenis tool');
  295.         }
  296.       });
  297.   };
  298.  
  299.   getColumnSearchProps = dataIndex => ({
  300.     filterDropdown: ({
  301.       setSelectedKeys,
  302.       selectedKeys,
  303.       confirm,
  304.       clearFilters
  305.     }) => (
  306.       <div style={{ padding: 8 }}>
  307.         <Input
  308.           ref={node => {
  309.             this.searchInput = node;
  310.           }}
  311.           placeholder={`Search ${dataIndex}`}
  312.           value={selectedKeys[0]}
  313.           onChange={e =>
  314.             setSelectedKeys(e.target.value ? [e.target.value] : [])
  315.           }
  316.           onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
  317.           className="search-JT"
  318.         />
  319.         <Button
  320.           type="primary"
  321.           onClick={() => this.handleSearch(selectedKeys, confirm)}
  322.           icon="search"
  323.           size="small"
  324.           style={{ width: 90, marginRight: 8 }}
  325.         >
  326.           Search
  327.         </Button>
  328.         <Button
  329.           onClick={() => this.handleSearchReset(clearFilters)}
  330.           size="small"
  331.           style={{ width: 90 }}
  332.         >
  333.           Reset
  334.         </Button>
  335.       </div>
  336.     ),
  337.     filterIcon: filtered => (
  338.       <Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />
  339.     ),
  340.     onFilter: (value, record) =>
  341.       record[dataIndex]
  342.         .toString()
  343.         .toLowerCase()
  344.         .includes(value.toLowerCase()),
  345.     onFilterDropdownVisibleChange: visible => {
  346.       if (visible) {
  347.         setTimeout(() => this.searchInput.select());
  348.       }
  349.     }
  350.   });
  351.  
  352.   handleSearch = (selectedKeys, confirm) => {
  353.     confirm();
  354.     this.setState({ searchText: selectedKeys[0] });
  355.   };
  356.  
  357.   handleSearchReset = clearFilters => {
  358.     clearFilters();
  359.     this.setState({ searchText: '' });
  360.   };
  361.  
  362.   render() {
  363.     const components = {
  364.       body: {
  365.         cell: EditableCell
  366.       }
  367.     };
  368.  
  369.     let fullhd = true;
  370.  
  371.     if (window.innerHeight < 768) {
  372.       fullhd = false;
  373.     }
  374.  
  375.     const columns = this.columns.map(col => {
  376.       if (!col.editable) {
  377.         return col;
  378.       }
  379.       return {
  380.         ...col,
  381.         onCell: record => ({
  382.           record,
  383.           inputType: col.dataType,
  384.           dataIndex: col.dataIndex,
  385.           title: col.title,
  386.           editing: this.isEditing(record)
  387.         })
  388.       };
  389.     });
  390.  
  391.     return (
  392.       <EditableContext.Provider value={this.props.form}>
  393.         <Table
  394.           components={components}
  395.           bordered
  396.           rowKey="id"
  397.           dataSource={this.state.data}
  398.           columns={columns}
  399.           rowClassName="editable-row"
  400.           pagination={{
  401.             defaultPageSize: fullhd ? 13 : 5,
  402.             showSizeChanger: true,
  403.             pageSizeOptions: fullhd ? ['13', '20', '30'] : ['5', '10', '15'],
  404.             onChange: this.cancel
  405.           }}
  406.           scroll={fullhd ? { y: '65vh' } : { y: '40vh' }}
  407.         />
  408.       </EditableContext.Provider>
  409.     );
  410.   }
  411. }
  412.  
  413. const EditableOrder = Form.create()(EditableOrderTable);
  414.  
  415. export default EditableOrder;
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