frontend/src/components/PersonSelect.tsx - master - PashigorevAY/TestFastAPI

frontend/src/components/PersonSelect.tsx
87 строк3 KB
Pashigorev
Initial commit
05 июл 2026, 21:43
05 июл 2026, 21:4319770a6
import { useState, useEffect } from 'react';
import { Person } from '../types';
import { api } from '../api';

interface PersonSelectProps {
  value: string;
  onChange: (value: string) => void;
  label: string;
}

export function PersonSelect({ value, onChange, label }: PersonSelectProps) {
  const [people, setPeople] = useState<Person[]>([]);
  const [search, setSearch] = useState('');
  const [showDropdown, setShowDropdown] = useState(false);

  useEffect(() => {
    loadPeople();
  }, []);

  async function loadPeople() {
    const data = await api.getPeople();
    setPeople(data.people);
  }

  const filteredPeople = people.filter((p) =>
    p.name.toLowerCase().includes(search.toLowerCase()) ||
    p.code.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div style={{ position: 'relative' }}>
      <label style={{ display: 'block', marginBottom: '4px' }}>{label}</label>
      <input
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        onFocus={() => setShowDropdown(true)}
        placeholder="Введите код или имя"
        style={{ width: '100%', padding: '8px' }}
      />
      {showDropdown && (
        <div style={{
          position: 'absolute',
          top: '100%',
          left: 0,
          right: 0,
          background: 'white',
          border: '1px solid #ddd',
          borderRadius: '4px',
          boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
          zIndex: 100,
          maxHeight: '200px',
          overflowY: 'auto',
        }}>
          <div style={{ padding: '8px' }}>
            <input
              type="text"
              placeholder="Поиск..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              style={{ width: '100%', padding: '6px' }}
            />
          </div>
          {filteredPeople.map((person) => (
            <div
              key={person.code}
              onClick={() => {
                onChange(person.code);
                setShowDropdown(false);
              }}
              style={{
                padding: '8px 12px',
                cursor: 'pointer',
                borderBottom: '1px solid #eee',
              }}
              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#f5f5f5'}
              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
            >
              <div style={{ fontWeight: '500' }}>{person.name}</div>
              <div style={{ color: '#666', fontSize: '12px' }}>{person.code} • {person.position}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}