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