Projektarten: Art beim Zuweisen und nach Repo-Anlage

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/components/TicketProjects.jsx

@@ -4,6 +4,8 @@ import { useWebsiteProjects } from '../hooks/useWebsiteProjects'
 import { createProjectFromTemplate, importNewRepos } from '../lib/projectAdminApi'
 import { isOutsideOrg, assignSummary } from '../lib/projectAssign'
 import AssignedProjectCard from './AssignedProjectCard'
+import { fetchServices, completeAssignment } from '../lib/projectKindsApi'
+import { kindLabelFor } from '../lib/assignFlow'
 
 function slugify(v) {
   return String(v || '').toLowerCase().replace(/[^a-z0-9-]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 100)
@@ -35,6 +37,12 @@ export default function TicketProjects({ ticket }) {
   const [importing, setImporting] = useState(false)
   const [importHint, setImportHint] = useState('')
   const [assignResult, setAssignResult] = useState(null)
+  const [kinds, setKinds] = useState([])
+  const [kindDialog, setKindDialog] = useState(false)
+
+  useEffect(() => {
+    fetchServices().then((s) => setKinds(s.kinds || [])).catch(() => {})
+  }, [])
 
   const load = useCallback(async () => {
     if (!ticket?.$id) return
@@ -73,7 +81,17 @@ export default function TicketProjects({ ticket }) {
     }
   }
 
-  const assign = async () => {
+  const assign = () => {
+    const project = available.find((p) => p.$id === selected)
+    // Ohne Art erst "Was ist das?" fragen
+    if (project && !project.kind) {
+      setKindDialog(true)
+      return
+    }
+    assignPlain()
+  }
+
+  const assignPlain = async () => {
     setBusy(true)
     setError('')
     setAssignResult(null)
@@ -91,6 +109,35 @@ export default function TicketProjects({ ticket }) {
     }
   }
 
+  // Art gewaehlt: completeAssignment weist serverseitig (wie assignProject) zu,
+  // daher kein zusaetzliches assignProjects.
+  // Bei 409 (bereits zugeordnet) bewusst NICHT auf assignProjects zurueckfallen:
+  // das wuerde das Projekt ohne Art zuweisen. Stattdessen Meldung zeigen und neu laden.
+  const assignWithKind = async (kind) => {
+    setKindDialog(false)
+    setBusy(true)
+    setError('')
+    setAssignResult(null)
+    try {
+      const projectName = available.find((p) => p.$id === selected)?.projectName || ''
+      const r = await completeAssignment(selected, {
+        kind,
+        forCustomer: true,
+        customerId: ticket.customerId,
+        ticketId: ticket.$id,
+      })
+      setAssignResult({ text: `${projectName || 'Projekt'} wurde zugewiesen.`, warnings: r.warnings || [] })
+      setSelected('')
+    } catch (err) {
+      setError(err.status === 409
+        ? `${err.message} Die Liste wurde neu geladen.`
+        : err.message || 'Aktion fehlgeschlagen')
+    } finally {
+      try { await load() } catch { /* Anzeige bleibt wie sie ist */ }
+      setBusy(false)
+    }
+  }
+
   const unassign = (projectId) => run(async () => {
     const r = await unassignProject(projectId)
     if (!r.success) throw new Error(r.error)
@@ -121,14 +168,16 @@ export default function TicketProjects({ ticket }) {
       {assigned.length === 0
         ? <p className="muted" style={{ marginTop: 0 }}>Noch kein Projekt an diesem Ticket.</p>
         : assigned.map((p) => (
-          <AssignedProjectCard
-            key={p.$id}
-            project={p}
-            showActions
-            onUnassign={unassign}
-            customerName={ticket.customerName || ''}
-            onChanged={load}
-          />
+          <div key={p.$id}>
+            <span className="muted" style={{ fontSize: 12 }} data-testid="project-kind">{kindLabelFor(kinds, p.kind)}</span>
+            <AssignedProjectCard
+              project={p}
+              showActions
+              onUnassign={unassign}
+              customerName={ticket.customerName || ''}
+              onChanged={load}
+            />
+          </div>
         ))}
 
       <div className="ticket-projects-assign">
@@ -161,6 +210,21 @@ export default function TicketProjects({ ticket }) {
           <button type="submit" className="ui-btn ui-btn-primary" disabled={busy}>{busy ? 'Wird angelegt …' : 'Anlegen & zuweisen'}</button>
         </form>
       )}
+
+      {kindDialog && (
+        <div className="overlay">
+          <span className="overlay-close" onClick={() => setKindDialog(false)}>×</span>
+          <div className="overlay-content">
+            <h2 className="mb-2">Was ist das?</h2>
+            <p className="muted">Bitte wähle die Art des Projekts, bevor es zugewiesen wird.</p>
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+              {kinds.map((k) => (
+                <button key={k.key} type="button" className="ui-btn" onClick={() => assignWithKind(k.key)}>{k.label}</button>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }