Show display value instead of raw value in dropdown/radiobutton

frontend/src/components/DetailView/Context/DetailContext.tsx

@@ -10,7 +10,7 @@ export type DetailContextType<T> = {
   setEditData: (editData: T) => void
   textField: (field: keyof T, type?: React.HTMLInputTypeAttribute) => JSX.Element
   dropdown: (field: keyof T, options: Array<DropdownOption | string>, name: string) => JSX.Element
-  radioSelection: (field: keyof T, options: string[], name: string) => JSX.Element
+  radioSelection: (field: keyof T, options: Array<DropdownOption | string>, name: string) => JSX.Element
   validator: (editData: T, field: keyof T) => string | null
 }
 

frontend/src/components/DetailView/DetailView.tsx

@@ -83,7 +83,7 @@ export const DetailView = <T extends object>({
     <DropdownSelector field={field} options={options} name={name} />
   )
 
-  const radioSelection = (field: keyof T, options: string[], name: string) => (
+  const radioSelection = (field: keyof T, options: Array<DropdownOption | string>, name: string) => (
     <RadioSelector field={field} options={options} name={name} />
   )
 

frontend/src/components/DetailView/common/FormComponents.tsx

@@ -107,13 +107,22 @@ export const Grouped = ({ title, children }: { title?: string; children: ReactNo
   )
 }
 
-export const DataValue = <T extends object>({ field, EditElement }: { field: keyof T; EditElement: ReactNode }) => {
+export const DataValue = <T extends object>({
+  field,
+  EditElement,
+  displayValue,
+}: {
+  field: keyof T
+  EditElement: ReactNode
+  displayValue?: ReactNode | null
+}) => {
   const { data, mode } = useDetailContext<T>()
   if (mode === 'edit') {
     return EditElement
   }
-  return data[field]
+  return displayValue ?? data[field]
 }
+
 export const EditableTextField = <T extends object>({
   field,
   type,
@@ -151,9 +160,7 @@ export const DropdownSelector = <T extends object>({
   name: string
   field: keyof T
 }) => {
-  const { setEditData, editData } = useDetailContext<T>()
-  const getValue = (item: DropdownOption | string) => (typeof item === 'string' ? item : item.value)
-  const getDisplay = (item: DropdownOption | string) => (typeof item === 'string' ? item : item.display)
+  const { data, setEditData, editData } = useDetailContext<T>()
   const editingComponent = (
     <FormControl size="small">
       <InputLabel id={`${name}-multiselect-label`}>{name}</InputLabel>
@@ -175,7 +182,9 @@ export const DropdownSelector = <T extends object>({
     </FormControl>
   )
 
-  return <DataValue<T> field={field} EditElement={editingComponent} />
+  const option = options.find(option => getValue(option) === data[field])
+  const displayValue = option ? getDisplay(option) : null
+  return <DataValue<T> field={field} EditElement={editingComponent} displayValue={displayValue} />
 }
 
 export const FormTextField = <T extends string>({
@@ -194,16 +203,19 @@ export const FormTextField = <T extends string>({
   <TextField {...register(fieldName, { required: required })} error={!!errors[fieldName]} {...{ label, required }} />
 )
 
+const getValue = (item: DropdownOption | string) => (typeof item === 'string' ? item : item.value)
+const getDisplay = (item: DropdownOption | string) => (typeof item === 'string' ? item : item.display)
+
 export const RadioSelector = <T extends object>({
   options,
   name,
   field,
 }: {
-  options: string[]
+  options: Array<DropdownOption | string>
   name: string
   field: keyof T
 }) => {
-  const { setEditData, editData } = useDetailContext<T>()
+  const { data, setEditData, editData } = useDetailContext<T>()
   const editingComponent = (
     <FormControl>
       <RadioGroup
@@ -216,13 +228,20 @@ export const RadioSelector = <T extends object>({
         sx={{ display: 'flex', flexDirection: 'row' }}
       >
         {options.map(option => (
-          <FormControlLabel key={option} value={option} control={<Radio />} label={option} />
+          <FormControlLabel
+            key={getValue(option)}
+            value={getValue(option)}
+            control={<Radio />}
+            label={getDisplay(option)}
+          />
         ))}
       </RadioGroup>
     </FormControl>
   )
 
-  return <DataValue<T> field={field} EditElement={editingComponent} />
+  const option = options.find(option => getValue(option) === data[field])
+  const displayValue = option ? getDisplay(option) : null
+  return <DataValue<T> field={field} EditElement={editingComponent} displayValue={displayValue} />
 }
 
 /* 

frontend/src/components/Locality/Tabs/LocalityTab.tsx

@@ -7,7 +7,10 @@ import { useForm } from 'react-hook-form'
 import { EditableTable } from '@/components/DetailView/common/EditableTable'
 
 export const LocalityTab = () => {
-  const { textField, dropdown } = useDetailContext<LocalityDetails>()
+  const { data, editData, textField, radioSelection, dropdown, mode } = useDetailContext<LocalityDetails>()
+
+  const approximateCoordinatesOptions = ['', { display: 'No', value: '0' }, { display: 'Yes', value: '1' }]
+  const generalLocalityOptions = ['', { display: 'No', value: 'n' }, { display: 'Yes', value: 'y' }]
 
   const siteAreaOptions = [
     '',
@@ -18,12 +21,23 @@ export const LocalityTab = () => {
     { display: '>1000 m2', value: '>1000m2' },
   ]
 
-  const approximateCoordinatesOptions = ['', { display: 'No', value: '0' }, { display: 'Yes', value: '1' }]
-  const generalLocalityOptions = ['', { display: 'No', value: 'n' }, { display: 'Yes', value: 'y' }]
+  const getStatusText = () => (data.loc_status ? <>Private</> : <>Public</>)
 
   const info = [
     ['Name', textField('loc_name')],
-    ['Status', textField('loc_status')],
+    [
+      'Visibility status',
+      mode === 'edit'
+        ? radioSelection(
+            'loc_status',
+            [
+              { value: 'false', display: 'Public' },
+              { value: 'true', display: 'Private' },
+            ],
+            'Status'
+          )
+        : getStatusText(),
+    ],
   ]
   const country = [
     ['Country', textField('country')],
@@ -42,7 +56,6 @@ export const LocalityTab = () => {
     ['Altitude (m)', textField('altitude')],
   ]
 
-  const { editData, mode } = useDetailContext<LocalityDetails>()
   const {
     register,
     formState: { errors },