Ignore:
Timestamp:
09/21/22 18:47:39 (2 years ago)
Author:
Marko <Marko@…>
Branches:
master
Children:
34950c6
Parents:
5201690
Message:

Component for editing offers added

Location:
phonelux-frontend/src/components/EditOfferComponent
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • phonelux-frontend/src/components/EditOfferComponent/EditOfferComponent.css

    r5201690 rd66b8eb  
    6767    background-color: rgb(230, 232, 230);
    6868    font-size: 22px;
     69    text-align: center;
     70   
    6971}
     72
     73.edit-offer-submit-button{
     74    font-size: 20px;
     75    padding: 10px;
     76    background-color: #B6E2C8;
     77    border-radius: 20px;
     78    border: 1px solid black;
     79    width: 20%;
     80    margin-bottom: 50px;
     81    margin-right: 130px;
     82}
     83
     84
     85.edit-offer-submit-button:hover{
     86    cursor: pointer;
     87    background-color: rgb(166, 201, 171);
     88    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
     89    transition: box-shadow 0.5s, background-color 0.5s ;
     90}
     91
     92.edit-offer-button-wrapper{
     93    margin-top: -25px;
     94    display: flex;
     95    justify-content: end;
     96}
     97
     98.edit-offer-offerimage{
     99    width: 40%;
     100    height: 40%;
     101    display: block;
     102}
     103
     104.edit-offer-imageurl-input{
     105    width: 80%;
     106    font-size: 22px;
     107    background-color: rgb(238, 240, 238);
     108    border: 1px solid black;
     109    text-align: center;
     110    padding: 5px;
     111}
     112
     113.edit-offer-offerimage-wrapper{
     114    display: flex;
     115    width: 100%;
     116    justify-content: center;
     117}

  • phonelux-frontend/src/components/EditOfferComponent/EditOfferComponent.js

    r5201690 rd66b8eb  
     1import { CollectionsOutlined } from '@mui/icons-material'
    12import axios from 'axios'
    23import React, { Component } from 'react'
     4import UserContext from '../../context/UserContext'
    35import HeaderComponent from '../HeaderComponent/HeaderComponent'
    46import './EditOfferComponent.css'
    … …  
    1517
    1618    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
    1729        var config = {
    1830            method: 'get',
    … …  
    3244         
    3345    }
     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    }
    3497   
    3598  render() {
     99    console.log(this.state)
    36100    return (
    37101      <div className='edit-offer-component-main'>
    38102        <HeaderComponent/>
    39103        <div className='edit-offer-table-wrapper'>
     104
    40105            <table className='edit-offer-table'>
    41106                <thead>
    42                     <tr><th colSpan={2}>Измени детали за понудата</th></tr>
     107                    <tr><th colSpan={2}>Понуда</th></tr>
    43108                </thead>
     109
    44110                <tbody>
    45111                    <tr className='edit-offer-table-row'>
    46                         <td>Име на понуда</td>
     112                        <td><b>Име на понуда</b></td>
    47113                        <td><a href={this.state.offer == null || this.state.offer.offer_url == null ?
    48               '#' : this.state.offer.offer_url}>{this.state.offer == null || this.state.offer.offer_name == null ?
    49               '/' : this.state.offer.offer_name}</a></td>
    50                     </tr>
    51                     <tr className='edit-offer-table-row'>
    52                         <td>Продавница</td>
     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>
    53121                        <td>{this.state.offer == null ||
    54               this.state.offer.offer_shop == null ? '/' : this.state.offer.offer_shop}</td>
    55                     </tr>
    56                     <tr className='edit-offer-table-row'>
    57                         <td>Цена</td>
     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>
    58143                        <td><input value={this.state.offer == null ||
    59               this.state.offer.price == null ? '/' : this.state.offer.price} className='edit-offer-price-input'/><span className='edit-offer-price-span'>ден.</span></td>
    60                     </tr>
    61                     <tr className='edit-offer-table-row'>
    62                         <td>Предна камера</td>
    63                         <td><textarea className='edit-offer-table-textarea'></textarea></td>
    64                     </tr>
    65                     <tr className='edit-offer-table-row'>
    66                         <td>Задна камера</td>
    67                         <td><textarea className='edit-offer-table-textarea'></textarea></td>
    68                     </tr>
    69                     <tr className='edit-offer-table-row'>
    70                         <td>РОМ меморија</td>
    71                         <td><textarea className='edit-offer-table-textarea'></textarea></td>
    72                     </tr>
    73                     <tr className='edit-offer-table-row'>
    74                         <td>РАМ меморија</td>
    75                         <td><textarea className='edit-offer-table-textarea'></textarea></td>
    76                     </tr>
    77                     <tr className='edit-offer-table-row'>
    78                         <td>Оперативен систем</td>
    79                         <td><textarea className='edit-offer-table-textarea'></textarea></td>
    80                     </tr>
    81                     <tr className='edit-offer-table-row'>
    82                         <td>Чипсет</td>
    83                         <td><textarea className='edit-offer-table-textarea'></textarea></td>
    84                     </tr>
    85                     <tr className='edit-offer-table-row'>
    86                         <td>Процесор</td>
    87                         <td><textarea className='edit-offer-table-textarea'></textarea></td>
    88                     </tr>
    89                     <tr className='edit-offer-table-row'>
    90                         <td>Батерија</td>
    91                         <td><textarea className='edit-offer-table-textarea'></textarea></td>
    92                     </tr>
    93                     <tr className='edit-offer-table-row'>
    94                         <td>Боја</td>
    95                         <td><textarea className='edit-offer-table-textarea'></textarea></td>
    96                     </tr>
    97                     <tr className='edit-offer-table-row'>
    98                         <td>Опис</td>
    99                         <td><textarea className='edit-offer-table-textarea'></textarea></td>
     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>
    100226                    </tr>
    101227                </tbody>
    102228            </table>
    103 
    104229        </div>
    105 
    106 
     230        <div className='edit-offer-button-wrapper'>
     231        <button className='edit-offer-submit-button' onClick={this.handleSubmit}><b>Измени</b></button>
     232        </div>
    107233      </div>
    108234     
    … …  
    111237}
    112238
     239EditOfferComponent.contextType = UserContext
     240
    113241export default EditOfferComponent
Note: See TracChangeset for help on using the changeset viewer.