frontend/src/App.tsx - master - PashigorevAY/TestFastAPI

frontend/src/App.tsx
164 строки6 KB
Pashigorev
Material You design system
05 июл 2026, 22:21
05 июл 2026, 22:21b0f6bb0
import { useState, useEffect } from 'react';
import { Directories } from './components/Directories';
import { PeopleEditor } from './components/PeopleEditor';
import { StatusesEditor } from './components/StatusesEditor';
import { Catalogs } from './components/Catalogs';
import { TasksList } from './components/TasksList';
import { TaskEditor } from './components/TaskEditor';
import { PathsList } from './components/PathsList';
import { PathEditor } from './components/PathEditor';
import { Task, PathItem } from './types';
import { api } from './api';

type View = 'home' | 'directories' | 'people' | 'statuses' | 'tasks' | 'tasks_list' | 'task_editor' | 'paths' | 'path_editor';

function App() {
  const [view, setView] = useState<View>('home');
  const [currentCatalog, setCurrentCatalog] = useState<string>('');
  const [currentTaskId, setCurrentTaskId] = useState<string>('');
  const [currentPathName, setCurrentPathName] = useState<string>('');
  const [currentPathData, setCurrentPathData] = useState<PathItem | null>(null);

  const handleSelectPath = async (name: string) => {
    const data = await api.getPaths();
    setCurrentPathName(name);
    setCurrentPathData(data.paths[name]);
    setView('path_editor');
  };

  return (
    <div style={{ display: 'flex', height: '100vh' }}>
      <div style={{
        width: '300px',
        backgroundColor: 'var(--md-sys-color-surface-container-low)',
        color: 'var(--md-sys-color-on-surface)',
        padding: '24px 16px',
        boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
      }}>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          gap: '16px',
          marginBottom: '24px',
          padding: '0 8px',
        }}>
          <div style={{
            width: '40px',
            height: '40px',
            borderRadius: '12px',
            backgroundColor: 'var(--md-sys-color-primary-container)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'var(--md-sys-color-on-primary-container)',
            fontWeight: 700,
            fontSize: '18px',
          }}>Y</div>
          <h2 style={{ fontSize: '22px', fontWeight: 500, letterSpacing: '0' }}>YAML Editor</h2>
        </div>
        <nav style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
          <button
            onClick={() => setView('directories')}
            className={view === 'directories' || view === 'people' || view === 'statuses' ? 'filled-tonal' : 'text'}
            style={{
              textAlign: 'left',
              justifyContent: 'flex-start',
              width: '100%',
            }}
          >
            📋 Справочники
          </button>
          <button
            onClick={() => setView('tasks')}
            className={view === 'tasks' || view === 'tasks_list' || view === 'task_editor' ? 'filled-tonal' : 'text'}
            style={{
              textAlign: 'left',
              justifyContent: 'flex-start',
              width: '100%',
            }}
          >
            📝 Подзадачи
          </button>
          <button
            onClick={() => setView('paths')}
            className={view === 'paths' || view === 'path_editor' ? 'filled-tonal' : 'text'}
            style={{
              textAlign: 'left',
              justifyContent: 'flex-start',
              width: '100%',
            }}
          >
            🗺️ Пути принятия решений
          </button>
        </nav>
      </div>

      <div style={{ flex: 1, overflow: 'auto', backgroundColor: 'var(--md-sys-color-surface-container-low)' }}>
        {view === 'home' && (
          <div style={{ padding: '40px', textAlign: 'center' }}>
            <h1>Добро пожаловать в YAML Editor</h1>
            <p style={{ color: '#666', marginTop: '10px' }}>Выберите раздел в меню слева</p>
          </div>
        )}
        {view === 'directories' && (
          <Directories
            onSelectPeople={() => setView('people')}
            onSelectStatuses={() => setView('statuses')}
            onBack={() => setView('home')}
          />
        )}
        {view === 'people' && (
          <PeopleEditor onBack={() => setView('directories')} />
        )}
        {view === 'statuses' && (
          <StatusesEditor onBack={() => setView('directories')} />
        )}
        {view === 'tasks' && (
          <Catalogs
            onSelectCatalog={(name) => {
              setCurrentCatalog(name);
              setView('tasks_list');
            }}
            onBack={() => setView('home')}
          />
        )}
        {view === 'tasks_list' && (
          <TasksList
            catalogName={currentCatalog}
            onSelectTask={(taskId) => {
              setCurrentTaskId(taskId);
              setView('task_editor');
            }}
            onCreateTask={(task: Task) => {
              setCurrentTaskId(task.id);
              setView('task_editor');
            }}
            onBack={() => setView('tasks')}
          />
        )}
        {view === 'task_editor' && (
          <TaskEditor
            catalogName={currentCatalog}
            taskId={currentTaskId}
            onBack={() => setView('tasks_list')}
          />
        )}
        {view === 'paths' && (
          <PathsList
            onSelectPath={handleSelectPath}
            onBack={() => setView('home')}
          />
        )}
        {view === 'path_editor' && currentPathData && (
          <PathEditor
            pathName={currentPathName}
            initialData={currentPathData}
            onBack={() => setView('paths')}
          />
        )}
      </div>
    </div>
  );
}

export default App;