Changeset fd5b100 for phonelux-frontend/src/components/PhoneOfferDetailsComponent

Timestamp:

10/01/22 22:56:40 (2 years ago)

Author:

Marko <Marko@…>

Branches:

master

Children:

ffd50db

Parents:

895cd87

Message:

Edited filter components

Location:

phonelux-frontend/src/components/PhoneOfferDetailsComponent

Files:

• PhoneOfferDetailsComponent.css (modified) (1 diff)
• PhoneOfferDetailsComponent.js (modified) (13 diffs)

phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.css

@@ -131 +131 @@
 }
 
+.offerdetails-show-all-specs-icon:hover{
+    cursor: pointer;
+}
 
+.offerdetails-show-all-specs-icon{
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+
+

phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js

@@ -7 +7 @@
 import { Link } from 'react-router-dom'
 import Tippy from '@tippyjs/react'
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 
 
@@ -16 +18 @@
       this.state = {
         offerId: window.location.href.split('/')[4],
-        offer: null
+        offer: null,
+        showAllSpecs: false
       }
     }
@@ -51 +54 @@
     }
 
+
+    changeShownSpecs = () => {
+      this.setState({
+          showAllSpecs: !this.state.showAllSpecs
+      })
+  }
+
   render() {
     console.log(this.state)
@@ -59 +69 @@
           <h3 className='phone-offer-details-last-updated-header'>Последно ажурирана: {this.state.offer == null || 
           this.state.offer.last_updated == null ? '#' : this.state.offer.last_updated.split('T')[0]}</h3>
+          {
+            localStorage.getItem('token') ? 
+            this.state.showAllSpecs ? 
+              <Tippy placement='bottom' content='Прикажи ги избраните спецификации'>
+                 <VisibilityOffIcon className='offerdetails-show-all-specs-icon' onClick={this.changeShownSpecs} style={{fontSize: '45px'}}/>
+              </Tippy> :
+              <Tippy placement='bottom' content='Прикажи ги сите спецификации'>
+                <VisibilityIcon className='offerdetails-show-all-specs-icon' onClick={this.changeShownSpecs} style={{fontSize: '45px'}}/>
+              </Tippy> : <></>
+          }
+
           {
             localStorage.getItem('token') && (this.context.role == 'ADMIN' || this.context.role == 'SUPERADMIN') ?
@@ -106 +127 @@
               this.state.offer.price == null ? '/' : this.state.offer.price+' ден.'}</td>
             </tr>
-            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Предна камера") ?
+            { this.state.showAllSpecs || 
+            !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Предна камера") ?
             <tr className='phone-offer-details-table-row'>
               <td>Предна камера</td><td>{this.state.offer == null || 
@@ -113 +135 @@
             }
 
-             { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Задна камера") ?
+             { this.state.showAllSpecs || 
+             !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Задна камера") ?
             <tr className='phone-offer-details-table-row'>
               <td>Задна камера</td><td>{this.state.offer == null || 
@@ -120 +143 @@
             }
 
-            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РОМ меморија") ?
+            { this.state.showAllSpecs ||
+            !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РОМ меморија") ?
             <tr className='phone-offer-details-table-row'>
               <td>РОМ меморија</td><td>{this.state.offer == null || 
@@ -127 +151 @@
             }
 
-            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РАМ меморија") ?
+            { this.state.showAllSpecs ||
+            !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РАМ меморија") ?
             <tr className='phone-offer-details-table-row'>
               <td>РАМ меморија</td><td>{this.state.offer == null || 
@@ -134 +159 @@
             }
 
-            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Оперативен систем") ?
+            { this.state.showAllSpecs ||
+            !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Оперативен систем") ?
             <tr className='phone-offer-details-table-row'>
               <td>Оперативен систем</td><td>{this.state.offer == null || 
@@ -141 +167 @@
              }
 
-            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Чипсет") ?
+            { this.state.showAllSpecs ||
+            !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Чипсет") ?
             <tr className='phone-offer-details-table-row'>
               <td>Чипсет</td><td>{this.state.offer == null || 
@@ -148 +175 @@
             }
 
-            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Процесор") ?
+            { this.state.showAllSpecs ||
+            !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Процесор") ?
             <tr className='phone-offer-details-table-row'>
               <td>Процесор</td><td>{this.state.offer == null || 
@@ -155 +183 @@
             }
 
-            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Батерија") ?
+            { this.state.showAllSpecs ||
+            !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Батерија") ?
             <tr className='phone-offer-details-table-row'>
               <td>Батерија</td><td>{this.state.offer == null || 
@@ -162 +191 @@
             }
 
-            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Боја") ?
+            { this.state.showAllSpecs ||
+            !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Боја") ?
             <tr className='phone-offer-details-table-row'>
               <td>Боја</td><td>{this.state.offer == null ||