Parse numbers in NumericDataEntry

app/src/frontend/building/data-components/numeric-data-entry.tsx

@@ -3,7 +3,24 @@ import PropTypes from 'prop-types';
 
 import { DataTitleCopyable } from './data-title';
 
-const NumericDataEntry: React.FunctionComponent<any> = (props) => { // TODO: remove any
+
+interface NumericDataEntryProps {
+    slug: string;
+    title: string;
+    tooltip?: string;
+    disabled?: boolean;
+    copy: any; // CopyProps clashes with propTypes
+    mode: 'view' | 'edit' | 'multi-edit';
+    onChange: (key: string, value: any) => void;
+
+    value?: number;
+    placeholder?: string;
+    step?: number;
+    min?: number;
+    max?: number;
+}
+
+const NumericDataEntry: React.FunctionComponent<NumericDataEntryProps> = (props) => {
     return (
         <Fragment>
             <DataTitleCopyable
@@ -24,7 +41,12 @@ const NumericDataEntry: React.FunctionComponent<any> = (props) => { // TODO: rem
                 min={props.min || 0}
                 disabled={props.mode === 'view' || props.disabled}
                 placeholder={props.placeholder}
-                onChange={props.onChange}
+                onChange={e => 
+                    props.onChange(
+                        props.slug,
+                        e.target.value === '' ? null : parseFloat(e.target.value)
+                    )
+                }
             />
         </Fragment>
     );

app/src/frontend/building/data-containers/age.tsx

@@ -18,7 +18,7 @@ const AgeView = (props) => (
             lower={props.building.date_lower}
             mode={props.mode}
             copy={props.copy}
-            onChange={props.onChange}
+            onChange={props.onUpdate}
             />
         <NumericDataEntry
             title="Facade year"
@@ -26,7 +26,7 @@ const AgeView = (props) => (
             value={props.building.facade_year}
             mode={props.mode}
             copy={props.copy}
-            onChange={props.onChange}
+            onChange={props.onUpdate}
             step={1}
             tooltip="Best estimate"
             />

app/src/frontend/building/data-containers/location.tsx

@@ -26,7 +26,7 @@ const LocationView = (props) => (
             value={props.building.location_number}
             mode={props.mode}
             copy={props.copy}
-            onChange={props.onChange}
+            onChange={props.onUpdate}
             step={1}
             />
         <DataEntry
@@ -96,8 +96,8 @@ const LocationView = (props) => (
             mode={props.mode}
             copy={props.copy}
             step={0.0001}
-            placeholder={51}
-            onChange={props.onChange}
+            placeholder="51"
+            onChange={props.onUpdate}
             />
         <NumericDataEntry
             title="Longitude"
@@ -106,8 +106,8 @@ const LocationView = (props) => (
             mode={props.mode}
             copy={props.copy}
             step={0.0001}
-            placeholder={0}
-            onChange={props.onChange}
+            placeholder="0"
+            onChange={props.onUpdate}
             />
     </Fragment>
 )

app/src/frontend/building/data-containers/size.tsx

@@ -19,7 +19,7 @@ const SizeView = (props) => (
                 mode={props.mode}
                 copy={props.copy}
                 tooltip="How many storeys between the pavement and start of roof?"
-                onChange={props.onChange}
+                onChange={props.onUpdate}
                 step={1}
                 />
             <NumericDataEntry
@@ -29,7 +29,7 @@ const SizeView = (props) => (
                 mode={props.mode}
                 copy={props.copy}
                 tooltip="How many storeys above start of roof?"
-                onChange={props.onChange}
+                onChange={props.onUpdate}
                 step={1}
                 />
             <NumericDataEntry
@@ -39,7 +39,7 @@ const SizeView = (props) => (
                 mode={props.mode}
                 copy={props.copy}
                 tooltip="How many storeys below pavement level?"
-                onChange={props.onChange}
+                onChange={props.onUpdate}
                 step={1}
                 />
         </DataEntryGroup>
@@ -50,7 +50,7 @@ const SizeView = (props) => (
                 value={props.building.size_height_apex}
                 mode={props.mode}
                 copy={props.copy}
-                onChange={props.onChange}
+                onChange={props.onUpdate}
                 step={0.1}
                 />
             <NumericDataEntry
@@ -60,7 +60,7 @@ const SizeView = (props) => (
                 value={props.building.size_height_eaves}
                 mode={props.mode}
                 copy={props.copy}
-                onChange={props.onChange}
+                onChange={props.onUpdate}
                 step={0.1}
                 />
         </DataEntryGroup>
@@ -71,7 +71,7 @@ const SizeView = (props) => (
                 value={props.building.size_floor_area_ground}
                 mode={props.mode}
                 copy={props.copy}
-                onChange={props.onChange}
+                onChange={props.onUpdate}
                 step={0.1}
                 />
             <NumericDataEntry
@@ -80,7 +80,7 @@ const SizeView = (props) => (
                 value={props.building.size_floor_area_total}
                 mode={props.mode}
                 copy={props.copy}
-                onChange={props.onChange}
+                onChange={props.onUpdate}
                 step={0.1}
                 />
         </DataEntryGroup>
@@ -90,7 +90,7 @@ const SizeView = (props) => (
             value={props.building.size_width_frontage}
             mode={props.mode}
             copy={props.copy}
-            onChange={props.onChange}
+            onChange={props.onUpdate}
             step={0.1}
             />
         <NumericDataEntry
@@ -99,7 +99,7 @@ const SizeView = (props) => (
             value={props.building.size_plot_area_total}
             mode={props.mode}
             copy={props.copy}
-            onChange={props.onChange}
+            onChange={props.onUpdate}
             step={0.1}
             disabled={true}
             />
@@ -109,7 +109,7 @@ const SizeView = (props) => (
             value={props.building.size_far_ratio}
             mode={props.mode}
             copy={props.copy}
-            onChange={props.onChange}
+            onChange={props.onUpdate}
             step={0.1}
             disabled={true}
             />

app/src/frontend/building/data-containers/sustainability.tsx

@@ -18,11 +18,6 @@ const BreeamRatingOptions = [
 * Sustainability view/edit section
 */
 const SustainabilityView = (props) => {
-    const dataEntryProps = {
-        mode: props.mode,
-        copy: props.copy,
-        onChange: props.onChange
-    };
     return (
         <Fragment>
             <SelectDataEntry
@@ -31,7 +26,9 @@ const SustainabilityView = (props) => {
                 value={props.building.sust_breeam_rating}
                 tooltip="(Building Research Establishment Environmental Assessment Method) May not be present for many buildings"
                 options={BreeamRatingOptions}
-                {...dataEntryProps}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onChange}
             />
             <SelectDataEntry
                 title="DEC Rating"
@@ -39,7 +36,9 @@ const SustainabilityView = (props) => {
                 value={props.building.sust_dec}
                 tooltip="(Display Energy Certificate) Any public building should have (and display) a DEC. Showing how the energy use for that building compares to other buildings with same use"
                 options={EnergyCategoryOptions}
-                {...dataEntryProps}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onChange}
             />
             <SelectDataEntry
                 title="EPC Rating"
@@ -48,7 +47,9 @@ const SustainabilityView = (props) => {
                 tooltip="(Energy Performance Certifcate) Any premises sold or rented is required to have an EPC to show how energy efficient it is. Only buildings rate grade E or higher maybe rented"
                 options={EnergyCategoryOptions}
                 disabled={true}
-                {...dataEntryProps}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onChange}
             />
             <NumericDataEntry
                 title="Last significant retrofit"
@@ -58,7 +59,9 @@ const SustainabilityView = (props) => {
                 step={1}
                 min={1086}
                 max={new Date().getFullYear()}
-                {...dataEntryProps}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onUpdate}
             />
             <NumericDataEntry
                 title="Expected lifespan for typology"
@@ -67,7 +70,9 @@ const SustainabilityView = (props) => {
                 step={1}
                 min={1}
                 disabled={true}
-                {...dataEntryProps}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onUpdate}
             />
         </Fragment>
     );

app/src/frontend/building/data-containers/type.tsx

@@ -16,9 +16,6 @@ const AttachmentFormOptions = [
 * Type view/edit section
 */
 const TypeView = (props) => {
-    const {mode, copy, onChange} = props;
-    const dataEntryProps = { mode, copy, onChange };
-
     return (
         <Fragment>
             <SelectDataEntry
@@ -27,7 +24,9 @@ const TypeView = (props) => {
                 value={props.building.building_attachment_form}
                 tooltip="We have prepopulated these based on their current attachment. A building can either be detached, semi-detached or part of a terrace (middle or end)"
                 options={AttachmentFormOptions}
-                {...dataEntryProps}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onChange}
             />
             <NumericDataEntry
                 title="When did use change?"
@@ -37,7 +36,9 @@ const TypeView = (props) => {
                 min={1086}
                 max={new Date().getFullYear()}
                 step={1}
-                {...dataEntryProps}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onUpdate}
             />
             <DataEntry
                 title="Original building use"