Add scheme name (required) to the details form and adjust some questions

acteng · Nov 8, 2023 · 28fa598 · 28fa598
1 parent a2bc97e
commit 28fa598
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 37 deletions.
diff --git a/src/lib/govuk/TextInput.svelte b/src/lib/govuk/TextInput.svelte
@@ -1,12 +1,19 @@
 <script lang="ts">
+  import ErrorMessage from "./ErrorMessage.svelte";
   import FormElement from "./FormElement.svelte";
 
   export let label: string;
   export let value: string | undefined;
+  // Show an error if input is empty
+  export let required = false;
 
   // TODO Using the label as a unique ID, so users don't have to invent an arbitrary string
+
+  $: errorMessage =
+    required && (value == undefined || value == "") ? "Required" : "";
 </script>
 
 <FormElement {label} id={label}>
+  <ErrorMessage {errorMessage} />
   <input type="text" class="govuk-input" id={label} bind:value />
 </FormElement>
diff --git a/src/lib/sidebar/PipelineSchemeForm.svelte b/src/lib/sidebar/PipelineSchemeForm.svelte
@@ -8,6 +8,7 @@
     Radio,
     SecondaryButton,
     TextArea,
+    TextInput,
   } from "lib/govuk";
   import { gjScheme } from "stores";
   import ATF4Type from "../forms/ATF4Type.svelte";
@@ -34,6 +35,7 @@
 
   // Check for all required values
   $: errorMessage =
+    $gjScheme.scheme_name &&
     $gjScheme.pipeline?.scheme_type &&
     $gjScheme.pipeline?.status &&
     $gjScheme.pipeline?.timescale
@@ -47,26 +49,41 @@
 </SecondaryButton>
 <Modal title="Scheme details" bind:open={showModal}>
   {#if $gjScheme.pipeline}
-    <Radio
-      legend="Scheme type"
-      id="scheme-type"
-      choices={[
-        ["cycling route", "Cycling route"],
-        ["walking route", "Walking route"],
-        ["shared-use route", "Shared-use route"],
-        ["area-based scheme", "Area-based scheme"],
-        ["intersection", "Intersection/junction scheme"],
-      ]}
-      inlineSmall
+    <TextInput
+      label="Scheme name"
       required
-      bind:value={$gjScheme.pipeline.scheme_type}
+      bind:value={$gjScheme.scheme_name}
     />
 
-    <ATF4Type
-      label="Type of the main intervention"
-      id="atf4-lead-type"
-      bind:value={$gjScheme.pipeline.atf4_lead_type}
-    />
+    <fieldset class="govuk-fieldset">
+      <legend class="govuk-fieldset__legend">Basic information</legend>
+
+      <Radio
+        legend="Scheme type"
+        id="scheme-type"
+        choices={[
+          ["cycling route", "Cycling route"],
+          ["walking route", "Walking route"],
+          ["shared-use route", "Shared-use route"],
+          ["area-based scheme", "Area-based scheme"],
+          ["intersection", "Intersection/junction scheme"],
+        ]}
+        inlineSmall
+        required
+        bind:value={$gjScheme.pipeline.scheme_type}
+      />
+
+      <ATF4Type
+        label="Type of the main intervention"
+        id="atf4-lead-type"
+        bind:value={$gjScheme.pipeline.atf4_lead_type}
+      />
+
+      <TextArea
+        label="Scheme description (150 words max)"
+        bind:value={$gjScheme.pipeline.scheme_description}
+      />
+    </fieldset>
 
     <fieldset class="govuk-fieldset">
       <legend class="govuk-fieldset__legend">Timing and status</legend>
@@ -104,12 +121,23 @@
         max={2100}
         bind:value={$gjScheme.pipeline.timescale_year}
       />
-    </fieldset>
 
-    <TextArea
-      label="Scheme description (150 words max)"
-      bind:value={$gjScheme.pipeline.scheme_description}
-    />
+      <NumberInput
+        label="What year was this scheme most recently published?"
+        width={4}
+        min={2010}
+        max={2100}
+        bind:value={$gjScheme.pipeline.year_published}
+      />
+
+      <NumberInput
+        label="What year was this scheme most recently consulted on?"
+        width={4}
+        min={2010}
+        max={2100}
+        bind:value={$gjScheme.pipeline.year_consulted}
+      />
+    </fieldset>
 
     <fieldset class="govuk-fieldset">
       <legend class="govuk-fieldset__legend">Budget</legend>
@@ -147,14 +175,6 @@
       </Checkbox>
     </fieldset>
 
-    <NumberInput
-      label="How current is this scheme? Please enter the year of the plan."
-      width={4}
-      min={2010}
-      max={2100}
-      bind:value={$gjScheme.pipeline.source_data_year}
-    />
-
     <DefaultButton on:click={() => (showModal = false)}>Save</DefaultButton>
   {/if}
 </Modal>

diff --git a/src/types.ts b/src/types.ts
@@ -29,23 +29,22 @@ export interface PipelineScheme {
     | "area-based scheme"
     | "intersection"
     | "";
+  atf4_lead_type: ATF4Type | "";
+  scheme_description: string;
+
   // TODO Check with DB schema
   status: "planned" | "in development" | "in construction" | "completed" | "";
   timescale: "short" | "medium" | "long" | "";
-
-  atf4_lead_type: ATF4Type | "";
-  scheme_description: string;
+  timescale_year?: number;
+  year_published?: number;
+  year_consulted?: number;
 
   // GBP
   budget_funded?: number;
   budget_unfunded?: number;
-
-  timescale_year?: number;
   funding_source: "ATF2" | "ATF3" | "ATF4" | "ATF4e" | "CRSTS" | "LUF" | "";
   // TODO What about partially? How's this overlap with budget?
   funded: boolean;
-
-  source_data_year?: number;
 }
 
 export type ATF4Type =