Skip to content

Commit

Permalink
Tidy up the mapping config UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@janbaykara
janbaykara committed Mar 11, 2024
1 parent d78dd99 commit 9f60e45
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 42 deletions.
19 changes: 8 additions & 11 deletions nextjs/src/components/AutoUpdateMappingForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { FormProvider, useFieldArray, useForm } from "react-hook-form";
import { ExternalDataSourceInput, GeographyTypes } from "@/__generated__/graphql";
import { Input } from "@/components/ui/input";
import { SourcePathSelector } from "@/components/SelectSourceData";
import { ArrowRight, XCircle } from "lucide-react";
import { ArrowRight, X, XCircle } from "lucide-react";
import {
Form,
FormControl,
Expand Down Expand Up @@ -102,22 +102,21 @@ export function AutoUpdateMappingForm({
</div>
</FormItem>
</div>
<div className="max-w-3xl">
<table>
<div>
<table className='w-full'>
{fields.map((field, index) => (
<tr key={field.id} className='flex flex-row'>
<td className="w-10">
<td className="w-1/2 grow-0 flex flex-row items-center justify-stretch">
<Button
className="flex-shrink"
onClick={() => {
remove(index);
}}
>
<XCircle />
<X />
</Button>
</td>
<td className="w-1/2 grow-0">
<SourcePathSelector
focusOnMount
sources={enrichmentDataSources}
value={{
source: form.watch(`autoUpdateMapping.${index}.source`),
Expand All @@ -132,10 +131,8 @@ export function AutoUpdateMappingForm({
}}
/>
</td>
<td className="w-10">
<ArrowRight className="flex-shrink" />
</td>
<td className="w-1/2 shrink-0">
<td className="w-1/2 shrink-0 flex flex-row items-center justify-stretch">
<ArrowRight className="flex-shrink-0" />
<Input
className="flex-shrink-0 flex-grow"
placeholder="Destination column"
Expand Down
24 changes: 17 additions & 7 deletions nextjs/src/components/SelectSourceData.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,20 +48,30 @@ export function SourcePathSelector({
sources,
value,
setValue,
focusOnMount = false,
}: {
sources: Array<EnrichmentDataSource>;
value: Pick<AutoUpdateConfig, 'source' | 'sourcePath'>;
setValue: (source: AutoUpdateConfig['source'], sourcePath: AutoUpdateConfig['sourcePath']) => void;
focusOnMount?: boolean;
}) {
const [open, setOpen] = React.useState(false);
const [open, setOpen] = React.useState(focusOnMount);

function labelForSourcePath(source: string, sourcePath: SourcePath) {
const sourceDict = sources.find((s) => s.slug === source);
if (!sourceDict) return sourcePath;
const sourcePathDict = sourceDict.sourcePaths.find((s) => val(s) === sourcePath);
if (!sourcePathDict) return sourcePath;
return label(sourcePathDict)
}

return (
<div className="flex w-full flex-col items-start justify-between rounded-md border p-1 sm:flex-row sm:items-center">
<Button onClick={() => setOpen(true)} className="w-full sm:w-auto">
{value && value.source && value.sourcePath
? `${value.source}: ${value.sourcePath}`
: "Select data"}
</Button>
<div className="flex w-full flex-col items-start justify-between rounded-md border py-2 px-3 sm:flex-row sm:items-center cursor-pointer hover:bg-meepGray-700 text-ellipsis overflow-hidden text-nowrap">
<div onClick={() => setOpen(true)} className="w-full text-ellipsis overflow-hidden text-nowrap text-sm">
{value && value.source && value.sourcePath
? `${labelForSourcePath(value.source, value.sourcePath)} (${value.source})`
: "Click to select data"}
</div>
<CommandDialog open={open} onOpenChange={() => setOpen(false)}>
<CommandInput placeholder="Search available data..." />
<CommandList>
Expand Down
48 changes: 24 additions & 24 deletions nextjs/src/lib/data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,131 +46,131 @@ export const enrichmentDataSources: Array<EnrichmentDataSource> = [
sourcePaths: [
{
value: "postcode",
label: "Postcode.",
label: "Postcode",
description:
"All current (‘live’) postcodes within the United Kingdom, the Channel Islands and the Isle of Man, received monthly from Royal Mail. 2, 3 or 4-character outward code, single space and 3-character inward code.",
},
{
value: "outcode",
label: "Outward Code.",
label: "Outward Code",
description:
'The outward code is the part of the postcode before the single space in the middle. It is between two and four characters long. A few outward codes are non-geographic, not divulging where mail is to be sent. Examples of outward codes include "L1", "W1A", "RH1", "RH10" or "SE1P".',
},
{
value: "incode",
label: "Inward Code.",
label: "Inward Code",
description:
'The inward part is the part of the postcode after the single space in the middle. It is three characters long. The inward code assists in the delivery of post within a postal district. Examples of inward codes include "0NY", "7GZ", "7HF", or "8JQ".',
},
{
value: "quality",
label: "Positional Quality.",
label: "Positional Quality",
description:
"Shows the status of the assigned grid reference. 1 = within the building of the matched address closest to the postcode mean 2 = as for status value 1, except by visual inspection of Landline maps (Scotland only) 3 = approximate to within 50m 4 = postcode unit mean (mean of matched addresses with the same postcode, but not snapped to a building) 5 = imputed by ONS, by reference to surrounding postcode grid references 6 = postcode sector mean, (mainly | PO Boxes) 8 = postcode terminated prior to Gridlink® initiative, last known ONS postcode grid reference1 9 = no grid reference available",
},
{
value: "eastings",
label: "Eastings.",
label: "Eastings",
description:
"The Ordnance Survey postcode grid reference Easting to 1 metre resolution. Grid references for postcodes in Northern Ireland relate to the Irish Grid system. May be null if geolocation not available.",
},
{
value: "northings",
label: "Northings.",
label: "Northings",
description:
"The Ordnance Survey postcode grid reference Northing to 1 metre resolution. Grid references for postcodes in Northern Ireland relate to the Irish Grid system. May be null if geolocation not available.",
},
{
value: "country",
label: "Country.",
label: "Country",
description:
"The country (i.e. one of the four constituent countries of the United Kingdom or the Channel Islands or the Isle of Man) to which each postcode is assigned.",
},
{
value: "nhs_ha",
label: "Strategic Health Authority.",
label: "Strategic Health Authority",
description: "The health area code for the postcode.",
},
{
value: "admin_county",
label: "County.",
label: "County",
description:
"The current county to which the postcode has been assigned.",
},
{
value: "admin_district",
label: "District.",
label: "District",
description:
"The current district/unitary authority to which the postcode has been assigned.",
},
{
value: "admin_ward",
label: "Ward.",
label: "Ward",
description:
"The current administrative/electoral area to which the postcode has been assigned.",
},
{
value: "longitude",
label: "Longitude.",
label: "Longitude",
description:
"The WGS84 longitude given the Postcode's national grid reference. May be null if geolocation not available.",
},
{
value: "latitude",
label: "Latitude.",
label: "Latitude",
description:
"The WGS84 latitude given the Postcode's national grid reference. May be null if geolocation not available.",
},
{
value: "parliamentary_constituency",
label: "Westminster Parliamentary Constituency.",
label: "Westminster Parliamentary Constituency",
description:
"The Westminster Parliamentary Constituency code for each postcode.",
},
{
value: "parliamentary_constituency_2025",
label: "Westminster Parliamentary Constituency (2025).",
label: "GE2024 Westminster Parliamentary Constituency",
description:
"The Westminster Parliamentary Constituency code for each postcode.",
},
{
value: "european_electoral_region",
label: "European Electoral Region (EER).",
label: "European Electoral Region (EER)",
description: "The European Electoral Region code for each postcode.",
},
{
value: "primary_care_trust",
label: "Primary Care Trust (PCT).",
label: "Primary Care Trust (PCT)",
description:
"The code for the Primary Care areas in England, LHBs in Wales, CHPs in Scotland, LCG in Northern Ireland and PHD in the Isle of Man; there are no equivalent areas in the Channel Islands. Care Trust/ Care Trust Plus (CT)/ local health board (LHB)/ community health partnership (CHP)/ local commissioning group (LCG)/ primary healthcare directorate (PHD).",
},
{
value: "region",
label: "Region (formerly GOR).",
label: "Region (formerly GOR)",
description:
"The Region code for each postcode. The nine GORs were abolished on 1 April 2011 and are now known as ‘Regions’. They were the primary statistical subdivisions of England and also the areas in which the Government Offices for the Regions fulfilled their role. Each GOR covered a number of local authorities.",
},
{
value: "parish",
label: "Parish (England)/community (Wales).",
label: "Parish (England)/community (Wales)",
description:
"The smallest type of administrative area in England is the parish (also known as 'civil parish'); the equivalent units in Wales are communities.",
},
{
value: "lsoa",
label: "2011 Census lower layer super output area (LSOA).",
label: "2011 Census lower layer super output area (LSOA)",
description:
"The 2011 Census lower layer SOA code for England and Wales, SOA code for Northern Ireland and data zone code for Scotland.",
},
{
value: "msoa",
label: "2011 Census middle layer super output area (MSOA).",
label: "2011 Census middle layer super output area (MSOA)",
description:
"The 2011 Census middle layer SOA (MSOA) code for England and Wales and intermediate zone for Scotland.",
},
{
value: "ced",
label: "County Electoral District.",
label: "County Electoral District",
description:
"The county electoral division code for each English postcode. Pseudo codes are included for the remainder of the UK. The field will be null for English postcodes with no grid reference. English county councils use county electoral divisions (CED) to elect councillors. These CEDs must be confined within district boundaries, but need not be based on whole electoral wards. The only exceptions are the Isles of Scilly and the Greater London Authority (GLA). CEDs do not exist within UAs.",
},
Expand All @@ -184,13 +184,13 @@ export const enrichmentDataSources: Array<EnrichmentDataSource> = [
{
value: "nuts",
label:
"International Terratorial Levels (ITL) (Former Nomenclature of Units for Territorial Statistics (NUTS).",
"International Terratorial Levels (ITL) (Former Nomenclature of Units for Territorial Statistics (NUTS)",
description:
"The national LAU1-equivalent code for each postcode. Pseudo codes are included for Channel Islands and Isle of Man. The field will otherwise be blank for postcodes with no grid reference. As of May 2021. NUTS has changed to International Territorial Levels (ITL). Postcodes.io will report ITL in nuts and codes.nuts to preserve backwards compatibility. Following the UK’s withdrawal from the EU, a new UK-managed international statistical geography - ITL (International Territorial Levels) - was introduced from 1st January 2021, replacing the former NUTS classification. They align with international standards, enabling comparability both over time and internationally. To ensure continued alignment, the ITLs mirror the NUTS system. They also follow a similar review timetable – every three years. NUTS is a hierarchical classification of spatial units that provides a breakdown of the European Union’s territory for producing regional statistics that are comparable across the Union. The ITL area classification in the UK comprises current national administrative and electoral areas, except in Scotland where some ITL areas comprise whole and/or part Local Enterprise Regions. The ONSPD contains the LAU1 code (9-character LAD/UA code for England, Wales and Northern Ireland and 'S30' code for Scotland). A comprehensive lookup of LAU and ITL codes is included with the accompanying metadata.",
},
{
value: "codes",
label: "Returns an ID or Code associated with the postcode.",
label: "Returns an ID or Code associated with the postcode",
description:
"Typically, these are a 9 character code known as an ONS Code or GSS Code. This is currently only available for districts, parishes, counties, CCGs, NUTS and wards.",
},
Expand Down

0 comments on commit 9f60e45

Please sign in to comment.