MetaEntitiesSelect

A component for selecting Tracker meta-entities — projects, portfolios, goals, reports — based on a suggest. Displays each entity with an icon and name, supports asynchronous loading, loading state, error display, and a clear button.

Basic usage

import {MetaEntitiesSelect} from '@weavix/tracker-components';

<MetaEntitiesSelect
    getItems={(text) => fetchProjects(text)}
    onChange={(entity) => console.log('selected', entity)}
/>;

Usage with Tracker API

import React, {useState} from 'react';
import {MetaEntitiesSelect} from '@weavix/tracker-components';
import type {MetaEntityV2} from '@weavix/tracker-api-types';

interface Props {
    trackerApi: TrackerApi;
    onChange: (entity: MetaEntityV2) => void;
}

export const ProjectSelect: React.FC<Props> = ({trackerApi, onChange}) => {
    const [error, setError] = useState<string | undefined>(undefined);

    const getItems = async (input: string): Promise<MetaEntityV2[]> => {
        setError(undefined);
        try {
            const result = await trackerApi.v3.post['/entities/{entityType}/_search']({
                pathParams: {entityType: 'project'},
                queryParams: {fields: ['summary'], page: 1, perPage: 50},
                bodyParams: {filter: {}, filterTypes: ['ALL'], input},
            });
            return result.data;
        } catch (err) {
            setError(err instanceof Error ? err.message : 'Failed to load projects');
            return [];
        }
    };

    return (
        <MetaEntitiesSelect
            getItems={getItems}
            onChange={onChange}
            error={error}
            placeholder="Select project"
        />
    );
};

Entity types: the entityType parameter accepts values 'portfolio' | 'project' | 'report' | 'goal'.

Main props

Prop	Type	Default	Description
`getItems`	`(text: string) => MetaEntityV2[] \| Promise<MetaEntityV2[]>`	—	Function for loading items. Called on mount and on every text change
`onChange`	`(entity: MetaEntityV2) => void`	—	Callback when an entity is selected
`onTextChange`	`(text: string) => void`	—	Callback when the input field text changes
`text`	`string`	—	Current input field value (controlled mode)
`placeholder`	`string`	`'Select project'`	Placeholder for an empty field
`error`	`string	boolean`	—	Error message or error flag
`hasClear`	`boolean`	`true`	Show clear button (×)
`className`	`string`	—	Additional CSS class for the root element
`itemClassName`	`string`	—	Additional CSS class for each list item

Was the article helpful?

IssueTypeIcon

MetaEntityIcon