Changeset 48f3030 for phonelux-frontend/src/components/FiltersComponents

Timestamp:

09/23/22 02:03:14 (2 years ago)

Author:

Marko <Marko@…>

Branches:

master

Children:

895cd87

Parents:

436e0da

Message:

Implemented all use cases

Location:

phonelux-frontend/src/components/FiltersComponents

Files:

• FilterSelectComponent.js (modified) (1 diff)
• SortByComponent.css (modified) (1 diff)
• SortByComponent.js (modified) (2 diffs)
• SpecificationsFilterComponent.css (modified) (1 diff)
• SpecificationsFilterComponent.js (modified) (5 diffs)

phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js

@@ -16 +16 @@
       super(props)
         const {type} = this.props
-        console.log(type)
       this.state = {
          pickedItems: localStorage.getItem(type) ? localStorage.getItem(type).split(',') : [],

phonelux-frontend/src/components/FiltersComponents/SortByComponent.css

@@ -20 +20 @@
     overflow-y: scroll;
 }
+
+.pick-specifications-icon{
+    margin-left: 10px;
+}
+
+.pick-specifications-icon:hover{
+    cursor: pointer;
+}
+
+.specifications-filter-main{
+    display: flex;
+}
+.tippy-pick-specifications-icon{
+    width: fit-content;
+    text-align: center;
+}

phonelux-frontend/src/components/FiltersComponents/SortByComponent.js

@@ -3 +3 @@
 import './SortByComponent.css'
 import SpecificationsFilterComponent from './SpecificationsFilterComponent'
+import FilterAltIcon from '@mui/icons-material/FilterAlt';
+import PickSpecificationComponent from '../PickSpecificationComponent/PickSpecificationComponent';
 
 export class SortByComponent extends Component {
@@ -10 +12 @@
     
       this.state = {
-         sortBy: localStorage.getItem('sortBy') ? localStorage.getItem('sortBy') : 'mostPopular'
+         sortBy: localStorage.getItem('sortBy') ? localStorage.getItem('sortBy') : 'mostPopular',
+         openModal: false
       }
     }

phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.css

@@ -18 +18 @@
 .popover-specification-container{
     overflow-y: scroll;
-    height: 400px;
+    height: fit-content;
+    padding-bottom: 30px;
+    max-height: 400px;
+    
 }
 

phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.js

@@ -8 +8 @@
 import FilterSelectComponent from './FilterSelectComponent';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import PickSpecificationComponent from '../PickSpecificationComponent/PickSpecificationComponent';
+import axios from 'axios';
+import UserContext from '../../context/UserContext';
 export class SpecificationsFilterComponent extends Component {
 
@@ -14 +17 @@
     
       this.state = {
-        anchorEl: null
+        anchorEl: null,
+        openModal: false,
       }
     }
@@ -29 +33 @@
       })
     };
+
+    handleModalClose = () =>{
+      this.setState({
+        openModal: false
+      })
+    }
+
+    handleModalOpen = () =>{
+        this.setState({
+            openModal: true
+        })
+    }
 
   render() {
@@ -53 +69 @@
         <div className='popover-specification-container'>
         <h2 className='popover-specification-container-header'>Филтер за спецификации</h2>
-        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='ram'></FilterSelectComponent>
-        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='rom'></FilterSelectComponent>
-        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='frontcamera'></FilterSelectComponent>
-        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='backcamera'></FilterSelectComponent>
-        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='chipset'></FilterSelectComponent>
-        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='cpu'></FilterSelectComponent>
-        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='operatingsystem'></FilterSelectComponent>
-        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='color'></FilterSelectComponent>
-        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='battery'></FilterSelectComponent>
+        { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РАМ меморија") ?
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='ram'></FilterSelectComponent> : <></>
+        }
+        { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РОМ меморија") ?
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='rom'></FilterSelectComponent> : <></>
+        } 
+        { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Предна камера") ?
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='frontcamera'></FilterSelectComponent> : <></>
+        }
+        { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Задна камера") ?
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='backcamera'></FilterSelectComponent> : <></>
+        }
+        { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Чипсет") ?
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='chipset'></FilterSelectComponent> : <></>
+        }
+         { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Процесор") ?
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='cpu'></FilterSelectComponent> : <></>
+        }
+        { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Оперативен систем") ?
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='operatingsystem'></FilterSelectComponent> : <></>
+        }
+        { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Боја") ?
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='color'></FilterSelectComponent> : <></>
+        }
+        { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Батерија") ?
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='battery'></FilterSelectComponent> : <></>
+        }
         </div>
       </Popover>
+      <Tippy className='tippy-pick-specifications-icon' placement='bottom' content='Изберете спецификации за приказ'>
+        <FilterAltIcon onClick={this.handleModalOpen} style={{fontSize: '35px'}} className='pick-specifications-icon'></FilterAltIcon>
+        </Tippy>
+        { this.context.userId != '' && <PickSpecificationComponent
+        openModal={this.state.openModal} 
+        handleClose={this.handleModalClose}/> }
       </div>
     )
@@ -69 +109 @@
 }
 
+SpecificationsFilterComponent.contextType = UserContext
+
 export default SpecificationsFilterComponent