| 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
|
|---|
