· 6 years ago · Oct 05, 2019, 02:52 PM
1import React, { Component } from 'react'
2import api from '../../../api'
3import { snackbar } from '../../../utils/mdc'
4
5export default class FormPlace extends Component {
6 constructor (props) {
7 super(props)
8 this.state = {
9 place: {
10 id: 0,
11 attributes: {
12 preparation_time: 0,
13 service_time: 0,
14 time_error_margin: 0
15 }
16 }
17 }
18 this.handleChange = this.handleChange.bind(this)
19 }
20
21 componentDidUpdate (prevProps) {
22 if (prevProps.place !== this.props.place) {
23 this.updateState()
24 }
25 }
26
27 updateState = () => {
28 const { place } = this.props
29 this.setState({ place: place })
30 }
31
32 handleChange (event) {
33 const maxVal = parseInt(event.target.max)
34 const currentValLenght = event.target.value.length
35 if (currentValLenght > maxVal) {
36 event.target.value = event.target.value.slice(0, event.target.max)
37 }
38 const { name, value } = event.target
39 const { place } = this.state
40 place.attributes[name] = value
41 this.setState({ [place[name]]: value })
42 }
43
44 handleSubmit (event) {
45 event.preventDefault()
46 }
47
48 launchSnack (message) {
49 snackbar({
50 message: message,
51 timeout: 4000,
52 actionText: 'Aceptar',
53 multiline: true,
54 dismissesOnAction: true
55 })
56 }
57
58 firstToUpper (string) {
59 return string.charAt(0).toUpperCase() + string.slice(1)
60 }
61
62 parseErrors (errors) {
63 let messages = []
64 for (let key in errors) {
65 let errorMsg = (this.firstToUpper(key) + ' ' + errors[key].join())
66 messages.push(errorMsg)
67 }
68 this.launchSnack(messages.join(', '))
69 }
70
71 updatePlaceData (placeID) {
72 const data = {
73 place_config: { ...this.state.place.attributes }
74 }
75 api.updateAccountPlace(placeID, data)
76 .then(data => {
77 this.setState({ place: data.data.data })
78 this.launchSnack(data.data.meta.message)
79 this.props.onToggleModal()
80 this.props.onUpdate()
81 }).catch((err) => {
82 this.parseErrors(err.response.data.msg)
83 })
84 }
85
86 render () {
87 const { place } = this.state
88 const marginInput = {
89 marginLeft: '10px',
90 width: '30px',
91 borderRadius: '3px',
92 marginRight: '5px',
93 fontSize: 'medium'
94 }
95 return (
96 <div className='card' style={{ textAlign: 'center' }}>
97 <h4 className='bee-card__title'>Centro de Despacho</h4>
98 <br />
99 <label className='table__caption'>
100 Tiempo de Preparación
101 <input type='number'
102 min='1'
103 max='99'
104 name='preparation_time'
105 style={marginInput}
106 value={place.attributes.preparation_time || ''}
107 onChange={e => this.handleChange(e)} /> <label className='table__title'>Minutos</label>
108 </label>
109 <br />
110 <br />
111 <label className='table__caption'>
112 Tiempo de Margen de Error
113 <input type='number'
114 min='1'
115 max='99'
116 name='time_error_margin'
117 style={marginInput}
118 value={place.attributes.time_error_margin || ''}
119 onChange={e => this.handleChange(e)} /> <label className='table__title'>Minutos</label>
120 </label>
121 <br />
122 <br />
123 <label className='table__caption'>
124 Tiempo de Servicio
125 <input type='number'
126 min='1'
127 max='99'
128 name='service_time'
129 style={marginInput}
130 value={place.attributes.service_time || ''}
131 onChange={e => this.handleChange(e)} /> <label className='table__title'>Minutos</label>
132 </label>
133 <br />
134 <br />
135 <br />
136 <button className='bee-button bee-button__primary--filled open-modal-btn' onClick={() => this.updatePlaceData(place.id)} >
137 Actualizar Configuración
138 </button>
139 <br />
140 </div>
141 )
142 }
143}