Display user-friendly field names for auto-generated forms

acteng · Jul 14, 2023 · 3c36ac7 · 3c36ac7
1 parent 77a933b
commit 3c36ac7
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 1 deletion.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "@types/geojson": "^7946.0.10",
     "comlink": "^4.4.1",
     "govuk-frontend": "^4.6.0",
+    "humanize-string": "^3.0.0",
     "maplibre-gl": "^3.1.0",
     "route-snapper": "^0.1.14",
     "svelte": "^4.0.0"

diff --git a/src/lib/forms/AutogenerateForm.svelte b/src/lib/forms/AutogenerateForm.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import humanizeString from 'humanize-string';
   import { slide } from "svelte/transition";
   import {
     isBarewordEnumCase,
@@ -57,7 +58,7 @@
 {#if isStruct(spec)}
   {#each spec.members as x}
     <div>
-      <h3>{x.name}</h3>
+      <h3>{humanizeString(x.name)}</h3>
       <svelte:self spec={x} bind:value={value[x.name]} />
     </div>
   {/each}