Ignore:
Timestamp:
09/21/22 18:47:39 (2 years ago)
Author:
Marko <Marko@…>
Branches:
master
Children:
34950c6
Parents:
5201690
Message:

Component for editing offers added

Location:
phonelux-frontend/src/components/FiltersComponents
Files:
2 added
6 edited

Legend:

Unmodified
Added
Removed

  • phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js

    r5201690 rd66b8eb  
    1111 
    1212    this.state = {
    13       value: [1000,150000],
     13      value: localStorage.getItem('priceRange') ? [parseInt(localStorage.getItem('priceRange').split('-')[0]),
     14      parseInt(localStorage.getItem('priceRange').split('-')[1])] : [1000,150000],
    1415      minValue: 0,
    1516      maxValue: 0
    … …  
    3940  handleChange = () => {
    4041    this.props.changeHandler({priceRange: this.state.value.join('-')})
     42    localStorage.setItem('priceRange',this.state.value.join('-'))
    4143  }
    4244

  • phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.css

    r5201690 rd66b8eb  
    77
    88}
     9
     10.list-item-text-filters span{
     11    overflow-x: scroll;
     12}

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

    r5201690 rd66b8eb  
    1515    constructor(props) {
    1616      super(props)
    17        
     17        const {type} = this.props
     18        console.log(type)
    1819      this.state = {
    19          pickedItems: [],
     20         pickedItems: localStorage.getItem(type) ? localStorage.getItem(type).split(',') : [],
    2021         items: [],
    2122         type: '',
    … …  
    3738        }
    3839
    39 
    4040        let endpoint
    41         if(this.props.type == 'brands')
    42         {
    43           endpoint = '/brands'
     41        switch (this.props.type) {
     42
     43          case 'brands':
     44            endpoint = '/brands'
    4445          this.setState({
    4546            type: 'Брендови'
    4647          })
    47         }
    48         else{
    49           endpoint = '/shops'
     48            break;
     49          case 'shops':
     50            endpoint = '/shops'
    5051          this.setState({
    5152            type: 'Продавници'
    5253          })
     54            break;
     55
     56          case 'ram':
     57            endpoint = '/specifications/ram'
     58          this.setState({
     59            type: 'РАМ меморија'
     60          })
     61            break;
     62
     63          case 'rom':
     64            endpoint = '/specifications/rom'
     65          this.setState({
     66            type: 'РОМ меморија'
     67          })
     68            break;
     69
     70           case 'frontcamera':
     71            endpoint = '/specifications/frontcamera'
     72          this.setState({
     73            type: 'Предна камера'
     74          })
     75            break;
     76
     77           case 'backcamera':
     78            endpoint = '/specifications/backcamera'
     79          this.setState({
     80            type: 'Задна камера'
     81          })
     82            break;
     83
     84             case 'chipset':
     85            endpoint = '/specifications/chipset'
     86          this.setState({
     87            type: 'Чипсет'
     88          })
     89            break;
     90
     91           case 'cpu':
     92            endpoint = '/specifications/cpu'
     93          this.setState({
     94            type: 'Процесор'
     95          })
     96            break;
     97
     98
     99         case 'operatingsystem':
     100            endpoint = '/specifications/operatingsystem'
     101          this.setState({
     102            type: 'Оперативен систем'
     103          })
     104            break;
     105
     106
     107         case 'color':
     108            endpoint = '/specifications/color'
     109          this.setState({
     110            type: 'Боја'
     111          })
     112            break;
     113
     114            case 'battery':
     115              endpoint = '/specifications/battery'
     116            this.setState({
     117              type: 'Батерија'
     118            })
     119              break;
     120
     121          default:
     122            break;
    53123        }
    54124
    … …  
    63133            pickedItems: typeof value === 'string' ? value.split(',') : value
    64134        }, ()=>{
    65           if(this.props.type == 'brands')
    66           {
    67             this.props.changeHandler({brands: this.state.pickedItems.join(',')})
     135
     136          switch (this.props.type) {
     137            case 'brands':
     138              this.props.changeHandler({brands: this.state.pickedItems.join(',')})
     139              localStorage.setItem('brands', this.state.pickedItems.join(','))
     140              break;
     141
     142            case 'shops':
     143              this.props.changeHandler({shops: this.state.pickedItems.join(',')})
     144              localStorage.setItem('shops', this.state.pickedItems.join(','))
     145              break;
     146
     147            case 'ram':
     148              this.props.changeHandler({ram: this.state.pickedItems.join(',')})
     149              localStorage.setItem('ram', this.state.pickedItems.join(','))
     150              break;
     151            case 'rom':
     152              this.props.changeHandler({rom: this.state.pickedItems.join(',')})
     153              localStorage.setItem('rom', this.state.pickedItems.join(','))
     154              break;
     155            case 'frontcamera':
     156              this.props.changeHandler({frontcamera: this.state.pickedItems.join(',')})
     157              localStorage.setItem('frontcamera', this.state.pickedItems.join(','))
     158              break;
     159
     160            case 'backcamera':
     161              this.props.changeHandler({backcamera: this.state.pickedItems.join(',')})
     162              localStorage.setItem('backcamera', this.state.pickedItems.join(','))
     163              break;
     164
     165            case 'chipset':
     166              this.props.changeHandler({chipset: this.state.pickedItems.join(',')})
     167              localStorage.setItem('chipset', this.state.pickedItems.join(','))
     168              break;
     169
     170            case 'cpu':
     171              this.props.changeHandler({cpu: this.state.pickedItems.join(',')})
     172              localStorage.setItem('cpu', this.state.pickedItems.join(','))
     173              break;
     174
     175            case 'operatingsystem':
     176              this.props.changeHandler({operatingsystem: this.state.pickedItems.join(',')})
     177              localStorage.setItem('operatingsystem', this.state.pickedItems.join(','))
     178              break;
     179
     180            case 'color':
     181              this.props.changeHandler({color: this.state.pickedItems.join(',')})
     182              localStorage.setItem('color', this.state.pickedItems.join(','))
     183              break;
     184
     185            case 'battery':
     186              this.props.changeHandler({battery: this.state.pickedItems.join(',')})
     187              localStorage.setItem('battery', this.state.pickedItems.join(','))
     188              break;
     189
     190            default:
     191              break;
    68192          }
     193          // if(this.props.type == 'brands')
     194          // {
     195          //   this.props.changeHandler({brands: this.state.pickedItems.join(',')})
     196          // }
    69197         
    70           if(this.props.type == 'shops')
    71           {
    72             this.props.changeHandler({shops: this.state.pickedItems.join(',')})
    73           }
     198          // if(this.props.type == 'shops')
     199          // {
     200          //   this.props.changeHandler({shops: this.state.pickedItems.join(',')})
     201          // }
    74202         
    75203        })
     204
     205
    76206      };
    77 
     207    // sx={{ m: 1, width: 250 }} kaj formcontrol
    78208
    79209  render() {
    80210    return (
    81211        <div>
    82         <FormControl className="form-select-component" sx={{ m: 1, width: 200 }}>
     212        <FormControl className="form-select-component" sx={{ m: 1, width: this.props.width}}>
    83213          <InputLabel className="input-select-label">{this.state.type}</InputLabel>
    84214          <Select
    … …  
    94224  >
    95225            {this.state.items.map((item) => (
    96               <MenuItem key={item} value={item}>
     226              <MenuItem key={item} value={item} >
    97227                <Checkbox checked={this.state.pickedItems.indexOf(item) > -1} />
    98                 <ListItemText primary={item} />
     228                <ListItemText className='list-item-text-filters' primary={item} />
    99229              </MenuItem>
    100230            ))}

  • phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.js

    r5201690 rd66b8eb  
    6363 
    6464    this.state = {
    65        
     65
    6666    }
    6767  }

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

    r5201690 rd66b8eb  
    11.sortby-component-wrapper{
    22    display: flex;
    3     justify-content: end;
     3    justify-content: space-between;
    44    padding: 20px;
    55    background-color: #DEE4E1
    … …  
    1111    background-color: #e6f8ef;
    1212    margin-right: 15px;
     13    height: 50%;
     14    margin-left: auto;
    1315}
     16
     17
     18.popover-specification-container{
     19    height: 500px;
     20    overflow-y: scroll;
     21}

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

    r5201690 rd66b8eb  
    11import React, { Component } from 'react'
     2import { Link } from 'react-router-dom'
    23import './SortByComponent.css'
     4import SpecificationsFilterComponent from './SpecificationsFilterComponent'
    35
    46export class SortByComponent extends Component {
    … …  
    810   
    911      this.state = {
    10          sortBy: 'mostPopular'
     12         sortBy: localStorage.getItem('sortBy') ? localStorage.getItem('sortBy') : 'mostPopular'
    1113      }
    1214    }
    … …  
    1416    handleChange = (e) => {
    1517      this.props.changeHandler({sortBy: e.target.value})
     18      localStorage.setItem('sortBy',e.target.value)
    1619    }
    1720
    … …  
    1922    return (
    2023        <div className="sortby-component-wrapper">
    21         <select defaultValue={'mostPopular'} onChange={this.handleChange} className='sortby-component-select'>
     24        {localStorage.getItem('token') ? <SpecificationsFilterComponent changeHandler={this.props.changeHandler}/> : <></>}
     25        <select defaultValue={this.state.sortBy} onChange={this.handleChange} className='sortby-component-select'>
    2226          <option value="mostPopular">Најпопуларно</option>
    2327          <option value="ascending">Цена: Ниска {'>'} Висока</option>
Note: See TracChangeset for help on using the changeset viewer.