File: src\components\AdminAddCategory\adminAddCategory.js
//@flow
import React, { Component } from 'react';
import {
Grid,
Row,
Col,
ListGroup,
ListGroupItem,
ToggleButtonGroup,
ToggleButton,
ButtonToolbar,
MenuItem,
FormGroup,
FormControl,
PageHeader,
Button,
ControlLabel, Alert
} from 'react-bootstrap';
import { ChooseCategory } from '../ChooseCategory/ChooseCategory';
import { CategoryService } from '../../services';
import {Checkbox, Radio} from 'react-bootstrap';
import { CategorySelectList } from '../CategorySelectList/CategorySelectList';
import {history} from "../../index";
let categoryService = new CategoryService();
/**
* @class adminAddCategory
*/
export class adminAddCategory extends Component<Props, State> {
constructor() {
super();
this.state = {
newCategoryName: {},
selectedCategoryId: {},
selectedCategoryType: 1,
newPriority: {},
mainCategory: false,
error: false,
success: false
};
this.saveCategory = this.saveCategory.bind(this);
}
onChangeCategoryHeader = (name1, name2) => {
this.setState({ selectedCategoryId: name1, selectedCategoryType: name2 });
console.log(this.state.selectedCategoryId + ' hei' + this.state.selectedCategoryType);
};
onClickHovedkategori = () => {
this.setState({
mainCategory: !this.state.mainCategory
});
};
handleChange = (statename: string) => (event: SyntheticEvent<HTMLInputElement>): void => {
this.setState({
// $FlowFixMe
[statename]: event.target.value
});
};
handlePriority = (pri: number) => {
this.setState({ newPriority: pri });
};
buttonBack(){
this.props.history.goBack();
}
/**
* @method saveCategory
* @returns {Promise<void>}
*/
saveCategory = async () => {
if (this.state.mainCategory) {
if (this.state.newCategoryName == '') {
this.setState({ error: true });
return;
}
let theBody1: Object = {
name: this.state.newCategoryName,
priority: this.state.newPriority
};
console.log('body', theBody1);
categoryService.addCategory1(theBody1).then(res => {
console.log('added cat1', res);
this.setState({success: true},() => {
setTimeout(
function () {
console.log(this.props);
history.push('/admin')
}, 1000
)
});
this.setState({ error: false });
}).catch(error => {
console.log(error);
this.setState({ error: true });
});
} else {
if (this.state.newCategoryName == '') {
this.setState({ error: true });
return;
}
let theBody2: Object = {
categoryId: this.state.selectedCategoryType,
name: this.state.newCategoryName
};
categoryService.addCategory2(theBody2).then(res => {
console.log('added cat2', res);
this.setState({success: true},() => {
setTimeout(
function () {
console.log(this.props);
history.push('/admin')
}, 1000
)
});
this.setState({ error: false });
}).catch(error => {
console.log(error);
this.setState({ error: true });
});
}
};
onChangeCategory = (label, name) => {
this.setState({ selectedCategoryId: name, selectedCategoryType: label });
};
render() {
let mainCat;
if (this.state.mainCategory) {
mainCat = <div>
<FormGroup>
<div><ControlLabel>Prioritet</ControlLabel></div>
<Radio onClick={() => this.handlePriority(1)} name="radioGroup" inline>
Meget viktig
</Radio>{' '}
<Radio onClick={() => this.handlePriority(2)} name="radioGroup" inline>
Viktig
</Radio>{' '}
<Radio onClick={() => this.handlePriority(3)} name="radioGroup" inline>Lite viktig
</Radio>
</FormGroup>
</div>;
} else {
mainCat = <div><ControlLabel>Velg overkategori</ControlLabel>
<CategorySelectList handleOnChangeCategory={this.onChangeCategory.bind(this)}/></div>;
}
let alert;
if (this.state.error) {
alert = (
<Alert bsStyle="danger">
<h6>Noe gikk galt, er du sikkert på at du har valg alt du skal velge?</h6>
</Alert>);
} else {
<span></span>;
}
let success;
if(this.state.success){
success = (
<Alert bsStyle={"success"}>
<h5>Du har lagt til kategorien {this.state.newCategoryName}</h5>
</Alert>
)
}else{
<span></span>;
}//end condition
return (
<div className="bottomFooter">
<i id="backButton" onClick={()=> this.buttonBack()} className="fas fa-arrow-circle-left"></i>
<Grid>
<Col xs={0} md={2}></Col>
<Col xs={12} md={8}>
<FormGroup className="text-center">
<PageHeader>Legg til en kategori</PageHeader>
<ControlLabel>Kategori navn</ControlLabel>
<FormControl type="text" placeholder="Skriv inn kategorinavn"
onChange={this.handleChange('newCategoryName')}></FormControl>
<ListGroup>
<br/>
<FormGroup>
<Checkbox inline onClick={() => this.onClickHovedkategori()}>Registrer som hovedkategori</Checkbox>
</FormGroup>
</ListGroup>
{mainCat}
</FormGroup>
<div align="center">
<Button bsStyle="primary" onClick={() => this.saveCategory()}>Lagre kategori</Button>
</div>
{alert}
{success}
</Col>
<Col xs={0} md={2}></Col>
</Grid>
</div>
);
}
}