Initial commit
This commit is contained in:
Rifqy Zacky Ariadhy
146
src/common/pages/FeaturedCategory/Dialog/FeaturedCategoryData.js
Normal file
146
src/common/pages/FeaturedCategory/Dialog/FeaturedCategoryData.js
Normal file
@@ -0,0 +1,146 @@
|
||||
import React from 'react';
|
||||
import {inject, observer} from 'mobx-react';
|
||||
import {DatePicker, MenuItem, SelectField, TextField, Checkbox,
|
||||
AutoComplete, } from 'material-ui';
|
||||
import { Upload, Icon, Modal, Input, Select, Switch, message, Button as ButtonAntd } from 'antd';
|
||||
import schema from 'async-validator'
|
||||
import startCase from 'lodash.startcase';
|
||||
import moment from 'moment';
|
||||
import get from 'lodash.get';
|
||||
import NumberFormat from 'react-number-format';
|
||||
|
||||
const InputGroup = Input.Group;
|
||||
const { TextArea } = Input;
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class FeaturedCategoryData extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
dataSource: [],
|
||||
formData: Object.assign({
|
||||
name : '',
|
||||
icon : '',
|
||||
background_image : ''
|
||||
},props.defaultValue ) || {},
|
||||
checked: true,
|
||||
errorText: {},
|
||||
onChangeTimeoutId: false,
|
||||
|
||||
};
|
||||
this.categoryStore = props.appstate.category;
|
||||
this.http = props.appstate.http;
|
||||
}
|
||||
|
||||
// componentWillUnmount(){
|
||||
|
||||
// }
|
||||
|
||||
async componentDidMount() {
|
||||
const {defaultValue={},mode} = this.props;
|
||||
await this.categoryStore.getCategoryList();
|
||||
}
|
||||
|
||||
|
||||
triggerOnChange(key) {
|
||||
this.props.onChangeData(this.state.formData);
|
||||
}
|
||||
|
||||
updateCheck() {
|
||||
this.setState((oldState) => {
|
||||
return {
|
||||
checked: !oldState.checked,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
|
||||
const wrapperText = key => ele => React.cloneElement(ele, {
|
||||
value: this.state.formData[key],
|
||||
errorText: this.state.errorText[key],
|
||||
onChange: (e) => {
|
||||
|
||||
this.setState({
|
||||
formData: {
|
||||
...this.state.formData,
|
||||
[key]: e.target.value,
|
||||
}
|
||||
}, () => this.triggerOnChange(key));
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
const wrapperSelect = key => ele => React.cloneElement(ele, {
|
||||
value: this.state.formData[key],
|
||||
errorText: this.state.errorText[key],
|
||||
onChange: (e, k, v) => {
|
||||
this.setState({
|
||||
formData: {
|
||||
...this.state.formData,
|
||||
[key]: v,
|
||||
}
|
||||
}, () => this.triggerOnChange(key));
|
||||
}
|
||||
});
|
||||
|
||||
const wrapperSwitch = key => ele => React.cloneElement(ele, {
|
||||
checked: this.state.formData[key],
|
||||
errorText: this.state.errorText[key],
|
||||
onCheck: (e, v) => {
|
||||
this.setState({
|
||||
formData: {
|
||||
...this.state.formData,
|
||||
[key]: v,
|
||||
}
|
||||
}, () => this.triggerOnChange(key));
|
||||
}
|
||||
});
|
||||
|
||||
const wrapperAutocomplete = key => ele => React.cloneElement(ele, {
|
||||
value : this.state.formData[key],
|
||||
onNewRequest: (v) => {
|
||||
this.setState({
|
||||
formData: {
|
||||
...this.state.formData,
|
||||
[key]: v.id,
|
||||
}
|
||||
}, () => this.triggerOnChange(key));
|
||||
}
|
||||
});
|
||||
|
||||
const {mode="create"} = this.props;
|
||||
const dataSourceConfig = {
|
||||
text: 'name',
|
||||
value: 'id',
|
||||
};
|
||||
return(
|
||||
<div style={{marginTop: 10}}>
|
||||
<div className={"row"}>
|
||||
<div className={"col s12"}>
|
||||
<div>
|
||||
<p className="label-form">Item Name</p>
|
||||
{wrapperAutocomplete("category_id")(
|
||||
<AutoComplete
|
||||
hintText="E.g. Fashion Pria"
|
||||
dataSource={this.categoryStore.categoryList.slice()}
|
||||
filter={AutoComplete.fuzzyFilter}
|
||||
dataSourceConfig={dataSourceConfig}
|
||||
openOnFocus={true}
|
||||
fullWidth={true}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
261
src/common/pages/FeaturedCategory/Dialog/index.js
Normal file
261
src/common/pages/FeaturedCategory/Dialog/index.js
Normal file
@@ -0,0 +1,261 @@
|
||||
import React from 'react';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import {
|
||||
Dialog, FlatButton, RaisedButton,
|
||||
Step,
|
||||
StepLabel,
|
||||
Stepper,
|
||||
IconButton,
|
||||
} from "material-ui";
|
||||
import {DIALOG} from "../../../stores/global_ui";
|
||||
import FeaturedCategoryData from './FeaturedCategoryData';
|
||||
import ArrowForwardIcon from 'material-ui/svg-icons/navigation/arrow-forward';
|
||||
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
|
||||
import schema from 'async-validator'
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class FeaturedCategoryDialog extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
stepIndex: 0,
|
||||
formData: {},
|
||||
finished: false,
|
||||
openedDialog: false,
|
||||
formData: {},
|
||||
errorMessage: ''
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
this.customer = props.appstate.customer;
|
||||
this.featured = props.appstate.featured_category;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.setState({
|
||||
stepIndex: 0
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
onChangeForm(formData) {
|
||||
this.setState({formData});
|
||||
}
|
||||
|
||||
getStepContent(stepIndex) {
|
||||
|
||||
const {mode="create", defaultValue={}} = this.props;
|
||||
|
||||
switch (stepIndex) {
|
||||
case 0:
|
||||
return (
|
||||
<FeaturedCategoryData
|
||||
mode={mode}
|
||||
defaultValue={defaultValue}
|
||||
onChangeData={formData => this.setState({formData})}/>
|
||||
);
|
||||
// case 1:
|
||||
// return <IdentificationPassport/>;
|
||||
}
|
||||
}
|
||||
|
||||
handleOpen = () => {
|
||||
this.setState({confirmationDialog: true})
|
||||
};
|
||||
|
||||
handleNext = () => {
|
||||
const {stepIndex} = this.state;
|
||||
if (stepIndex === 0) {
|
||||
|
||||
const rules = {
|
||||
category_id: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please Select the Category'
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
const validator = new schema(rules);
|
||||
|
||||
validator.validate(this.state.formData, (errs, f) => {
|
||||
console.log(errs);
|
||||
if (errs) {
|
||||
this.globalUI.showNotification("Something's Wrong", errs[0].message);
|
||||
} else {
|
||||
this.setState({
|
||||
stepIndex: stepIndex + 1,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
handlePrev = () => {
|
||||
const {stepIndex} = this.state;
|
||||
if (stepIndex > 0) {
|
||||
this.setState({stepIndex: stepIndex - 1});
|
||||
}
|
||||
};
|
||||
|
||||
closeDialog = ()=>{
|
||||
this.featured.formData.category_id = "";
|
||||
this.globalUI.hideDialog(DIALOG.FEATURED_CATEGORIES.CREATE)
|
||||
}
|
||||
|
||||
handleClose = () => {
|
||||
this.setState({confirmationDialog: false})
|
||||
};
|
||||
|
||||
save = () => {
|
||||
this.globalUI.hideDialog(DIALOG.FEATURED_CATEGORIES.CREATE);
|
||||
this.globalUI.showDialogLoading();
|
||||
const {mode="create", defaultValue={}} = this.props;
|
||||
|
||||
if (mode === "create") {
|
||||
let data = this.state.formData;
|
||||
this.featured.create(data)
|
||||
.then(res => {
|
||||
this.globalUI.hideDialogLoading();
|
||||
this.globalUI.openSnackbar("Success Added New Featured Category");
|
||||
this.setState({
|
||||
stepIndex: 0
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
this.globalUI.hideDialogLoading();
|
||||
this.globalUI.openSnackbar("Something Goes Wrong");
|
||||
this.setState({
|
||||
stepIndex: 0
|
||||
});
|
||||
console.error(err);
|
||||
});
|
||||
} else if (mode === "update") {
|
||||
let data = this.state.formData;
|
||||
|
||||
this.featured.put(defaultValue.id, this.featured.formData)
|
||||
.then(res => {
|
||||
// this.globalUI.hideDialog(DIALOG.EMPLOYEE.CREATE);
|
||||
this.globalUI.hideDialogLoading();
|
||||
this.globalUI.openSnackbar("Success Updated")
|
||||
this.setState({
|
||||
stepIndex: 0
|
||||
})
|
||||
// this.classStore.getAll();
|
||||
})
|
||||
.catch(err => {
|
||||
this.globalUI.openSnackbar("Error, Check log for detail");
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handlePost = () => {
|
||||
// this.agentStore.post().then(res => {
|
||||
// this.props.history.push(LINKS.SETTING);
|
||||
// this.globalUI.openSnackbar("Successfull Added Employee");
|
||||
// });
|
||||
};
|
||||
|
||||
continueButton() {
|
||||
if (this.state.stepIndex === 1) {
|
||||
return (
|
||||
<RaisedButton
|
||||
label="Finish"
|
||||
primary={true}
|
||||
onClick={this.save}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<RaisedButton
|
||||
label="Next"
|
||||
primary={true}
|
||||
onClick={this.handleNext}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const {finished, stepIndex} = this.state;
|
||||
const {mode="create", defaultValue={}} = this.props;
|
||||
|
||||
const actions = [
|
||||
<RaisedButton
|
||||
label="OK"
|
||||
primary={true}
|
||||
style={{marginRight: 10}}
|
||||
onClick={this.handleClose}
|
||||
/>,
|
||||
]
|
||||
|
||||
const title =
|
||||
<div>
|
||||
<h4 style={{
|
||||
fontSize: 26,
|
||||
marginBottom: 0,
|
||||
marginTop: 0,
|
||||
fontWeight: 500,
|
||||
color: "black"
|
||||
}}>{(mode === "create") ? "Choose" : "Update"} Category</h4>
|
||||
</div>
|
||||
;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Dialog
|
||||
title={<div>
|
||||
<div>{title}</div>
|
||||
<div style={{padding: "0px 14px 0px 0px"}}>
|
||||
<Stepper activeStep={stepIndex}>
|
||||
<Step>
|
||||
<StepLabel style={{padding: "0px 14px 0px 0px"}}>Category Data</StepLabel>
|
||||
</Step>
|
||||
{/* <Step>
|
||||
<StepLabel style={{padding: "0px 0px 0px 14px", height: 52}}>Identification & Passport</StepLabel>
|
||||
</Step> */}
|
||||
</Stepper>
|
||||
</div>
|
||||
</div>}
|
||||
// titleStyle={{paddingBottom: 10}}
|
||||
modal={false}
|
||||
actions={<div style={{marginTop: 12}}>
|
||||
<FlatButton
|
||||
label={(stepIndex === 0) ? "Cancel" : "Back"}
|
||||
style={{marginRight: 10}}
|
||||
primary={true}
|
||||
onClick={() => (stepIndex === 0) ? this.closeDialog() : this.handlePrev()}
|
||||
/>
|
||||
{this.continueButton()}
|
||||
</div>}
|
||||
autoScrollBodyContent={true}
|
||||
repositionOnUpdate={true}
|
||||
open={this.globalUI[DIALOG.FEATURED_CATEGORIES.CREATE]}
|
||||
onRequestClose={this.handleClose}
|
||||
style={{zIndex: 999}}
|
||||
>
|
||||
<div>
|
||||
{this.getStepContent(stepIndex)}
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
title="Warning"
|
||||
actions={actions}
|
||||
modal={false}
|
||||
autoScrollBodyContent={false}
|
||||
contentStyle={{width: 350}}
|
||||
open={this.state.confirmationDialog}
|
||||
onRequestClose={() => this.handleClose()}
|
||||
>
|
||||
{this.state.errorMessage}
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
256
src/common/pages/FeaturedCategory/index.js
Normal file
256
src/common/pages/FeaturedCategory/index.js
Normal file
@@ -0,0 +1,256 @@
|
||||
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,
|
||||
Tab, Tabs
|
||||
} 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 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 {appConfig} from "../../config/app";
|
||||
import {Link} from 'react-router-dom';
|
||||
import {LINKS} from "../../routes";
|
||||
import moment from 'moment';
|
||||
import {DIALOG} from "../../stores/global_ui";
|
||||
import DialogCreate from './Dialog';
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class FeaturedCategory extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
value: 0,
|
||||
edit : false,
|
||||
defaultValue : {}
|
||||
};
|
||||
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.globalUI = props.appstate.globalUI;
|
||||
this.featured = props.appstate.featured_category;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.globalUI.openLoading();
|
||||
this.featured.getAll().then(res=>{
|
||||
this.globalUI.closeLoading();
|
||||
}).catch(err=>{
|
||||
this.globalUI.closeLoading();
|
||||
});
|
||||
}
|
||||
|
||||
handleUpdateInput = (searchText) => {
|
||||
this.setState({
|
||||
searchText: searchText,
|
||||
});
|
||||
};
|
||||
|
||||
handleNewRequest = () => {
|
||||
this.setState({
|
||||
searchText: '',
|
||||
});
|
||||
};
|
||||
|
||||
tabsHandleChange = (value) => {
|
||||
this.setState({
|
||||
slideIndex: value,
|
||||
});
|
||||
};
|
||||
|
||||
deleteClicked = (id) => {
|
||||
this.setState({
|
||||
id : id,
|
||||
openedDelete: true
|
||||
});
|
||||
}
|
||||
|
||||
editData = (index)=>{
|
||||
this.setState({
|
||||
edit : true,
|
||||
defaultValue : this.featured_category.data[index]
|
||||
},()=>{
|
||||
this.globalUI.showDialog(DIALOG.FEATURED_CATEGORIES.CREATE);
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
handleOpenDialog = () => {
|
||||
this.setState({
|
||||
edit : false
|
||||
})
|
||||
this.globalUI.showDialog(DIALOG.FEATURED_CATEGORIES.CREATE);
|
||||
}
|
||||
|
||||
handleClickDelete = (id) => {
|
||||
this.featured.delete(id).then(res=>{
|
||||
this.featured.getAll();
|
||||
this.setState({
|
||||
openedDelete: false,
|
||||
openSnackbarDelete: true
|
||||
});
|
||||
this.globalUI.openSnackbar("Successful Deleted Existing Featured Category");
|
||||
|
||||
}).catch(err=>{
|
||||
console.log(err);
|
||||
this.globalUI.openSnackbar(err.message);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
handleCloseDelete = () => {
|
||||
this.setState({
|
||||
openedDelete: false
|
||||
})
|
||||
}
|
||||
|
||||
search = (event)=>{
|
||||
if(event.target.value.length == 0){
|
||||
this.featured.isSearching = false;
|
||||
}
|
||||
else{
|
||||
this.featured.isSearching = true;
|
||||
this.featured.search(event.target.value);
|
||||
}
|
||||
}
|
||||
|
||||
handleChange = (event, index, value) => this.setState({value});
|
||||
|
||||
render() {
|
||||
|
||||
const actionsDelete = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={true}
|
||||
onClick={this.handleCloseDelete}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Delete"
|
||||
primary={true}
|
||||
onClick={() => this.handleClickDelete(this.state.id)}
|
||||
/>,
|
||||
];
|
||||
|
||||
return (
|
||||
|
||||
<Card className="animated fadeIn cardLite">
|
||||
<Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
|
||||
<ToolbarGroup>
|
||||
<SearchIcon style={{marginRight: 8, color: "#999"}}/>
|
||||
<TextField
|
||||
hintText="Search Featured Categories"
|
||||
style={{fontSize: 14}}
|
||||
hintStyle={{fontSize: 14}}
|
||||
underlineShow={false}
|
||||
onChange={this.search}
|
||||
/>
|
||||
</ToolbarGroup>
|
||||
<ToolbarGroup className="ToolbarGroupLast">
|
||||
<ToolbarSeparator/>
|
||||
<RaisedButton className="ToolbarGroupLastButton" icon={<AddIcon/>} label="New Category"
|
||||
primary={true} onClick={this.handleOpenDialog}/>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
<Divider/>
|
||||
<div style={{paddingBottom: 5}}>
|
||||
<Loader show={this.globalUI.loadingVisibility} message={<LoadingDialog/>}
|
||||
messageStyle={{textAlign: 'center'}} backgroundStyle={{backgroundColor: 'rgba(255,255,255,0.5)'}}>
|
||||
<Table selectable={false}
|
||||
fixedHeader={true}
|
||||
height={'calc(100vh - 280px)'}>
|
||||
<TableHeader displaySelectAll={false}
|
||||
adjustForCheckbox={false}
|
||||
enableSelectAll={false}>
|
||||
<TableRow style={{height: 38, background: '#f6f9fc'}}>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun" style={{height: 'auto'}}>Name</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun" style={{height: 'auto', textAlign: 'right'}}>Action</TableHeaderColumn>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody displayRowCheckbox={false}>
|
||||
{(!this.featured.isEmpty) ? (this.featured.isSearching ? this.featured.dataFiltered : this.featured.data).map((item, index) => {
|
||||
return (
|
||||
<TableRow key={item.id}>
|
||||
<TableRowColumn>
|
||||
<div style={{color : '#6772e5',cursor : 'pointer'}} onClick={()=>this.handleOpenEdit(item.id)}>
|
||||
{item.name}
|
||||
</div>
|
||||
</TableRowColumn>
|
||||
<TableRowColumn style={{textAlign: "right"}}><IconButton
|
||||
tooltip="Delete"
|
||||
className="ToolbarGroupLastButton"
|
||||
onClick={() => this.deleteClicked(item.id)}><DeleteIcon color="#999999"
|
||||
className="iconSmallButton"/></IconButton></TableRowColumn>
|
||||
</TableRow>
|
||||
);
|
||||
}) : (<TableRow>
|
||||
<TableRowColumn colSpan="4" style={{}}>
|
||||
<EmptyComponent type="empty" header="" content="There is no data in sight"/>
|
||||
</TableRowColumn>
|
||||
</TableRow>)
|
||||
}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</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>
|
||||
{this.state.edit ? <DialogCreate mode="update" defaultValue={Object.assign({},this.state.defaultValue)}/> : <DialogCreate mode="create"/>}
|
||||
|
||||
</Card>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user