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

Timestamp:

09/21/22 18:47:39 (22 months ago)

Author:

Marko <Marko@…>

Branches:

master

Children:

34950c6

Parents:

5201690

Message:

Component for editing offers added

Location:

phonelux-frontend/src/components/PhoneOfferDetailsComponent

Files:

• PhoneOfferDetailsComponent.css (modified) (3 diffs)
• PhoneOfferDetailsComponent.js (modified) (4 diffs)

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

@@ -56 +56 @@
 .phone-offer-details-last-updated-header{
     width: 25%;
-    margin-left: 20px;
+    margin-left: 5%;
     padding: 10px;
     border: 1px solid rgb(199, 193, 193);
-    background-color: #B6E2C8;
+    background-color: #dadedc;
     border-radius: 50px;
     text-align: center;
@@ -73 +73 @@
 .phone-offer-details-edit-header{
     width: 100%;
-    margin-left: 20px;
+    margin-left: 5%;
     padding-top: 10px;
     border: 1px solid black;
@@ -96 +96 @@
 }
 
+.validate-offer-button{
+    font-size: 17px;
+    padding: 10px;
+    background-color:  rgb(170, 211, 240);
+    border-radius: 30px;
+    border: 1px solid black;
+    margin-left: auto;
+    margin-right: 10%;
+    width: 15%;
+    font-weight: bold;
+    font-size: 18px;
+    text-align: center;
+}
 
+.validate-offer-button:hover{
+    cursor: pointer;
+    background-color: rgb(149, 187, 215);
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+    transition: box-shadow 0.5s, background-color 0.5s ;
+}
+
+.offer-valid-header{
+    font-size: 17px;
+    padding: 10px;
+    background-color: #96d5b0;
+    border-radius: 20px;
+    border: 1px solid black;
+    margin-left: auto;
+    margin-right: 10%;
+    text-align: center;
+    width: 15%;
+    font-weight: bold;
+    font-size: 19px;
+}
+
+

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

@@ -4 +4 @@
 import HeaderComponent from '../HeaderComponent/HeaderComponent'
 import UserContext from '../../context/UserContext'
+import CheckIcon from '@mui/icons-material/Check';
 import { Link } from 'react-router-dom'
+import Tippy from '@tippyjs/react'
 
 
@@ -19 +21 @@
 
     componentDidMount(){
-        axios.get('/phoneoffer/'+this.state.offerId)
+        this.getPhoneOffer()
+    }
+
+    getPhoneOffer = () => {
+      axios.get('/phoneoffer/'+this.state.offerId)
         .then(response => {
             this.setState({
@@ -27 +33 @@
     }
 
+    validateOffer = () => {
+      var config = {
+        method: 'put',
+        url: '/admin/validateoffer/'+this.state.offerId,
+        headers: { 
+          'Authorization': 'Bearer '+localStorage.getItem('token')
+        }
+      };
+      
+      axios(config)
+      .then(response => {
+        this.getPhoneOffer();
+      })
+      .catch(error => {
+        console.log(error);
+      });
+    }
+
   render() {
+    console.log(this.state)
     return (
       <div className='phone-offer-details-main'>
@@ -40 +65 @@
               </Link> : <></>
           }
+       
+
+          {(() => {
+            if(this.state.offer != null && this.state.offer.is_validated)
+            {
+              return <Tippy placement='bottom'  content='Понудата е валидна'>
+                      <CheckIcon className='offer-valid-check-icon' style={{'fontSize': '60px'}}></CheckIcon>
+                     </Tippy>
+            }
+
+            if(this.state.offer != null && !this.state.offer.is_validated && 
+              (this.context.role == 'ADMIN' || this.context.role == 'SUPERADMIN'))
+            {
+              return <button onClick={this.validateOffer} className='validate-offer-button'>Валидирај понуда</button>
+            }
+
+          })()}
         </div>
+        <div className='phone-offer-details-last-updated-wrapper'></div>
         <div className='phone-offer-details-table-wrapper'>
         <div className='phone-offer-details-table-section'>