source: phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js@ d66b8eb

Last change on this file since d66b8eb was d66b8eb, checked in by Marko <Marko@…>, 2 years ago

Component for editing offers added

  • Property mode set to 100644
File size: 6.5 KB
Line 
1import React, { Component } from 'react'
2import axios from 'axios'
3import './PhoneOfferDetailsComponent.css'
4import HeaderComponent from '../HeaderComponent/HeaderComponent'
5import UserContext from '../../context/UserContext'
6import CheckIcon from '@mui/icons-material/Check';
7import { Link } from 'react-router-dom'
8import Tippy from '@tippyjs/react'
9
10
11export class PhoneOfferDetailsComponent extends Component {
12
13 constructor(props) {
14 super(props)
15
16 this.state = {
17 offerId: window.location.href.split('/')[4],
18 offer: null
19 }
20 }
21
22 componentDidMount(){
23 this.getPhoneOffer()
24 }
25
26 getPhoneOffer = () => {
27 axios.get('/phoneoffer/'+this.state.offerId)
28 .then(response => {
29 this.setState({
30 offer: response.data
31 })
32 }).catch(error => console.log(error))
33 }
34
35 validateOffer = () => {
36 var config = {
37 method: 'put',
38 url: '/admin/validateoffer/'+this.state.offerId,
39 headers: {
40 'Authorization': 'Bearer '+localStorage.getItem('token')
41 }
42 };
43
44 axios(config)
45 .then(response => {
46 this.getPhoneOffer();
47 })
48 .catch(error => {
49 console.log(error);
50 });
51 }
52
53 render() {
54 console.log(this.state)
55 return (
56 <div className='phone-offer-details-main'>
57 <HeaderComponent/>
58 <div className='phone-offer-details-last-updated-wrapper'>
59 <h3 className='phone-offer-details-last-updated-header'>Последно ажурирана: {this.state.offer == null ||
60 this.state.offer.last_updated == null ? '#' : this.state.offer.last_updated.split('T')[0]}</h3>
61 {
62 localStorage.getItem('token') && (this.context.role == 'ADMIN' || this.context.role == 'SUPERADMIN') ?
63 <Link className='link-offer-edit' style={{color:'black'}} to={'/admin/editoffer/'+this.state.offerId}>
64 <h3 className='phone-offer-details-edit-header'>Измени понуда</h3>
65 </Link> : <></>
66 }
67
68
69 {(() => {
70 if(this.state.offer != null && this.state.offer.is_validated)
71 {
72 return <Tippy placement='bottom' content='Понудата е валидна'>
73 <CheckIcon className='offer-valid-check-icon' style={{'fontSize': '60px'}}></CheckIcon>
74 </Tippy>
75 }
76
77 if(this.state.offer != null && !this.state.offer.is_validated &&
78 (this.context.role == 'ADMIN' || this.context.role == 'SUPERADMIN'))
79 {
80 return <button onClick={this.validateOffer} className='validate-offer-button'>Валидирај понуда</button>
81 }
82
83 })()}
84 </div>
85 <div className='phone-offer-details-last-updated-wrapper'></div>
86 <div className='phone-offer-details-table-wrapper'>
87 <div className='phone-offer-details-table-section'>
88 <table className='phone-offer-details-table'>
89 <thead>
90 <tr><th colSpan={2}>Детали за понудата</th></tr>
91 </thead>
92 <tbody>
93 <tr className='phone-offer-details-table-row'>
94 <td>Понуда</td><td><a href={this.state.offer == null || this.state.offer.offer_url == null ?
95 '#' : this.state.offer.offer_url}>{this.state.offer == null || this.state.offer.offer_name == null ?
96 '/' : this.state.offer.offer_name}</a></td>
97 </tr>
98
99 <tr className='phone-offer-details-table-row'>
100 <td>Продавница</td><td>{this.state.offer == null ||
101 this.state.offer.offer_shop == null ? '/' : this.state.offer.offer_shop}</td>
102 </tr>
103
104 <tr className='phone-offer-details-table-row'>
105 <td>Цена</td><td>{this.state.offer == null ||
106 this.state.offer.price == null ? '/' : this.state.offer.price+' ден.'}</td>
107 </tr>
108 <tr className='phone-offer-details-table-row'>
109 <td>Предна камера</td><td>{this.state.offer == null ||
110 this.state.offer.front_camera == null ? '/' : this.state.offer.front_camera}</td>
111 </tr>
112
113 <tr className='phone-offer-details-table-row'>
114 <td>Задна камера</td><td>{this.state.offer == null ||
115 this.state.offer.back_camera == null ? '/' : this.state.offer.back_camera}</td>
116 </tr>
117
118 <tr className='phone-offer-details-table-row'>
119 <td>РОМ меморија</td><td>{this.state.offer == null ||
120 this.state.offer.rom_memory == null ? '/' : this.state.offer.rom_memory}</td>
121 </tr>
122
123 <tr className='phone-offer-details-table-row'>
124 <td>РАМ меморија</td><td>{this.state.offer == null ||
125 this.state.offer.ram_memory == null ? '/' : this.state.offer.ram_memory}</td>
126 </tr>
127
128 <tr className='phone-offer-details-table-row'>
129 <td>Оперативен систем</td><td>{this.state.offer == null ||
130 this.state.offer.operating_system == null ? '/' : this.state.offer.operating_system}</td>
131 </tr>
132
133 <tr className='phone-offer-details-table-row'>
134 <td>Чипсет</td><td>{this.state.offer == null ||
135 this.state.offer.chipset == null ? '/' : this.state.offer.chipset}</td>
136 </tr>
137
138 <tr className='phone-offer-details-table-row'>
139 <td>Процесор</td><td>{this.state.offer == null ||
140 this.state.offer.cpu == null ? '/' : this.state.offer.cpu}</td>
141 </tr>
142
143 <tr className='phone-offer-details-table-row'>
144 <td>Батерија</td><td>{this.state.offer == null ||
145 this.state.offer.battery == null ? '/' : this.state.offer.battery}</td>
146 </tr>
147
148 <tr className='phone-offer-details-table-row'>
149 <td>Боја</td><td>{this.state.offer == null ||
150 this.state.offer.color == null ? '/' : this.state.offer.color}</td>
151 </tr>
152
153 <tr className='phone-offer-details-table-row'>
154 <td>Опис</td><td>{this.state.offer == null ||
155 this.state.offer.offer_description == null ? '/' : this.state.offer.offer_description}</td>
156 </tr>
157
158 </tbody>
159 </table>
160 </div>
161 </div>
162
163 </div>
164 )
165 }
166}
167
168PhoneOfferDetailsComponent.contextType = UserContext
169
170export default PhoneOfferDetailsComponent
Note: See TracBrowser for help on using the repository browser.