· 5 years ago · Aug 09, 2020, 05:56 AM
1import React from 'react'
2
3//material component
4import Nav from '../Navigation/Nav';
5import { makeStyles } from '@material-ui/core/styles';
6import Paper from '@material-ui/core/Paper';
7import InputBase from '@material-ui/core/InputBase';
8import Divider from '@material-ui/core/Divider';
9import IconButton from '@material-ui/core/IconButton';
10import MenuIcon from '@material-ui/icons/Menu';
11import SearchIcon from '@material-ui/icons/Search';
12import DirectionsIcon from '@material-ui/icons/Directions';
13
14import axios from 'axios'
15import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
16import Loading from '../Loading';
17import backend_ip from '../../global'
18import { Typography } from '@material-ui/core';
19import Timeline from "react-time-line";
20
21//moment
22import moment from 'moment';
23
24//CSS
25import './style.css'
26
27const useStyles = makeStyles((theme) => ({
28 root: {
29 padding: '2px 4px',
30 display: 'flex',
31 alignItems: 'center',
32 width: 400,
33 border: "0.5px solid lightgrey"
34 },
35 input: {
36 marginLeft: theme.spacing(1),
37 flex: 1,
38 },
39 iconButton: {
40 padding: 10,
41 }
42}));
43
44
45const TrackConsignmentNote = (props) => {
46 const classes = useStyles();
47 const { history } = props
48 const [data, setData] = React.useState('')
49 const [isFetching, setIsFetching] = React.useState(false)
50 const [dataTimeLine, setDataTimeLine] = React.useState()
51 const [events, setEvents] = React.useState([]);
52
53 //API
54 const getConsignmentNodeDetail = async (consignmentCode) => {
55 var { data } = await axios.get(backend_ip + '/get_consignment_note_history/' + consignmentCode + '?token=' + localStorage.getItem('token'))
56 console.log(data)
57 if (data.length !== 0) {
58 setData(data)
59 const formatted_data = data[0].consignment_timeline.map(data => {
60 const timeLine = {};
61 timeLine.ts = data.created_at;
62 timeLine.text = data.past_status.status_name;
63 return timeLine;
64 })
65 setEvents(formatted_data)
66 }
67 else {
68 alert('Consignment Code yang di cari tidak ditemukan')
69 }
70 }
71
72 const [consignmentCode, setConsignmentCode] = React.useState()
73 const handleChangeConsignmentCode = (event) => {
74 setConsignmentCode(event.target.value)
75 }
76 const handleClickSearchConsignmentCode = (consignmentCode) => {
77
78 if (consignmentCode) {
79 (async () => {
80 setIsFetching(true)
81 await getConsignmentNodeDetail(consignmentCode)
82 // console.log(data)
83 setIsFetching(false)
84 })()
85 }
86 }
87
88 React.useEffect(() => {
89 setConsignmentCode(localStorage.getItem("consignmentCode"))
90 var consignmentCodeTemp = localStorage.getItem("consignmentCode");
91 if (consignmentCodeTemp) {
92 handleClickSearchConsignmentCode(consignmentCodeTemp)
93 }
94 localStorage.setItem("consignmentCode", '')
95 var input = document.getElementsByTagName("input")[0];
96
97 input.addEventListener("keyup", function (event) {
98 // Number 13 is the "Enter" key on the keyboard
99 if (event.keyCode === 13) {
100 // Cancel the default action, if needed
101 if(consignmentCode){
102 event.preventDefault();
103 handleClickSearchConsignmentCode(consignmentCode)
104 }
105
106 }
107 });
108 }, [])
109
110
111
112
113 return (
114 <div>
115 <Nav />
116 {!isFetching ? null : <Loading />}
117 <div style={{ padding: '10px' }}>
118 <Paper className={classes.root} style={{ width: '98vw' }}>
119 <InputBase
120 value={consignmentCode}
121 className={classes.input}
122 placeholder="Search Connote yang ingin di Track"
123 onChange={handleChangeConsignmentCode}
124 />
125 <IconButton className={classes.iconButton} aria-label="search" onClick={() => { handleClickSearchConsignmentCode(consignmentCode) }}>
126 <SearchIcon />
127 </IconButton>
128 </Paper>
129
130 {data.length > 0 ?
131 <Paper className="paper" style={{ marginTop: '15px' }}>
132 <div>
133 <div style={{ borderBottom: 'groove', paddingBottom: '20px' }}>
134 <Typography style={{ fontWeight: 'bolder', fontSize: 'large' }}><i className="fas fa-box" style={{ marginRight: '5px' }}></i>Consignment Note:</Typography>
135 <div style={{ marginLeft: '25px' }}>
136 <Typography>Code: {data[0].consignment_code}</Typography>
137 <Typography>Created At: {moment(data[0].consignment_note_detail.created_at).format('dddd, Do MMMM YYYY, h:mm a')}</Typography>
138 <Typography>Item Type: {data[0].consignment_note_detail.item_type}</Typography>
139 <Typography>Total Colly: {data[0].consignment_note_detail.item_count}</Typography>
140 <Typography>Total Weight: {data[0].consignment_note_detail.item_total_weight} Kg</Typography>
141 <Typography>Service Type: {data[0].service_type.service_type_name}</Typography>
142 <Typography>Payment Type: {data[0].payment_type}</Typography>
143 <Typography>Sorting Center: {data[0].pickup_order.sorting_center.sorting_center_name}</Typography>
144 </div>
145 </div>
146 <div style={{ marginTop: '20px', borderBottom: 'groove', paddingBottom: '20px' }}>
147 <Typography style={{ fontWeight: 'bolder', fontSize: 'large' }}><i class="fas fa-building" style={{ marginRight: '5px' }}></i>Sender Detail:</Typography>
148 <div style={{ marginLeft: '25px' }}>
149 <Typography>Company Name: {data[0].pickup_order.customer.company_branch.company.company_name}</Typography>
150 <Typography>Company Branch Name: {data[0].pickup_order.customer.company_branch.company_branch_name}</Typography>
151 <Typography>Customer Name: {data[0].pickup_order.customer.user.full_name}</Typography>
152 <Typography>Customer Phone number: {data[0].pickup_order.customer.user.handphone_number}</Typography>
153 <Typography>Customer Telephone number: {data[0].pickup_order.customer.user.telephone_number}</Typography>
154 </div>
155 </div>
156 <div style={{ marginTop: '20px' }}>
157 <Typography style={{ fontWeight: 'bolder', fontSize: 'large' }}><i class="fas fa-user" style={{ marginRight: '5px' }}></i>Receiver Detail:</Typography>
158 <div style={{ marginLeft: '25px' }}>
159 <Typography>Name: {data[0].receiver_name}</Typography>
160 <Typography>Phone number: {data[0].receiver_phone_number}</Typography>
161 <Typography>Address:</Typography>
162 <div style={{ marginLeft: '15px' }}>
163 <Typography>Provinsi: {data[0].receiver_address.provinsi}</Typography>
164 <Typography>Kota: {data[0].receiver_address.kota}</Typography>
165 <Typography>Kecamatan: {data[0].receiver_address.kecamatan}</Typography>
166 <Typography>Kelurahan: {data[0].receiver_address.kelurahan}</Typography>
167 <Typography>Nama Jalan: {data[0].receiver_address.jalan}</Typography>
168 <Typography>Kode Pos: {data[0].receiver_address.postal_code}</Typography>
169 <Typography>RT: {data[0].receiver_address.RT}</Typography>
170 <Typography>RW: {data[0].receiver_address.RW}</Typography>
171 <Typography>Blok/No: {data[0].receiver_address.block}</Typography>
172 </div >
173 </div >
174 </div >
175 </div>
176 <div className="timeline">
177 <Timeline items={events} />
178 </div>
179 </Paper >
180 : null}
181 </div >
182 </div >
183 )
184}
185
186export default (TrackConsignmentNote)