Initial commit
This commit is contained in:
Rifqy Zacky Ariadhy
446
src/common/pages/Tasks/TaskDetail/index.js
Normal file
446
src/common/pages/Tasks/TaskDetail/index.js
Normal file
@@ -0,0 +1,446 @@
|
||||
import React from 'react';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import {
|
||||
Card, CardTitle, CardText,
|
||||
Divider,
|
||||
FlatButton,
|
||||
RaisedButton,
|
||||
Table,
|
||||
TableBody,
|
||||
TableHeader,
|
||||
TableHeaderColumn,
|
||||
TableRow,
|
||||
TableRowColumn,
|
||||
Toolbar,
|
||||
ToolbarGroup,
|
||||
CardHeader, Dialog,
|
||||
Avatar, ListItem
|
||||
} from 'material-ui';
|
||||
import {Link} from 'react-router-dom';
|
||||
import {LINKS} from "../../../routes";
|
||||
import {DIALOG} from "../../../stores/global_ui";
|
||||
import AddIcon from 'material-ui/svg-icons/content/add';
|
||||
import RemoveIcon from 'material-ui/svg-icons/content/remove';
|
||||
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
|
||||
import {Icon} from 'antd';
|
||||
// import MakePaymentDialog from './MakePaymentDialog/index';
|
||||
// import CancelPaymentDialog from './CancelPaymentDialog/index';
|
||||
import moment from "moment";
|
||||
import get from 'lodash.get';
|
||||
import DC from 'decimal.js-light';
|
||||
import NumberFormat from 'react-number-format';
|
||||
import EmptyComponent from '../../EmptyComponent';
|
||||
import confirm from '../../../util/confirm';
|
||||
import {constant} from "../../../config/const";
|
||||
// import MerchantInputShippingCodeDialog from "./MerchantInputShippingCodeDialog";
|
||||
// import GojekDelivery from "./GojekDelivery";
|
||||
import LoadingDialog from '../../LoadingDialog/index';
|
||||
// import PreorderAddNotes from './PreorderAddNotes';
|
||||
import '../style.scss'
|
||||
import {uniqBy,startCase,upperCase,reverse} from 'lodash';
|
||||
import PrintProvider, {Print, NoPrint} from 'react-easy-print';
|
||||
import PrintIcon from 'material-ui/svg-icons/action/print';
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class OrderDetailComponent extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
value: 1,
|
||||
searchText: '',
|
||||
slideIndex: 0,
|
||||
tabSelected: 'gi',
|
||||
openModal: false,
|
||||
errorBook: false,
|
||||
errorMessage: '',
|
||||
itemData: {}
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.http = props.appstate.http;
|
||||
this.authStore = props.appstate.auth;
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
// this.order = props.appstate.order;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
// this.order.getDetail(this.props.match.params.id);
|
||||
|
||||
}
|
||||
|
||||
handleUpdateInput = (searchText) => {
|
||||
this.setState({
|
||||
searchText: searchText,
|
||||
});
|
||||
};
|
||||
|
||||
handleNewRequest = () => {
|
||||
this.setState({
|
||||
searchText: '',
|
||||
});
|
||||
};
|
||||
|
||||
tabsHandleChange = (value) => {
|
||||
this.setState({
|
||||
slideIndex: value,
|
||||
});
|
||||
};
|
||||
|
||||
closeError = () => {
|
||||
this.setState({
|
||||
errorBook: false
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
handleChange = (tabSelected) => {
|
||||
this.setState({
|
||||
tabSelected: tabSelected,
|
||||
});
|
||||
// this.props.history.push(tabSelected);
|
||||
};
|
||||
|
||||
handleCloseModal = () => {
|
||||
this.setState({
|
||||
openModal: false
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
handleOpenModal = () => {
|
||||
this.setState({
|
||||
openModal: true
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
handlePrint() {
|
||||
window.print();
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<PrintProvider>
|
||||
<NoPrint>
|
||||
<div className="orderDetail containerMiddle animated fadeIn">
|
||||
|
||||
<div style={{marginBottom: '10px'}}>
|
||||
<FlatButton
|
||||
className="headerMenu"
|
||||
hoverColor="#f1f5f9"
|
||||
style={{background: '#ffffff00'}}
|
||||
onClick={() => this.props.history.goBack()}
|
||||
label="Back"
|
||||
primary={true}
|
||||
icon={<NavigationArrowBack/>}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/*<MakePaymentDialog/>*/}
|
||||
|
||||
{/*<CancelPaymentDialog/>*/}
|
||||
{/*<MerchantInputShippingCodeDialog/>*/}
|
||||
{/*<GojekDelivery/>*/}
|
||||
{/*<PreorderAddNotes defaultValue={this.state.itemData}/>*/}
|
||||
|
||||
<div className="row">
|
||||
<div className="col s12 m9 l9" style={{marginBottom: 0}}>
|
||||
<Card className="cardLite cardDashboard row alert">
|
||||
<CardHeader
|
||||
title={
|
||||
<Toolbar style={{backgroundColor: '#fff', padding: 0}}>
|
||||
<ToolbarGroup>
|
||||
<CardHeader
|
||||
style={{padding: 0}}
|
||||
// subtitle={<p>{this.orderStatusDesc(this.order.selectedOrder.order_status_id)}</p>}
|
||||
title={<div style={{
|
||||
fontWeight: '500', fontSize: "1.25rem",
|
||||
lineHeight: 1.2,
|
||||
color: " #334152"
|
||||
}}>
|
||||
<span> {get(this.taskStore.selectedData,'name','-')}</span>
|
||||
</div>}
|
||||
/>
|
||||
</ToolbarGroup>
|
||||
<ToolbarGroup>
|
||||
<RaisedButton label="Reject" icon={<PrintIcon/>} primary={true} onClick={() => this.handlePrint()}/>
|
||||
<RaisedButton label="Approve" icon={<PrintIcon/>} primary={true} onClick={() => this.handlePrint()}/>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
|
||||
<Print main name=" foo">
|
||||
<Card className="cardLite cardDashboard row">
|
||||
|
||||
<div className="flexSpaceBetween">
|
||||
<div className="orderContainerHeader">
|
||||
<CardTitle style={{padding: 0, fontSize: 20}}
|
||||
titleStyle={{fontSize: 20, color: '#334152', margin: 0}}
|
||||
title={<div className={'orderFormHeading'}>
|
||||
<h3 style={{margin: 0}}>Task Details</h3>
|
||||
<p className={'orderFormDate'}
|
||||
style={{margin: 0}}>{moment(get(this.taskStore.selectedData,'created_at',null)).format("DD MMMM YYYY, HH:mm:ss")}</p>
|
||||
</div>}
|
||||
/>
|
||||
{/*<div>*/}
|
||||
{/*/!*<div className="orderFormLabel">Order #</div>*!/*/}
|
||||
{/*<div className="orderFormLabelNumber">*/}
|
||||
{/*<span style={{color : '#3E4B5B',fontWeight : 'bold'}}>Order #</span> <span>INV/{moment(this.order.selectedOrder.created_at).format("YYYYMMDD")}/XVII/{this.order.selectedOrder.id.split('-')[0]}</span></div>*/}
|
||||
|
||||
{/*</div>*/}
|
||||
{/*<div>*/}
|
||||
{/*<div className="orderFormLabelNumber">*/}
|
||||
{/*<span style={{color : '#3E4B5B',fontWeight : 'bold'}}>Shipping By</span> : <span>{this.order.selectedOrder.shipping_method.name}</span></div>*/}
|
||||
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
</div>
|
||||
<Divider/>
|
||||
<CardHeader style={{paddingBottom: 0, paddingTop: 18, paddingLeft: 18, paddingRight: 18}}
|
||||
subtitle={<h2 style={{fontSize: 12}}>STORE INFORMATION</h2>}/>
|
||||
<CardText style={{paddingBottom: 0, padding: '8px 18px 0 18px'}}>
|
||||
<div style={{
|
||||
boxShadow: "none",
|
||||
border: "1px solid #d4d4d4",
|
||||
backgroundColor: "#f9f9f9",
|
||||
padding: "10px 10px 10px 20px",
|
||||
marginTop: 0,
|
||||
marginBottom: 0,
|
||||
textAlign: ''
|
||||
}} className="card-panel">
|
||||
<div className="row no-margin">
|
||||
|
||||
<div className="col s12 m12 l6">
|
||||
<div className="listCustDetail">
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Name</p>
|
||||
<p
|
||||
className="listCustomerDetailItemValue">{get(this.taskStore.selectedData,'user.profile.firstname','-' )} {get(this.taskStore.selectedData,'user.profile.lastname',"")}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<span className="listCustomerDetailItemKey">Store Name</span>
|
||||
<p
|
||||
className="listCustomerDetailItemValue" style={{display:'flex',flexWrap: 'wrap'}}>{get(this.taskStore.selectedData,'user.store.name','-')}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<span className="listCustomerDetailItemKey">Email</span>
|
||||
<p
|
||||
className="listCustomerDetailItemValue" style={{display:'flex',flexWrap: 'wrap'}}>{get(this.taskStore.selectedData,'user.email','-')}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<span className="listCustomerDetailItemKey">Username</span>
|
||||
<p
|
||||
className="listCustomerDetailItemValue" style={{display:'flex',flexWrap: 'wrap'}}>{this.taskStore.selectedData.user.username}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Phone</p>
|
||||
<p
|
||||
className="listCustomerDetailItemValue">{(this.taskStore.selectedData.user.profile.phone == null) ? 'empty phone number' : this.taskStore.selectedData.user.profile.phone}</p>
|
||||
</div>
|
||||
<div className="listCustDetailItem flex">
|
||||
<p className="listCustomerDetailItemKey">Gender</p>
|
||||
<p className="listCustomerDetailItemValue">{(this.taskStore.selectedData.user.profile.gender == null) ? 'empty gender' : this.taskStore.selectedData.user.profile.gender }</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{/*<div className="col s12 m12 l6">*/}
|
||||
|
||||
{/*<div className="listCustDetail">*/}
|
||||
{/*<div className="listCustDetailItem flex">*/}
|
||||
{/*<p className="listCustomerDetailItemKey">Store Name</p>*/}
|
||||
{/*<p*/}
|
||||
{/*className="listCustomerDetailItemValue">{this.order.selectedOrder.user_address_buyer.receiver_name}</p>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="listCustDetailItem flex">*/}
|
||||
{/*<p className="listCustomerDetailItemKey">Name of Address</p>*/}
|
||||
{/*<p*/}
|
||||
{/*className="listCustomerDetailItemValue">{this.order.selectedOrder.user_address_buyer.name}</p>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="listCustDetailItem flex">*/}
|
||||
{/*<p className="listCustomerDetailItemKey">Phone of Address</p>*/}
|
||||
{/*<p*/}
|
||||
{/*className="listCustomerDetailItemValue">{this.order.selectedOrder.user_address_buyer.phone_number}</p>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="listCustDetailItem flex">*/}
|
||||
{/*<p className="listCustomerDetailItemKey">City</p>*/}
|
||||
{/*<p*/}
|
||||
{/*className="listCustomerDetailItemValue">{this.order.selectedOrder.user_address_buyer.city.name}</p>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="listCustDetailItem flex">*/}
|
||||
{/*<p className="listCustomerDetailItemKey">Province</p>*/}
|
||||
{/*<p*/}
|
||||
{/*className="listCustomerDetailItemValue">{this.order.selectedOrder.user_address_buyer.province.name}</p>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="listCustDetailItem flex">*/}
|
||||
{/*<p className="listCustomerDetailItemKey">Address</p>*/}
|
||||
{/*<p*/}
|
||||
{/*className="listCustomerDetailItemValue">{this.order.selectedOrder.user_address_buyer.address}</p>*/}
|
||||
{/*</div>*/}
|
||||
{/*</div>*/}
|
||||
|
||||
|
||||
{/*</div>*/}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</CardText>
|
||||
|
||||
|
||||
{/*<div className={' no-hover'} style={{marginTop: 18, marginBottom: 15}}>*/}
|
||||
{/*<Table selectable={false} className="TableOrder">*/}
|
||||
{/*<TableHeader displaySelectAll={false}*/}
|
||||
{/*adjustForCheckbox={false}*/}
|
||||
{/*enableSelectAll={false}>*/}
|
||||
{/*<TableRow style={{height: 38, background: '#f6f9fc'}}>*/}
|
||||
|
||||
{/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
|
||||
{/*style={{height: 'auto'}}>Items</TableHeaderColumn>*/}
|
||||
{/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
|
||||
{/*style={{height: 'auto'}}>Quantity Request</TableHeaderColumn>*/}
|
||||
|
||||
{/*<TableHeaderColumn className="TableHeaderColumnAkun align-center"*/}
|
||||
{/*style={{height: 'auto'}}>Quantity</TableHeaderColumn>*/}
|
||||
{/*<TableHeaderColumn className="TableHeaderColumnAkun align-right"*/}
|
||||
{/*style={{height: 'auto'}}>Price</TableHeaderColumn>*/}
|
||||
{/*<TableHeaderColumn className="TableHeaderColumnAkun"*/}
|
||||
{/*style={{height: 'auto'}}>Subtotal</TableHeaderColumn>*/}
|
||||
{/*</TableRow>*/}
|
||||
{/*</TableHeader>*/}
|
||||
{/*<TableBody displayRowCheckbox={false}>*/}
|
||||
{/*{*/}
|
||||
{/*(this.order.selectedOrder.user_order_items) ?*/}
|
||||
{/*this.order.selectedOrder.user_order_items.map((data, index) => (*/}
|
||||
{/*<TableRow>*/}
|
||||
{/*<TableRowColumn style={{whiteSpace : 'normal !important'}} key={data.id}>*/}
|
||||
{/*{data.item.name}*/}
|
||||
{/*<p style={{margin: '2px 0', fontSize: 10,}}>*/}
|
||||
{/*Detail: <Link className={'viewDetailLink'}*/}
|
||||
{/*style={{fontWeight: 'bold', textDecoration: 'underline'}}*/}
|
||||
{/*to={`${LINKS.FORM_ITEMS}/edit/${data.item.id}`} target="_blank">View details</Link>*/}
|
||||
{/*</p>*/}
|
||||
{/*</TableRowColumn>*/}
|
||||
{/*{data.is_preorder ?*/}
|
||||
{/*<TableRowColumn key={data.id}>*/}
|
||||
{/*{data.preorder_store_note ?*/}
|
||||
{/*<p style={{margin: 0}}>{(data.preorder_buyer_note)} <span style={{*/}
|
||||
{/*fontSize: '.72rem',*/}
|
||||
{/*color: '#71c21a',*/}
|
||||
{/*fontWeight: 'bold'*/}
|
||||
|
||||
{/*}} className={'smaller lighter'}>Responded</span></p> :*/}
|
||||
{/*<p style={{margin: 0}}>{data.preorder_buyer_note}gr <span style={{*/}
|
||||
{/*fontSize: '.72rem',*/}
|
||||
{/*color: 'red',*/}
|
||||
{/*fontWeight: 'bold'*/}
|
||||
{/*}} className={'smaller lighter'}>Need Response</span>*/}
|
||||
{/*</p>}*/}
|
||||
{/*{data.preorder_buyer_note ?*/}
|
||||
{/*<div>*/}
|
||||
{/*<p style={{margin: '2px 0', fontSize: 10}}>*/}
|
||||
{/*Detail: <a className={'viewDetailLink'} style={{*/}
|
||||
{/*cursor: 'pointer',*/}
|
||||
{/*fontWeight: 'bold',*/}
|
||||
{/*textDecoration: 'underline'*/}
|
||||
{/*}}*/}
|
||||
{/*onClick={() => this.openPreorderDialog(data)}>View notes</a>*/}
|
||||
{/*</p></div> : <div>-</div>}</TableRowColumn>*/}
|
||||
{/*:*/}
|
||||
{/*<TableRowColumn key={data.id}>-</TableRowColumn>*/}
|
||||
{/*}*/}
|
||||
|
||||
{/*<TableRowColumn key={data.id}*/}
|
||||
{/*className={'align-center'}>{data.quantity !== 0 ? data.quantity + "pcs" :*/}
|
||||
{/*<NumberFormat value={data.preorder_weight} displayType={'text'}*/}
|
||||
{/*suffix={'gr'}/>}</TableRowColumn>*/}
|
||||
{/*<TableRowColumn className="align-right"><NumberFormat value={data.price}*/}
|
||||
{/*displayType={'text'}*/}
|
||||
{/*thousandSeparator={true}*/}
|
||||
{/*prefix={'Rp '}/></TableRowColumn>*/}
|
||||
{/*<TableRowColumn><NumberFormat value={data.subtotal} displayType={'text'}*/}
|
||||
{/*thousandSeparator={true} prefix={'Rp '}/></TableRowColumn>*/}
|
||||
{/*</TableRow>*/}
|
||||
{/*)) : <EmptyComponent type="empty" header="" content="There is no data in sight"/>*/}
|
||||
{/*}*/}
|
||||
|
||||
{/*<TableRow displayBorder={false} className="TableRowCondensed TableRowCondensedFirst">*/}
|
||||
{/*<TableRowColumn colSpan={3} className="TableRowColumnCondensed TableRowColumnCondensedFirst"/>*/}
|
||||
{/*<TableRowColumn*/}
|
||||
{/*className="align-right font-500 TableRowColumnCondensed TableRowColumnCondensedFirst">Subtotal</TableRowColumn>*/}
|
||||
{/*<TableRowColumn className="TableRowColumnCondensed TableRowColumnCondensedFirst"><NumberFormat*/}
|
||||
{/*value={this.order.selectedOrder.subtotal} displayType={'text'} thousandSeparator={true}*/}
|
||||
{/*prefix={'Rp '}/></TableRowColumn>*/}
|
||||
{/*</TableRow>*/}
|
||||
{/*<TableRow displayBorder={false} className="TableRowCondensed">*/}
|
||||
{/*<TableRowColumn colSpan={3} className="TableRowColumnCondensed"/>*/}
|
||||
{/*<TableRowColumn className="align-right font-500 TableRowColumnCondensed">Discount</TableRowColumn>*/}
|
||||
{/*<TableRowColumn className="TableRowColumnCondensed"><NumberFormat value={0.00}*/}
|
||||
{/*displayType={'text'}*/}
|
||||
{/*thousandSeparator={true}*/}
|
||||
{/*prefix={'Rp '}/></TableRowColumn>*/}
|
||||
{/*</TableRow>*/}
|
||||
{/*<TableRow displayBorder={false} className="TableRowCondensed">*/}
|
||||
{/*<TableRowColumn colSpan={3} className="TableRowColumnCondensed"/>*/}
|
||||
{/*<TableRowColumn className="align-right font-500 TableRowColumnCondensed">Shipping*/}
|
||||
{/*Fee</TableRowColumn>*/}
|
||||
{/*<TableRowColumn className="TableRowColumnCondensed"><NumberFormat*/}
|
||||
{/*value={this.order.selectedOrder.shipping_price} displayType={'text'} thousandSeparator={true}*/}
|
||||
{/*prefix={'Rp '}/></TableRowColumn>*/}
|
||||
{/*</TableRow>*/}
|
||||
{/*<TableRow displayBorder={false} className="TableRowCondensed">*/}
|
||||
{/*<TableRowColumn colSpan={3} className="TableRowColumnCondensed"/>*/}
|
||||
{/*<TableRowColumn className="align-right font-500 TableRowColumnCondensed">Total</TableRowColumn>*/}
|
||||
{/*<TableRowColumn className="TableRowColumnCondensed "><NumberFormat*/}
|
||||
{/*value={(+this.order.selectedOrder.shipping_price) + (+this.order.selectedOrder.subtotal)}*/}
|
||||
{/*displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>.00</TableRowColumn>*/}
|
||||
{/*</TableRow>*/}
|
||||
{/*</TableBody>*/}
|
||||
{/*</Table>*/}
|
||||
{/*</div>*/}
|
||||
</Card>
|
||||
</Print>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<Dialog
|
||||
style={
|
||||
{
|
||||
margin: 'auto'
|
||||
}
|
||||
}
|
||||
open={this.globalUI.loadingVisibility
|
||||
}>
|
||||
<div
|
||||
style={
|
||||
{
|
||||
textAlign: 'center'
|
||||
}
|
||||
}>
|
||||
<LoadingDialog/>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
title="Error"
|
||||
style={{margin: 'auto'}}
|
||||
actions={[<FlatButton primary={false} label="Ok" onClick={this.closeError}/>]}
|
||||
open={this.state.errorBook}>
|
||||
{this.state.errorMessage}
|
||||
</Dialog>
|
||||
</div>
|
||||
</NoPrint>
|
||||
</PrintProvider>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
286
src/common/pages/Tasks/index.js
Normal file
286
src/common/pages/Tasks/index.js
Normal file
@@ -0,0 +1,286 @@
|
||||
import React from 'react';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import {
|
||||
Card,
|
||||
Divider,
|
||||
Snackbar,
|
||||
Toolbar,
|
||||
Table,
|
||||
SelectField,
|
||||
MenuItem,
|
||||
ToolbarGroup,
|
||||
} from 'material-ui';
|
||||
import {Table as TableAntd} from 'antd';
|
||||
import {Link} from 'react-router-dom';
|
||||
import {LINKS} from "../../routes";
|
||||
import './style.scss';
|
||||
import LoadingDialog from "../LoadingDialog";
|
||||
import Loader from 'react-loader-advanced';
|
||||
import {startCase} from 'lodash';
|
||||
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class OrderComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
expanded: false,
|
||||
value: 1,
|
||||
snackbarOpen: false,
|
||||
snackbarMessage: '',
|
||||
filteredInfo: null,
|
||||
searchText: '',
|
||||
filter : 'active',
|
||||
sortedInfo: null,
|
||||
filtered: false,
|
||||
data: []
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.orderStore = props.appstate.order;
|
||||
this.http = props.appstate.http;
|
||||
this.authStore = props.appstate.auth;
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
this.taskStore = props.appstate.task;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
// this.orderStore.isSearching = false;
|
||||
this.globalUI.openLoading();
|
||||
// this.orderStore.getAllOrder().then(res => {
|
||||
// console.log(res)
|
||||
// this.globalUI.closeLoading();
|
||||
// });
|
||||
this.taskStore.getAll().then(res=>{
|
||||
this.globalUI.closeLoading();
|
||||
})
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this
|
||||
.globalUI
|
||||
.changeBackgroundColor("#fff");
|
||||
}
|
||||
|
||||
onInputChange = (e) => {
|
||||
this.setState({searchText: e.target.value});
|
||||
}
|
||||
|
||||
// search = (event) => {
|
||||
// // console.log("dataSearch", event.target.value);
|
||||
// if (event.target.value.length === 0) {
|
||||
// this.orderStore.isSearching = false;
|
||||
// }
|
||||
// else {
|
||||
// this.orderStore.isSearching = true;
|
||||
// this.orderStore.search(event.target.value);
|
||||
// }
|
||||
// };
|
||||
|
||||
|
||||
handleExpandChange = (expanded) => {
|
||||
this.setState({expanded: expanded});
|
||||
};
|
||||
|
||||
handleClickItem = (key) => {
|
||||
if (key === this.state.expanded) {
|
||||
this.setState({
|
||||
expanded: 'x!0-2#',
|
||||
})
|
||||
}
|
||||
else {
|
||||
this.setState({
|
||||
expanded: key,
|
||||
})
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
handleChangeSorter = (pagination, filters, sorter) => {
|
||||
// console.log('Various parameters', pagination, filters, sorter);
|
||||
this.setState({
|
||||
filteredInfo: filters,
|
||||
sortedInfo: sorter,
|
||||
});
|
||||
};
|
||||
|
||||
clearFilters = () => {
|
||||
this.setState({filteredInfo: null});
|
||||
};
|
||||
clearAll = () => {
|
||||
this.setState({
|
||||
filteredInfo: null,
|
||||
sortedInfo: null,
|
||||
});
|
||||
};
|
||||
|
||||
handleAccept = (task) => {
|
||||
this.setState({
|
||||
expanded: 'x!0-2#',
|
||||
snackbarMessage: task + ' Accepted',
|
||||
snackbarOpen: true,
|
||||
})
|
||||
};
|
||||
|
||||
handleDecline = (task) => {
|
||||
this.setState({
|
||||
expanded: 'x!0-2#',
|
||||
snackbarMessage: task + ' Declined',
|
||||
snackbarOpen: true,
|
||||
})
|
||||
};
|
||||
|
||||
handleClose = () => {
|
||||
this.setState({
|
||||
snackbarOpen: false
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
// setCustomerSort = () => {
|
||||
// this.setState({
|
||||
// sortedInfo: {
|
||||
// order: 'descend',
|
||||
// columnKey: ['user_orders.user.email'],
|
||||
// },
|
||||
// });
|
||||
// };
|
||||
|
||||
filterOrder =(it)=>{
|
||||
if(this.taskStore.filterBy === 'withdraw'){
|
||||
return it.type === "withdraw";
|
||||
}
|
||||
else{
|
||||
return true
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
handleChange = (event, index, value) => this.setState({value});
|
||||
|
||||
render() {
|
||||
|
||||
let {sortedInfo, filteredInfo} = this.state;
|
||||
sortedInfo = sortedInfo || {};
|
||||
|
||||
filteredInfo = filteredInfo || {};
|
||||
|
||||
|
||||
const columns = [{
|
||||
title: 'Id',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
className: 'recentOrder-noOrder',
|
||||
render: (text) => <Link to={`${LINKS.TASKS}/${text}`} key={text}>{<span>{(text.split("-")[0])}</span>}</Link>,
|
||||
|
||||
},
|
||||
{
|
||||
title: 'Date',
|
||||
dataIndex: 'created_at',
|
||||
key: 'created_at',
|
||||
className: 'recentOrder-noOrder',
|
||||
render: (text) => (
|
||||
<div>
|
||||
<span>{moment(text).format('MMM DD, YYYY')}</span> <span className='smaller lighter'>{moment(text).format('hh:mm')}</span>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: 'Store',
|
||||
dataIndex: 'transaction.user.store.name',
|
||||
key: 'transaction.user.store.name',
|
||||
className: 'recentOrder-noOrder',
|
||||
render: (text) => {
|
||||
return <span>{text}</span>
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Type',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
className: 'recentOrder-noOrder',
|
||||
render: (text) => <span>{startCase(text)}</span>
|
||||
}];
|
||||
|
||||
|
||||
/*() => {
|
||||
|
||||
(this.orderStore.orderList.length > 0) ? (this.orderStore.isSearching ? this.orderStore.dataFiltered : this.orderStore.orderList).map((item, index) => (
|
||||
|
||||
)) : <EmptyComponent type="empty" header="" content="There is no data in sight"/>
|
||||
|
||||
};*/
|
||||
|
||||
return (
|
||||
<div className="order containerMiddle">
|
||||
<div className="row">
|
||||
<div className="col l12 m12 s12">
|
||||
<div style={{marginBottom: '16px'}}>
|
||||
<h3 className="headerMenu">Tasks</h3>
|
||||
</div>
|
||||
<Card className="animated fadeIn no-shadow" style={{backgroundColor: 'transparent'}}>
|
||||
{/*<Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>*/}
|
||||
{/*<ToolbarGroup>*/}
|
||||
{/*<SearchIcon style={{marginRight: 8, color: "#999"}}/>*/}
|
||||
{/*<TextField*/}
|
||||
{/*hintText="Search Order ID"*/}
|
||||
{/*style={{fontSize: 14}}*/}
|
||||
{/*hintStyle={{fontSize: 14}}*/}
|
||||
{/*underlineShow={false}*/}
|
||||
{/*onChange={this.search}*/}
|
||||
{/*/>*/}
|
||||
{/*</ToolbarGroup>*/}
|
||||
{/*</Toolbar>*/}
|
||||
<Divider/>
|
||||
<div className="row">
|
||||
<div className="col l12 m12 s12">
|
||||
<SelectField
|
||||
floatingLabelText="Filter"
|
||||
value={this.taskStore.filterBy}
|
||||
onChange={(e,i,v)=>this.taskStore.changeFilterBy(v)}
|
||||
floatingLabelStyle={{color : '#6772e5'}}
|
||||
underlineStyle={{border:0}}
|
||||
>
|
||||
<MenuItem value={'all'} primaryText="All" />
|
||||
</SelectField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<Loader show={this.globalUI.loadingVisibility} message={<LoadingDialog/>}
|
||||
messageStyle={{textAlign: 'center'}}
|
||||
backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>
|
||||
|
||||
|
||||
<TableAntd
|
||||
pagination={true}
|
||||
className='table-padded'
|
||||
dataSource={this.taskStore.isSearching ? this.taskStore.dataFiltered : this.taskStore.data.filter(this.filterOrder)}
|
||||
onChange={this.handleChangeSorter}
|
||||
columns={columns}
|
||||
onRow={(record) => {
|
||||
return {
|
||||
onClick: () => {
|
||||
this.props.history.push(`${LINKS.TASKS}/${record.id}`);
|
||||
}, // click row
|
||||
};
|
||||
}}
|
||||
/>
|
||||
|
||||
</Loader>
|
||||
</Card>
|
||||
<Snackbar
|
||||
open={this.state.snackbarOpen}
|
||||
message={this.state.snackbarMessage}
|
||||
action="OK"
|
||||
autoHideDuration={4000}
|
||||
onActionClick={this.handleClose}
|
||||
onRequestClose={this.handleClose}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
39
src/common/pages/Tasks/style.scss
Normal file
39
src/common/pages/Tasks/style.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
.order {
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.viewDetailLink {
|
||||
font-weight: bold;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.orderDetail {
|
||||
margin-top: 35px;
|
||||
|
||||
.orderContainerHeader{
|
||||
padding: 18px;
|
||||
}
|
||||
.orderFormHeading {
|
||||
margin-bottom: 4rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.orderFormDate {
|
||||
font-size: .9rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #3E4B5B;
|
||||
text-align: left;
|
||||
}
|
||||
.orderFormLabel {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: #3E4B5B;
|
||||
}
|
||||
|
||||
.orderFormLabelNumber {
|
||||
font-size: 16px;
|
||||
color: #636c72 !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user