update: shop page
This commit is contained in:
Rifqy Zacky Ariadhy
parent
0794e91ad0
commit
e503b70640
|
|
@ -538,226 +538,10 @@ export default class App extends React.Component {
|
||||||
{/*</ToolbarGroup>*/}
|
{/*</ToolbarGroup>*/}
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
|
|
||||||
<Drawer containerClassName={(window.innerWidth < 600) ? 'drawer_small' : 'drawer_large transparent no-shadow'}
|
|
||||||
docked={(window.innerWidth < 600) ? false : true}
|
|
||||||
onRequestChange={(open) => this.setState({open})}
|
|
||||||
open={this.state.open}>
|
|
||||||
<Toolbar className="hide-on-med-and-up transparent" style={{marginLeft: 16}}>
|
|
||||||
<ToolbarGroup firstChild={true}>
|
|
||||||
{
|
|
||||||
// (this.settingStore.isIconEmpty) ?
|
|
||||||
|
|
||||||
// <div>
|
|
||||||
// <Paper style={styles.Paper} zDepth={1} circle={true}>
|
|
||||||
// <img style={styles.ImageRounded} className="logo"
|
|
||||||
// src="/assets/images/logo_ikan.png"/>
|
|
||||||
// </Paper>
|
|
||||||
// </div>
|
|
||||||
// :
|
|
||||||
// <div>
|
|
||||||
// <Paper style={styles.Paper} zDepth={1} circle={true}>
|
|
||||||
// <img style={styles.ImageRounded} className="logo"
|
|
||||||
// src={this.http.appendImagePath(this.settingStore.setting.icon)}/>
|
|
||||||
// </Paper>
|
|
||||||
// </div>
|
|
||||||
}
|
|
||||||
<div>
|
|
||||||
<Paper style={styles.Paper} zDepth={1} circle={true}>
|
|
||||||
<img style={styles.ImageRounded} className="logo" src="/assets/images/logo_ikan.png"/>
|
|
||||||
</Paper>
|
|
||||||
</div>
|
|
||||||
{/*<ToolbarTitle style={{color: '#424770'}}
|
|
||||||
text={(this.settingStore.setting.name) ? this.settingStore.setting.name : "Tourmate"}/>*/}
|
|
||||||
<ToolbarTitle style={{color: '#424770'}} text={'Marketplace'}/>
|
|
||||||
</ToolbarGroup>
|
|
||||||
</Toolbar>
|
|
||||||
|
|
||||||
{/*<Link onClick={this*/}
|
|
||||||
{/*.changeRoute*/}
|
|
||||||
{/*.bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem*/}
|
|
||||||
{/*leftIcon={<img src="/assets/images/icon/chart.png"/>}*/}
|
|
||||||
{/*className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
|
|
||||||
{/*className="menuAkun">Dashboard</span></MenuItem></Link>*/}
|
|
||||||
|
|
||||||
{/*{*/}
|
|
||||||
{/*userData.role == 'administrator' ?*/}
|
|
||||||
{/*<Link onClick={this*/}
|
|
||||||
{/*.changeRoute*/}
|
|
||||||
{/*.bind(this, '/app/data')} to={LINKS.DATA}> <MenuItem*/}
|
|
||||||
{/*leftIcon={<img src="/assets/images/icon/data.png"/>}*/}
|
|
||||||
{/*className={(this.state.selectedMenu === '/app/data') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
|
|
||||||
{/*className="menuAkun">Data</span></MenuItem></Link> : ''*/}
|
|
||||||
{/*}*/}
|
|
||||||
|
|
||||||
{/*{*/}
|
|
||||||
{/*userData.role == 'administrator' &&*/}
|
|
||||||
{/*<Link onClick={this*/}
|
|
||||||
{/*.changeRoute*/}
|
|
||||||
{/*.bind(this, '/app/layout')} to={LINKS.LAYOUT}> <MenuItem*/}
|
|
||||||
{/*leftIcon={<img src="/assets/images/icon/layout.png"/>}*/}
|
|
||||||
{/*className={(this.state.selectedMenu === '/app/layout') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
|
|
||||||
{/*className="menuAkun">Layout</span></MenuItem></Link>*/}
|
|
||||||
{/*}*/}
|
|
||||||
|
|
||||||
{/*{*/}
|
|
||||||
{/*userData.role == 'administrator' &&*/}
|
|
||||||
{/*<Link onClick={this*/}
|
|
||||||
{/*.changeRoute*/}
|
|
||||||
{/*.bind(this, '/app/content')} to={LINKS.CONTENT}> <MenuItem*/}
|
|
||||||
{/*leftIcon={<img src="/assets/images/icon/content.png"/>}*/}
|
|
||||||
{/*className={(this.state.selectedMenu === '/app/content') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
|
|
||||||
{/*className="menuAkun">Content</span></MenuItem></Link>*/}
|
|
||||||
{/*}*/}
|
|
||||||
|
|
||||||
{/*{*/}
|
|
||||||
{/*userData.role === 'administrator' &&*/}
|
|
||||||
{/*<Link onClick={this*/}
|
|
||||||
{/*.changeRoute*/}
|
|
||||||
{/*.bind(this, '/app/tasks')} to={LINKS.TASKS}> <MenuItem*/}
|
|
||||||
{/*leftIcon={<img src="/assets/images/icon/tasks.png"/>}*/}
|
|
||||||
{/*className={(this.state.selectedMenu === '/app/tasks') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
|
|
||||||
{/*className="menuAkun">Tasks</span></MenuItem></Link>*/}
|
|
||||||
{/*}*/}
|
|
||||||
|
|
||||||
{/*{*/}
|
|
||||||
{/*userData.role == 'store' ?*/}
|
|
||||||
{/*<Link onClick={this*/}
|
|
||||||
{/*.changeRoute*/}
|
|
||||||
{/*.bind(this, '/app/items')} to={LINKS.ITEMS}> <MenuItem*/}
|
|
||||||
{/*leftIcon={<img src="/assets/images/icon/product.png"/>}*/}
|
|
||||||
{/*className={(this.state.selectedMenu === '/app/items') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
|
|
||||||
{/*className="menuAkun">Items</span></MenuItem></Link>*/}
|
|
||||||
{/*: ""*/}
|
|
||||||
{/*}*/}
|
|
||||||
|
|
||||||
{/*{*/}
|
|
||||||
{/*userData.role == 'store' ?*/}
|
|
||||||
{/*<Link onClick={this*/}
|
|
||||||
{/*.changeRoute*/}
|
|
||||||
{/*.bind(this, '/app/billing')} to={LINKS.WALLET}> <MenuItem*/}
|
|
||||||
{/*leftIcon={<img src="/assets/images/icon/wallet.png"/>}*/}
|
|
||||||
{/*className={(this.state.selectedMenu === '/app/billing') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
|
|
||||||
{/*className="menuAkun">Wallet</span></MenuItem></Link> : ""*/}
|
|
||||||
{/*}*/}
|
|
||||||
|
|
||||||
|
|
||||||
{/*{*/}
|
|
||||||
{/*userData.role == 'store' ?*/}
|
|
||||||
{/*<Link onClick={this*/}
|
|
||||||
{/*.changeRoute*/}
|
|
||||||
{/*.bind(this, '/app/orders')} to={LINKS.ORDER}> <MenuItem*/}
|
|
||||||
{/*leftIcon={<img src="/assets/images/icon/accounting.png"/>}*/}
|
|
||||||
{/*className={(this.state.selectedMenu === '/app/orders') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
|
|
||||||
{/*className="menuAkun">Order</span></MenuItem></Link>*/}
|
|
||||||
{/*: ""*/}
|
|
||||||
{/*}*/}
|
|
||||||
{/*<Link onClick={this*/}
|
|
||||||
{/*.changeRoute*/}
|
|
||||||
{/*.bind(this, '/app/tasks')} to={LINKS.TASKS}> <MenuItem*/}
|
|
||||||
{/*leftIcon={<img src="/assets/images/icon/tasks.png"/>}*/}
|
|
||||||
{/*className={(this.state.selectedMenu === '/app/tasks') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
|
|
||||||
{/*className="menuAkun">Tasks</span></MenuItem></Link>*/}
|
|
||||||
|
|
||||||
{/*{*/}
|
|
||||||
{/*userData.role == 'store' ?*/}
|
|
||||||
{/*<Link onClick={this*/}
|
|
||||||
{/*.changeRoute*/}
|
|
||||||
{/*.bind(this, '/app/stores')} to={LINKS.STORES}> <MenuItem*/}
|
|
||||||
{/*leftIcon={<img src="/assets/images/icon/store.png"/>}*/}
|
|
||||||
{/*className={(this.state.selectedMenu === '/app/stores') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
|
|
||||||
{/*className="menuAkun">Store</span></MenuItem></Link> : ''*/}
|
|
||||||
{/*}*/}
|
|
||||||
|
|
||||||
{/* {
|
|
||||||
userData.role == 'store' ?
|
|
||||||
<Link onClick={this
|
|
||||||
.changeRoute
|
|
||||||
.bind(this, '/app/recipes')} to={LINKS.RECIPES}> <MenuItem
|
|
||||||
leftIcon={<img src="/assets/images/icon/recipe.png"/>}
|
|
||||||
className={(this.state.selectedMenu === '/app/recipes') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
|
||||||
className="menuAkun">Recipes</span></MenuItem></Link> : ''
|
|
||||||
} */}
|
|
||||||
|
|
||||||
{/* {
|
|
||||||
userData.role == 'administrator' ?
|
|
||||||
<Link onClick={this
|
|
||||||
.changeRoute
|
|
||||||
.bind(this, '/app/surf_turf')} to={LINKS.SURF}> <MenuItem
|
|
||||||
leftIcon={<img src="/assets/images/icon/grill.png"/>}
|
|
||||||
className={(this.state.selectedMenu === '/app/surf_turf') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
|
||||||
className="menuAkun">Surf & Turf</span></MenuItem></Link> : ''
|
|
||||||
}
|
|
||||||
|
|
||||||
{
|
|
||||||
userData.role == 'administrator' ?
|
|
||||||
<Link onClick={this
|
|
||||||
.changeRoute
|
|
||||||
.bind(this, '/app/help')} to={LINKS.HELP}> <MenuItem
|
|
||||||
leftIcon={<img src="/assets/images/icon/help.png"/>}
|
|
||||||
className={(this.state.selectedMenu === '/app/help') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
|
||||||
className="menuAkun">Help</span></MenuItem></Link> : ''
|
|
||||||
} */}
|
|
||||||
|
|
||||||
|
|
||||||
{/*<Link onClick={this*/}
|
|
||||||
{/*.changeRoute*/}
|
|
||||||
{/*.bind(this, '/app/inbox')} to={LINKS.INBOX}> <MenuItem*/}
|
|
||||||
{/*leftIcon={<img src="/assets/images/icon/inbox.png"/>}*/}
|
|
||||||
{/*className={(this.state.selectedMenu === '/app/inbox') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
|
|
||||||
{/*className="menuAkun">Inbox</span></MenuItem></Link>*/}
|
|
||||||
{/*/!*{*!/*/}
|
|
||||||
{/*/!*userData.role == 'administrator' && *!/*/}
|
|
||||||
{/*<Link onClick={this*/}
|
|
||||||
{/*.changeRoute*/}
|
|
||||||
{/*.bind(this, '/app/setting')} to={LINKS.SETTING}> <MenuItem*/}
|
|
||||||
{/*leftIcon={<img src="/assets/images/icon/settings.png"/>}*/}
|
|
||||||
{/*className={(this.state.selectedMenu === '/app/setting') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
|
|
||||||
{/*className="menuAkun">Setting</span></MenuItem></Link>*/}
|
|
||||||
{/*}*/}
|
|
||||||
{/*
|
|
||||||
userData.role == 'administrator' ?
|
|
||||||
<Link onClick={this
|
|
||||||
.changeRoute
|
|
||||||
.bind(this, '/app/promotion')} to={LINKS.PROMOTION}> <MenuItem
|
|
||||||
leftIcon={<img src="/assets/images/icon/promotion.png"/>}
|
|
||||||
className={(this.state.selectedMenu === '/app/promotion') ? "menuAkunItem active" : 'menuAkunItem'}><span
|
|
||||||
className="menuAkun">Promotion</span></MenuItem></Link> : ''
|
|
||||||
*/}
|
|
||||||
|
|
||||||
{/*<Link onClick={this*/}
|
|
||||||
{/*.changeRoute*/}
|
|
||||||
{/*.bind(this, '/app/entities')} to={LINKS.ENTITIES}> <MenuItem*/}
|
|
||||||
{/*leftIcon={<img src="/assets/images/icon/walter_white.png"/>}*/}
|
|
||||||
{/*className={(this.state.selectedMenu === '/app/entities') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
|
|
||||||
{/*className="menuAkun">Entities</span></MenuItem></Link>*/}
|
|
||||||
|
|
||||||
{/*<Link onClick={this*/}
|
|
||||||
{/*.changeRoute*/}
|
|
||||||
{/*.bind(this, '/app/agents')} to={LINKS.AGENT}> <MenuItem*/}
|
|
||||||
{/*leftIcon={<img src="/assets/images/icon/conference.png"/>}*/}
|
|
||||||
{/*className={(this.state.selectedMenu === '/app/agents') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
|
|
||||||
{/*className="menuAkun">Agents</span></MenuItem></Link>*/}
|
|
||||||
|
|
||||||
{/*<Link onClick={this*/}
|
|
||||||
{/*.changeRoute*/}
|
|
||||||
{/*.bind(this, LINKS.EMPLOYEE)} to={LINKS.EMPLOYEE}> <MenuItem*/}
|
|
||||||
{/*leftIcon={<img src="/assets/images/icon/employee.png"/>}*/}
|
|
||||||
{/*className={(this.state.selectedMenu === LINKS.EMPLOYEE) ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
|
|
||||||
{/*className="menuAkun">Employees</span></MenuItem></Link>*/}
|
|
||||||
|
|
||||||
{/*<Link onClick={this*/}
|
|
||||||
{/*.changeRoute*/}
|
|
||||||
{/*.bind(this, '/app/customers')} to={LINKS.CUSTOMER}> <MenuItem*/}
|
|
||||||
{/*leftIcon={<img src="/assets/images/icon/customer.png"/>}*/}
|
|
||||||
{/*className={(this.state.selectedMenu === '/app/customers') ? "menuAkunItem active" : 'menuAkunItem'}><span*/}
|
|
||||||
{/*className="menuAkun">Customers</span></MenuItem></Link>*/}
|
|
||||||
|
|
||||||
</Drawer>
|
|
||||||
|
|
||||||
<div className="mainContent" style={{
|
<div className="mainContent" style={{
|
||||||
paddingLeft: (window.innerWidth < 600) ? '0px' : '50px',
|
// paddingLeft: (window.innerWidth < 600) ? '0px' : '50px',
|
||||||
marginLeft: (window.innerWidth < 600) ? 'auto' : 'auto',
|
// marginLeft: (window.innerWidth < 600) ? 'auto' : '50px',
|
||||||
marginRight: (window.innerWidth < 600) ? '0' : 'auto'
|
// marginRight: (window.innerWidth < 600) ? '0' : '50px',
|
||||||
}}>
|
}}>
|
||||||
<div className="try"/>
|
<div className="try"/>
|
||||||
<Route/>
|
<Route/>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,8 @@
|
||||||
.app-container {
|
.app-container {
|
||||||
.mainContent {
|
.mainContent {
|
||||||
width: calc(100vw - 275px);
|
width: calc(100vw - 5vw);
|
||||||
|
margin-left: 2.5vw;
|
||||||
|
margin-right: 2.5vw;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 780px) {
|
@media screen and (max-width: 780px) {
|
||||||
|
|
|
||||||
|
|
@ -85,19 +85,19 @@ export default class All extends React.Component {
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
// this.myStoreItem.isSearching = false;
|
// this.myStoreItem.isSearching = false;
|
||||||
if(this.userData.role == 'store') {
|
// if(this.userData.role == 'store') {
|
||||||
this.myStoreItem.getAll();
|
// this.myStoreItem.getAll();
|
||||||
}
|
// }
|
||||||
if(this.userData.role == 'administrator') {
|
// if(this.userData.role == 'administrator') {
|
||||||
this.myStoreItem.setRequestQuery({user_store_id : this.props.id});
|
// this.myStoreItem.setRequestQuery({user_store_id : this.props.id});
|
||||||
console.log('ini id',this.props.id);
|
// console.log('ini id',this.props.id);
|
||||||
this.myStoreItem.getAll();
|
// this.myStoreItem.getAll();
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount(){
|
componentWillUnmount(){
|
||||||
this.myStoreItem.isSearching = false;
|
// this.myStoreItem.isSearching = false;
|
||||||
this.myStoreItem.reset();
|
// this.myStoreItem.reset();
|
||||||
}
|
}
|
||||||
|
|
||||||
deleteClicked = (id) => {
|
deleteClicked = (id) => {
|
||||||
|
|
@ -145,7 +145,315 @@ export default class All extends React.Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
||||||
console.log(this.myStoreItem.data.length);
|
const data = [
|
||||||
|
{
|
||||||
|
category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
|
||||||
|
created_at: "2019-01-02T04:00:08.803Z",
|
||||||
|
custom_fields: null,
|
||||||
|
deleted_at: null,
|
||||||
|
description: null,
|
||||||
|
height: "0.00",
|
||||||
|
id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
|
||||||
|
images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
|
||||||
|
item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
|
||||||
|
length: "0.00",
|
||||||
|
name: "Silly Oregano Seasoning",
|
||||||
|
odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
|
||||||
|
product_id: 205,
|
||||||
|
product_tmpl_id: 291,
|
||||||
|
product_uom: 21,
|
||||||
|
odoo_stock_id: 123634,
|
||||||
|
order: 147291,
|
||||||
|
preorder: null,
|
||||||
|
regular_price: "10",
|
||||||
|
sale_date_from: null,
|
||||||
|
sale_date_to: null,
|
||||||
|
sale_price: null,
|
||||||
|
seen: 0,
|
||||||
|
sold: 0,
|
||||||
|
stock: "34.00",
|
||||||
|
uom: "pack",
|
||||||
|
updated_at: "2019-01-02T13:00:05.042Z",
|
||||||
|
use_weight_as_stock: false,
|
||||||
|
user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
|
||||||
|
visible: true,
|
||||||
|
weight: "0.04",
|
||||||
|
width: "0.00",
|
||||||
|
wishlist: "0",
|
||||||
|
},{
|
||||||
|
category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
|
||||||
|
created_at: "2019-01-02T04:00:08.803Z",
|
||||||
|
custom_fields: null,
|
||||||
|
deleted_at: null,
|
||||||
|
description: null,
|
||||||
|
height: "0.00",
|
||||||
|
id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
|
||||||
|
images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
|
||||||
|
item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
|
||||||
|
length: "0.00",
|
||||||
|
name: "Silly Oregano Seasoning",
|
||||||
|
odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
|
||||||
|
product_id: 205,
|
||||||
|
product_tmpl_id: 291,
|
||||||
|
product_uom: 21,
|
||||||
|
odoo_stock_id: 123634,
|
||||||
|
order: 147291,
|
||||||
|
preorder: null,
|
||||||
|
regular_price: "10",
|
||||||
|
sale_date_from: null,
|
||||||
|
sale_date_to: null,
|
||||||
|
sale_price: null,
|
||||||
|
seen: 0,
|
||||||
|
sold: 0,
|
||||||
|
stock: "34.00",
|
||||||
|
uom: "pack",
|
||||||
|
updated_at: "2019-01-02T13:00:05.042Z",
|
||||||
|
use_weight_as_stock: false,
|
||||||
|
user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
|
||||||
|
visible: true,
|
||||||
|
weight: "0.04",
|
||||||
|
width: "0.00",
|
||||||
|
wishlist: "0",
|
||||||
|
},{
|
||||||
|
category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
|
||||||
|
created_at: "2019-01-02T04:00:08.803Z",
|
||||||
|
custom_fields: null,
|
||||||
|
deleted_at: null,
|
||||||
|
description: null,
|
||||||
|
height: "0.00",
|
||||||
|
id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
|
||||||
|
images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
|
||||||
|
item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
|
||||||
|
length: "0.00",
|
||||||
|
name: "Silly Oregano Seasoning",
|
||||||
|
odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
|
||||||
|
product_id: 205,
|
||||||
|
product_tmpl_id: 291,
|
||||||
|
product_uom: 21,
|
||||||
|
odoo_stock_id: 123634,
|
||||||
|
order: 147291,
|
||||||
|
preorder: null,
|
||||||
|
regular_price: "10",
|
||||||
|
sale_date_from: null,
|
||||||
|
sale_date_to: null,
|
||||||
|
sale_price: null,
|
||||||
|
seen: 0,
|
||||||
|
sold: 0,
|
||||||
|
stock: "34.00",
|
||||||
|
uom: "pack",
|
||||||
|
updated_at: "2019-01-02T13:00:05.042Z",
|
||||||
|
use_weight_as_stock: false,
|
||||||
|
user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
|
||||||
|
visible: true,
|
||||||
|
weight: "0.04",
|
||||||
|
width: "0.00",
|
||||||
|
wishlist: "0",
|
||||||
|
},{
|
||||||
|
category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
|
||||||
|
created_at: "2019-01-02T04:00:08.803Z",
|
||||||
|
custom_fields: null,
|
||||||
|
deleted_at: null,
|
||||||
|
description: null,
|
||||||
|
height: "0.00",
|
||||||
|
id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
|
||||||
|
images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
|
||||||
|
item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
|
||||||
|
length: "0.00",
|
||||||
|
name: "Silly Oregano Seasoning",
|
||||||
|
odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
|
||||||
|
product_id: 205,
|
||||||
|
product_tmpl_id: 291,
|
||||||
|
product_uom: 21,
|
||||||
|
odoo_stock_id: 123634,
|
||||||
|
order: 147291,
|
||||||
|
preorder: null,
|
||||||
|
regular_price: "10",
|
||||||
|
sale_date_from: null,
|
||||||
|
sale_date_to: null,
|
||||||
|
sale_price: null,
|
||||||
|
seen: 0,
|
||||||
|
sold: 0,
|
||||||
|
stock: "34.00",
|
||||||
|
uom: "pack",
|
||||||
|
updated_at: "2019-01-02T13:00:05.042Z",
|
||||||
|
use_weight_as_stock: false,
|
||||||
|
user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
|
||||||
|
visible: true,
|
||||||
|
weight: "0.04",
|
||||||
|
width: "0.00",
|
||||||
|
wishlist: "0",
|
||||||
|
},{
|
||||||
|
category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
|
||||||
|
created_at: "2019-01-02T04:00:08.803Z",
|
||||||
|
custom_fields: null,
|
||||||
|
deleted_at: null,
|
||||||
|
description: null,
|
||||||
|
height: "0.00",
|
||||||
|
id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
|
||||||
|
images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
|
||||||
|
item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
|
||||||
|
length: "0.00",
|
||||||
|
name: "Silly Oregano Seasoning",
|
||||||
|
odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
|
||||||
|
product_id: 205,
|
||||||
|
product_tmpl_id: 291,
|
||||||
|
product_uom: 21,
|
||||||
|
odoo_stock_id: 123634,
|
||||||
|
order: 147291,
|
||||||
|
preorder: null,
|
||||||
|
regular_price: "10",
|
||||||
|
sale_date_from: null,
|
||||||
|
sale_date_to: null,
|
||||||
|
sale_price: null,
|
||||||
|
seen: 0,
|
||||||
|
sold: 0,
|
||||||
|
stock: "34.00",
|
||||||
|
uom: "pack",
|
||||||
|
updated_at: "2019-01-02T13:00:05.042Z",
|
||||||
|
use_weight_as_stock: false,
|
||||||
|
user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
|
||||||
|
visible: true,
|
||||||
|
weight: "0.04",
|
||||||
|
width: "0.00",
|
||||||
|
wishlist: "0",
|
||||||
|
},{
|
||||||
|
category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
|
||||||
|
created_at: "2019-01-02T04:00:08.803Z",
|
||||||
|
custom_fields: null,
|
||||||
|
deleted_at: null,
|
||||||
|
description: null,
|
||||||
|
height: "0.00",
|
||||||
|
id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
|
||||||
|
images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
|
||||||
|
item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
|
||||||
|
length: "0.00",
|
||||||
|
name: "Silly Oregano Seasoning",
|
||||||
|
odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
|
||||||
|
product_id: 205,
|
||||||
|
product_tmpl_id: 291,
|
||||||
|
product_uom: 21,
|
||||||
|
odoo_stock_id: 123634,
|
||||||
|
order: 147291,
|
||||||
|
preorder: null,
|
||||||
|
regular_price: "10",
|
||||||
|
sale_date_from: null,
|
||||||
|
sale_date_to: null,
|
||||||
|
sale_price: null,
|
||||||
|
seen: 0,
|
||||||
|
sold: 0,
|
||||||
|
stock: "34.00",
|
||||||
|
uom: "pack",
|
||||||
|
updated_at: "2019-01-02T13:00:05.042Z",
|
||||||
|
use_weight_as_stock: false,
|
||||||
|
user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
|
||||||
|
visible: true,
|
||||||
|
weight: "0.04",
|
||||||
|
width: "0.00",
|
||||||
|
wishlist: "0",
|
||||||
|
},{
|
||||||
|
category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
|
||||||
|
created_at: "2019-01-02T04:00:08.803Z",
|
||||||
|
custom_fields: null,
|
||||||
|
deleted_at: null,
|
||||||
|
description: null,
|
||||||
|
height: "0.00",
|
||||||
|
id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
|
||||||
|
images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
|
||||||
|
item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
|
||||||
|
length: "0.00",
|
||||||
|
name: "Silly Oregano Seasoning",
|
||||||
|
odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
|
||||||
|
product_id: 205,
|
||||||
|
product_tmpl_id: 291,
|
||||||
|
product_uom: 21,
|
||||||
|
odoo_stock_id: 123634,
|
||||||
|
order: 147291,
|
||||||
|
preorder: null,
|
||||||
|
regular_price: "10",
|
||||||
|
sale_date_from: null,
|
||||||
|
sale_date_to: null,
|
||||||
|
sale_price: null,
|
||||||
|
seen: 0,
|
||||||
|
sold: 0,
|
||||||
|
stock: "34.00",
|
||||||
|
uom: "pack",
|
||||||
|
updated_at: "2019-01-02T13:00:05.042Z",
|
||||||
|
use_weight_as_stock: false,
|
||||||
|
user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
|
||||||
|
visible: true,
|
||||||
|
weight: "0.04",
|
||||||
|
width: "0.00",
|
||||||
|
wishlist: "0",
|
||||||
|
},{
|
||||||
|
category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
|
||||||
|
created_at: "2019-01-02T04:00:08.803Z",
|
||||||
|
custom_fields: null,
|
||||||
|
deleted_at: null,
|
||||||
|
description: null,
|
||||||
|
height: "0.00",
|
||||||
|
id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
|
||||||
|
images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
|
||||||
|
item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
|
||||||
|
length: "0.00",
|
||||||
|
name: "Silly Oregano Seasoning",
|
||||||
|
odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
|
||||||
|
product_id: 205,
|
||||||
|
product_tmpl_id: 291,
|
||||||
|
product_uom: 21,
|
||||||
|
odoo_stock_id: 123634,
|
||||||
|
order: 147291,
|
||||||
|
preorder: null,
|
||||||
|
regular_price: "10",
|
||||||
|
sale_date_from: null,
|
||||||
|
sale_date_to: null,
|
||||||
|
sale_price: null,
|
||||||
|
seen: 0,
|
||||||
|
sold: 0,
|
||||||
|
stock: "34.00",
|
||||||
|
uom: "pack",
|
||||||
|
updated_at: "2019-01-02T13:00:05.042Z",
|
||||||
|
use_weight_as_stock: false,
|
||||||
|
user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
|
||||||
|
visible: true,
|
||||||
|
weight: "0.04",
|
||||||
|
width: "0.00",
|
||||||
|
wishlist: "0",
|
||||||
|
},{
|
||||||
|
category_id: "1e444a5a-cf4d-48e5-bde4-0f984ebd557d",
|
||||||
|
created_at: "2019-01-02T04:00:08.803Z",
|
||||||
|
custom_fields: null,
|
||||||
|
deleted_at: null,
|
||||||
|
description: null,
|
||||||
|
height: "0.00",
|
||||||
|
id: "7e3072c1-9bfd-4b52-af38-9c6e30456c73",
|
||||||
|
images: {main: "https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png", gallery: ["https://marketplace-sillyfish-api.asacreative.com/uploads/item_123634.png"]},
|
||||||
|
item_status_id: "2b1a2598-8333-4b19-ae7b-c054bec87540",
|
||||||
|
length: "0.00",
|
||||||
|
name: "Silly Oregano Seasoning",
|
||||||
|
odoo_additional_data: {product_id: 205, product_uom: 21, product_tmpl_id: 291},
|
||||||
|
product_id: 205,
|
||||||
|
product_tmpl_id: 291,
|
||||||
|
product_uom: 21,
|
||||||
|
odoo_stock_id: 123634,
|
||||||
|
order: 147291,
|
||||||
|
preorder: null,
|
||||||
|
regular_price: "10",
|
||||||
|
sale_date_from: null,
|
||||||
|
sale_date_to: null,
|
||||||
|
sale_price: null,
|
||||||
|
seen: 0,
|
||||||
|
sold: 0,
|
||||||
|
stock: "34.00",
|
||||||
|
uom: "pack",
|
||||||
|
updated_at: "2019-01-02T13:00:05.042Z",
|
||||||
|
use_weight_as_stock: false,
|
||||||
|
user_store_id: "959194a0-7067-400c-b354-2e8d03300660",
|
||||||
|
visible: true,
|
||||||
|
weight: "0.04",
|
||||||
|
width: "0.00",
|
||||||
|
wishlist: "0",
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
const actionsDelete = [
|
const actionsDelete = [
|
||||||
<FlatButton
|
<FlatButton
|
||||||
|
|
@ -173,7 +481,7 @@ export default class All extends React.Component {
|
||||||
style={{fontSize: 14}}
|
style={{fontSize: 14}}
|
||||||
hintStyle={{fontSize: 14}}
|
hintStyle={{fontSize: 14}}
|
||||||
underlineShow={false}
|
underlineShow={false}
|
||||||
onChange={this.search}
|
// onChange={this.search}
|
||||||
/>
|
/>
|
||||||
</ToolbarGroup>
|
</ToolbarGroup>
|
||||||
{/*<ToolbarGroup className="ToolbarGroupLast">*/}
|
{/*<ToolbarGroup className="ToolbarGroupLast">*/}
|
||||||
|
|
@ -244,7 +552,7 @@ export default class All extends React.Component {
|
||||||
</Col> : ""
|
</Col> : ""
|
||||||
}
|
}
|
||||||
|
|
||||||
{(this.myStoreItem.isSearching ? this.myStoreItem.dataFiltered : this.myStoreItem.data).map(item => {
|
{data.map(item => {
|
||||||
return (<Col key={item.id} className="gutter-row col" span={4} style={{marginBottom: 20}}>
|
return (<Col key={item.id} className="gutter-row col" span={4} style={{marginBottom: 20}}>
|
||||||
<div className="gutter-box"><ItemCard data={item}/></div>
|
<div className="gutter-box"><ItemCard data={item}/></div>
|
||||||
</Col>)
|
</Col>)
|
||||||
|
|
|
||||||
|
|
@ -31,8 +31,9 @@ export class ItemCard extends React.Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {data = {}} = this.props;
|
const {data = {}} = this.props;
|
||||||
const main = get(data,'images.main',null)
|
const main = get(data,'images.main',null);
|
||||||
const mainImage = this.http.appendImagePath(main);
|
// const mainImage = this.http.appendImagePath(main);
|
||||||
|
const mainImage = main;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link to={`${LINKS.FORM_ITEMS}/edit/${data.id}`}>
|
<Link to={`${LINKS.FORM_ITEMS}/edit/${data.id}`}>
|
||||||
|
|
@ -43,10 +44,12 @@ export class ItemCard extends React.Component {
|
||||||
{/*<CardTitle style={{padding:8}} subtitleStyle={{display:'none'}} title={data.name} titleStyle={{fontSize: 12}}/>*/}
|
{/*<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'}}
|
<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'}}
|
subtitle={<span style={{fontWeight: 'bold', color: 'orangered'}}>{data.regular_price} Points</span>}/>
|
||||||
value={data.regular_price}
|
{/*<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'}}*/}
|
||||||
displayType={'text'}
|
{/*subtitle={<NumberFormat style={{fontWeight: 'bold', color: 'orangered'}}*/}
|
||||||
thousandSeparator={true} prefix={'Rp'}/>}/>
|
{/*value={data.regular_price}*/}
|
||||||
|
{/*displayType={'text'}*/}
|
||||||
|
{/*thousandSeparator={true} prefix={'Rp'}/>}/>*/}
|
||||||
|
|
||||||
{/*<CardText style={{padding: 8}}>*/}
|
{/*<CardText style={{padding: 8}}>*/}
|
||||||
{/*<p className="font-14" style={{marginBottom: 32, fontWeight: 'bold'}}>{data.name}</p>*/}
|
{/*<p className="font-14" style={{marginBottom: 32, fontWeight: 'bold'}}>{data.name}</p>*/}
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,12 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {inject, observer} from 'mobx-react';
|
import {inject, observer} from 'mobx-react';
|
||||||
import {Link} from 'react-router';
|
import {Link} from 'react-router';
|
||||||
|
import { Affix, Card, Slider, Select } from 'antd';
|
||||||
import {Tab, Tabs} from 'material-ui';
|
import {Tab, Tabs} from 'material-ui';
|
||||||
import './style.scss';
|
import './style.scss';
|
||||||
import All from "./All/index";
|
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',
|
|
||||||
};
|
|
||||||
|
|
||||||
|
const Option = Select.Option;
|
||||||
@inject('appstate')
|
@inject('appstate')
|
||||||
@observer
|
@observer
|
||||||
export default class ItemsComponent extends React.Component {
|
export default class ItemsComponent extends React.Component {
|
||||||
|
|
@ -24,72 +14,70 @@ export default class ItemsComponent extends React.Component {
|
||||||
super(props);
|
super(props);
|
||||||
this.props = props;
|
this.props = props;
|
||||||
this.state = {
|
this.state = {
|
||||||
tabSelected: 'all',
|
valueMinimal: 0,
|
||||||
|
valueMaximal: 0,
|
||||||
};
|
};
|
||||||
this.handleChange = this.handleChange.bind(this);
|
|
||||||
this.defaultState = Object.assign({}, this.state);
|
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() {
|
componentDidMount() {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleChange = (tabSelected) => {
|
handleChangeMinimal = (valueMinimal) => {
|
||||||
this.setState({tabSelected: tabSelected});
|
this.setState({ valueMinimal });
|
||||||
this.globalUI.itemsTabSelected = tabSelected;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
getContent() {
|
handleChangeMaximal = (valueMaximal) => {
|
||||||
switch (this.globalUI.itemsTabSelected) {
|
this.setState({ valueMaximal });
|
||||||
case ITEM_TABS.ALL:
|
};
|
||||||
return <All/>;
|
|
||||||
case ITEM_TABS.ACTIVE:
|
handleChange = (value) => {
|
||||||
return <Active/>;
|
console.log(`selected ${value}`);
|
||||||
case ITEM_TABS.UNACTIVE:
|
}
|
||||||
return <Unactive/>;
|
|
||||||
case ITEM_TABS.SOLD_OUT:
|
handleBlur = () => {
|
||||||
return <SoldOut/>;
|
console.log('blur');
|
||||||
case ITEM_TABS.BANNED:
|
}
|
||||||
return <Banned/>;
|
|
||||||
default:
|
handleFocus = () => {
|
||||||
return <All/>
|
console.log('focus');
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { valueMinimal, valueMaximal } = this.state;
|
||||||
const {type:appType} = this.appStore;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="setting containerMiddle">
|
<div className="setting">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col l12 m12 s12 no-padding">
|
<div className="col l3 m3 s3 no-padding">
|
||||||
<Tabs
|
<Affix offsetTop={90}>
|
||||||
value={this.globalUI.itemsTabSelected}
|
<Card title="Filter" bordered={true} style={{ width: '100%' }}>
|
||||||
onChange={this.handleChange}
|
<p>Min. Points</p>
|
||||||
inkBarStyle={{background: 'transparent'}}
|
<Slider max={1000} onChange={this.handleChangeMinimal} value={valueMinimal} />
|
||||||
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>
|
<p>Max. Points</p>
|
||||||
{/*<Tab label="Inactive" value="unactive" className={(this.globalUI.itemsTabSelected === 'unactive') ? "buttonTabs buttonTabsActive" : 'buttonTabs'}>
|
<Slider max={1000} onChange={this.handleChangeMaximal} value={valueMaximal} />
|
||||||
|
|
||||||
</Tab>*/}
|
<p style={{marginTop: 25}}>Category</p>
|
||||||
<Tab label="Sold Out" value="sold_out" className={(this.globalUI.itemsTabSelected === 'sold_out') ? "buttonTabs buttonTabsActive" : 'buttonTabs'}>
|
<Select
|
||||||
|
showSearch
|
||||||
</Tab>
|
style={{ width: '100%' }}
|
||||||
{/*<Tab label="Banned" value="banned" className={(this.globalUI.itemsTabSelected === 'banned') ? "buttonTabs buttonTabsActive" : 'buttonTabs'}>*/}
|
placeholder="Select a category"
|
||||||
{/**/}
|
optionFilterProp="children"
|
||||||
{/*</Tab>*/}
|
onChange={this.handleChange}
|
||||||
</Tabs>
|
onFocus={this.handleFocus}
|
||||||
{this.getContent()}
|
onBlur={this.handleBlur}
|
||||||
|
// filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
||||||
|
>
|
||||||
|
<Option value="jack">Electronic</Option>
|
||||||
|
<Option value="lucy">Fashion</Option>
|
||||||
|
<Option value="tom">Food</Option>
|
||||||
|
</Select>
|
||||||
|
</Card>
|
||||||
|
</Affix>
|
||||||
|
</div>
|
||||||
|
<div className="col l9 m9 s9 no-padding">
|
||||||
|
<All/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user