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