Initial commit
This commit is contained in:
Rifqy Zacky Ariadhy
754
src/common/pages/Recipes/FormRecipe/index.js
Normal file
754
src/common/pages/Recipes/FormRecipe/index.js
Normal file
@@ -0,0 +1,754 @@
|
||||
import React from 'react';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import {
|
||||
Card,
|
||||
FlatButton,
|
||||
Divider,
|
||||
RaisedButton,
|
||||
Toolbar,
|
||||
MenuItem,
|
||||
ToolbarGroup,
|
||||
IconButton,
|
||||
ToolbarTitle,
|
||||
Dialog,
|
||||
Toggle
|
||||
} from 'material-ui';
|
||||
import SaveIcon from 'material-ui/svg-icons/content/save';
|
||||
import PublishIcon from 'material-ui/svg-icons/editor/publish';
|
||||
import DeleteIcon from 'material-ui/svg-icons/action/delete';
|
||||
import AddIcon from 'material-ui/svg-icons/content/add';
|
||||
import { Upload, Icon, Modal, Input, Select, Switch, message, Button as ButtonAntd, Affix} from 'antd'
|
||||
import {LINKS} from "../../../routes";
|
||||
import uuid from 'uuid';
|
||||
//import {appConfig} from "../../../config/app";
|
||||
import NumberFormat from 'react-number-format';
|
||||
//import {DIALOG} from "../../../stores/global_ui";
|
||||
//import ClassDetail from '../index.js';
|
||||
import DC from 'decimal.js-light';
|
||||
import { action } from 'mobx/lib/mobx';
|
||||
const InputGroup = Input.Group;
|
||||
const { TextArea } = Input;
|
||||
const Option = Select.Option;
|
||||
// import AttachmentIcon from 'material-ui/svg-icons/file/attachment';
|
||||
// import Avatar from 'material-ui/Avatar';
|
||||
// import Chip from 'material-ui/Chip';
|
||||
|
||||
// Require Editor JS files.
|
||||
import 'froala-editor/js/froala_editor.pkgd.min.js';
|
||||
|
||||
// Require Editor CSS files.
|
||||
import 'froala-editor/css/froala_style.min.css';
|
||||
import 'froala-editor/css/froala_editor.pkgd.min.css';
|
||||
|
||||
// Require Font Awesome.
|
||||
import 'font-awesome/css/font-awesome.css';
|
||||
|
||||
import FroalaEditor from 'react-froala-wysiwyg';
|
||||
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class FormRecipe extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.props = props;
|
||||
this.rewardStore = props.appstate.reward;
|
||||
this.state = {
|
||||
openedDialogEmpty:false,
|
||||
featured_media_exist: false,
|
||||
text: '',
|
||||
openedDialog: false,
|
||||
openDeleteDialog : false,
|
||||
saveButton: true,
|
||||
value: 1,
|
||||
isFree : false,
|
||||
searchText: '',
|
||||
slideIndex: 0,
|
||||
openedDialogBack: false,
|
||||
reward_type: "Choose Reward Type",
|
||||
expanded: false,
|
||||
previewVisible: false,
|
||||
previewImage: '',
|
||||
fileList: [],
|
||||
fileLength: 0,
|
||||
fileMainExist: false,
|
||||
formData: {
|
||||
tags: ['b0819754-fb35-4e52-be67-eb76ca80c5a4'],
|
||||
// custom_fields: [],
|
||||
// is_free : false
|
||||
additional_data : {
|
||||
items: []
|
||||
}
|
||||
},
|
||||
disabled_price : false,
|
||||
mode: 'create',
|
||||
html : "",
|
||||
config: {
|
||||
placeholderText: 'Edit Your Content Here!',
|
||||
charCounterCount: true,
|
||||
toolbarStickyOffset: 73,
|
||||
toolbarButtons: ['insertLink', 'bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'color', 'align', 'formatOL', 'formatUL', 'embedly', '|', 'insertImage', 'insertVideo', 'insertFile', '|', 'help'],
|
||||
quickInsertButtons: ['embedly','hr', 'image', 'video'],
|
||||
codeBeautifierOptions: {
|
||||
end_with_newline: true,
|
||||
indent_inner_html: true,
|
||||
extra_liners: "['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre', 'ul', 'ol', 'table', 'dl']",
|
||||
brace_style: 'expand',
|
||||
indent_char: ' ',
|
||||
indent_size: 4,
|
||||
wrap_line_length: 0
|
||||
},
|
||||
heightMin: '50vh'
|
||||
}
|
||||
};
|
||||
this.defaultState = Object.assign({}, this.state);
|
||||
this.http = props.appstate.http;
|
||||
this.authStore = props.appstate.auth;
|
||||
this.globalUI = props.appstate.globalUI;
|
||||
this.categoryStore = props.appstate.category;
|
||||
this.myStoreItem = props.appstate.myStoreItem;
|
||||
//this.classStore = props.appstate.class;
|
||||
this.recipesStore = props.appstate.recipes;
|
||||
this.editor = null;
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
console.log(this.props.match.params.id,'ini id params')
|
||||
window.scrollTo(0, 0);
|
||||
// await this.recipesStore.getClassItem(this.props.match.params.id);
|
||||
// await this.recipesStore.getClassDetail(this.props.match.params.id)
|
||||
// await this.recipesStore.getClassItem();
|
||||
|
||||
if(this.props.match.params.id){
|
||||
this.recipesStore.getDetail(this.props.match.params.id).then(res => {
|
||||
console.log(this.recipesStore.selected.title,this.recipesStore.selected.content,'res detail')
|
||||
|
||||
let newArray = this.recipesStore.selected.additional_data.items.map(it => it);
|
||||
|
||||
let data
|
||||
data = {
|
||||
title:this.recipesStore.selected.title,
|
||||
content:this.recipesStore.selected.content,
|
||||
additional_data:{
|
||||
items: newArray
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({
|
||||
formData : data,
|
||||
text : this.recipesStore.selected.content,
|
||||
});
|
||||
console.log("new formmm",this.state.formData,this.state.text)
|
||||
|
||||
});
|
||||
|
||||
console.log("new formmm items",this.state.formData.additional_data.items)
|
||||
|
||||
// this.setState({
|
||||
// formData : {
|
||||
// title:this.recipesStore.selected.title,
|
||||
// content:this.recipesStore.selected.content,
|
||||
// },
|
||||
// text : this.recipesStore.selected.content,
|
||||
// });
|
||||
// console.log("new formmm",this.state.formData,this.state.text,this.state.title)
|
||||
}
|
||||
else{
|
||||
console.log('ini else');
|
||||
}
|
||||
|
||||
// $('.fr-wrapper').children[0].style.display = 'none';
|
||||
// setTimeout(() => {
|
||||
// $('.fr-wrapper').children[0].style.display = 'none';
|
||||
// }, 1000);
|
||||
|
||||
this.recipesStore.getItems();
|
||||
}
|
||||
|
||||
handleModelChange = (model) => {
|
||||
this.setState({
|
||||
text: model
|
||||
});
|
||||
};
|
||||
|
||||
handleCancel = () => this.setState({ previewVisible: false });
|
||||
|
||||
|
||||
handleOpen = () => {
|
||||
console.log(this.state.html,'heree');
|
||||
this.setState({openedDialog: true});
|
||||
};
|
||||
|
||||
handleClose = () => {
|
||||
this.setState({openedDialog: false});
|
||||
};
|
||||
|
||||
goToClassDetail(){
|
||||
this.props.history.push(`${LINKS.CLASSES}/${this.props.match.params.id}`);
|
||||
}
|
||||
|
||||
postData = () => {
|
||||
console.log("post!!!", this.state.formData);
|
||||
if(!this.state.formData.title || this.state.formData.title=="" || !this.state.text || this.state.text==""){
|
||||
message.success('Title and content cannot be empty!');
|
||||
console.log('inikosongdatanya')
|
||||
this.setState({openedDialog: false});
|
||||
this.setState({openedDialogEmpty:true});
|
||||
}
|
||||
else{
|
||||
this.setState({openedDialog: false});
|
||||
this.globalUI.openLoading();
|
||||
const data=Object.assign({},this.state.formData);
|
||||
data.content=this.state.text;
|
||||
// if(typeof data.price === "string"){
|
||||
// data.price = new DC(data.price.replace(/\,/g,"")).toFixed();
|
||||
// }
|
||||
|
||||
console.log("data",data);
|
||||
this.recipesStore.post(data)
|
||||
.then(res => {
|
||||
this.globalUI.hideDialogLoading();
|
||||
this.globalUI.openSnackbar("Success Added New Recipe");
|
||||
this.props.history.push(LINKS.RECIPES);
|
||||
})
|
||||
.catch(err => {
|
||||
this.globalUI.openSnackbar(err.message);
|
||||
console.error(err, 'ini errornya');
|
||||
|
||||
});
|
||||
// this.recipesStore.postClassItem(this.props.match.params.id,data).then(async()=>{
|
||||
// await message.success('Success Added New Course');
|
||||
// await this.globalUI.closeLoading();
|
||||
// await this.recipesStore.getAll();
|
||||
// this.goToClassDetail();
|
||||
// })
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
deleteData = () => {
|
||||
|
||||
};
|
||||
|
||||
editData = () => {
|
||||
console.log("Edit!!!", this.state.formData);
|
||||
if(!this.state.formData.title || this.state.formData.title=="" || !this.state.text || this.state.text==""){
|
||||
message.success('Title and content cannot be empty!');
|
||||
console.log('inikosongdatanya')
|
||||
this.setState({openedDialog: false});
|
||||
this.setState({openedDialogEmpty:true});
|
||||
}
|
||||
else{
|
||||
this.globalUI.openLoading();
|
||||
this.setState({openedDialog: false});
|
||||
const data=Object.assign({},this.state.formData);
|
||||
data.content=this.state.text;
|
||||
console.log("data",data);
|
||||
// if(typeof data.price == "string"){
|
||||
// data.price = new DC(data.price.replace(/\,/g,"")).toFixed();
|
||||
// }
|
||||
console.log("data",data);
|
||||
this.recipesStore.put(this.props.match.params.id,data)
|
||||
.then(res => {
|
||||
this.globalUI.hideDialogLoading();
|
||||
this.globalUI.openSnackbar("Success Edit Recipe");
|
||||
this.props.history.push(LINKS.RECIPES);
|
||||
})
|
||||
.catch(err => {
|
||||
this.globalUI.openSnackbar(err.message);
|
||||
console.error(err, 'ini errornya');
|
||||
|
||||
});
|
||||
// this.recipesStore.putClassItem(this.props.match.params.id_course,data).then(async()=>{
|
||||
// await message.success('Success Edit New Course');
|
||||
// await this.globalUI.closeLoading();
|
||||
// await this.recipesStore.getAll();
|
||||
// this.goToClassDetail();
|
||||
// })
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
handleBackClose = () => {
|
||||
this.setState({openedDialogBack: false})
|
||||
};
|
||||
|
||||
handleEmptyClose = () => {
|
||||
this.setState({openedDialogEmpty: false})
|
||||
};
|
||||
|
||||
handleEmptyOpen = () => {
|
||||
this.setState({openedDialogEmpty: true})
|
||||
};
|
||||
|
||||
handleBackOpen = () => {
|
||||
this.setState({openedDialogBack: true});
|
||||
};
|
||||
|
||||
inputContent = (evt)=>{
|
||||
// console.log(evt.target.value);
|
||||
this.setState({
|
||||
html : evt.target.value
|
||||
})
|
||||
}
|
||||
|
||||
handleChange = ({ fileList }) => {this.setState({ fileList }); console.log(fileList, 'remove')};
|
||||
|
||||
uploaderHandler({file, onProgress}) {
|
||||
console.log(file, 'upload');
|
||||
console.log("fileLength", this.state.fileLength);
|
||||
console.log("fileMainExist", this.state.fileMainExist);
|
||||
this.http.upload(file)
|
||||
.then(res => {
|
||||
const {fileList} = this.state;
|
||||
let newFileList = fileList.filter((obj)=>{
|
||||
if(!obj.lastModified){
|
||||
return true;
|
||||
}
|
||||
|
||||
})
|
||||
if(!this.state.fileMainExist){
|
||||
newFileList.push({
|
||||
uid: newFileList.length,
|
||||
name: file.name,
|
||||
status: 'done',
|
||||
url: this.http.appendImagePath(res.path),
|
||||
path: res.path,
|
||||
type: 'main'
|
||||
});
|
||||
}
|
||||
else{
|
||||
newFileList.push({
|
||||
uid: newFileList.length,
|
||||
name: file.name,
|
||||
status: 'done',
|
||||
url: this.http.appendImagePath(res.path),
|
||||
path: res.path,
|
||||
type: 'gallery'
|
||||
});
|
||||
}
|
||||
|
||||
console.log("update fileList",fileList);
|
||||
console.log("new fileList",newFileList);
|
||||
this.setState({fileList : newFileList});
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
handleWarningDialog = (bool)=>{
|
||||
this.setState({
|
||||
openDeleteDialog : bool
|
||||
})
|
||||
}
|
||||
|
||||
setFree = (bool) =>{
|
||||
this.setState({
|
||||
formData : {
|
||||
...this.state.formData,
|
||||
is_free: bool,
|
||||
price : 0
|
||||
},
|
||||
disabled_price : bool
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
//add mock data for tag option, change this if api for tag is complete
|
||||
const children = [];
|
||||
for (let i = 10; i < 36; i++) {
|
||||
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
|
||||
}
|
||||
|
||||
const { previewVisible, previewImage, fileList } = this.state;
|
||||
|
||||
const uploadButton = (
|
||||
<div>
|
||||
<Icon type="plus" />
|
||||
<div className="ant-upload-text">Upload</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const actions = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={true}
|
||||
style={{marginRight: 10}}
|
||||
onClick={this.handleClose}
|
||||
/>,
|
||||
<RaisedButton
|
||||
label={this.props.match.params.id ? "Edit" : "Publish"}
|
||||
primary={true}
|
||||
onClick={this.props.match.params.id ? this.editData : this.postData}
|
||||
/>,
|
||||
];
|
||||
|
||||
const actionsDelete = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={true}
|
||||
style={{marginRight: 10}}
|
||||
onClick={()=>this.handleWarningDialog(false)}
|
||||
/>,
|
||||
<RaisedButton
|
||||
label={"Delete"}
|
||||
primary={true}
|
||||
onClick={this.deleteData}
|
||||
/>,
|
||||
];
|
||||
|
||||
const actionsBack = [
|
||||
<FlatButton
|
||||
label="No"
|
||||
primary={true}
|
||||
style={{marginRight: 10}}
|
||||
onClick={this.handleBackClose}
|
||||
/>,
|
||||
<RaisedButton
|
||||
label="Yes"
|
||||
primary={true}
|
||||
onClick={() => this.props.history.goBack()}
|
||||
/>,
|
||||
];
|
||||
|
||||
const actionsEmpty = [
|
||||
<RaisedButton
|
||||
label="Yes"
|
||||
primary={true}
|
||||
onClick={this.handleEmptyClose}
|
||||
/>,
|
||||
];
|
||||
|
||||
const wrapperText = key => ele => React.cloneElement(ele, {
|
||||
value: this.state.formData[key],
|
||||
onChange: (e) => {
|
||||
let data = e.target.value
|
||||
this.setState({
|
||||
formData: {
|
||||
...this.state.formData,
|
||||
[key]: data
|
||||
}
|
||||
});
|
||||
// if(!this.state.formData.title || !this.state.text){
|
||||
// this.setState({saveButton:true});
|
||||
// }
|
||||
// else{
|
||||
// this.setState({saveButton:false});
|
||||
// }
|
||||
console.log("value",this.state.formData[key]);
|
||||
console.log("value2",e.target.value);
|
||||
console.log("key",key);
|
||||
}
|
||||
});
|
||||
|
||||
const wrapperSelectANT = key => ele => React.cloneElement(ele, {
|
||||
value: this.state.formData.additional_data[key],
|
||||
//value: ['dori','mana'],
|
||||
// errorText: this.state.errorText[key],
|
||||
onChange: (v) => {
|
||||
this.setState({
|
||||
formData: {
|
||||
...this.state.formData,
|
||||
additional_data:{
|
||||
[key] : v
|
||||
}
|
||||
// ...this.state.formData.additional_data,
|
||||
// [key]: v,
|
||||
}
|
||||
}, () => {
|
||||
// this.triggerOnChange(key)
|
||||
console.log("value",this.state.formData.additional_data[key]);
|
||||
console.log("value2",v);
|
||||
console.log("key",key);
|
||||
// console(value,'value3')
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// const wrapperSelect = key => ele => React.cloneElement(ele, {
|
||||
// value: this.state.formData[key],
|
||||
// onChange: (e, k, v) => {
|
||||
// this.setState({
|
||||
// formData: {
|
||||
// ...this.state.formData,
|
||||
// [key]: e,
|
||||
// }
|
||||
// }, () => this.triggerOnChange());
|
||||
// }
|
||||
// });
|
||||
|
||||
// const editorOptions = {
|
||||
// commands: [
|
||||
// {
|
||||
// command: 'bold',
|
||||
// key: 'b',
|
||||
// meta: true,
|
||||
// shift: false
|
||||
// },
|
||||
// {
|
||||
// command: 'italic',
|
||||
// key: 'i',
|
||||
// meta: true,
|
||||
// shift: false
|
||||
// },
|
||||
// {
|
||||
// command: 'underline',
|
||||
// key: 'u',
|
||||
// meta: true,
|
||||
// shift: false
|
||||
// }
|
||||
// ],
|
||||
// toolbar: {
|
||||
// buttons: ['h1','h2','h3','bold', 'italic', 'underline', 'image', 'video','anchor']
|
||||
// },
|
||||
// extensions:{
|
||||
// 'video': new MediumButton({
|
||||
// label:'<b>Video</b>',
|
||||
// tagNames:['video'],
|
||||
// // start:'<video width="100%" heigth="100%" controls="true" src="',
|
||||
// // end:'" />',
|
||||
// action: (markedWord,isMarked,parent)=>{
|
||||
// console.log("markedWord",markedWord);
|
||||
// console.log("isMarked",isMarked);
|
||||
// console.log("parent",parent);
|
||||
// // return markedWord;
|
||||
// if(markedWord.includes(("youtube"||"facebook"))){
|
||||
// return '<iframe width="90%" heigth="100%" controls="true" src="'+markedWord+'" style="vertical-align:middle" />';
|
||||
// }
|
||||
// else{
|
||||
// return '<video width="90%" heigth="100%" controls="true" src="'+markedWord+'" style="vertical-align:middle" />';
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
|
||||
return (
|
||||
|
||||
<div style={{marginTop: 35}}>
|
||||
<div className="row">
|
||||
<div className="col s12">
|
||||
<Card className="animated fadeIn cardLite" style={{marginLeft: 12, marginRight: 12}}>
|
||||
<Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
|
||||
<ToolbarGroup>
|
||||
<IconButton
|
||||
iconClassName="material-icons"
|
||||
tooltip="Back"
|
||||
style={{marginLeft: '-10px'}}
|
||||
onClick={this.handleBackOpen}
|
||||
>
|
||||
arrow_back
|
||||
</IconButton>
|
||||
<ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={this.props.match.params.id ? 'Edit Recipe' : 'Create Recipe'}/>
|
||||
</ToolbarGroup>
|
||||
<ToolbarGroup>
|
||||
{/*<Button>Submit</Button>*/}
|
||||
{!(this.state.mode == 'create') ? <RaisedButton onClick={()=>this.handleWarningDialog(true)} icon={<DeleteIcon/>} label="Delete" primary={true} style={{marginRight : '1px'}}/> : ''}
|
||||
{/*!(this.state.mode == 'update') ? <RaisedButton icon={<SaveIcon/>} label="Save as draft" primary={true} style={{marginRight : '1px'}}/> : ''*/}
|
||||
|
||||
</ToolbarGroup>
|
||||
</Toolbar>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<div className={"row"}>
|
||||
<div className={"col s12"}>
|
||||
<div className="row">
|
||||
<div className={"col s9"}>
|
||||
<Card className="animated fadeIn cardLite">
|
||||
<FroalaEditor
|
||||
model={this.state.text}
|
||||
config={this.state.config}
|
||||
onModelChange={this.handleModelChange}
|
||||
onManualControllerReady={(initControls) => {
|
||||
console.log(initControls, 'initControls initControls');
|
||||
initControls.initialize();
|
||||
this.editor = initControls.getEditor();
|
||||
this.editor().on('froalaEditor.image.beforeUpload', (e, editor, files) => {
|
||||
if (files.length) {
|
||||
let name = files[0].name;
|
||||
this.props.appstate.http.upload(files[0]).then(it => {
|
||||
editor.image.insert(this.http.appendImagePath(it.path), name, null, editor.image.get());
|
||||
// console.log(it);
|
||||
});
|
||||
// let reader = new FileReader();
|
||||
// reader.onload = (e) => {
|
||||
// let result = e.target.result;
|
||||
// editor.image.insert(result, null, null, editor.image.get());
|
||||
// };
|
||||
// reader.readAsDataURL(files[0]);
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
this.editor().on('froalaEditor.file.beforeUpload', (e, editor, files) => {
|
||||
// console.log(e, editor, files, 'blah blah blah')
|
||||
if (files.length) {
|
||||
let name = files[0].name;
|
||||
this.props.appstate.http.upload(files[0]).then(it => {
|
||||
editor.file.insert(this.http.appendImagePath(it.path), name, null);
|
||||
// console.log(it);
|
||||
});
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
this.editor().on('froalaEditor.video.beforeUpload', (e, editor, files) => {
|
||||
// console.log(e, editor, files, 'blah blah blah')
|
||||
if (files.length) {
|
||||
let name = files[0].name;
|
||||
// console.log(editor.video);
|
||||
this.props.appstate.http.upload(files[0]).then(it => {
|
||||
this.editor('video.insert', `<iframe controls="true" width="90%" height="100%" src="${this.http.appendImagePath(it.path)}" style="vertical-align:middle"/>`, false);
|
||||
// console.log(it);
|
||||
});
|
||||
}
|
||||
return false;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
<div className={"col s3"}>
|
||||
<Affix offsetTop={85}>
|
||||
<Card className="animated fadeIn cardLite">
|
||||
<div style={{padding: '14px'}}>
|
||||
<div className="row">
|
||||
<p className="label-form">Title Recipe</p>
|
||||
{wrapperText("title")(
|
||||
<Input placeholder="E.g. Ikan Kakap Saus Tomat" autosize type={"text"}/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<p className="label-form">Items</p>
|
||||
{wrapperSelectANT("items")(<Select
|
||||
mode="multiple"
|
||||
style={{ width: '100%' }}
|
||||
placeholder="E.g Dori,Cumi,Ikan"
|
||||
optionFilterProp="children"
|
||||
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
||||
>
|
||||
{this.recipesStore.listItems.map(data=>{
|
||||
return <Option key={data.id} value={data.id}>{data.name}</Option>
|
||||
})}
|
||||
</Select>)}
|
||||
</div>
|
||||
|
||||
{this.props.match.params.id ? (<ButtonAntd type={'primary'} style={{width: '100%', marginTop: 25}} onClick={this.handleOpen} icon={'upload'}>Edit</ButtonAntd>) : (<ButtonAntd type={'primary'} style={{width: '100%', marginTop: 25}} onClick={this.handleOpen} icon={'upload'}>Publish</ButtonAntd>)}
|
||||
{/* <div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
|
||||
<span className="label-form" style={{marginTop: 5}}>Free Course?</span>
|
||||
<Switch checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon style={{color: '#fff'}} type="cross" />} onChange={this.setFree} checked={this.state.disabled_price}/>
|
||||
</div> */}
|
||||
{/* {
|
||||
this.recipesStore.classData.type === 'pay_per_course' ?
|
||||
<div className="row" style={{marginTop: 27}}>
|
||||
<p className="label-form">Price</p>
|
||||
{wrapperText("price")(
|
||||
<NumberFormat disabled={this.state.disabled_price} thousandSeparator={true} style={{ width: '100%', padding: '4px 11px', height: '32px', fontSize: '14px', border: '1px solid #d9d9d9', borderRadius: '4px' }} placeholder="E.g. 50" />
|
||||
)}
|
||||
</div>
|
||||
: <div></div>
|
||||
} */}
|
||||
{/*<RaisedButton onClick={() => {*/}
|
||||
{/*this.props.appstate.files.onFileSelected = (path,mime_type) => {*/}
|
||||
{/*console.log("this.props.appstate.files.onFileSelected",this.props.appstate.files.lastFile);*/}
|
||||
{/*let file = this.props.appstate.files.lastFile;*/}
|
||||
{/*if(!this.state.featured_media_exist && file.mime_type.includes("image")){*/}
|
||||
{/*this.setState({formData:{...this.state.formData, featured_media:path,featured_media_type:file.mime_type}});*/}
|
||||
{/*this.setState({featured_media_exist:true});*/}
|
||||
{/*console.log("featuredExistNow");*/}
|
||||
{/*}*/}
|
||||
{/*// this.mediumEditorInstance.restoreSelection();*/}
|
||||
{/*if(file.mime_type.includes("image")){*/}
|
||||
{/*this.editor('image.insert', this.http.appendImagePath(path), true);*/}
|
||||
{/*// this.mediumEditorInstance.pasteHTML(*/}
|
||||
{/*// `<img src="${this.http.appendImagePath(path)}" style="margin: 0 auto;">`,*/}
|
||||
{/*// {cleanAttrs: []});*/}
|
||||
{/*}*/}
|
||||
{/*else if(file.mime_type.includes("video")){*/}
|
||||
{/*this.editor('html.insert', `<video controls="true" width="90%" height="100%" src="${this.http.appendImagePath(path)}" style="vertical-align:middle"/>`, false);*/}
|
||||
{/*// this.mediumEditorInstance.pasteHTML(*/}
|
||||
{/*// `<video controls="true" width="90%" height="100%" src="${this.http.appendImagePath(path)}" style="vertical-align:middle"/>`,*/}
|
||||
{/*// {cleanAttrs: []});*/}
|
||||
{/*}*/}
|
||||
{/*else if(file.mime_type.includes("audio")){*/}
|
||||
{/*this.editor('html.insert', `<audio controls="true" width="90%" height="100%" src="${this.http.appendImagePath(path)}" style="vertical-align:middle"/>`, false);*/}
|
||||
{/*// this.mediumEditorInstance.pasteHTML(*/}
|
||||
{/*// `<audio controls="true" width="90%" height="100%" src="${this.http.appendImagePath(path)}" style="vertical-align:middle"/>`,*/}
|
||||
{/*// {cleanAttrs: []});*/}
|
||||
{/*}*/}
|
||||
{/*else if(file.mime_type.includes("application")){*/}
|
||||
{/*this.editor('file.insert', this.http.appendImagePath(path), file.name);*/}
|
||||
{/*// this.mediumEditorInstance.pasteHTML(*/}
|
||||
{/*// `*/}
|
||||
{/*// <file src=${this.http.appendImagePath(path)} style="display:inline-block;height:150px; width:150px;">*/}
|
||||
{/*// <div style="height:150px; width:150px; text-align:center; margin: 0 auto;box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;">*/}
|
||||
{/*// <svg fill="#999" height="150" viewBox="0 0 24 24" width="150" xmlns="http://www.w3.org/2000/svg">*/}
|
||||
{/*// <path d="M2 12.5C2 9.46 4.46 7 7.5 7H18c2.21 0 4 1.79 4 4s-1.79 4-4 4H9.5C8.12 15 7 13.88 7 12.5S8.12 10 9.5 10H17v2H9.41c-.55 0-.55 1 0 1H18c1.1 0 2-.9 2-2s-.9-2-2-2H7.5C5.57 9 4 10.57 4 12.5S5.57 16 7.5 16H17v2H7.5C4.46 18 2 15.54 2 12.5z"/>*/}
|
||||
{/*// <path d="M0 0h24v24H0V0z" fill="none"/>*/}
|
||||
{/*// </svg>*/}
|
||||
{/*// </div>*/}
|
||||
{/*// </div>*/}
|
||||
{/*// </file>*/}
|
||||
{/*// `,*/}
|
||||
{/*// {cleanAttrs: []});*/}
|
||||
{/*}*/}
|
||||
|
||||
{/*};*/}
|
||||
{/*// this.mediumEditorInstance.saveSelection();*/}
|
||||
{/*this.props.appstate.globalUI.showDialog(DIALOG.MEDIA.SELECT);*/}
|
||||
{/*}} style={{marginTop: this.recipesStore.classData.type !== 'pay_per_course' ? 25 : 10}} icon={<AttachmentIcon/>} label="Attachments" primary={true} fullWidth={true} />*/}
|
||||
</div>
|
||||
</Card>
|
||||
</Affix>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog
|
||||
title="Warning"
|
||||
actions={actions}
|
||||
modal={true}
|
||||
open={this.state.openedDialog}
|
||||
onRequestClose={() => this.handleClose()}
|
||||
>
|
||||
Make sure all of your data is correct before submitting.
|
||||
</Dialog>
|
||||
<Dialog
|
||||
title="Warning"
|
||||
actions={actionsBack}
|
||||
modal={true}
|
||||
contentStyle={{width: 350}}
|
||||
open={this.state.openedDialogBack}
|
||||
onRequestClose={() => this.handleBackClose()}
|
||||
>
|
||||
Are you sure you wanna go back ?
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
title="Warning"
|
||||
actions={actionsDelete}
|
||||
modal={true}
|
||||
open={this.state.openDeleteDialog}
|
||||
onRequestClose={() => this.handleWarningDialog(false)}
|
||||
>
|
||||
Are you sure want to delete this item?
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
title="Warning"
|
||||
actions={actionsEmpty}
|
||||
modal={true}
|
||||
contentStyle={{width: 350}}
|
||||
open={this.state.openedDialogEmpty}
|
||||
onRequestClose={() => this.handleEmptyClose()}
|
||||
>
|
||||
Title and content cannot be empty !
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
238
src/common/pages/Recipes/index.js
Normal file
238
src/common/pages/Recipes/index.js
Normal file
@@ -0,0 +1,238 @@
|
||||
import React from 'react';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
import bind from 'bind-decorator';
|
||||
import {
|
||||
Card,
|
||||
FlatButton,
|
||||
Divider,
|
||||
RaisedButton,
|
||||
Toolbar,
|
||||
ToolbarGroup,
|
||||
ToolbarSeparator,
|
||||
Table,
|
||||
TableBody,
|
||||
TableHeader,
|
||||
TableHeaderColumn,
|
||||
TableRow,
|
||||
TableRowColumn,
|
||||
TextField,
|
||||
Dialog,
|
||||
Tab, Tabs,
|
||||
IconButton
|
||||
} from 'material-ui';
|
||||
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 {Link} from 'react-router-dom';
|
||||
import {LINKS} from "../../routes";
|
||||
import moment from 'moment';
|
||||
import {DIALOG} from "../../stores/global_ui";
|
||||
|
||||
@inject('appstate')
|
||||
@observer
|
||||
export default class Recipes 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.recipesStore = props.appstate.recipes;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.globalUI.openLoading();
|
||||
this.recipesStore.getList().then(res => {
|
||||
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
|
||||
});
|
||||
}
|
||||
|
||||
handleClickDelete = (id) => {
|
||||
this.recipesStore.delete(id).then(res=>{
|
||||
this.setState({
|
||||
openedDelete: false,
|
||||
openSnackbarDelete: true
|
||||
});
|
||||
this.globalUI.openSnackbar("Successful Deleted Existing Data");
|
||||
|
||||
}).catch(err=>{
|
||||
console.log(err);
|
||||
this.globalUI.openSnackbar(err.message);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
handleCloseDelete = () => {
|
||||
this.setState({
|
||||
openedDelete: false
|
||||
})
|
||||
}
|
||||
|
||||
handleChange = (event, index, value) => this.setState({value});
|
||||
|
||||
search = (event)=>{
|
||||
if(event.target.value.length == 0){
|
||||
this.recipesStore.isSearching = false;
|
||||
}
|
||||
else{
|
||||
this.recipesStore.isSearching = true;
|
||||
this.recipesStore.search(event.target.value);
|
||||
}
|
||||
}
|
||||
|
||||
goToForm = ()=>{
|
||||
this.props.history.push(LINKS.RECIPES+`/form`);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const actionsDelete = [
|
||||
<FlatButton
|
||||
label="Cancel"
|
||||
primary={true}
|
||||
onClick={this.handleCloseDelete}
|
||||
/>,
|
||||
<FlatButton
|
||||
label="Delete"
|
||||
primary={true}
|
||||
onClick={() => this.handleClickDelete(this.state.id)}
|
||||
/>,
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="setting containerMiddle">
|
||||
<div className="row">
|
||||
<div className="col l12 m12 s12">
|
||||
<Tabs
|
||||
value={'recipe'}
|
||||
inkBarStyle={{background: 'transparent'}}
|
||||
className="tabsAkun"
|
||||
style={{background: 'transparent'}}
|
||||
>
|
||||
<Tab label="Recipes" value="recipe" className="buttonTabs buttonTabsActive">
|
||||
<div className="row">
|
||||
<div className="col l12 m12 s12">
|
||||
<Card className="animated fadeIn cardLite">
|
||||
<Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
|
||||
<ToolbarGroup>
|
||||
<SearchIcon style={{marginRight: 8, color: "#999"}}/>
|
||||
<TextField
|
||||
hintText="Search Recipe"
|
||||
style={{fontSize: 14}}
|
||||
hintStyle={{fontSize: 14}}
|
||||
underlineShow={false}
|
||||
onChange={this.search}
|
||||
/>
|
||||
</ToolbarGroup>
|
||||
<ToolbarGroup className="ToolbarGroupLast">
|
||||
<ToolbarSeparator/>
|
||||
<RaisedButton className="ToolbarGroupLastButton" icon={<AddIcon/>} label="New Recipe"
|
||||
primary={true} onClick={this.goToForm}/>
|
||||
</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'}}>Title</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun" style={{height: 'auto'}}>Created At</TableHeaderColumn>
|
||||
<TableHeaderColumn className="TableHeaderColumnAkun"
|
||||
style={{height: 'auto', textAlign: 'right'}}>Action</TableHeaderColumn>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody displayRowCheckbox={false}>
|
||||
{(this.recipesStore.list.length > 0) ? (this.recipesStore.isSearching ? this.recipesStore.filtered : this.recipesStore.list).map((item, index) => {
|
||||
return (
|
||||
<TableRow key={item.id}>
|
||||
<TableRowColumn>
|
||||
<div>
|
||||
<Link to={`${LINKS.RECIPES}/form/${item.id}`} key={item.id}>{item.title}</Link>
|
||||
</div>
|
||||
</TableRowColumn>
|
||||
<TableRowColumn>{moment(item.created_at).format('DD MMMM YYYY, HH:mm:ss')}</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>
|
||||
</div>
|
||||
</div>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user