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

frontend/src/components/PeopleEditor.tsx
146 строк5 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 PeopleEditorProps {
  onBack: () => void;
}

export function PeopleEditor({ onBack }: PeopleEditorProps) {
  const [people, setPeople] = useState<Person[]>([]);
  const [originalPeople, setOriginalPeople] = useState<Person[]>([]);
  const [editingIndex, setEditingIndex] = useState<number | null>(null);
  const [editingPerson, setEditingPerson] = useState<Person | null>(null);

  const hasChanges = JSON.stringify(people) !== JSON.stringify(originalPeople);

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

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

  async function handleSave() {
    await api.savePeople({ people });
    setOriginalPeople([...people]);
  }

  function handleAdd() {
    const newPerson: Person = { code: '', name: '', position: '' };
    setEditingPerson(newPerson);
    setEditingIndex(people.length);
  }

  function handleEdit(index: number) {
    setEditingPerson({ ...people[index] });
    setEditingIndex(index);
  }

  function handleDelete(index: number) {
    if (confirm('Удалить запись?')) {
      const newPeople = [...people];
      newPeople.splice(index, 1);
      setPeople(newPeople);
    }
  }

  function handleSaveEdit() {
    if (!editingPerson) return;
    const newPeople = [...people];
    if (editingIndex === people.length) {
      newPeople.push(editingPerson);
    } else {
      newPeople[editingIndex] = editingPerson;
    }
    setPeople(newPeople);
    setEditingIndex(null);
    setEditingPerson(null);
  }

  function handleCancelEdit() {
    setEditingIndex(null);
    setEditingPerson(null);
  }

  return (
    <div style={{ padding: '20px' }}>
      <div style={{ marginBottom: '20px', display: 'flex', gap: '10px', alignItems: 'center' }}>
        <button onClick={onBack} style={{ backgroundColor: '#e0e0e0' }}>← Назад</button>
        <h2 style={{ flex: 1 }}>Люди</h2>
        <button onClick={handleAdd} style={{ backgroundColor: '#4CAF50', color: 'white' }}>Добавить</button>
        <button
          onClick={handleSave}
          disabled={!hasChanges}
          style={{ backgroundColor: hasChanges ? '#2196F3' : '#e0e0e0', color: 'white' }}
        >
          Сохранить
        </button>
      </div>

      <table>
        <thead>
          <tr>
            <th>Код</th>
            <th>Имя</th>
            <th>Должность</th>
            <th>Действия</th>
          </tr>
        </thead>
        <tbody>
          {people.map((person, index) => (
            <tr key={index}>
              <td>{person.code}</td>
              <td>{person.name}</td>
              <td>{person.position}</td>
              <td>
                <button
                  onClick={() => handleEdit(index)}
                  style={{ backgroundColor: '#FFC107', marginRight: '8px' }}
                >
                  Редактировать
                </button>
                <button
                  onClick={() => handleDelete(index)}
                  style={{ backgroundColor: '#F44336', color: 'white' }}
                >
                  Удалить
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      {editingPerson && (
        <div style={{ marginTop: '20px', padding: '20px', border: '1px solid #ddd', borderRadius: '4px' }}>
          <h3>{editingIndex === people.length ? 'Новая запись' : 'Редактирование'}</h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginTop: '10px' }}>
            <input
              placeholder="Код"
              value={editingPerson.code}
              onChange={(e) => setEditingPerson({ ...editingPerson, code: e.target.value })}
            />
            <input
              placeholder="Имя"
              value={editingPerson.name}
              onChange={(e) => setEditingPerson({ ...editingPerson, name: e.target.value })}
            />
            <input
              placeholder="Должность"
              value={editingPerson.position}
              onChange={(e) => setEditingPerson({ ...editingPerson, position: e.target.value })}
            />
          </div>
          <div style={{ marginTop: '10px', display: 'flex', gap: '10px' }}>
            <button onClick={handleSaveEdit} style={{ backgroundColor: '#4CAF50', color: 'white' }}>Сохранить</button>
            <button onClick={handleCancelEdit} style={{ backgroundColor: '#e0e0e0' }}>Отмена</button>
          </div>
        </div>
      )}
    </div>
  );
}