[48f3030] | 1 | import { Box, Modal } from '@mui/material'
|
---|
| 2 | import React, { Component } from 'react'
|
---|
| 3 | import List from '@mui/material/List';
|
---|
| 4 | import ListItem from '@mui/material/ListItem';
|
---|
| 5 | import ListItemButton from '@mui/material/ListItemButton';
|
---|
| 6 | import ListItemIcon from '@mui/material/ListItemIcon';
|
---|
| 7 | import ListItemText from '@mui/material/ListItemText';
|
---|
| 8 | import Checkbox from '@mui/material/Checkbox';
|
---|
| 9 | import IconButton from '@mui/material/IconButton';
|
---|
| 10 | import './PickSpecificationComponent.css'
|
---|
| 11 | import UserContext from '../../context/UserContext';
|
---|
| 12 | import axios from 'axios';
|
---|
| 13 |
|
---|
| 14 | export class PickSpecificationComponent extends Component {
|
---|
| 15 |
|
---|
| 16 | constructor(props) {
|
---|
| 17 | super(props)
|
---|
| 18 |
|
---|
| 19 | this.state = {
|
---|
| 20 | checked: []
|
---|
| 21 | }
|
---|
| 22 | }
|
---|
| 23 |
|
---|
| 24 | handleToggle = (value) => () => {
|
---|
| 25 | const currentIndex = this.state.checked.indexOf(value);
|
---|
| 26 | const newChecked = [...this.state.checked];
|
---|
| 27 |
|
---|
| 28 | if (currentIndex === -1) {
|
---|
| 29 | newChecked.push(value);
|
---|
| 30 | } else {
|
---|
| 31 | newChecked.splice(currentIndex, 1);
|
---|
| 32 | }
|
---|
| 33 |
|
---|
| 34 | this.setState({
|
---|
| 35 | checked: newChecked
|
---|
| 36 | }, () => {
|
---|
| 37 | var config = {
|
---|
| 38 | method: 'put',
|
---|
| 39 | url: '/user/'+this.context.userId+'/editspecifications',
|
---|
| 40 | headers: {
|
---|
| 41 | 'Authorization': 'Bearer '+localStorage.getItem('token'),
|
---|
| 42 | 'Content-Type': 'text/plain'
|
---|
| 43 | },
|
---|
| 44 | data : this.state.checked
|
---|
| 45 | };
|
---|
| 46 |
|
---|
| 47 | axios(config)
|
---|
| 48 | .then(response => {
|
---|
| 49 | localStorage.setItem('pickedSpecifications',this.state.checked)
|
---|
| 50 | })
|
---|
| 51 | .catch(function (error) {
|
---|
| 52 | console.log(error);
|
---|
| 53 | });
|
---|
| 54 | })
|
---|
| 55 | };
|
---|
| 56 |
|
---|
| 57 | componentDidMount(){
|
---|
| 58 | var config = {
|
---|
| 59 | method: 'get',
|
---|
| 60 | url: '/user/'+this.context.userId+'/getspecifications',
|
---|
| 61 | headers: {
|
---|
| 62 | 'Authorization': 'Bearer '+localStorage.getItem('token')
|
---|
| 63 | }
|
---|
| 64 | };
|
---|
| 65 |
|
---|
| 66 | axios(config)
|
---|
| 67 | .then(response => {
|
---|
| 68 | this.setState({
|
---|
| 69 | checked: response.data
|
---|
| 70 | },() => {localStorage.setItem('pickedSpecifications',this.state.checked)})
|
---|
| 71 | })
|
---|
| 72 | .catch(function (error) {
|
---|
| 73 | console.log('error here',error);
|
---|
| 74 | });
|
---|
| 75 |
|
---|
| 76 | }
|
---|
| 77 |
|
---|
| 78 |
|
---|
| 79 | render() {
|
---|
| 80 | return (
|
---|
| 81 | <div className='pick-specification-modal-main'>
|
---|
| 82 | <Modal
|
---|
| 83 | open={this.props.openModal}
|
---|
| 84 | onClose={this.props.handleClose}
|
---|
| 85 | >
|
---|
| 86 | <Box className='pick-specification-modal-box'>
|
---|
| 87 | <div className='pick-specification-modal-title'>Изберете спецификации кои што сакате да се прикажани</div>
|
---|
| 88 | <List className='pick-specification-list' sx={{ width: '100%', bgcolor: 'background.paper' }}>
|
---|
| 89 | {['РАМ меморија', 'РОМ меморија', 'Предна камера', 'Задна камера',
|
---|
| 90 | 'Чипсет', 'Процесор', 'Оперативен систем', 'Боја', 'Батерија'].map((value) => {
|
---|
| 91 | const labelId = `checkbox-list-label-${value}`;
|
---|
| 92 | return (
|
---|
| 93 | <ListItem
|
---|
| 94 | className='pick-specification-specs-item'
|
---|
| 95 | key={value}
|
---|
| 96 | disablePadding
|
---|
| 97 | >
|
---|
| 98 | <ListItemButton role={undefined} onClick={this.handleToggle(value)} dense>
|
---|
| 99 | <ListItemIcon>
|
---|
| 100 | <Checkbox
|
---|
| 101 | edge="start"
|
---|
| 102 | checked={this.state.checked.indexOf(value) !== -1}
|
---|
| 103 | tabIndex={-1}
|
---|
| 104 | disableRipple
|
---|
| 105 | inputProps={{ 'aria-labelledby': labelId }}
|
---|
| 106 | />
|
---|
| 107 | </ListItemIcon>
|
---|
| 108 | <ListItemText className='pick-specification-item-label' primary={value} />
|
---|
| 109 | </ListItemButton>
|
---|
| 110 | </ListItem>
|
---|
| 111 | );
|
---|
| 112 | })}
|
---|
| 113 | </List>
|
---|
| 114 | </Box>
|
---|
| 115 | </Modal>
|
---|
| 116 | </div>
|
---|
| 117 | )
|
---|
| 118 |
|
---|
| 119 |
|
---|
| 120 | }
|
---|
| 121 | }
|
---|
| 122 |
|
---|
| 123 | PickSpecificationComponent.contextType = UserContext
|
---|
| 124 |
|
---|
| 125 | export default PickSpecificationComponent
|
---|