task: AddCatalogPriceForm: show a currency

Fix #1388

Author: bahoss

src/main/frontend/src/components/AddCatalogPriceForm.js

@@ -85,121 +85,95 @@ class AddCatalogPriceForm extends React.Component {
 	}
 	render() {
 		const hasValidationErrors = this.state.validationErrors.length > 0;
+		let currency;
+		let title;
+		
+		switch (this.state.catalog) {
+			case 'michel':
+			case 'yvert':
+				currency = '\u20AC';
+				title='EUR';
+				break;
+			case 'scott':
+				currency = '$';
+				title='USD';
+				break;
+			case 'gibbons':
+				currency = '\u00A3';
+				title='GBP';
+				break;
+			case 'solovyov':
+			case 'zagorski':
+				currency = '\u20BD';
+				title='RUB';
+				break;
+		}
+
 		return (
-			<div className="col-sm-12 form-group">
+			<div className='col-sm-12 form-group'>
 				<form className={`form-horizontal ${hasValidationErrors ? 'has-error' : ''}`} onSubmit={this.handleSubmit}>
 					<div
-						id="add-catalog-price-failed-msg"
+						id='add-catalog-price-failed-msg'
 						className={`alert alert-danger text-center col-sm-8 col-sm-offset-2 ${this.state.hasServerError ? '' : 'hidden'}`}>
 						{ this.props.l10n['t_server_error'] || 'Server error' }
 					</div>
-					<div className="form-group form-group-sm">
-						<label className="control-label col-sm-3">
+					<div className='form-group form-group-sm'>
+						<label className='control-label col-sm-3'>
 							{ this.props.l10n['t_catalog'] || 'Catalog' }
 						</label>
-						<div className="col-sm-6">
+						<div className='col-sm-6'>
 							<select
-								id="catalog-name"
-								name="catalogName"
-								className="form-control"
+								id='catalog-name'
+								name='catalogName'
+								className='form-control'
 								onChange={this.handleChangeCatalog}>
-								<option value="michel">
+								<option value='michel'>
 									{ this.props.l10n['t_michel'] || 'Michel' }
 								</option>
-								<option value="scott">
+								<option value='scott'>
 									{ this.props.l10n['t_scott'] || 'Scott' }
 								</option>
-								<option value="yvert">
+								<option value='yvert'>
 									{ this.props.l10n['t_yvert'] || 'Yvert et Tellier' }
 								</option>
-								<option value="gibbons">
+								<option value='gibbons'>
 									{ this.props.l10n['t_sg'] || 'Stanley Gibbons' }
 								</option>
-								<option value="solovyov">
+								<option value='solovyov'>
 									{ this.props.l10n['t_solovyov'] || 'Solovyov' }
 								</option>
-								<option value="zagorski">
+								<option value='zagorski'>
 									{ this.props.l10n['t_zagorski'] || 'Zagorski' }
 								</option>
 							</select>
 						</div>
 					</div>
-					<div className="form-group form-group-sm">
-						<label className="control-label col-sm-3">
+					<div className='form-group form-group-sm'>
+						<label className='control-label col-sm-3'>
 							{ this.props.l10n['t_price'] || 'Price' }
 						</label>
-						<div className="col-sm-6">
-							{this.state.catalog==="michel" && <div className="col-xs-6 input-group">
-								<span className="input-group-addon">&euro;</span> 
-								<input 
-									type="text" 
-									className="form-control js-with-tooltip" 
-									size="5" 
-									title="EUR" 
-									required="required"
-									onChange={ this.handleChangePrice }/> 
-							</div>}
-							{this.state.catalog==="scott" && <div className="col-xs-6 input-group">
-								<span className="input-group-addon">$</span>
-								<input 
-									type="text" 
-									className="form-control js-with-tooltip" 
-									size="5" 
-									title="USD" 
-									required="required"
-									onChange={ this.handleChangePrice }/> 
-							</div>}
-							{this.state.catalog==="yvert" && <div className="col-xs-6 input-group ">
-								<span className="input-group-addon">&euro;</span> 
-								<input 
-									type="text" 
-									className="form-control js-with-tooltip" 
-									size="5" 
-									title="EUR" 
-									required="required"
-									onChange={ this.handleChangePrice }/> 
-							</div>}	
-							{this.state.catalog==="gibbons" && <div className="col-xs-6 input-group">
-								<span className="input-group-addon">&pound;</span>  
-								<input 
-									type="text" 
-									className="form-control js-with-tooltip" 
-									size="5" 
-									title="GBP" 
-									required="required"
-									onChange={ this.handleChangePrice }/> 
-							</div>}
-							{this.state.catalog==="solovyov" && <div className="col-xs-6 input-group">
-								<span className="input-group-addon">&#x20bd;</span>  
-								<input 
-									type="text" 
-									className="form-control js-with-tooltip" 
-									size="5" 
-									title="RUB"
-									required="required"
-									onChange={ this.handleChangePrice }/> 
-							</div>}
-							{this.state.catalog==="zagorski" && <div className="col-xs-6 input-group">
-								<span className="input-group-addon">&#x20bd;</span> 
+						<div className='col-sm-6'>
+							<div className='col-xs-6 input-group'>
+								<span className='input-group-addon'>{ currency }</span> 
 								<input 
-									type="text" 
-									className="form-control" 
-									size="5" 
-									title="RUB" 
-									required="required"
+									type='text' 
+									className='form-control js-with-tooltip' 
+									size='5' 
+									title={ title } 
+									required='required'
 									onChange={ this.handleChangePrice }/> 
-							</div>}
+							</div>
 						</div>
 					</div>
-					<div className="col-sm-offset-3 col-sm-4">
+					<div className='col-sm-offset-3 col-sm-4'>
 						<span
-							id="catalog-price.errors"
+							id='catalog-price.errors'
 							className={`help-block ${hasValidationErrors ? '' : 'hidden'}`}>
 							{ this.state.validationErrors.join(', ') }
 						</span>
 						<button
-							type="submit"
-							className="btn btn-primary btn-sm"
+							type='submit'
+							className='btn btn-primary btn-sm'
 							disabled={ this.state.isDisabled }>
 							{ this.props.l10n['t_add'] || 'Add' }
 						</button>