openapi-spec-reader (#10)

### Summary of Changes:
1.  **Spec-Driven Enums**:
    - Updated `openapi_loader.ts` to collect all standalone enum schemas (e.g., `FetchRequestStatus`) into the `AppConfig.enums` map.
    - Implemented `mergeProperties` and `oneOf`/`anyOf` resolution in `openapi_loader.ts` to ensure complex schemas like `FetchRequest` (using `allOf`) and `source` (using `oneOf`) are correctly parsed.
2.  **Customizable Labeling**:
    - Added `enumOption` (template-based) and `enumLabels` (mapping-based) to the config and field types.
    - Implemented `resolveTemplate` in `utils/options.ts` to handle placeholders like `'{name} {number}'` or plain field names.
3.  **UI Integration**:
    - **`FormField.tsx`**: Updated relation and enum selects to use `getFieldOptions()` for correct key/value pairs and labels. Added value normalization to extract keys from API objects.
    - **`EnhancedTable.tsx`**: Updated `valueOptions` to use key/value pairs for `singleSelect` and updated `FieldRenderer` to show the human-readable label for enums.
    - **`FilterBar.tsx`**: Updated `extractOptions` to use spec-driven labels for enum filters.
    - **`ResourceView.tsx`**: Centralized filter matching logic into a `getDisplayString` helper, ensuring filter comparisons use the same templates as the UI labels.
4. **App Fixes**:
    - `FetchRequests.tsx` and `FetchRequestDetail.tsx` now derive status and format options from the OpenAPI spec via `useConfig()` instead of using hardcoded arrays.

Reviewed-on: #10
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>

react-openapi/components/fields/FormField.tsx

@@ -12,6 +12,7 @@ import {
   Divider,
 } from '@mui/material';
 import { ResourceField } from '../../types/config';
+import { getFieldOptions } from '../../utils/options';
 import ImageUploadField from './ImageUploadField';
 
 interface FormFieldProps {
@@ -73,40 +74,40 @@ export default function FormField({
   if (field.relation && relationDataMap[field.relation]) {
     const relationData = relationDataMap[field.relation].data;
     const isArrayRelation = field.type === 'array';
-    
-    // Determine how to display the related item
-    const getOptionLabel = (option: any) => {
-        if (!option) return "";
-        if (field.displayField && option[field.displayField]) return option[field.displayField];
-        // Standard naming fields
-        return option.name || option.title || option.label || option.id || JSON.stringify(option);
-    };
+    const options = getFieldOptions(field, relationData);
+    const keyField = field.enumOption?.key ?? 'id';
 
-    const getOptionValue = (option: any) => {
-        // Return the whole object to maintain identity
-        return option;
-    };
+    // Normalize value: API returns whole objects on GET, but form uses key strings
+    const normalizedValue = (() => {
+      if (isArrayRelation && Array.isArray(value)) {
+        return value.map((v: any) => (v != null && typeof v === 'object' ? String(v[keyField] ?? '') : String(v)));
+      }
+      if (value != null && typeof value === 'object') {
+        return String(value[keyField] ?? '');
+      }
+      return value ?? (isArrayRelation ? [] : "");
+    })();
 
     return (
       <FormControl fullWidth>
         <InputLabel shrink>{label}</InputLabel>
         <Select
           multiple={isArrayRelation}
-          value={value || (isArrayRelation ? [] : "")}
+          value={normalizedValue}
           label={label}
           displayEmpty
           onChange={(e) => onChange(e.target.value)}
           disabled={disabled}
           renderValue={(selected: any) => {
             if (isArrayRelation) {
-              return (selected as any[]).map(getOptionLabel).join(', ');
+              return (selected as string[]).map(k => options.find(o => o.key === k)?.value ?? k).join(', ');
             }
-            return getOptionLabel(selected);
+            return options.find(o => o.key === selected)?.value ?? selected;
           }}
         >
-          {relationData.map((option) => (
-            <MenuItem key={option.id || JSON.stringify(option)} value={getOptionValue(option)}>
-              {getOptionLabel(option)}
+          {options.map((opt) => (
+            <MenuItem key={opt.key} value={opt.key}>
+              {opt.value}
             </MenuItem>
           ))}
         </Select>
@@ -148,7 +149,8 @@ export default function FormField({
   }
 
   // 5. Enum Handling
-  if (field.type === 'enum' && field.options) {
+  if (field.type === 'enum') {
+    const options = getFieldOptions(field);
     return (
       <FormControl fullWidth>
         <InputLabel>{label}</InputLabel>
@@ -158,9 +160,9 @@ export default function FormField({
           onChange={(e) => onChange(e.target.value)}
           disabled={disabled}
         >
-          {field.options.map((opt: string) => (
-            <MenuItem key={opt} value={opt}>
-              {opt}
+          {options.map((opt) => (
+            <MenuItem key={opt.key} value={opt.key}>
+              {opt.value}
             </MenuItem>
           ))}
         </Select>