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

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

Component for editing offers added
  • Property mode set to 100644
File size: 10.5 KB
Line 
1import { CollectionsOutlined } from '@mui/icons-material'
2import axios from 'axios'
3import React, { Component } from 'react'
4import UserContext from '../../context/UserContext'
5import HeaderComponent from '../HeaderComponent/HeaderComponent'
6import './EditOfferComponent.css'
7
8export class EditOfferComponent extends Component {
9
10 constructor(props) {
11 super(props)
12 this.state = {
13 offerId: window.location.href.split('/')[5],
14 offer: {}
15 }
16 }
17
18 componentDidMount(){
19 // if(!localStorage.getItem('token'))
20 // {
21 // window.location.href = "/"
22 // }
23
24 // if(this.context.role != 'ADMIN' && this.context.role != 'SUPERADMIN')
25 // {
26 // window.location.href = "/"
27 // }
28
29 var config = {
30 method: 'get',
31 url: '/phoneoffer/'+this.state.offerId,
32 headers: { }
33 };
34
35 axios(config)
36 .then(response => {
37 this.setState({
38 offer: response.data
39 })
40 })
41 .catch(error => {
42 console.log(error);
43 });
44
45 }
46
47 setInputValue = (e) => {
48 let editedOffer = Object.assign(this.state.offer,{[e.target.name]: e.target.value})
49 this.setState({
50 offer: editedOffer
51 })
52 }
53
54 handleSubmit = () =>{
55 var dataToSend = JSON.stringify(this.state.offer)
56 var config = {
57 method: 'put',
58 url: '/admin/editoffer/'+this.state.offerId,
59 headers: {
60 'Authorization': 'Bearer '+localStorage.getItem('token'),
61 'Content-Type': 'application/json'
62 },
63 data: {
64 "id" : this.state.offer.id,
65 "offer_shop" : this.state.offer.offer_shop,
66 "offer_name" : this.state.offer.offer_name,
67 "price" : this.state.offer.price,
68 "ram_memory" : this.state.offer.ram_memory,
69 "rom_memory" : this.state.offer.rom_memory,
70 "color" : this.state.offer.color,
71 "front_camera" : this.state.offer.front_camera,
72 "back_camera" : this.state.offer.back_camera,
73 "chipset" : this.state.offer.chipset,
74 "battery" : this.state.offer.battery,
75 "operating_system" : this.state.offer.operating_system,
76 "cpu" : this.state.offer.cpu,
77 "image_url" : this.state.offer.image_url,
78 "offer_url" : this.state.offer.offer_url,
79 "last_updated" : this.state.offer.last_updated,
80 "is_validated" : this.state.offer.is_validated,
81 "offer_description" : this.state.offer.offer_description,
82 "offer_shop_code" : this.state.offer.offer_shop_code
83 }
84 };
85
86 axios(config)
87 .then(response => {
88 window.location.href="/phoneoffer/"+this.state.offerId
89 })
90 .catch(error => {
91 console.log(error);
92 });
93
94
95
96 }
97
98 render() {
99 console.log(this.state)
100 return (
101 <div className='edit-offer-component-main'>
102 <HeaderComponent/>
103 <div className='edit-offer-table-wrapper'>
104
105 <table className='edit-offer-table'>
106 <thead>
107 <tr><th colSpan={2}>Понуда</th></tr>
108 </thead>
109
110 <tbody>
111 <tr className='edit-offer-table-row'>
112 <td><b>Име на понуда</b></td>
113 <td><a href={this.state.offer == null || this.state.offer.offer_url == null ?
114 '#' : this.state.offer.offer_url}>{this.state.offer == null || this.state.offer.offer_name == null ?
115 '/' : this.state.offer.offer_name}</a>
116 </td>
117 </tr>
118
119 <tr className='edit-offer-table-row'>
120 <td><b>Продавница</b></td>
121 <td>{this.state.offer == null ||
122 this.state.offer.offer_shop == null ? '/' : this.state.offer.offer_shop}
123 </td>
124 </tr>
125
126
127 <tr className='edit-offer-table-row'>
128 <td><b>Опис за понудата</b></td>
129 <td>{this.state.offer == null ||
130 this.state.offer.offer_description == null ? '/' : this.state.offer.offer_description}
131 </td>
132 </tr>
133 </tbody>
134
135 <thead>
136 <tr><th colSpan={2}>Спецификации за понудата</th></tr>
137 </thead>
138
139 <tbody>
140
141 <tr className='edit-offer-table-row'>
142 <td><b>Цена</b></td>
143 <td><input value={this.state.offer == null ||
144 this.state.offer.price == null ? '/' : this.state.offer.price}
145 className='edit-offer-price-input' name='price'
146 onChange={(e) => this.setInputValue(e)}/><span className='edit-offer-price-span'>ден.</span></td>
147 </tr>
148
149 <tr className='edit-offer-table-row'>
150 <td><b>Предна камера</b></td>
151 <td><textarea className='edit-offer-table-textarea' name='front_camera' value={this.state.offer == null ||
152 this.state.offer.front_camera == null ? '/' : this.state.offer.front_camera}
153 onChange={(e) => this.setInputValue(e)}></textarea></td>
154 </tr>
155
156 <tr className='edit-offer-table-row'>
157 <td><b>Задна камера</b></td>
158 <td><textarea className='edit-offer-table-textarea' value={this.state.offer == null ||
159 this.state.offer.back_camera == null ? '/' : this.state.offer.back_camera}
160 onChange={(e) => this.setInputValue(e)} name='back_camera'></textarea></td>
161 </tr>
162 <tr className='edit-offer-table-row'>
163 <td><b>РОМ меморија</b></td>
164 <td><textarea className='edit-offer-table-textarea' onChange={(e) => this.setInputValue(e)}
165 name='rom_memory' value={this.state.offer == null ||
166 this.state.offer.rom_memory == null ? '/' : this.state.offer.rom_memory}></textarea></td>
167 </tr>
168
169 <tr className='edit-offer-table-row'>
170 <td><b>РАМ меморија</b></td>
171 <td><textarea className='edit-offer-table-textarea' onChange={(e) => this.setInputValue(e)}
172 name='ram_memory' value={this.state.offer == null ||
173 this.state.offer.ram_memory == null ? '/' : this.state.offer.ram_memory}></textarea></td>
174 </tr>
175
176 <tr className='edit-offer-table-row'>
177 <td><b>Оперативен систем</b></td>
178 <td><textarea className='edit-offer-table-textarea' value={this.state.offer == null ||
179 this.state.offer.operating_system == null ? '/' : this.state.offer.operating_system} name='operating_system'
180 onChange={(e) => this.setInputValue(e)}></textarea>
181 </td>
182 </tr>
183
184 <tr className='edit-offer-table-row'>
185 <td><b>Чипсет</b></td>
186 <td><textarea className='edit-offer-table-textarea' value={this.state.offer == null ||
187 this.state.offer.chipset == null ? '/' : this.state.offer.chipset} name='chipset'
188 onChange={(e) => this.setInputValue(e)}></textarea>
189 </td>
190 </tr>
191
192 <tr className='edit-offer-table-row'>
193 <td><b>Процесор</b></td>
194 <td><textarea className='edit-offer-table-textarea' value={this.state.offer == null ||
195 this.state.offer.cpu == null ? '/' : this.state.offer.cpu} name='cpu'
196 onChange={(e) => this.setInputValue(e)}></textarea>
197 </td>
198 </tr>
199
200 <tr className='edit-offer-table-row'>
201 <td><b>Батерија</b></td>
202 <td><textarea className='edit-offer-table-textarea' value={this.state.offer == null ||
203 this.state.offer.battery == null ? '/' : this.state.offer.battery} name='battery'
204 onChange={(e) => this.setInputValue(e)}></textarea></td>
205 </tr>
206
207 <tr className='edit-offer-table-row'>
208 <td><b>Боја</b></td>
209 <td><textarea className='edit-offer-table-textarea' name='color' value={this.state.offer == null ||
210 this.state.offer.color == null ? '/' : this.state.offer.color}
211 onChange={(e) => this.setInputValue(e)}></textarea></td>
212 </tr>
213
214 <tr className='edit-offer-table-row'>
215 <td><b>Линк од слика на мобилниот телефон од понудата</b></td>
216 <td>
217 <div className='edit-offer-offerimage-wrapper'>
218 <img className='edit-offer-offerimage' src={this.state.offer == null ||
219 this.state.offer.image_url == null ? '#' : this.state.offer.image_url}/>
220 </div>
221 <input value={this.state.offer == null ||
222 this.state.offer.image_url == null ? '/' : this.state.offer.image_url}
223 className='edit-offer-imageurl-input' name='image_url'
224 onChange={(e) => this.setInputValue(e)}/>
225 </td>
226 </tr>
227 </tbody>
228 </table>
229 </div>
230 <div className='edit-offer-button-wrapper'>
231 <button className='edit-offer-submit-button' onClick={this.handleSubmit}><b>Измени</b></button>
232 </div>
233 </div>
234
235 )
236 }
237}
238
239EditOfferComponent.contextType = UserContext
240
241export default EditOfferComponent
Note: See TracBrowser for help on using the repository browser.