100 lines
4.2 KiB
JavaScript
100 lines
4.2 KiB
JavaScript
import React from 'react';
|
|
import {inject, observer} from 'mobx-react';
|
|
import {
|
|
Card,
|
|
CardMedia,
|
|
CardTitle,
|
|
CardText,
|
|
FontIcon,
|
|
} from 'material-ui';
|
|
import NumberFormat from 'react-number-format';
|
|
import {Link} from 'react-router-dom';
|
|
import {LINKS} from "../../../routes";
|
|
import {appConfig} from "../../../config/app";
|
|
import get from 'lodash.get';
|
|
|
|
@inject('appstate')
|
|
@observer
|
|
export class ItemCard extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.props = props;
|
|
this.state = {};
|
|
this.defaultState = Object.assign({}, this.state);
|
|
|
|
this.http = props.appstate.http;
|
|
}
|
|
|
|
componentDidMount() {
|
|
// console.log('ItemCard');
|
|
}
|
|
|
|
render() {
|
|
const {data = {}} = this.props;
|
|
const main = get(data,'images.main',null);
|
|
// const mainImage = this.http.appendImagePath(main);
|
|
const mainImage = main;
|
|
|
|
return (
|
|
<Link to={`${LINKS.FORM_ITEMS}/edit/${data.id}`}>
|
|
<Card className="animated fadeIn cardLite marketplace-cardBox" style={{height: 323, cursor: 'pointer', textOverflow: 'ellipsis'}}>
|
|
<CardMedia>
|
|
<img src={(main) ? mainImage : 'https://marketplace-sillyfish-api.asacreative.com/assets/no-image.png'} alt="" style={{height: 175, objectFit: 'cover'}}/>
|
|
</CardMedia>
|
|
{/*<CardTitle style={{padding:8}} subtitleStyle={{display:'none'}} title={data.name} titleStyle={{fontSize: 12}}/>*/}
|
|
|
|
<CardTitle title={<Link to={`${LINKS.FORM_ITEMS}/${data.id}`}>{(data.name.length > 14) ? data.name.substring(0,13)+`...` : data.name}</Link>} titleStyle={{fontWeight: 'bold', fontSize: 18, lineHeight: '30px', whiteSpace: 'nowrap'}}
|
|
subtitle={<span style={{fontWeight: 'bold', color: 'orangered'}}>{data.regular_price} Points</span>}/>
|
|
{/*<CardTitle title={<Link to={`${LINKS.FORM_ITEMS}/${data.id}`}>{(data.name.length > 14) ? data.name.substring(0,13)+`...` : data.name}</Link>} titleStyle={{fontWeight: 'bold', fontSize: 18, lineHeight: '30px', whiteSpace: 'nowrap'}}*/}
|
|
{/*subtitle={<NumberFormat style={{fontWeight: 'bold', color: 'orangered'}}*/}
|
|
{/*value={data.regular_price}*/}
|
|
{/*displayType={'text'}*/}
|
|
{/*thousandSeparator={true} prefix={'Rp'}/>}/>*/}
|
|
|
|
{/*<CardText style={{padding: 8}}>*/}
|
|
{/*<p className="font-14" style={{marginBottom: 32, fontWeight: 'bold'}}>{data.name}</p>*/}
|
|
{/*<div className="flex flexSpaceBetween">*/}
|
|
{/*<NumberFormat style={{fontWeight: 'bold', color: 'orangered'}} value={data.regular_price}*/}
|
|
{/*displayType={'text'}*/}
|
|
{/*thousandSeparator={true} prefix={'Rp'}/>*/}
|
|
{/*<div style={{fontSize: "11px"}}><span style={{color: '#5a637e7d'}}>Stock</span>{data.stock}</div>*/}
|
|
{/*</div>*/}
|
|
{/*</CardText>*/}
|
|
|
|
<CardText style={{
|
|
padding: '16px 16px 8px',
|
|
boxShadow: '0px 5px 15px rgba(0,0,0,0.05)',
|
|
borderRadius: 6,
|
|
fontSize: 12
|
|
}}>
|
|
<div><span style={{color: '#636c72', fontWeight: '300'}}>Stock :</span> {+data.stock} {data.uom}</div>
|
|
</CardText>
|
|
|
|
<CardText style={{padding: "4px 16px"}}>
|
|
<div className="flex flexSpaceBetween">
|
|
<div className="font-12" style={{fontSize: '.72rem'}}>
|
|
<FontIcon className="material-icons font-12"
|
|
color='#636c72'
|
|
style={{
|
|
display: "inlineFlex", verticalAlign: "middle", lineHight: 1
|
|
}}>remove_red_eye</FontIcon> : {data.seen}
|
|
</div>
|
|
<div className="" style={{fontSize: '.72rem'}}>
|
|
<FontIcon className="material-icons font-12" color='#636c72' style={{
|
|
display: "inlineFlex",
|
|
verticalAlign: "middle",
|
|
lineHight: 1,
|
|
}}>favorite_border</FontIcon> : {data.wishlist}
|
|
</div>
|
|
<div style={{fontSize: '.72rem'}}><span style={{color: '#636c72', fontWeight: '300'}}>Sold</span>
|
|
: {data.sold}</div>
|
|
</div>
|
|
</CardText>
|
|
|
|
</Card>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
}
|