Initial commit
This commit is contained in:
Rifqy Zacky Ariadhy
240
src/common/pages/Promotion/All/index.js
Normal file
240
src/common/pages/Promotion/All/index.js
Normal file
@@ -0,0 +1,240 @@
|
||||
import React from 'react';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import bind from 'bind-decorator';
|
||||
import {
|
||||
Card,
|
||||
CardActions,
|
||||
CardHeader,
|
||||
CardMedia,
|
||||
CardTitle,
|
||||
AutoComplete,
|
||||
CardText,
|
||||
FlatButton,
|
||||
Divider,
|
||||
RaisedButton,
|
||||
Toolbar,
|
||||
DatePicker,
|
||||
FontIcon,
|
||||
SelectField,
|
||||
MenuItem,
|
||||
ToolbarGroup,
|
||||
FloatingActionButton,
|
||||
ToolbarSeparator,
|
||||
IconButton,
|
||||
ToolbarTitle,
|
||||
Table,
|
||||
TableBody,
|
||||
TableHeader,
|
||||
TableHeaderColumn,
|
||||
TableRow,
|
||||
TableRowColumn,
|
||||
TextField,
|
||||
Paper,
|
||||
RadioButton,
|
||||
RadioButtonGroup,
|
||||
DropDownMenu,
|
||||
Dialog
|
||||
} from 'material-ui';
|
||||
import {withRouter} from 'react-router';
|
||||
import {BrowserRouter as Router, Route} from 'react-router-dom';
|
||||
import StarBorder from 'material-ui/svg-icons/toggle/star-border';
|
||||
import ContentAdd from 'material-ui/svg-icons/content/add';
|
||||
import SwipeableViews from 'react-swipeable-views';
|
||||
import SearchIcon from 'material-ui/svg-icons/action/search';
|
||||
import AddIcon from 'material-ui/svg-icons/content/add';
|
||||
import EyeIcon from 'material-ui/svg-icons/image/remove-red-eye';
|
||||
import DeleteIcon from 'material-ui/svg-icons/content/delete-sweep';
|
||||
import ImageEdit from 'material-ui/svg-icons/image/edit';
|
||||
import EmptyComponent from '../../EmptyComponent';
|
||||
import LoadingDialog from "../../LoadingDialog";
|
||||
import Loader from 'react-loader-advanced';
|
||||
import {Row, Col} from 'antd';
|
||||
|
||||
import '../style.scss';
|
||||
import {appConfig} from "../../../config/app";
|
||||
import {Link} from 'react-router-dom';
|
||||
import {LINKS} from "../../../routes";
|
||||
import {ItemCard} from '../ItemCard';
|
||||
import InfiniteScroll from 'react-infinite-scroller';
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class All extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);``
|
||||
this.props = props;
|
||||
this.state = {
|
||||
searchText:'',
|
||||
value: 0,
|
||||
statusBanned: "Banned",
|
||||
statusSoldOut: "Sold Out"
|
||||
};
|
||||
this.handleChange = this
|
||||
.handleChange
|
||||
.bind(this);
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.http = props.appstate.http;
|
||||
this.authStore = props.appstate.auth;
|
||||
this.uiStore = props.appstate.uiStore;
|
||||
this.userData = props.appstate.userData;
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
this.rewardStore = props.appstate.reward;
|
||||
this.userData = props.appstate.userData;
|
||||
this.myStoreItem = props.appstate.myStoreItem;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
// this.myStoreItem.isSearching = false;
|
||||
if(this.userData.role == 'store') {
|
||||
this.myStoreItem.getAll();
|
||||
}
|
||||
if(this.userData.role == 'administrator') {
|
||||
this.myStoreItem.setRequestQuery({user_store_id : this.props.id});
|
||||
console.log('ini id',this.props.id);
|
||||
this.myStoreItem.getAll();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount(){
|
||||
this.myStoreItem.isSearching = false;
|
||||
this.myStoreItem.reset();
|
||||
}
|
||||
|
||||
deleteClicked = (id) => {
|
||||
this.state.id = id;
|
||||
this.setState({
|
||||
openedDelete: true
|
||||
});
|
||||
}
|
||||
|
||||
search = (event)=>{
|
||||
console.log("dataSearch",event.target.value);
|
||||
if(event.target.value.length == 0){
|
||||
this.myStoreItem.isSearching = false;
|
||||
}
|
||||
else{
|
||||
this.myStoreItem.isSearching = true;
|
||||
this.myStoreItem.search(event.target.value);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
handleClickDelete = (id) => {
|
||||
this.rewardStore.deleteReward(id);
|
||||
this.setState({
|
||||
openedDelete: false,
|
||||
openSnackbarDelete: true
|
||||
});
|
||||
this.globalUI.openSnackbar("Successful Deleted Existing Reward");
|
||||
}
|
||||
|
||||
handleCloseDelete = () => {
|
||||
this.setState({
|
||||
openedDelete: false
|
||||
})
|
||||
}
|
||||
|
||||
handleChange = (event, index, value) => this.setState({value});
|
||||
|
||||
loadMore = ()=>{
|
||||
console.log('RUNNss');
|
||||
if(this.myStoreItem.data.length > 0){
|
||||
this.myStoreItem.nextPage(true);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
console.log(this.myStoreItem.data.length);
|
||||
|
||||
const actionsDelete = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={true}
|
||||
onClick={this.handleCloseDelete}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Delete"
|
||||
primary={true}
|
||||
onClick={() => this.handleClickDelete(this.state.id)}
|
||||
/>,
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="row">
|
||||
<div className="col l12 m12 s12">
|
||||
<Card className="animated fadeIn cardLite">
|
||||
<Toolbar className="toolbarCard radius4" style={{backgroundColor: '#fff'}}>
|
||||
<ToolbarGroup>
|
||||
<SearchIcon style={{marginRight: 8, color: "#999"}}/>
|
||||
<TextField
|
||||
hintText="Search All by Name"
|
||||
style={{fontSize: 14}}
|
||||
hintStyle={{fontSize: 14}}
|
||||
underlineShow={false}
|
||||
onChange={this.search}
|
||||
/>
|
||||
</ToolbarGroup>
|
||||
{/*<ToolbarGroup className="ToolbarGroupLast">*/}
|
||||
{/*<ToolbarSeparator/>*/}
|
||||
{/*<Link to={`${LINKS.FORM_ITEMS}`}>*/}
|
||||
{/*<RaisedButton className="ToolbarGroupLastButton" icon={<AddIcon/>} label="New Items"*/}
|
||||
{/*primary={true}/>*/}
|
||||
{/*</Link>*/}
|
||||
{/*</ToolbarGroup>*/}
|
||||
</Toolbar>
|
||||
|
||||
{/*<div style={{paddingBottom: 5}}>*/}
|
||||
{/*<Loader show={false} message={<LoadingDialog/>}*/}
|
||||
{/*messageStyle={{textAlign: 'center'}} backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>*/}
|
||||
|
||||
{/*</Loader>*/}
|
||||
{/*</div>*/}
|
||||
<Dialog
|
||||
title="Warning"
|
||||
actions={actionsDelete}
|
||||
modal={true}
|
||||
open={this.state.openedDelete}
|
||||
onRequestClose={() => this.handleCloseDelete()}
|
||||
>
|
||||
Are you sure want to delete this data?
|
||||
</Dialog>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<InfiniteScroll pageStart={0} loadMore={this.loadMore} hasMore={true}>
|
||||
<Row className="row rowItem" gutter={8}>
|
||||
{(this.userData.role === 'administrator') ?
|
||||
<Col className="gutter-row col animated fadeIn" span={4}>
|
||||
<Link to={`${LINKS.FORM_UPLOAD_PROMOTION}/${this.props.id}`} style={{color: '#424770'}}>
|
||||
<div className="flex add-new"
|
||||
style={{
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
height: 323
|
||||
}}>
|
||||
<div>
|
||||
<FontIcon className="material-icons icon-add ">add</FontIcon>
|
||||
</div>
|
||||
Add new item
|
||||
</div>
|
||||
</Link>
|
||||
</Col> : ""
|
||||
}
|
||||
|
||||
{(this.myStoreItem.isSearching ? this.myStoreItem.dataFiltered : this.myStoreItem.data).map(item => {
|
||||
return (<Col key={item.id} className="gutter-row col" span={4} style={{marginBottom: 20}}>
|
||||
<div className="gutter-box"><ItemCard data={item}/></div>
|
||||
</Col>)
|
||||
})}
|
||||
</Row>
|
||||
</InfiniteScroll>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
96
src/common/pages/Promotion/ItemCard/index.js
Normal file
96
src/common/pages/Promotion/ItemCard/index.js
Normal file
@@ -0,0 +1,96 @@
|
||||
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);
|
||||
|
||||
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 : appConfig.appUrl+'/assets/images/no-image.png'} alt="" style={{height: 175}}/>
|
||||
</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={<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}</div>
|
||||
</CardText>
|
||||
|
||||
<CardText style={{padding: "8px 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>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
98
src/common/pages/Promotion/index.js
Normal file
98
src/common/pages/Promotion/index.js
Normal file
@@ -0,0 +1,98 @@
|
||||
import React from 'react';
|
||||
import {inject, observer} from 'mobx-react';
|
||||
import {Link} from 'react-router';
|
||||
import {Tab, Tabs} from 'material-ui';
|
||||
import './style.scss';
|
||||
import All from "./All/index";
|
||||
// import Active from "./Active/index";
|
||||
// import Unactive from "./Unactive/index";
|
||||
// import SoldOut from "./SoldOut/index";
|
||||
// import Banned from "./Banned/index";
|
||||
|
||||
export const ITEM_TABS = {
|
||||
ALL: 'all',
|
||||
ACTIVE: 'active',
|
||||
// UNACTIVE : 'unactive',
|
||||
// SOLD_OUT: 'sold_out',
|
||||
// BANNED: 'banned',
|
||||
};
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class Promotion extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
tabSelected: 'all',
|
||||
};
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.http = props.appstate.http;
|
||||
this.authStore = props.appstate.auth;
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
this.appStore = props.appstate.app;
|
||||
this.myStore = props.appstate.myStore;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
}
|
||||
|
||||
handleChange = (tabSelected) => {
|
||||
this.setState({tabSelected: tabSelected});
|
||||
this.globalUI.itemsTabSelected = tabSelected;
|
||||
};
|
||||
|
||||
getContent() {
|
||||
switch (this.globalUI.itemsTabSelected) {
|
||||
case ITEM_TABS.ALL:
|
||||
return <All/>;
|
||||
// case ITEM_TABS.ACTIVE:
|
||||
// return <Active/>;
|
||||
// case ITEM_TABS.UNACTIVE:
|
||||
// return <Unactive/>;
|
||||
// case ITEM_TABS.SOLD_OUT:
|
||||
// return <SoldOut/>;
|
||||
// case ITEM_TABS.BANNED:
|
||||
// return <Banned/>;
|
||||
default:
|
||||
return <All/>
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const {type:appType} = this.appStore;
|
||||
|
||||
return (
|
||||
<div className="setting containerMiddle">
|
||||
<div className="row">
|
||||
<div className="col l12 m12 s12 no-padding">
|
||||
<Tabs
|
||||
value={this.globalUI.itemsTabSelected}
|
||||
onChange={this.handleChange}
|
||||
inkBarStyle={{background: 'transparent'}}
|
||||
className="tabsAkun"
|
||||
style={{background: 'transparent'}} >
|
||||
<Tab label="All" value="all" className={(this.globalUI.itemsTabSelected === 'all') ? "buttonTabs buttonTabsActive" : 'buttonTabs'}>
|
||||
</Tab>
|
||||
{/*<Tab label="Active" value="active" className={(this.globalUI.itemsTabSelected === 'active') ? "buttonTabs buttonTabsActive" : 'buttonTabs'}>*/}
|
||||
|
||||
{/*</Tab>*/}
|
||||
{/*<Tab label="Inactive" value="unactive" className={(this.globalUI.itemsTabSelected === 'unactive') ? "buttonTabs buttonTabsActive" : 'buttonTabs'}>*/}
|
||||
|
||||
{/*</Tab>*/}
|
||||
{/*<Tab label="Sold Out" value="sold_out" className={(this.globalUI.itemsTabSelected === 'sold_out') ? "buttonTabs buttonTabsActive" : 'buttonTabs'}>*/}
|
||||
|
||||
{/*</Tab>*/}
|
||||
{/*<Tab label="Banned" value="banned" className={(this.globalUI.itemsTabSelected === 'banned') ? "buttonTabs buttonTabsActive" : 'buttonTabs'}>*/}
|
||||
{/**/}
|
||||
{/*</Tab>*/}
|
||||
</Tabs>
|
||||
{this.getContent()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
70
src/common/pages/Promotion/style.scss
Normal file
70
src/common/pages/Promotion/style.scss
Normal file
@@ -0,0 +1,70 @@
|
||||
.setting {
|
||||
margin-top: 35px;
|
||||
.container {
|
||||
padding: 25px;
|
||||
|
||||
.ant-card {
|
||||
background: #fff;
|
||||
border-radius: 0px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all .3s;
|
||||
}
|
||||
.ant-card-head {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
background: #fff;
|
||||
border-bottom: 0px solid #e9e9e9;
|
||||
padding: 0 24px;
|
||||
}
|
||||
.ant-card:hover {
|
||||
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
|
||||
border-color: transparent;
|
||||
}
|
||||
.ant-card-body-dashboard {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.label-form {
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
color: rgb(153, 153, 153);
|
||||
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
|
||||
margin-bottom: -8px;
|
||||
}
|
||||
|
||||
.backgroundImage {
|
||||
height: 182px;
|
||||
background-image: url('/assets/images/material3.jpg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
cursor: pointer;
|
||||
min-height: 75px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.photo-title{
|
||||
font-size: 1.25em;
|
||||
font-weight: 400;
|
||||
margin-left: 12px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.box-upload{
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.col-form{
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user