From 90cebb0e0f0f54e1f1afa130bcde07740c31cda8 Mon Sep 17 00:00:00 2001
From: admin <admin@queo.ru>
Date: Fri, 1 May 2026 13:48:42 +0300
Subject: [PATCH] fix: project create UX + project picker in DocumentEdit

- Projects.tsx: pre-validate empty name, show fieldErrors on Field
  (root cause of '400 validation_error' was empty name silently rejected)
- ProjectPicker component for DocumentEdit; selecting a project autofills
  default client when no client is yet set

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/web/src/components/ProjectPicker.tsx | 33 +++++++++++++++++++++++
 apps/web/src/pages/DocumentEdit.tsx       | 14 ++++++++++
 apps/web/src/pages/Projects.tsx           | 22 ++++++++++++---
 3 files changed, 66 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/src/components/ProjectPicker.tsx

diff --git a/apps/web/src/components/ProjectPicker.tsx b/apps/web/src/components/ProjectPicker.tsx
new file mode 100644
index 0000000..adf2883
--- /dev/null
+++ b/apps/web/src/components/ProjectPicker.tsx
@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+import { api, type ProjectSummary } from '../api.js';
+
+export function ProjectPicker({
+  value,
+  onChange,
+}: {
+  value: string | null;
+  onChange: (id: string | null, project?: ProjectSummary | null) => void;
+}) {
+  const [projects, setProjects] = useState<ProjectSummary[]>([]);
+  useEffect(() => {
+    api.get<{ items: ProjectSummary[] }>('/api/projects?status=active&limit=200')
+      .then((r) => setProjects(r.items))
+      .catch(() => setProjects([]));
+  }, []);
+  return (
+    <select
+      className="field__input"
+      value={value ?? ''}
+      onChange={(e) => {
+        const id = e.target.value || null;
+        const p = id ? projects.find((x) => x.id === id) ?? null : null;
+        onChange(id, p);
+      }}
+    >
+      <option value="">— без проекта —</option>
+      {projects.map((p) => (
+        <option key={p.id} value={p.id}>{p.name}</option>
+      ))}
+    </select>
+  );
+}
diff --git a/apps/web/src/pages/DocumentEdit.tsx b/apps/web/src/pages/DocumentEdit.tsx
index c1dfc4a..e23fb23 100644
--- a/apps/web/src/pages/DocumentEdit.tsx
+++ b/apps/web/src/pages/DocumentEdit.tsx
@@ -4,6 +4,7 @@ import { api, ApiError, type Block, type DocBody, type DocStatus, type DocType,
 import { BlocksEditor } from '../components/BlocksEditor.js';
 import { ClientPicker } from '../components/ClientPicker.js';
 import { LinesEditor, type LineDraft } from '../components/LinesEditor.js';
+import { ProjectPicker } from '../components/ProjectPicker.js';
 import { Button, Field, Select } from '../components/ui.js';
 import { emptyRich } from '../lib/richtext.js';
 
@@ -257,6 +258,19 @@ export function DocumentEditPage() {
           value={issuedAt}
           onChange={(e) => setIssuedAt(e.target.value)}
         />
+        <label className="field">
+          <span className="field__label">Проект</span>
+          <ProjectPicker
+            value={projectId}
+            onChange={(id, project) => {
+              setProjectId(id);
+              // При смене проекта подставим default-клиента, если у документа клиент ещё не задан
+              if (project && project.defaultClientId && !clientId) {
+                setClientId(project.defaultClientId);
+              }
+            }}
+          />
+        </label>
         <label className="field">
           <span className="field__label">Клиент</span>
           <ClientPicker value={clientId} onChange={setClientId} />
diff --git a/apps/web/src/pages/Projects.tsx b/apps/web/src/pages/Projects.tsx
index d24ae9a..79254b7 100644
--- a/apps/web/src/pages/Projects.tsx
+++ b/apps/web/src/pages/Projects.tsx
@@ -15,6 +15,7 @@ export function ProjectsPage() {
   const [q, setQ] = useState('');
   const [creating, setCreating] = useState<{ name: string } | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
   const navigate = useNavigate();
 
   async function load() {
@@ -34,9 +35,14 @@ export function ProjectsPage() {
 
   async function create() {
     if (!creating) return;
+    if (!creating.name.trim()) {
+      setFieldErrors({ name: 'обязательное поле' });
+      return;
+    }
+    setFieldErrors({});
     try {
       const p = await api.post<ProjectSummary>('/api/projects', {
-        name: creating.name,
+        name: creating.name.trim(),
         status: 'active',
         defaultClientId: null,
         defaultTemplateId: null,
@@ -46,7 +52,13 @@ export function ProjectsPage() {
       setCreating(null);
       navigate(`/projects/${p.id}`);
     } catch (e) {
-      setError(e instanceof ApiError ? e.prettyMessage() : String(e));
+      if (e instanceof ApiError) {
+        const fe = e.fieldErrors();
+        setFieldErrors(fe);
+        setError(Object.keys(fe).length ? 'Проверьте подсвеченные поля.' : e.prettyMessage());
+      } else {
+        setError(String(e));
+      }
     }
   }
 
@@ -144,8 +156,12 @@ export function ProjectsPage() {
           <Field
             label="Название"
             value={creating.name}
-            onChange={(e) => setCreating({ name: e.target.value })}
+            onChange={(e) => {
+              setCreating({ name: e.target.value });
+              if (fieldErrors.name) setFieldErrors((fe) => { const n = { ...fe }; delete n.name; return n; });
+            }}
             placeholder="напр. Свадьба Ивановых, июнь 2026"
+            error={fieldErrors.name}
           />
         ) : null}
       </Modal>