From b6ecbb61c2387ef358f07926e8363e19e59ea2bc Mon Sep 17 00:00:00 2001
From: Maciej Ziarkowski <maciej.ziarkowski@gmail.com>
Date: Wed, 16 Jun 2021 21:35:09 +0100
Subject: [PATCH] Add patern data entry to location number

---
 .../data-components/pattern-data-entry.tsx    | 43 +++++++++++++++++++
 .../building/data-containers/location.tsx     |  9 ++--
 app/src/frontend/config/data-fields-config.ts |  3 +-
 3 files changed, 51 insertions(+), 4 deletions(-)
 create mode 100644 app/src/frontend/building/data-components/pattern-data-entry.tsx

diff --git a/app/src/frontend/building/data-components/pattern-data-entry.tsx b/app/src/frontend/building/data-components/pattern-data-entry.tsx
new file mode 100644
index 00000000..9681e981
--- /dev/null
+++ b/app/src/frontend/building/data-components/pattern-data-entry.tsx
@@ -0,0 +1,43 @@
+import React, { Fragment } from 'react';
+
+import { BaseDataEntryProps } from './data-entry';
+import { DataTitleCopyable } from './data-title';
+
+
+interface PatternDataEntryProps extends BaseDataEntryProps {
+    value?: string;
+    placeholder?: string;
+    /**
+     * This is not a JS RegExp, so there's no validation in code, because we're passing it to HTML input as a string
+     */
+    pattern: string;
+    maxLength?: number;
+}
+
+export const PatternDataEntry: React.FC<PatternDataEntryProps> = props => {
+    const handleChange = (value: string) => {
+        props.onChange?.(props.slug, value);
+    };
+
+    return (
+        <>
+            <DataTitleCopyable
+                slug={props.slug}
+                slugModifier={props.slugModifier}
+                title={props.title}
+                tooltip={props.tooltip}
+                disabled={props.disabled || props.value == undefined || props.value == ''}
+                copy={props.copy}
+            />
+            <input className="form-control" type={props.isUrl? "url" : "text"}
+                value={props.value || ''}
+                required={props.required}
+                disabled={props.mode === 'view' || props.disabled}
+                placeholder={props.placeholder}
+                pattern={props.pattern}
+                maxLength={props.maxLength}
+                onChange={e => handleChange(e.target.value)}
+            />
+        </>
+    );
+}
diff --git a/app/src/frontend/building/data-containers/location.tsx b/app/src/frontend/building/data-containers/location.tsx
index 553cb6ce..d631388e 100644
--- a/app/src/frontend/building/data-containers/location.tsx
+++ b/app/src/frontend/building/data-containers/location.tsx
@@ -7,9 +7,12 @@ import NumericDataEntry from '../data-components/numeric-data-entry';
 import UPRNsDataEntry from '../data-components/uprns-data-entry';
 import Verification from '../data-components/verification';
 import withCopyEdit from '../data-container';
+import { PatternDataEntry } from '../data-components/pattern-data-entry';
 
 import { CategoryViewProps } from './category-view-props';
 
+const locationNumberPattern = "[1-9]\\d*[a-z]?(-([1-9]\\d*))?"; ///[1-9]\d*[a-z]?(-([1-9]\d*))?/;
+
 const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
     <Fragment>
         <InfoBox msg="Text-based address fields are disabled at the moment. We're looking into how best to collect this data." />
@@ -33,15 +36,15 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
             verified_count={props.building.verified.location_name}
             />
 
-        <NumericDataEntry
+        <PatternDataEntry
             title={dataFields.location_number.title}
             slug="location_number"
             value={props.building.location_number}
+            pattern={locationNumberPattern}
             mode={props.mode}
             copy={props.copy}
             onChange={props.onChange}
-            step={1}
-            min={1}
+            tooltip={dataFields.location_number.tooltip}
             />
         <Verification
             slug="location_number"
diff --git a/app/src/frontend/config/data-fields-config.ts b/app/src/frontend/config/data-fields-config.ts
index 2e276b49..967b69f5 100644
--- a/app/src/frontend/config/data-fields-config.ts
+++ b/app/src/frontend/config/data-fields-config.ts
@@ -57,7 +57,8 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
     location_number: {
         category: Category.Location,
         title: "Building number",
-        example: 12,
+        example: '12b',
+        tooltip: 'Numbers with an optional lowercase letter are accepted, e.g. 141 or 12b'
     },
     location_street: {
         category: Category.Location,