|
| 1 | +import { useState, useEffect } from 'react' |
| 2 | +import { useQuery } from '@tanstack/react-query' |
| 3 | +import { listAttributeDefinitions } from '../api/attributeDefinitions' |
| 4 | +import type { AttributeDefinition } from '../types/attributeDefinition' |
| 5 | + |
| 6 | +interface Props { |
| 7 | + /** Current attribute values from the user model. */ |
| 8 | + attributes: Record<string, string> |
| 9 | + /** Called with the updated full attribute map when user edits. */ |
| 10 | + onChange: (attributes: Record<string, string>) => void |
| 11 | +} |
| 12 | + |
| 13 | +export function UserAttributeEditor({ attributes, onChange }: Props) { |
| 14 | + const { data: defsData, isLoading } = useQuery({ |
| 15 | + queryKey: ['attribute-definitions', 'user'], |
| 16 | + queryFn: () => listAttributeDefinitions({ entity_type: 'user', page_size: 200 }), |
| 17 | + }) |
| 18 | + |
| 19 | + const definitions = defsData?.data ?? [] |
| 20 | + |
| 21 | + // Local state mirrors props; syncs upward via onChange |
| 22 | + const [values, setValues] = useState<Record<string, string>>(attributes) |
| 23 | + |
| 24 | + useEffect(() => { |
| 25 | + setValues(attributes) |
| 26 | + }, [attributes]) |
| 27 | + |
| 28 | + function handleChange(key: string, value: string) { |
| 29 | + const next = { ...values } |
| 30 | + if (value === '' || value === undefined) { |
| 31 | + delete next[key] |
| 32 | + } else { |
| 33 | + next[key] = value |
| 34 | + } |
| 35 | + setValues(next) |
| 36 | + onChange(next) |
| 37 | + } |
| 38 | + |
| 39 | + if (isLoading) { |
| 40 | + return <p className="text-sm text-gray-400">Loading attribute definitions...</p> |
| 41 | + } |
| 42 | + |
| 43 | + if (definitions.length === 0) { |
| 44 | + return ( |
| 45 | + <p className="text-sm text-gray-500"> |
| 46 | + No attribute definitions yet.{' '} |
| 47 | + <a href="/attributes/create" className="text-blue-600 hover:underline"> |
| 48 | + Create one |
| 49 | + </a>{' '} |
| 50 | + to start using user attributes. |
| 51 | + </p> |
| 52 | + ) |
| 53 | + } |
| 54 | + |
| 55 | + return ( |
| 56 | + <div className="space-y-3 max-w-lg"> |
| 57 | + {definitions.map((def) => ( |
| 58 | + <AttributeField |
| 59 | + key={def.id} |
| 60 | + definition={def} |
| 61 | + value={values[def.key] ?? ''} |
| 62 | + onChange={(v) => handleChange(def.key, v)} |
| 63 | + /> |
| 64 | + ))} |
| 65 | + {/* Show any orphaned attributes (set but no definition) */} |
| 66 | + {Object.keys(values) |
| 67 | + .filter((k) => !definitions.some((d) => d.key === k)) |
| 68 | + .map((k) => ( |
| 69 | + <div key={k} className="flex items-center gap-3"> |
| 70 | + <label className="block text-sm font-medium text-gray-400 w-40 truncate"> |
| 71 | + {k} <span className="text-xs">(no definition)</span> |
| 72 | + </label> |
| 73 | + <input |
| 74 | + type="text" |
| 75 | + value={values[k]} |
| 76 | + disabled |
| 77 | + className="flex-1 border border-gray-200 bg-gray-50 rounded-lg px-3 py-2 text-sm text-gray-400" |
| 78 | + /> |
| 79 | + <button |
| 80 | + type="button" |
| 81 | + onClick={() => handleChange(k, '')} |
| 82 | + className="text-xs text-red-500 hover:text-red-700" |
| 83 | + > |
| 84 | + Remove |
| 85 | + </button> |
| 86 | + </div> |
| 87 | + ))} |
| 88 | + </div> |
| 89 | + ) |
| 90 | +} |
| 91 | + |
| 92 | +function AttributeField({ |
| 93 | + definition, |
| 94 | + value, |
| 95 | + onChange, |
| 96 | +}: { |
| 97 | + definition: AttributeDefinition |
| 98 | + value: string |
| 99 | + onChange: (value: string) => void |
| 100 | +}) { |
| 101 | + const hasEnum = definition.allowed_values && definition.allowed_values.length > 0 |
| 102 | + |
| 103 | + return ( |
| 104 | + <div className="flex items-center gap-3"> |
| 105 | + <label className="block text-sm font-medium text-gray-700 w-40 truncate" title={definition.key}> |
| 106 | + {definition.display_name} |
| 107 | + {definition.description && ( |
| 108 | + <span className="block text-xs font-normal text-gray-400 truncate" title={definition.description}> |
| 109 | + {definition.description} |
| 110 | + </span> |
| 111 | + )} |
| 112 | + </label> |
| 113 | + |
| 114 | + {definition.value_type === 'boolean' ? ( |
| 115 | + <select |
| 116 | + value={value} |
| 117 | + onChange={(e) => onChange(e.target.value)} |
| 118 | + className="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" |
| 119 | + > |
| 120 | + <option value="">Not set</option> |
| 121 | + <option value="true">true</option> |
| 122 | + <option value="false">false</option> |
| 123 | + </select> |
| 124 | + ) : hasEnum ? ( |
| 125 | + <select |
| 126 | + value={value} |
| 127 | + onChange={(e) => onChange(e.target.value)} |
| 128 | + className="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" |
| 129 | + > |
| 130 | + <option value="">Not set</option> |
| 131 | + {definition.allowed_values!.map((v) => ( |
| 132 | + <option key={v} value={v}> |
| 133 | + {v} |
| 134 | + </option> |
| 135 | + ))} |
| 136 | + </select> |
| 137 | + ) : ( |
| 138 | + <input |
| 139 | + type={definition.value_type === 'integer' ? 'number' : 'text'} |
| 140 | + value={value} |
| 141 | + onChange={(e) => onChange(e.target.value)} |
| 142 | + placeholder={definition.default_value ?? `Enter ${definition.value_type}`} |
| 143 | + className="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" |
| 144 | + /> |
| 145 | + )} |
| 146 | + |
| 147 | + <span className="text-xs text-gray-400 font-mono w-16 text-right"> |
| 148 | + {'{'}user.{definition.key}{'}'} |
| 149 | + </span> |
| 150 | + </div> |
| 151 | + ) |
| 152 | +} |
0 commit comments