Initial commit
This commit is contained in:
Rifqy Zacky Ariadhy
284
src/common/pages/FeaturedItems/Dialog/CategoryData.js
Normal file
284
src/common/pages/FeaturedItems/Dialog/CategoryData.js
Normal file
@@ -0,0 +1,284 @@
|
||||
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 CategoryData extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
type:1,
|
||||
dataSource: [],
|
||||
formData: Object.assign({
|
||||
type:'',
|
||||
value_id:null,
|
||||
image:'',
|
||||
link_target:''
|
||||
},props.defaultValue ) || {},
|
||||
checked: true,
|
||||
errorText: {},
|
||||
onChangeTimeoutId: false,
|
||||
previewVisible : '',
|
||||
previewImage : '',
|
||||
fileList : '',
|
||||
previewVisibleBackground : '',
|
||||
previewImageBackground : '',
|
||||
fileListBackground : '',
|
||||
};
|
||||
this.item = props.appstate.item;
|
||||
this.http = props.appstate.http;
|
||||
this.featured = props.appstate.featuredClass;
|
||||
}
|
||||
|
||||
// componentWillUnmount(){
|
||||
|
||||
// }
|
||||
|
||||
async componentDidMount() {
|
||||
const {defaultValue={},mode} = this.props;
|
||||
await this.item.getAll();
|
||||
// this.setState({
|
||||
// formData : this.featured.formData
|
||||
// },()=>this.triggerOnChange(2));
|
||||
|
||||
|
||||
// if(mode == "update"){
|
||||
// await this.featured.getDetail(this.props.defaultValue.id)
|
||||
// }
|
||||
|
||||
// if(defaultValue.image != ""){
|
||||
// let file = defaultValue.image.split("/");
|
||||
// this.setState({
|
||||
// fileListBanner : [{
|
||||
// uid: file[2],
|
||||
// name: file[2],
|
||||
// status: 'done',
|
||||
// url: this.http.appendImagePath(defaultValue.image),
|
||||
// path: defaultValue.image,
|
||||
// type: 'main'
|
||||
// }]
|
||||
// })
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
handleCancelBackground = () => this.setState({ previewVisibleBackground: false });
|
||||
handleChangeBackground = ({ fileList }) => {
|
||||
this.setState({ fileListBackground : fileList });
|
||||
console.log(fileList, 'remove')
|
||||
if(fileList.length == 0){
|
||||
this.setState({
|
||||
formData : {
|
||||
...this.state.formData,
|
||||
image : ''
|
||||
}
|
||||
},()=>this.triggerOnChange(2))
|
||||
}
|
||||
};
|
||||
|
||||
uploaderHandlerBackground({file, onProgress}) {
|
||||
this.http.upload(file)
|
||||
.then(res => {
|
||||
const {fileListBackground} = this.state;
|
||||
let newFileList = fileListBackground.filter((obj) => {
|
||||
if (!obj.lastModified) {
|
||||
return true;
|
||||
}
|
||||
|
||||
})
|
||||
newFileList.push({
|
||||
uid: newFileList.length,
|
||||
name: file.name,
|
||||
status: 'done',
|
||||
url: this.http.appendImagePath(res.path),
|
||||
path: res.path,
|
||||
type: 'main'
|
||||
});
|
||||
|
||||
this.setState({
|
||||
fileListBackground: newFileList,
|
||||
formData: {
|
||||
...this.state.formData,
|
||||
image: res.path
|
||||
}
|
||||
}, () => this.triggerOnChange(2));
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
triggerOnChange(key) {
|
||||
this.props.onChangeData(this.state.formData);
|
||||
}
|
||||
|
||||
updateCheck() {
|
||||
this.setState((oldState) => {
|
||||
return {
|
||||
checked: !oldState.checked,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
handleChangeType = (event, index, value) => {
|
||||
this.setState({
|
||||
formData : {
|
||||
...this.state.formData,
|
||||
type:value
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
render() {
|
||||
const { previewVisible, previewImage, fileList,previewVisibleBackground, previewImageBackground, fileListBackground } = this.state;
|
||||
|
||||
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',
|
||||
};
|
||||
|
||||
const uploadButton = (
|
||||
<div>
|
||||
<Icon type="plus" />
|
||||
<div className="ant-upload-text">Upload</div>
|
||||
</div>
|
||||
);
|
||||
return(
|
||||
<div style={{marginTop: 10}}>
|
||||
<div className={"row"}>
|
||||
<div className={"col s12"}>
|
||||
<p className="label-form">Choose Type Banner</p>
|
||||
{wrapperSelect("type")(
|
||||
<SelectField
|
||||
//value={this.state.formData.type}
|
||||
//onChange={this.handleChangeType}
|
||||
>
|
||||
<MenuItem value={'items'} primaryText="Item" />
|
||||
<MenuItem value={'link'} primaryText="Banner" />
|
||||
</SelectField>)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={"row"}>
|
||||
{(this.state.formData.type === "items") ? (
|
||||
<div className={"col s12"}>
|
||||
<div>
|
||||
<p className="label-form">Item Name</p>
|
||||
{wrapperAutocomplete("value_id")(
|
||||
<AutoComplete
|
||||
hintText="E.g. T-Shirt"
|
||||
dataSource={this.item.data.slice()}
|
||||
filter={AutoComplete.fuzzyFilter}
|
||||
dataSourceConfig={dataSourceConfig}
|
||||
openOnFocus={true}
|
||||
fullWidth={true}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : ""}
|
||||
|
||||
{ (this.state.formData.type === "link") ?
|
||||
(
|
||||
<div>
|
||||
<div className={"col s12 m6 l6"}>
|
||||
<p className="label-form" onClick={()=>console.log(this.state.formData)}>Banner</p>
|
||||
<Upload
|
||||
listType="picture-card"
|
||||
fileList={fileListBackground}
|
||||
customRequest={(...args) => this.uploaderHandlerBackground(...args)}
|
||||
style={{}}
|
||||
onChange={this.handleChangeBackground}
|
||||
>
|
||||
{fileListBackground.length == 1 ? null : uploadButton}
|
||||
</Upload>
|
||||
<Modal visible={previewVisibleBackground} footer={null} onCancel={this.handleCancelBackground}>
|
||||
<img alt="example" style={{ width: '100%' }} src={previewImageBackground} />
|
||||
</Modal>
|
||||
</div>
|
||||
<div className={"col s12 m6 l6"}>
|
||||
<p className="label-form">Hyperlink (optional)</p>
|
||||
{wrapperText("link_target")(
|
||||
<TextField
|
||||
fullWidth={true}
|
||||
hintText="Link target, use http:// or https://"/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : ""
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
301
src/common/pages/FeaturedItems/Dialog/index.js
Normal file
301
src/common/pages/FeaturedItems/Dialog/index.js
Normal file
@@ -0,0 +1,301 @@
|
||||
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 CategoryData from './CategoryData';
|
||||
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 ItemDialog extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
stepIndex: 0,
|
||||
formData: {},
|
||||
finished: false,
|
||||
openedDialog: false,
|
||||
errorMessage: ''
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
this.customer = props.appstate.customer;
|
||||
this.featured = props.appstate.featured_item;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
console.log(this.state.formData,'ini men');
|
||||
this.setState({
|
||||
stepIndex: 0
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
onChangeForm(formData) {
|
||||
this.setState({formData});
|
||||
}
|
||||
|
||||
getStepContent(stepIndex) {
|
||||
|
||||
const {mode="create", defaultValue={}} = this.props;
|
||||
|
||||
switch (stepIndex) {
|
||||
case 0:
|
||||
return (
|
||||
<CategoryData
|
||||
mode={mode}
|
||||
defaultValue={defaultValue}
|
||||
onChangeData={formData => this.setState({formData})}/>
|
||||
);
|
||||
// case 1:
|
||||
// return <IdentificationPassport/>;
|
||||
}
|
||||
}
|
||||
|
||||
handleOpen = () => {
|
||||
this.setState({confirmationDialog: true})
|
||||
};
|
||||
|
||||
handleNext = () => {
|
||||
const {stepIndex} = this.state;
|
||||
if(this.state.formData.type == 'items') {
|
||||
if (stepIndex === 0) {
|
||||
|
||||
const rules = {
|
||||
value_id: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please Select the Item'
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
const validator = new schema(rules);
|
||||
|
||||
validator.validate(this.state.formData, (errs, f) => {
|
||||
console.log(this.state.formData.type,'ini loh 1');
|
||||
if (errs) {
|
||||
this.globalUI.showNotification("Something's Wrong", errs[0].message);
|
||||
} else {
|
||||
this.setState({
|
||||
stepIndex: stepIndex + 1,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
else{
|
||||
if (stepIndex === 0) {
|
||||
|
||||
const rules = {
|
||||
image: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please insert image banner'
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
const validator = new schema(rules);
|
||||
validator.validate(this.state.formData, (errs, f) => {
|
||||
if (errs) {
|
||||
this.globalUI.showNotification("Something's Wrong", errs[0].message);
|
||||
} else {
|
||||
if(!!this.state.formData.link_target){
|
||||
let regex=/(https?:\/\/[^\s]+)/;
|
||||
if(this.state.formData.link_target.match(regex)){
|
||||
this.setState({
|
||||
stepIndex: stepIndex + 1,
|
||||
});
|
||||
}
|
||||
else{
|
||||
this.globalUI.showNotification("Something's Wrong in hyperlink");
|
||||
}
|
||||
}else{
|
||||
this.setState({
|
||||
stepIndex: stepIndex + 1,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
handlePrev = () => {
|
||||
const {stepIndex} = this.state;
|
||||
if (stepIndex > 0) {
|
||||
this.setState({stepIndex: stepIndex - 1});
|
||||
}
|
||||
};
|
||||
|
||||
closeDialog = ()=>{
|
||||
this.featured.formData.item_id = "";
|
||||
this.globalUI.hideDialog(DIALOG.FEATURED_ITEM.CREATE)
|
||||
}
|
||||
|
||||
handleClose = () => {
|
||||
this.setState({confirmationDialog: false})
|
||||
};
|
||||
|
||||
save = () => {
|
||||
this.globalUI.hideDialog(DIALOG.FEATURED_ITEM.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 Banner");
|
||||
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.state.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") ? "Add" : "Update"} Banner</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"}}>Banner 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_ITEM.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>
|
||||
)
|
||||
}
|
||||
}
|
||||
236
src/common/pages/FeaturedItems/index.js
Normal file
236
src/common/pages/FeaturedItems/index.js
Normal file
@@ -0,0 +1,236 @@
|
||||
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 {DIALOG} from "../../stores/global_ui";
|
||||
import DialogCreate from './Dialog';
|
||||
import get from 'lodash.get'
|
||||
|
||||
|
||||
|
||||
|
||||
let DateTimeFormat = global.Intl.DateTimeFormat;
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class FeaturedItems extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.state = {
|
||||
value: 0,
|
||||
iniId:'',
|
||||
edit : false,
|
||||
mode : "create",
|
||||
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_item;
|
||||
this.item = props.appstate.item;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.globalUI.openLoading();
|
||||
this.featured.getAll().then(res=>{
|
||||
this.globalUI.closeLoading();
|
||||
}).catch(err=>{
|
||||
this.globalUI.closeLoading();
|
||||
});
|
||||
this.item.getAll();
|
||||
}
|
||||
|
||||
deleteClicked = (id) => {
|
||||
this.setState({
|
||||
id : id,
|
||||
openedDelete: true
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
handleOpenDialog = (mode,Id) => {
|
||||
this.setState({
|
||||
mode : mode,
|
||||
defaultValue : (Id == null) ? {} : {
|
||||
id : Id
|
||||
}
|
||||
},()=>this.globalUI.showDialog(DIALOG.FEATURED_ITEM.CREATE));
|
||||
};
|
||||
|
||||
handleClickDelete = (id) => {
|
||||
this.featured.delete(id).then(res=>{
|
||||
this.featured.getAll();
|
||||
this.setState({
|
||||
openedDelete: false,
|
||||
openSnackbarDelete: true
|
||||
});
|
||||
this.globalUI.openSnackbar("Successful Deleted");
|
||||
}).catch(err=>{
|
||||
console.log(err);
|
||||
this.globalUI.openSnackbar("Something Goes Wrong");
|
||||
});
|
||||
};
|
||||
|
||||
handleCloseDelete = () => {
|
||||
this.setState({
|
||||
openedDelete: false
|
||||
})
|
||||
};
|
||||
|
||||
handleChange = (event, index, value) => this.setState({value});
|
||||
|
||||
search = (event)=>{
|
||||
if(event.target.value.length == 0){
|
||||
this.featured.isSearching = false;
|
||||
}
|
||||
else{
|
||||
this.featured.isSearching = true;
|
||||
this.featured.search(event.target.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 Banner"
|
||||
style={{fontSize: 14}}
|
||||
hintStyle={{fontSize: 14}}
|
||||
underlineShow={false}
|
||||
onChange={this.search}
|
||||
/>
|
||||
</ToolbarGroup>
|
||||
<ToolbarGroup className="ToolbarGroupLast">
|
||||
<ToolbarSeparator/>
|
||||
<RaisedButton className="ToolbarGroupLastButton" icon={<AddIcon/>} label="New Banner"
|
||||
primary={true} onClick={()=>this.handleOpenDialog("create",null)}/>
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
<Divider/>
|
||||
<div style={{paddingBottom: 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'}}>
|
||||
{(item.link_target === "") ? item.name : item.link_target}
|
||||
</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>
|
||||
</div>
|
||||
<Dialog
|
||||
title="Warning"
|
||||
actions={actionsDelete}
|
||||
modal={true}
|
||||
open={this.state.openedDelete}
|
||||
onRequestClose={() => this.handleCloseDelete()}
|
||||
>
|
||||
Are you sure want to delete this?
|
||||
</Dialog>
|
||||
<DialogCreate mode={this.state.mode} defaultValue={this.state.defaultValue}/>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user