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

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

interface StatusesEditorProps {
  onBack: () => void;
}

export function StatusesEditor({ onBack }: StatusesEditorProps) {
  const [statuses, setStatuses] = useState<string[]>([]);
  const [originalStatuses, setOriginalStatuses] = useState<string[]>([]);
  const [editingIndex, setEditingIndex] = useState<number | null>(null);
  const [editingStatus, setEditingStatus] = useState<string>('');

  const hasChanges = JSON.stringify(statuses) !== JSON.stringify(originalStatuses);

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

  async function loadStatuses() {
    const data = await api.getStatuses();
    setStatuses(data.statuses);
    setOriginalStatuses(data.statuses);
  }

  async function handleSave() {
    await api.saveStatuses({ statuses });
    setOriginalStatuses([...statuses]);
  }

  function handleAdd() {
    setEditingStatus('');
    setEditingIndex(statuses.length);
  }

  function handleEdit(index: number) {
    setEditingStatus(statuses[index]);
    setEditingIndex(index);
  }

  function handleDelete(index: number) {
    if (confirm('Удалить статус?')) {
      const newStatuses = [...statuses];
      newStatuses.splice(index, 1);
      setStatuses(newStatuses);
    }
  }

  function handleSaveEdit() {
    if (!editingStatus.trim()) return;
    const newStatuses = [...statuses];
    if (editingIndex === statuses.length) {
      newStatuses.push(editingStatus.trim());
    } else {
      newStatuses[editingIndex] = editingStatus.trim();
    }
    setStatuses(newStatuses);
    setEditingIndex(null);
    setEditingStatus('');
  }

  function handleCancelEdit() {
    setEditingIndex(null);
    setEditingStatus('');
  }

  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>
          </tr>
        </thead>
        <tbody>
          {statuses.map((status, index) => (
            <tr key={index}>
              <td>{status}</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>

      {editingIndex !== null && (
        <div style={{ marginTop: '20px', padding: '20px', border: '1px solid #ddd', borderRadius: '4px' }}>
          <h3>{editingIndex === statuses.length ? 'Новый статус' : 'Редактирование'}</h3>
          <div style={{ marginTop: '10px' }}>
            <input
              placeholder="Статус"
              value={editingStatus}
              onChange={(e) => setEditingStatus(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>
  );
}