frontend/src/components/WorkspaceFormModal.tsx - master - dmitriysturov/workspaces_platform

frontend/src/components/WorkspaceFormModal.tsx
87 строк3 KB
dmitriysturov
vkr
04 июн 2026, 22:24
04 июн 2026, 22:24971dfdc
import { useState, type FormEvent } from 'react'
import type { Workspace, WorkspaceCreateRequest, WorkspaceUpdateRequest } from '../types'
import { friendlyError } from '../utils/format'
import { Button } from './ui/Button'
import { Modal } from './ui/Modal'

type WorkspaceFormModalProps = {
  mode: 'create' | 'edit'
  workspace?: Workspace
  isSubmitting: boolean
  onSubmit: (data: WorkspaceCreateRequest | WorkspaceUpdateRequest) => Promise<void>
  onClose: () => void
}

function validate(name: string, description: string) {
  const trimmedName = name.trim()
  const trimmedDescription = description.trim()

  if (!trimmedName) {
    return 'Введите название пространства.'
  }

  if (trimmedName.length < 2 || trimmedName.length > 100) {
    return 'Название должно быть от 2 до 100 символов.'
  }

  if (trimmedDescription.length > 1000) {
    return 'Описание должно быть не длиннее 1000 символов.'
  }

  return null
}

export function WorkspaceFormModal({ mode, workspace, isSubmitting, onSubmit, onClose }: WorkspaceFormModalProps) {
  const [name, setName] = useState(workspace?.name ?? '')
  const [description, setDescription] = useState(workspace?.description ?? '')
  const [error, setError] = useState<string | null>(null)

  const title = mode === 'create' ? 'Создать пространство' : 'Изменить пространство'

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()
    const validationError = validate(name, description)

    if (validationError) {
      setError(validationError)
      return
    }

    try {
      setError(null)
      await onSubmit({
        name: name.trim(),
        description: description.trim() || null,
      })
    } catch (err) {
      setError(friendlyError(err, 'Не удалось сохранить пространство.'))
    }
  }

  return (
    <Modal title={title} description="Название будет видно в списке ваших рабочих пространств." onClose={onClose}>
      <form className="form modal-form" onSubmit={handleSubmit}>
        {error && <div className="form-error">{error}</div>}

        <label>
          Название
          <input value={name} onChange={(event) => setName(event.target.value)} autoFocus maxLength={100} />
        </label>

        <label>
          Описание
          <textarea value={description} onChange={(event) => setDescription(event.target.value)} maxLength={1000} />
        </label>

        <div className="modal-actions">
          <Button type="button" variant="secondary" onClick={onClose}>
            Отмена
          </Button>
          <Button type="submit" isLoading={isSubmitting}>
            {mode === 'create' ? 'Создать' : 'Сохранить'}
          </Button>
        </div>
      </form>
    </Modal>
  )
}