use proper form for the id input

app/src/api/config/dataFields.ts

@@ -205,7 +205,7 @@ export const buildingAttributesConfig = valueType<DataFieldConfig>()({ /* eslint
         edit: true,
         verify: true,
     },
-    planning_nhle_link: {
+    planning_list_id: {
         edit: true,
         verify: true,
     },

app/src/frontend/building/data-components/numeric-data-entry-with-formatted-link.css

@@ -0,0 +1,9 @@
+.narrow-input-form {
+    max-width: 40%;
+    float: left;
+}
+
+.with-margin {
+    margin-left: 0.7em;
+    margin-right: 0.7em;
+}

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

@@ -0,0 +1,57 @@
+import React, { Fragment } from 'react';
+
+import { BaseDataEntryProps } from './data-entry';
+import { DataTitleCopyable } from './data-title';
+import './numeric-data-entry-with-formatted-link.css';
+import { FieldRow } from './field-row';
+
+interface NumericDataEntryWithFormattedLinkProps extends BaseDataEntryProps {
+    value?: string;
+    placeholder?: string;
+    step?: number;
+    min?: number;
+    max?: number;
+    linkTargetFunction: (val: string) => string;
+    linkDescriptionFunction: (val: string) => string;
+}
+
+const NumericDataEntryWithFormattedLink: React.FunctionComponent<NumericDataEntryWithFormattedLinkProps> = (props) => {
+    const slugWithModifier = props.slug + (props.slugModifier ?? '');
+
+    return (
+        <Fragment>
+            <DataTitleCopyable
+                slug={props.slug}
+                slugModifier={props.slugModifier}
+                title={props.title}
+                tooltip={props.tooltip}
+                disabled={props.disabled || props.value == undefined}
+                copy={props.copy}
+            />
+            <FieldRow>
+                <input
+                    className="form-control narrow-input-form"
+                    type="number"
+                    id={slugWithModifier}
+                    name={slugWithModifier}
+                    value={props.value == undefined ? '' : props.value}
+                    step={props.step == undefined ? 1 : props.step}
+                    max={props.max}
+                    min={props.min}
+                    disabled={props.mode === 'view' || props.disabled}
+                    placeholder={props.placeholder}
+                    required={props.required}
+                    onChange={e =>
+                        props.onChange(
+                            props.slug,
+                            e.target.value === '' ? null : parseFloat(e.target.value)
+                        )
+                    }
+                />
+                {props.value == undefined ? <div></div> : <a className="with-margin" href={props.linkTargetFunction(props.value)} target="_blank">{props.linkDescriptionFunction(props.value)}</a>}
+            </FieldRow>
+        </Fragment>
+    );
+};
+
+export default NumericDataEntryWithFormattedLink;

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

@@ -3,7 +3,7 @@ import React, { Fragment } from 'react';
 import InfoBox from '../../components/info-box';
 import { dataFields } from '../../config/data-fields-config';
 import CheckboxDataEntry from '../data-components/checkbox-data-entry';
-import DataEntry from '../data-components/data-entry';
+import NumericDataEntryWithFormattedLink from '../data-components/numeric-data-entry-with-formatted-link';import DataEntry from '../data-components/data-entry';
 import { DataEntryGroup } from '../data-components/data-entry-group';
 import SelectDataEntry from '../data-components/select-data-entry';
 import Verification from '../data-components/verification';
@@ -126,23 +126,23 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => (
                     />
             </DataEntryGroup>
             <DataEntryGroup name="Listed buildings & scheduled monuments" collapsed={false} >
-                <DataEntry
+                <NumericDataEntryWithFormattedLink
-                    title={dataFields.planning_nhle_link.title}
+                    title={dataFields.planning_list_id.title}
-                    slug="planning_nhle_link"
+                    slug="planning_list_id"
-                    value={props.building.planning_nhle_link}
+                    value={props.building.planning_list_id}
                     mode={props.mode}
                     copy={props.copy}
                     onChange={props.onChange}
-                    placeholder="https://..."
+                    linkTargetFunction={(id: String) => { return "https://historicengland.org.uk/listing/the-list/list-entry/" + id + "?section=official-list-entry" } }
-                    isUrl={true}
+                    linkDescriptionFunction={(id: String) => { return "description at the official site" } }
                 />
                 <Verification
-                    slug="planning_nhle_link"
+                    slug="planning_list_id"
-                    allow_verify={props.user !== undefined && props.building.planning_nhle_link !== null && !props.edited}
+                    allow_verify={props.user !== undefined && props.building.planning_list_id !== null && !props.edited}
                     onVerify={props.onVerify}
-                    user_verified={props.user_verified.hasOwnProperty("planning_nhle_link")}
+                    user_verified={props.user_verified.hasOwnProperty("planning_list_id")}
-                    user_verified_as={props.user_verified.planning_nhle_link}
+                    user_verified_as={props.user_verified.planning_list_id}
-                    verified_count={props.building.verified.planning_nhle_link}
+                    verified_count={props.building.verified.planning_list_id}
                     />
                 <SelectDataEntry
                     title={dataFields.planning_list_grade.title}

app/src/frontend/config/data-fields-config.ts

@@ -458,10 +458,11 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
         example: "",
         //tooltip: ,
     },
-    planning_nhle_link: {
+    planning_list_id: {
         category: Category.Planning,
         title: "Is the building on the <a href=\"https://historicengland.org.uk/advice/hpg/heritage-assets/nhle/\" target=\"_blank\">National Heritage List for England</a>?",
-        example: "",
+        example: "121436",
+        //tooltip: ,
     },
     planning_list_grade: {
         category: Category.Planning,

maintenance/extract_data/README.md

@@ -70,6 +70,7 @@ This is the main table, containing almost all data collected by Colouring London
 - `sust_dec`: DEC rating
 - `sust_retrofit_date`: year of last significant retrofit
 - `planning_portal_link`: link to an entry on https://www.planningportal.co.uk/
+- `planning_list_id`: National Heritage List for England ID
 - `planning_in_conservation_area_url`: conservation area appraisal link
 - `planning_in_conservation_area_url`: conservation area data source link
 - `planning_list_grade`: National Heritage List for England listing grade

migrations/033.redesign_protection_designation.down.sql

@@ -1,5 +1,4 @@
 --into a single link from array of links
-ALTER TABLE buildings DROP COLUMN IF EXISTS planning_nhle_link;
 ALTER TABLE buildings ADD COLUMN IF NOT EXISTS planning_nhle_link text[];
 
 --changed into URL
@@ -15,9 +14,6 @@ ALTER TABLE buildings ADD COLUMN IF NOT EXISTS planning_heritage_at_risk_id int
 ALTER TABLE buildings DROP COLUMN IF EXISTS planning_in_conservation_area_url;
 ALTER TABLE buildings ADD COLUMN IF NOT EXISTS planning_in_conservation_area boolean DEFAULT FALSE;
 
--- URL column exists already
-ALTER TABLE ADD COLUMN IF NOT EXISTS planning_list_id int DEFAULT NULL;
-
 ALTER TABLE buildings ADD COLUMN IF NOT EXISTS planning_in_glher boolean DEFAULT FALSE;
 ALTER TABLE buildings ADD COLUMN IF NOT EXISTS planning_apa_name VARCHAR DEFAULT '';
 ALTER TABLE buildings ADD COLUMN IF NOT EXISTS planning_apa_tier smallint DEFAULT NULL;

migrations/033.redesign_protection_designation.up.sql

@@ -1,21 +1,13 @@
 -- this type of links is expected:
 -- 'https://historicengland.org.uk/listing/the-list/list-entry/1080446?section=official-list-entry'
 
-UPDATE buildings
-SET planning_nhle_link = CONCAT('https://historicengland.org.uk/listing/the-list/list-entry/', planning_list_id, 
-'?section=official-list-entry')
-WHERE planning_nhle_link = ''
-AND planning_list_id IS NOT NULL;
-
-
 UPDATE buildings
 SET planning_local_list_url = 'identified as listed: please replace with link'
 WHERE planning_local_list_url = ''
 AND planning_in_local_list;
 
---into a single link from array of links
+--no need to store both id and link that can be derived from it
 ALTER TABLE buildings DROP COLUMN IF EXISTS planning_nhle_link;
-ALTER TABLE buildings ADD COLUMN IF NOT EXISTS planning_nhle_link VARCHAR DEFAULT '';
 
 --changed into URL
 ALTER TABLE buildings DROP COLUMN IF EXISTS planning_in_apa;
@@ -30,9 +22,6 @@ ALTER TABLE buildings ADD COLUMN IF NOT EXISTS planning_heritage_at_risk_url VAR
 ALTER TABLE buildings DROP COLUMN IF EXISTS planning_in_conservation_area;
 ALTER TABLE buildings ADD COLUMN IF NOT EXISTS planning_in_conservation_area_url VARCHAR DEFAULT '';    
 
--- URL column exists already
-ALTER TABLE buildings DROP COLUMN IF EXISTS planning_list_id;
-
 --fully removed
 ALTER TABLE buildings DROP COLUMN IF EXISTS planning_in_glher;
 ALTER TABLE buildings DROP COLUMN IF EXISTS planning_apa_name;