Generating Select Components
Generate Select Components
Provide the entity name in kebab-case (e.g., banco, centro-custo, sindicato) and controller information. I'll generate both files with proper infinite scroll, search, and missing options handling.
Example:
Entity: sindicato
Controller: getSindicatosController from @/pages/pessoal/cadastro/tabs/sindicato/sindicato.controller
Endpoint: /api/pessoal/sindicatos/
-
Create Model (
src/models/selects/select-<entity>.ts)- Import specific controller
- Set up pagination, loading, search states
- Implement
addMissedOptions,getOptions,getOptionsNewPage - Return standard interface:
selectLoading,addMissedOptions,options,getOptions,getOptionsNewPage,queryStringOptionsParams
-
Create Component (
src/components/selects/select-<entity>.tsx)- Use
useModel('selects.<entity>') - Implement search with 700ms debounce
- Add infinite scroll for both default and searched options
- Handle missing options population on mount
- Support
multiple,labelInValue,isInstanceForColumnFilterprops
- Use
Progress:
- Generate model file
- Generate component file
- Replace placeholders with entity-specific values
- Verify import paths and controller names
Example 1: Simple entity with label field
Input: Entity sindicato, controller getSindicatosController, endpoint /api/pessoal/sindicatos/
Output:
- Model uses
order_by: 'label' - Component maps
r.labelfor options - useModel:
'selects.sindicato'
Example 2: Entity with composite label
Input: Entity colaborador, controller getColaboradoresEquipeController, composite label
Output:
- Model uses
order_by: 'codigo' - Component maps
${r.codigo} - ${r.nome}for options - Same standard interface
Example 3: Entity with external dependency Input: Entity with version dependency Output:
- Model accepts parameter:
export default (versaoRelatorioId?: number) - Component uses
useUpdateEffectto reset on dependency change
- Each entity gets its own model - No shared generic models
- Standard return interface - Always return the same 6 fields from model
- Consistent naming - kebab-case for files, camelCase for useModel
- Proper debouncing - 700ms for search to avoid API spam
- Missing options handling - Auto-populate selected values not in current page
- Infinite scroll - Both for default options and search results
- Column filter support - Special styling when
isInstanceForColumnFilteris true
- Don't create generic models - each entity needs its own
- Don't forget to replace ALL placeholders (controller, endpoint, useModel key)
- Don't mix up the order_by field between model and component
- Don't skip the missing options logic - it's required for pre-filled values
- Don't hardcode pagination - always check
total_pagesfor scroll - Don't forget debounce import from lodash
Model Template
TypeScript// Always imports: defaultPaginationValues, useLoading, getUpdateSelectOptions, message // Entity-specific: controller import // Standard state: options, queryStringOptionsParams, loading // Standard methods: addMissedOptions, getOptions, getOptionsNewPage // Standard return: 6 fields
Component Template
TypeScript// Always imports: React hooks, Ant Design Select, lodash debounce // Entity-specific: useModel('selects.<entity>') // Features: search with debounce, infinite scroll, missing options, column filter // Props: value, onChange, multiple, allowClear, style, placeholder, disabled, labelInValue, isInstanceForColumnFilter
| Placeholder | Replace With |
|---|---|
<entidade> | Entity name (kebab-case) |
getNomeEntidadeController | Actual controller function name |
<caminho-do-controller> | Controller import path |
'ENDPOINT_AQUI' | API endpoint string |
r.label | Field mapping for option labels |
order_by: 'label' | Appropriate sort field |
Provide entity name, controller details, and any special requirements to generate both files.