update: voucher page
This commit is contained in:
Rifqy Zacky Ariadhy
parent
19fe63396e
commit
2a676e2f3b
8
package-lock.json
generated
8
package-lock.json
generated
|
|
@ -13332,6 +13332,14 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"react-collapse": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/react-collapse/-/react-collapse-4.0.3.tgz",
|
||||
"integrity": "sha512-OO4NhtEqFtz+1ma31J1B7+ezdRnzHCZiTGSSd/Pxoks9hxrZYhzFEddeYt05A/1477xTtdrwo7xEa2FLJyWGCQ==",
|
||||
"requires": {
|
||||
"prop-types": "^15.5.8"
|
||||
}
|
||||
},
|
||||
"react-color": {
|
||||
"version": "2.14.1",
|
||||
"resolved": "https://registry.npmjs.org/react-color/-/react-color-2.14.1.tgz",
|
||||
|
|
|
|||
|
|
@ -85,6 +85,7 @@
|
|||
"rc-table": "^6.1.0",
|
||||
"rc-util": "^4.3.0",
|
||||
"react-addons-shallow-compare": "^15.6.2",
|
||||
"react-collapse": "^4.0.3",
|
||||
"react-color": "^2.13.8",
|
||||
"react-compound-timer": "^1.0.7",
|
||||
"react-confirm": "^0.1.16",
|
||||
|
|
@ -105,6 +106,7 @@
|
|||
"react-mapbox-gl": "^3.3.0",
|
||||
"react-markdown": "^3.1.0",
|
||||
"react-markdown-loader": "^1.1.14",
|
||||
"react-motion": "^0.5.2",
|
||||
"react-native-vector-icons": "^5.0.0",
|
||||
"react-number-format": "^3.0.3",
|
||||
"react-prop-types": "^0.4.0",
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
z-index: 1100;
|
||||
z-index: 1000;
|
||||
background-color: #f1f5f9 !important;
|
||||
height: 70px !important;
|
||||
padding: 8px 24px;
|
||||
|
|
|
|||
|
|
@ -1,567 +0,0 @@
|
|||
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() {
|
||||
|
||||
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 = [
|
||||
<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 === 'store' && this.userData.entity_permission.can_store_change_item) ?
|
||||
<Col className="gutter-row col animated fadeIn" span={4}>
|
||||
<Link to={`${LINKS.FORM_ITEMS}`} 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.userData.role === 'administrator') ?
|
||||
<Col className="gutter-row col animated fadeIn" span={4}>
|
||||
<Link to={`${LINKS.FORM_ITEMS}/${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> : ""
|
||||
}
|
||||
|
||||
{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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2,16 +2,13 @@ import React from 'react';
|
|||
import {inject, observer} from 'mobx-react';
|
||||
import {
|
||||
Card,
|
||||
CardMedia,
|
||||
CardTitle,
|
||||
CardText,
|
||||
FontIcon,
|
||||
} from 'material-ui';
|
||||
} from 'antd';
|
||||
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';
|
||||
import {Collapse} from "react-collapse";
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
|
|
@ -31,68 +28,12 @@ export class ItemCard extends React.Component {
|
|||
|
||||
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 className={'itemCard'}>
|
||||
<img className={'imageCard'} src={data.image} />
|
||||
<p className={'titleCard'}>{data.name}</p>
|
||||
</Card>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
95
src/common/pages/Vouchers/Modal/index.js
Normal file
95
src/common/pages/Vouchers/Modal/index.js
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
import React from 'react';
|
||||
import {inject, observer} from 'mobx-react';
|
||||
import {Link} from 'react-router';
|
||||
import { Modal, Button, Alert, Select } from 'antd';
|
||||
import './style.scss';
|
||||
|
||||
const Option = Select.Option;
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class ModalVouchersComponent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
selectedOption: '0 Points'
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
}
|
||||
|
||||
componentDidMount() {}
|
||||
|
||||
render() {
|
||||
const {data, isVisible = false, onOk = () => {}, onCancel = () => {}, title='Modal'} = this.props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={title}
|
||||
visible={isVisible}
|
||||
onOk={onOk}
|
||||
onCancel={onCancel}
|
||||
footer={null}
|
||||
bodyStyle={{
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
}}
|
||||
style={{
|
||||
minWidth: '50vw'
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
background: data.background_color || '#aaa',
|
||||
// height: 500,
|
||||
flex: 0.3
|
||||
}}>
|
||||
<img className={'imageModal'} src={data.image} />
|
||||
<p className={'titleModal'}>{data.name}</p>
|
||||
</div>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flex: 0.7,
|
||||
padding: 30
|
||||
}}>
|
||||
<p className={'descriptionModal'} >{data.description}</p>
|
||||
|
||||
{(data.additional_information.length > 0) && <Alert className={'informationAlertModal'} message={
|
||||
<div className={'informationContainerModal'}>
|
||||
<p className={'informationTitleModal'}>Information</p>
|
||||
<p className={'informationBodyModal'}>{data.additional_information}</p>
|
||||
</div>
|
||||
} type="success" />}
|
||||
|
||||
<Select
|
||||
showSearch
|
||||
className={'optionSelectModal'}
|
||||
placeholder="Please Select your Option"
|
||||
optionFilterProp="children"
|
||||
onChange={(e) => this.setState({selectedOption: e})}
|
||||
// filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
||||
>
|
||||
{data.option.map((item, index) => {
|
||||
return <Option value={item.cost}>{item.value}</Option>
|
||||
})}
|
||||
</Select>
|
||||
|
||||
<div className={'costContainerModal'}>
|
||||
<div className={'costLeftPaneModal'}>
|
||||
<p className={'costTitleModal'}>Cost</p>
|
||||
<p className={'costValueModal'}>{this.state.selectedOption}</p>
|
||||
</div>
|
||||
<div className={'costRightPaneModal'}>
|
||||
<Button className={'costButtonModal'} size={"large"} block>Buy</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
}
|
||||
65
src/common/pages/Vouchers/Modal/style.scss
Normal file
65
src/common/pages/Vouchers/Modal/style.scss
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
.imageModal{
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.titleModal{
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.descriptionModal{
|
||||
|
||||
}
|
||||
|
||||
.informationAlertModal{
|
||||
margin-top: 10px;
|
||||
margin-bottom: 30px;
|
||||
.informationContainerModal{
|
||||
padding-top: 10px;
|
||||
.informationTitleModal{
|
||||
color: #5d961f;
|
||||
font-weight: 700;
|
||||
}
|
||||
.informationBodyModal{}
|
||||
}
|
||||
}
|
||||
|
||||
.optionSelectModal{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.costContainerModal{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
//position: absolute;
|
||||
//bottom: 10px;
|
||||
//width: 32vw;
|
||||
.costLeftPaneModal{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0.5;
|
||||
.costTitleModal{
|
||||
color: #aaa;
|
||||
font-size: 1.0rem;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.costValueModal{
|
||||
color: #c21a1a;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
.costRightPaneModal{
|
||||
display: flex;
|
||||
flex: 0.5;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.costButtonModal{
|
||||
background-color: #5d961f;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
import React from 'react';
|
||||
import {inject, observer} from 'mobx-react';
|
||||
import {Link} from 'react-router';
|
||||
import { Affix, Card, Slider, Select } from 'antd';
|
||||
import {Affix, Card, Slider, Select, Col, Row } from 'antd';
|
||||
import {Tab, Tabs} from 'material-ui';
|
||||
import './style.scss';
|
||||
import All from "./All/index";
|
||||
import {ItemCard} from "./ItemCard";
|
||||
import ModalVouchersComponent from "./Modal";
|
||||
|
||||
const Option = Select.Option;
|
||||
@inject('appstate')
|
||||
|
|
@ -14,8 +15,20 @@ export default class VouchersComponent extends React.Component {
|
|||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
valueMinimal: 0,
|
||||
valueMaximal: 0,
|
||||
isOpened: false,
|
||||
data: {
|
||||
name: '',
|
||||
image: '',
|
||||
description: '',
|
||||
additional_information: '',
|
||||
background_color: '',
|
||||
option: [
|
||||
{
|
||||
value: '',
|
||||
cost: ''
|
||||
},
|
||||
]
|
||||
},
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
}
|
||||
|
|
@ -23,61 +36,208 @@ export default class VouchersComponent extends React.Component {
|
|||
componentDidMount() {
|
||||
}
|
||||
|
||||
handleChangeMinimal = (valueMinimal) => {
|
||||
this.setState({ valueMinimal });
|
||||
};
|
||||
|
||||
handleChangeMaximal = (valueMaximal) => {
|
||||
this.setState({ valueMaximal });
|
||||
};
|
||||
|
||||
handleChange = (value) => {
|
||||
console.log(`selected ${value}`);
|
||||
}
|
||||
|
||||
handleBlur = () => {
|
||||
console.log('blur');
|
||||
}
|
||||
|
||||
handleFocus = () => {
|
||||
console.log('focus');
|
||||
}
|
||||
|
||||
render() {
|
||||
const { valueMinimal, valueMaximal } = this.state;
|
||||
const data = [
|
||||
{
|
||||
name: 'KFC',
|
||||
image: 'https://ecs7.tokopedia.net/img/recharge/operator/kfc-box_150px_74px.png',
|
||||
description: 'KFC merupakan restoran cepat saji yang menyediakan ayam goreng serta berbagai menu pilihan lainnya seperti burger, sup, dan salad. Dengan rasa yang renyah dan gurih, siapa pun dijamin ketagihan dengan ayam goreng yang satu ini. Mau menikmati berbagai menu dari si "Jagonya Ayam" dengan lebih hemat? Beli vouchernya di Tokopedia aja!',
|
||||
additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
|
||||
background_color: 'linear-gradient(rgb(214, 18, 53), rgb(100, 23, 24))',
|
||||
option: [
|
||||
{
|
||||
value: 'Rp. 50.000',
|
||||
cost: '50 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 100.000',
|
||||
cost: '100 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 150.000',
|
||||
cost: '150 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 200.000',
|
||||
cost: '200 Points'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'KFC',
|
||||
image: 'https://ecs7.tokopedia.net/img/recharge/operator/kfc-box_150px_74px.png',
|
||||
description: 'KFC merupakan restoran cepat saji yang menyediakan ayam goreng serta berbagai menu pilihan lainnya seperti burger, sup, dan salad. Dengan rasa yang renyah dan gurih, siapa pun dijamin ketagihan dengan ayam goreng yang satu ini. Mau menikmati berbagai menu dari si "Jagonya Ayam" dengan lebih hemat? Beli vouchernya di Tokopedia aja!',
|
||||
additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
|
||||
background_color: 'linear-gradient(rgb(214, 18, 53), rgb(100, 23, 24))',
|
||||
option: [
|
||||
{
|
||||
value: 'Rp. 50.000',
|
||||
cost: '50 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 100.000',
|
||||
cost: '100 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 150.000',
|
||||
cost: '150 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 200.000',
|
||||
cost: '200 Points'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'KFC',
|
||||
image: 'https://ecs7.tokopedia.net/img/recharge/operator/kfc-box_150px_74px.png',
|
||||
description: 'KFC merupakan restoran cepat saji yang menyediakan ayam goreng serta berbagai menu pilihan lainnya seperti burger, sup, dan salad. Dengan rasa yang renyah dan gurih, siapa pun dijamin ketagihan dengan ayam goreng yang satu ini. Mau menikmati berbagai menu dari si "Jagonya Ayam" dengan lebih hemat? Beli vouchernya di Tokopedia aja!',
|
||||
additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
|
||||
background_color: 'linear-gradient(rgb(214, 18, 53), rgb(100, 23, 24))',
|
||||
option: [
|
||||
{
|
||||
value: 'Rp. 50.000',
|
||||
cost: '50 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 100.000',
|
||||
cost: '100 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 150.000',
|
||||
cost: '150 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 200.000',
|
||||
cost: '200 Points'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'KFC',
|
||||
image: 'https://ecs7.tokopedia.net/img/recharge/operator/kfc-box_150px_74px.png',
|
||||
description: 'KFC merupakan restoran cepat saji yang menyediakan ayam goreng serta berbagai menu pilihan lainnya seperti burger, sup, dan salad. Dengan rasa yang renyah dan gurih, siapa pun dijamin ketagihan dengan ayam goreng yang satu ini. Mau menikmati berbagai menu dari si "Jagonya Ayam" dengan lebih hemat? Beli vouchernya di Tokopedia aja!',
|
||||
additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
|
||||
background_color: 'linear-gradient(rgb(214, 18, 53), rgb(100, 23, 24))',
|
||||
option: [
|
||||
{
|
||||
value: 'Rp. 50.000',
|
||||
cost: '50 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 100.000',
|
||||
cost: '100 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 150.000',
|
||||
cost: '150 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 200.000',
|
||||
cost: '200 Points'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'KFC',
|
||||
image: 'https://ecs7.tokopedia.net/img/recharge/operator/kfc-box_150px_74px.png',
|
||||
description: 'KFC merupakan restoran cepat saji yang menyediakan ayam goreng serta berbagai menu pilihan lainnya seperti burger, sup, dan salad. Dengan rasa yang renyah dan gurih, siapa pun dijamin ketagihan dengan ayam goreng yang satu ini. Mau menikmati berbagai menu dari si "Jagonya Ayam" dengan lebih hemat? Beli vouchernya di Tokopedia aja!',
|
||||
additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
|
||||
background_color: 'linear-gradient(rgb(214, 18, 53), rgb(100, 23, 24))',
|
||||
option: [
|
||||
{
|
||||
value: 'Rp. 50.000',
|
||||
cost: '50 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 100.000',
|
||||
cost: '100 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 150.000',
|
||||
cost: '150 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 200.000',
|
||||
cost: '200 Points'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'KFC',
|
||||
image: 'https://ecs7.tokopedia.net/img/recharge/operator/kfc-box_150px_74px.png',
|
||||
description: 'KFC merupakan restoran cepat saji yang menyediakan ayam goreng serta berbagai menu pilihan lainnya seperti burger, sup, dan salad. Dengan rasa yang renyah dan gurih, siapa pun dijamin ketagihan dengan ayam goreng yang satu ini. Mau menikmati berbagai menu dari si "Jagonya Ayam" dengan lebih hemat? Beli vouchernya di Tokopedia aja!',
|
||||
additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
|
||||
background_color: 'linear-gradient(rgb(214, 18, 53), rgb(100, 23, 24))',
|
||||
option: [
|
||||
{
|
||||
value: 'Rp. 50.000',
|
||||
cost: '50 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 100.000',
|
||||
cost: '100 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 150.000',
|
||||
cost: '150 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 200.000',
|
||||
cost: '200 Points'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'KFC',
|
||||
image: 'https://ecs7.tokopedia.net/img/recharge/operator/kfc-box_150px_74px.png',
|
||||
description: 'KFC merupakan restoran cepat saji yang menyediakan ayam goreng serta berbagai menu pilihan lainnya seperti burger, sup, dan salad. Dengan rasa yang renyah dan gurih, siapa pun dijamin ketagihan dengan ayam goreng yang satu ini. Mau menikmati berbagai menu dari si "Jagonya Ayam" dengan lebih hemat? Beli vouchernya di Tokopedia aja!',
|
||||
additional_information: 'Voucher ini berlaku hingga 29 hari setelah pembelian.',
|
||||
background_color: 'linear-gradient(rgb(214, 18, 53), rgb(100, 23, 24))',
|
||||
option: [
|
||||
{
|
||||
value: 'Rp. 50.000',
|
||||
cost: '50 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 100.000',
|
||||
cost: '100 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 150.000',
|
||||
cost: '150 Points'
|
||||
},
|
||||
{
|
||||
value: 'Rp. 200.000',
|
||||
cost: '200 Points'
|
||||
},
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="setting">
|
||||
<div className="row">
|
||||
<div className="col l3 m3 s3 no-padding">
|
||||
<Affix offsetTop={90}>
|
||||
<Card title="Filter" bordered={true} style={{ width: '100%' }}>
|
||||
<p>Min. Points</p>
|
||||
<Slider max={1000} onChange={this.handleChangeMinimal} value={valueMinimal} />
|
||||
<div className="col l12 m12 s12 padding">
|
||||
<p className={'pageTitle'}>
|
||||
Voucher & Gift Card
|
||||
</p>
|
||||
|
||||
<p>Max. Points</p>
|
||||
<Slider max={1000} onChange={this.handleChangeMaximal} value={valueMaximal} />
|
||||
<Row gutter={10}>
|
||||
{data.map((item, index) => {
|
||||
return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
|
||||
<ItemCard data={item}/>
|
||||
</Col>)
|
||||
})}
|
||||
</Row>
|
||||
|
||||
<p style={{marginTop: 25}}>Category</p>
|
||||
<Select
|
||||
showSearch
|
||||
style={{ width: '100%' }}
|
||||
placeholder="Select a category"
|
||||
optionFilterProp="children"
|
||||
onChange={this.handleChange}
|
||||
onFocus={this.handleFocus}
|
||||
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/>
|
||||
<ModalVouchersComponent
|
||||
title={this.state.data.name+' Vouchers'}
|
||||
data={this.state.data}
|
||||
isVisible={this.state.isOpened}
|
||||
onOk={() => this.setState({isOpened: false})}
|
||||
onCancel={() => this.setState({isOpened: false})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,67 +1,31 @@
|
|||
.setting {
|
||||
margin-top: 35px;
|
||||
.container {
|
||||
padding: 25px;
|
||||
|
||||
.ant-card {
|
||||
background: #fff;
|
||||
border-radius: 0;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all .3s;
|
||||
}
|
||||
.ant-card-head {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
background: #fff;
|
||||
border-bottom: 0 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;
|
||||
}
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 20vh;
|
||||
max-width: 70vw;
|
||||
p.pageTitle{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
.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;
|
||||
.itemCard{
|
||||
background-color: #eee;
|
||||
border: #ccc 1px solid;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
min-height: 75px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.imageCard{
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.photo-title{
|
||||
font-size: 1.25em;
|
||||
font-weight: 400;
|
||||
margin-left: 12px;
|
||||
.titleCard{
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
.box-upload{
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user