feature: RowDialog validates a row as part of a larger value, such as a whole document with the row put in.

web/RowDialog.tsx

@@ -6,12 +6,16 @@ import { useValidation } from './useValidation.ts'
 /**
  * A dialog that edits one row. The server validates the value as it changes (validatePath); onSave writes it and
  * the dialog closes when it succeeds. fields renders the inputs from the value, a setter and the problems by field;
- * below shows extra information from the validation, such as subnet placements.
+ * below shows extra information from the validation, such as subnet placements. body gives the value posted to
+ * validatePath, such as a whole document with the row put in, and select the problems by field and the message of
+ * the row taken from the answer; without them the row itself is posted and the answer is its validation.
  */
-export default function RowDialog<T, V extends Validation = Validation>(props: {
+export default function RowDialog<T, V = Validation>(props: {
   title: string
   initial: T
   validatePath: string
+  body?: (value: T) => unknown
+  select?: (result: V) => Validation
   saveLabel: string
   onSave: (value: T) => Promise<void>
   onCancel: () => void
@@ -21,9 +25,10 @@ export default function RowDialog<T, V extends Validation = Validation>(props: {
   const [value, setValue] = useState<T>(props.initial)
   const [saving, setSaving] = useState(false)
   const [error, setError] = useState<string | null>(null)
-  const validation = useValidation<V>(props.validatePath, value)
-  const problems = validation.result?.problems ?? {}
-  const message = validation.result?.message ?? ''
+  const validation = useValidation<V>(props.validatePath, props.body ? props.body(value) : value)
+  const selected = validation.result === null ? null : props.select ? props.select(validation.result) : validation.result as Validation
+  const problems = selected?.problems ?? {}
+  const message = selected?.message ?? ''
   const blocked = validation.pending || Object.keys(problems).length > 0 || message !== ''
 
   async function submit(event: FormEvent) {

web/useValidation.ts

@@ -5,7 +5,7 @@ import { request, type Validation } from './api.ts'
  * Asks the server to validate value at path (a .../validate endpoint) 250 ms after it last
  * changed. pending is true until the answer for the current value arrives; until then the previous result stays.
  */
-export function useValidation<T extends Validation>(path: string | null, value: unknown): { result: T | null; error: string; pending: boolean } {
+export function useValidation<T = Validation>(path: string | null, value: unknown): { result: T | null; error: string; pending: boolean } {
   const key = path === null ? '' : `${path}\n${JSON.stringify(value)}`
   const [answer, setAnswer] = useState<{ key: string; result: T | null; error: string } | null>(null)