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
|
---|