86 lines
3.7 KiB
React
86 lines
3.7 KiB
React
import { useState, useEffect, useMemo } from 'react'
|
|
import { Link, useNavigate } from 'react-router-dom'
|
|
import { FaSpinner } from 'react-icons/fa6'
|
|
import { dotColor } from '../lib/previewEnv'
|
|
import { fetchServices } from '../lib/projectKindsApi'
|
|
import { servicesCards } from '../lib/servicesView'
|
|
import { PageHeader, Card, Button, Badge } from '../components/ui'
|
|
|
|
export default function ServicesPage() {
|
|
const navigate = useNavigate()
|
|
const [data, setData] = useState(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState(null)
|
|
|
|
const load = async () => {
|
|
setLoading(true)
|
|
setError(null)
|
|
try {
|
|
setData(await fetchServices())
|
|
} catch (err) {
|
|
setError(err.message || 'Services konnten nicht geladen werden.')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
useEffect(() => { load() }, [])
|
|
|
|
const cards = useMemo(() => servicesCards(data), [data])
|
|
|
|
if (loading) return <div className="page"><div className="empty"><FaSpinner className="spinner" /></div></div>
|
|
|
|
return (
|
|
<div className="page">
|
|
<PageHeader title="Services" subtitle="Unsere Projekte nach Art" />
|
|
{error && (
|
|
<Card>
|
|
<div className="text-red" style={{ marginBottom: 8 }}>{error}</div>
|
|
<Button onClick={load}>Erneut versuchen</Button>
|
|
</Card>
|
|
)}
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 320px), 1fr))', gap: 12 }}>
|
|
{cards.map((c) => (
|
|
<Card key={c.key} title={`${c.label} (${c.count})`}>
|
|
{c.description && <div className="muted" style={{ marginBottom: 8 }}>{c.description}</div>}
|
|
{c.features.length > 0 && (
|
|
<div className="flex gap-2 wrap" style={{ marginBottom: 8 }}>
|
|
{c.features.map((f) => (
|
|
<Badge key={f.label}>{f.label}{f.statusLabel ? ` · ${f.statusLabel}` : ''}</Badge>
|
|
))}
|
|
</div>
|
|
)}
|
|
<div className="list">
|
|
{c.projects.map((p) => (
|
|
<div key={p.id} className="list-row" style={{ flexWrap: 'wrap' }}>
|
|
<div className="grow" style={{ minWidth: 0, overflowWrap: 'anywhere' }}>
|
|
<div style={{ fontWeight: 700 }}>
|
|
{p.previewState && (
|
|
<span
|
|
title={`Preview: ${p.previewState}`}
|
|
style={{ display: 'inline-block', width: 9, height: 9, borderRadius: '50%', background: dotColor(p.previewState), marginRight: 6 }}
|
|
>
|
|
<span style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0 0 0 0)', whiteSpace: 'nowrap' }}>{`Preview: ${p.previewState}`}</span>
|
|
</span>
|
|
)}
|
|
{p.projectName || p.repoFullName}
|
|
{p.features?.analyse === 'active' && <Badge>Analyse an</Badge>}
|
|
</div>
|
|
<div className="muted">
|
|
{[p.customerName, p.previewUrl && 'Preview'].filter(Boolean).join(' · ') || 'Intern'}
|
|
</div>
|
|
</div>
|
|
{p.woid && <Link to={`/tickets?woid=${encodeURIComponent(p.woid)}`}>Ticket #{p.woid}</Link>}
|
|
{c.key === 'missing' && (
|
|
<Button variant="primary" onClick={() => navigate(`/projects/zuordnen/${p.id}`)}>Zuordnen</Button>
|
|
)}
|
|
</div>
|
|
))}
|
|
{c.projects.length === 0 && <div className="muted" style={{ padding: 12 }}>Noch keine Projekte.</div>}
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|