1 | import React, { Component } from 'react'
|
---|
2 | import './SpecificationsFilterComponent.css'
|
---|
3 | import FilterAltIcon from '@mui/icons-material/FilterAlt';
|
---|
4 | import Tippy from '@tippyjs/react';
|
---|
5 | import Popover from '@mui/material/Popover';
|
---|
6 | import Typography from '@mui/material/Typography';
|
---|
7 | import Button from '@mui/material/Button';
|
---|
8 | import FilterSelectComponent from './FilterSelectComponent';
|
---|
9 | import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
|
---|
10 | import PickSpecificationComponent from '../PickSpecificationComponent/PickSpecificationComponent';
|
---|
11 | import axios from 'axios';
|
---|
12 | import UserContext from '../../context/UserContext';
|
---|
13 | export class SpecificationsFilterComponent extends Component {
|
---|
14 |
|
---|
15 | constructor(props) {
|
---|
16 | super(props)
|
---|
17 |
|
---|
18 | this.state = {
|
---|
19 | anchorEl: null,
|
---|
20 | openModal: false,
|
---|
21 | }
|
---|
22 | }
|
---|
23 |
|
---|
24 | handleClick = (event) => {
|
---|
25 | this.setState({
|
---|
26 | anchorEl: event.currentTarget
|
---|
27 | })
|
---|
28 | };
|
---|
29 |
|
---|
30 | handleClose = () => {
|
---|
31 | this.setState({
|
---|
32 | anchorEl: null
|
---|
33 | })
|
---|
34 | };
|
---|
35 |
|
---|
36 | handleModalClose = () =>{
|
---|
37 | this.setState({
|
---|
38 | openModal: false
|
---|
39 | })
|
---|
40 | }
|
---|
41 |
|
---|
42 | handleModalOpen = () =>{
|
---|
43 | this.setState({
|
---|
44 | openModal: true
|
---|
45 | })
|
---|
46 | }
|
---|
47 |
|
---|
48 | render() {
|
---|
49 |
|
---|
50 | const open = Boolean(this.state.anchorEl);
|
---|
51 | const id = open ? 'specifications-popover' : undefined;
|
---|
52 |
|
---|
53 | return (
|
---|
54 | <div className='specifications-filter-main'>
|
---|
55 | <h4 aria-describedby={id} className='specifications-filter-header' onClick={this.handleClick}>Спецификации
|
---|
56 | <ArrowDropDownIcon style={{marginTop:'-2px'}}/>
|
---|
57 | </h4>
|
---|
58 | <Popover
|
---|
59 | className='specifications-filter-popover'
|
---|
60 | id={id}
|
---|
61 | open={open}
|
---|
62 | anchorEl={this.state.anchorEl}
|
---|
63 | onClose={this.handleClose}
|
---|
64 | anchorOrigin={{
|
---|
65 | vertical: 'center',
|
---|
66 | horizontal: 'right',
|
---|
67 | }}
|
---|
68 | >
|
---|
69 | <div className='popover-specification-container'>
|
---|
70 | <h2 className='popover-specification-container-header'>Филтер за спецификации</h2>
|
---|
71 | { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РАМ меморија") ?
|
---|
72 | <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='ram'></FilterSelectComponent> : <></>
|
---|
73 | }
|
---|
74 | { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РОМ меморија") ?
|
---|
75 | <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='rom'></FilterSelectComponent> : <></>
|
---|
76 | }
|
---|
77 | { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Предна камера") ?
|
---|
78 | <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='frontcamera'></FilterSelectComponent> : <></>
|
---|
79 | }
|
---|
80 | { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Задна камера") ?
|
---|
81 | <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='backcamera'></FilterSelectComponent> : <></>
|
---|
82 | }
|
---|
83 | { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Чипсет") ?
|
---|
84 | <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='chipset'></FilterSelectComponent> : <></>
|
---|
85 | }
|
---|
86 | { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Процесор") ?
|
---|
87 | <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='cpu'></FilterSelectComponent> : <></>
|
---|
88 | }
|
---|
89 | { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Оперативен систем") ?
|
---|
90 | <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='operatingsystem'></FilterSelectComponent> : <></>
|
---|
91 | }
|
---|
92 | { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Боја") ?
|
---|
93 | <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='color'></FilterSelectComponent> : <></>
|
---|
94 | }
|
---|
95 | { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Батерија") ?
|
---|
96 | <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='battery'></FilterSelectComponent> : <></>
|
---|
97 | }
|
---|
98 | </div>
|
---|
99 | </Popover>
|
---|
100 | <Tippy className='tippy-pick-specifications-icon' placement='bottom' content='Изберете спецификации за приказ'>
|
---|
101 | <FilterAltIcon onClick={this.handleModalOpen} style={{fontSize: '35px'}} className='pick-specifications-icon'></FilterAltIcon>
|
---|
102 | </Tippy>
|
---|
103 | { this.context.userId != '' && <PickSpecificationComponent
|
---|
104 | openModal={this.state.openModal}
|
---|
105 | handleClose={this.handleModalClose}/> }
|
---|
106 | </div>
|
---|
107 | )
|
---|
108 | }
|
---|
109 | }
|
---|
110 |
|
---|
111 | SpecificationsFilterComponent.contextType = UserContext
|
---|
112 |
|
---|
113 | export default SpecificationsFilterComponent
|
---|
114 |
|
---|