src/components/Section/Financial/Card/CardItem.jsx
import React from 'react'
import { i18n } from '../../../../config'
import {
ValidationElement,
DateControl,
Checkbox,
Currency,
Field,
Text,
Textarea,
Location,
} from '../../../Form'
export default class CardItem extends ValidationElement {
constructor(props) {
super(props)
this.update = this.update.bind(this)
this.updateAgency = this.updateAgency.bind(this)
this.updateAddress = this.updateAddress.bind(this)
this.updateDate = this.updateDate.bind(this)
this.updateReason = this.updateReason.bind(this)
this.updateAmount = this.updateAmount.bind(this)
this.updateAmountEstimated = this.updateAmountEstimated.bind(this)
this.updateDescription = this.updateDescription.bind(this)
}
update(queue) {
this.props.onUpdate({
Agency: this.props.Agency,
Address: this.props.Address,
Date: this.props.Date,
Reason: this.props.Reason,
Amount: this.props.Amount,
AmountEstimated: this.props.AmountEstimated,
Description: this.props.Description,
...queue,
})
}
updateAgency(values) {
this.update({
Agency: values,
})
}
updateAddress(values) {
this.update({
Address: values,
})
}
updateDate(values) {
this.update({
Date: values,
})
}
updateReason(values) {
this.update({
Reason: values,
})
}
updateAmount(values) {
this.update({
Amount: values,
})
}
updateAmountEstimated(values) {
this.update({
AmountEstimated: values,
})
}
updateDescription(values) {
this.update({
Description: values,
})
}
render() {
const { requireFinancialCardDisciplinaryDate } = this.props
return (
<div className="card-item">
<Field
title={i18n.t('financial.card.heading.agency')}
scrollIntoView={this.props.scrollIntoView}
>
<Text
name="Agency"
{...this.props.Agency}
className="card-agency"
required={this.props.required}
onUpdate={this.updateAgency}
onError={this.props.onError}
/>
</Field>
<Field
title={i18n.t('financial.card.heading.address')}
optional
help="financial.card.help.address"
scrollIntoView={this.props.scrollIntoView}
adjustFor="address"
>
<Location
name="Address"
{...this.props.Address}
className="card-address"
layout={Location.ADDRESS}
geocode
dispatch={this.props.dispatch}
addressBooks={this.props.addressBooks}
addressBook="Agency"
required={this.props.required}
onUpdate={this.updateAddress}
onError={this.props.onError}
/>
</Field>
{requireFinancialCardDisciplinaryDate && (
<Field
title={i18n.t('financial.card.heading.date')}
adjustFor="labels"
scrollIntoView={this.props.scrollIntoView}
shrink
>
<DateControl
name="Date"
{...this.props.Date}
className="card-date"
hideDay
minDateEqualTo
required={this.props.required}
onUpdate={this.updateDate}
onError={this.props.onError}
/>
</Field>
)}
<Field
title={i18n.t('financial.card.heading.reason')}
scrollIntoView={this.props.scrollIntoView}
>
<Textarea
name="Reason"
{...this.props.Reason}
className="card-reason"
required={this.props.required}
onUpdate={this.updateReason}
onError={this.props.onError}
/>
</Field>
<Field
title={i18n.t('financial.card.heading.amount')}
scrollIntoView={this.props.scrollIntoView}
>
<div>
<Currency
name="Amount"
{...this.props.Amount}
className="card-amount"
min="1"
required={this.props.required}
onUpdate={this.updateAmount}
onError={this.props.onError}
/>
<div className="flags">
<Checkbox
name="AmountEstimated"
className="card-estimated"
{...this.props.AmountEstimated}
ref="estimated"
label={i18n.t('financial.card.label.estimated')}
toggle="false"
onUpdate={this.updateAmountEstimated}
onError={this.props.onError}
/>
</div>
</div>
</Field>
<Field
title={i18n.t('financial.card.heading.description')}
scrollIntoView={this.props.scrollIntoView}
help="financial.card.help.description"
>
<Textarea
name="Description"
{...this.props.Description}
className="card-description"
required={this.props.required}
onUpdate={this.updateDescription}
onError={this.props.onError}
/>
</Field>
</div>
)
}
}
CardItem.defaultProps = {
onUpdate: () => {},
onError: (value, arr) => arr,
required: false,
requireFinancialCardDisciplinaryDate: true,
}