Generating Select Components

Provide the entity name in kebab-case (e.g., banco, centro-custo, sindicato) and I'll generate:

1. src/models/selects/select-<entity>.ts — dedicated model with states, loading, pagination, search, infinite scroll
2. src/components/selects/select-<entity>.tsx — Select component with search, infinite scroll, multiple support

Example:

Entity: sindicato
Controller: getSindicatosController
Endpoint: /api/pessoal/sindicatos/

Step 1: Entity Identification

• Check attachments for typings.d.ts or entity definitions
• Look for entity name in user's current file/selection
• If unclear, ask for: entity name (kebab-case), controller function, API endpoint, label mapping

Step 2: Generate Model (src/models/selects/select-<entity>.ts)

TypeScript
import { defaultPaginationValues } from '@/constants/pagination';
import useLoading from '@/hooks/use-loading';
import { getUpdateSelectOptions } from '@/utils/get-update-select-options';
import { message } from 'antd';
import { useState } from 'react';
import { get<Entity>Controller } from '<controller-path>';

export default () => {
  const [options, setOptions] = useState<App.Pagination<EntityType>>(
    defaultPaginationValues,
  );
  const [queryStringOptionsParams, setQueryStringOptionsParams] =
    useState<App.QueryStringParams>({
      page: 1,
      page_size: 10,
      order_by: 'label', // or appropriate field
    });

  const { loading, startLoading, stopLoading } = useLoading();

  const addMissedOptions = async (ids: number[]) => {
    try {
      startLoading();
      const params: App.QueryStringParams = {
        ...queryStringOptionsParams,
        page: 1,
        page_size: 1000,
        id: ids,
      };
      const response = await get<Entity>Controller(params);
      const { data } = response;

      setOptions((previousData) => {
        const results: any[] = getUpdateSelectOptions(
          data.results,
          previousData.results,
        );

        return {
          ...previousData,
          results,
        };
      });
    } catch (error) {
      message.error('Não foi possível obter os dados');
    } finally {
      stopLoading();
    }
  };

  const getOptions = async (
    ...args: Parameters<typeof get<Entity>Controller>
  ) => {
    try {
      startLoading();
      const response = await get<Entity>Controller(...args);
      const { data } = response;

      setOptions((previousData) => {
        const results: any[] = getUpdateSelectOptions(
          data.results,
          previousData.results,
        );

        return {
          ...data,
          results,
        };
      });
    } catch (error) {
      message.error('Não foi possível obter os dados');
      return Promise.reject();
    } finally {
      stopLoading();
    }
  };

  const getOptionsNewPage = async () => {
    try {
      startLoading();
      if (!(queryStringOptionsParams.page + 1 <= options.total_pages)) return;
      const params: App.QueryStringParams = {
        ...queryStringOptionsParams,
        page: queryStringOptionsParams.page + 1,
        page_size: queryStringOptionsParams.page_size,
      };
      const response = await get<Entity>Controller(params);
      const { data } = response;

      setOptions((previousData) => {
        const results: any[] = getUpdateSelectOptions(
          data.results,
          previousData.results,
        );

        return {
          ...data,
          results,
        };
      });
      setQueryStringOptionsParams(params);
    } catch (error) {
      message.error('Não foi possível obter os dados');
      return Promise.reject();
    } finally {
      stopLoading();
    }
  };

  return {
    selectLoading: loading,
    addMissedOptions,
    options,
    getOptions,
    getOptionsNewPage,
    queryStringOptionsParams,
  };
};

Step 3: Generate Component (src/components/selects/select-<entity>.tsx)

TypeScript
import { defaultPaginationValues } from '@/constants/pagination';
import useLoading from '@/hooks/use-loading';
import { getSelectController } from '@/services/select.controller';
import { getUpdateSelectOptions } from '@/utils/get-update-select-options';
import { useModel } from '@umijs/max';
import { Select, SelectProps } from 'antd';
import { message } from 'antd/lib';
import { debounce } from 'lodash';
import { useEffect, useMemo, useState } from 'react';

interface Props {
  value?: any;
  onChange?: (val: any, option: any) => void;
  multiple?: boolean;
  allowClear?: boolean;
  style?: any;
  placeholder?: string;
  disabled?: boolean;
  labelInValue?: boolean;
  isInstanceForColumnFilter?: boolean;
}

export default (props: Props) => {
  const [needFillMissedOptions, setNeedFillMissedOptions] = useState<boolean>(true);
  const [searchValue, setSearchValue] = useState<string>();
  const [isSearching, setIsSearching] = useState<boolean>(false);
  const [searchedOptions, setSearchedOptions] = useState<App.Pagination<EntityType>>(
    defaultPaginationValues,
  );

  const {
    selectLoading,
    options,
    getOptions,
    getOptionsNewPage,
    queryStringOptionsParams,
    addMissedOptions,
  } = useModel('selects.select-<entity>');

  const { loading, startLoading, stopLoading } = useLoading();

  // Search functionality with debounce
  const debouncedSearch = useMemo(
    () =>
      debounce((value: string) => {
        if (value) {
          setIsSearching(true);
          getSearchedOptions(true, '<API_ENDPOINT>', {
            page: 1,
            page_size: 10,
            order_by: 'label',
            search: value,
          });
        } else {
          setIsSearching(false);
        }
      }, 700),
    [],
  );

  // Infinite scroll handlers
  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
    const target = e.target as HTMLDivElement;
    if (target.scrollTop + target.clientHeight >= target.scrollHeight) {
      if (queryStringOptionsParams.page + 1 <= options.total_pages) {
        getOptionsNewPage();
      }
    }
  };

  // Fill missing options for pre-selected values
  useEffect(() => {
    if ((props?.multiple ? props.value?.length > 0 : props.value) && needFillMissedOptions) {
      const optionsIds = new Set(options.results?.map((o) => o.id));
      const values = Array.isArray(props.value) ? props.value : [props.value];
      
      if (values.some((v) => !optionsIds.has(v))) {
        setNeedFillMissedOptions(false);
        addMissedOptions(values);
      }
    }
  }, [props.value, options.results]);

  const optionsMemo = useMemo(() => {
    return (options.results || []).map((r: any) => ({
      label: r.label, // or composite: `${r.codigo} - ${r.nome}`
      value: r.id,
    }));
  }, [options.results]);

  return (
    <Select
      searchValue={searchValue}
      onSearch={(value) => {
        setSearchValue(value);
        debouncedSearch(value);
      }}
      options={isSearching ? searchedOptions : optionsMemo}
      placeholder={props.placeholder || 'Selecione'}
      style={{ width: '100%', ...props.style }}
      showSearch
      optionFilterProp="label"
      onPopupScroll={handleScroll}
      loading={selectLoading || loading}
      value={props.value}
      onChange={props.onChange}
      onFocus={() => {
        if (!isSearching && options.total_pages === 0) {
          getOptions(queryStringOptionsParams);
        }
      }}
      mode={props.multiple ? 'multiple' : undefined}
      allowClear={props.allowClear}
      maxTagCount={3}
      disabled={props.disabled}
      labelInValue={props.labelInValue}
    />
  );
};

Step 4: Cleanup Entity Model (CRITICAL)

After creating the select model, MUST remove from the entity model (src/pages/.../model.ts):

Progress:

• Remove *Options state (e.g., contasContabeisOptions)
• Remove queryString*OptionsParams state
• Remove get*Options, get*OptionsNewPage, addMissed*Options functions
• Remove getUpdateSelectOptions import (if only used for select)
• Remove options updates in CRUD operations (create, update, delete)
• Remove select-related exports from model return