116 lines
4.3 KiB
React
116 lines
4.3 KiB
React
import { EmptyState } from './ui'
|
||
import { needsTimeEntry, isGitWorksheet } from '../lib/ticketForm'
|
||
import { parseSupporters } from '../lib/support'
|
||
import {
|
||
showAboToggle,
|
||
statusAfterLabel,
|
||
supportLines,
|
||
timeLabel,
|
||
worksheetBadge,
|
||
worksheetKindLabel,
|
||
worksheetWhen,
|
||
} from '../lib/worksheetView'
|
||
|
||
// Arbeitsblaetter, neueste zuerst wie geliefert: links Datum und Beginn, in der Mitte Person, Art, Text und Aktionen, rechts die Zeit
|
||
export default function WorksheetList({
|
||
worksheets,
|
||
loading,
|
||
onTogglePlan,
|
||
aboHoursAllowed = true,
|
||
canEditTimes,
|
||
onEditTimes,
|
||
canAddSupport,
|
||
onOwnSupport,
|
||
currentUserId,
|
||
}) {
|
||
if (loading) return <div className="loading">Wird geladen …</div>
|
||
|
||
if (!worksheets || worksheets.length === 0) {
|
||
return <EmptyState title="Noch keine Arbeitsblätter." hint="Leg das erste mit „Arbeitsblatt hinzufügen“ an." />
|
||
}
|
||
|
||
return (
|
||
<div className="ws-list">
|
||
{worksheets.map((ws) => {
|
||
const when = worksheetWhen(ws)
|
||
const kind = worksheetKindLabel(ws)
|
||
const badge = worksheetBadge(ws)
|
||
const lines = supportLines(ws)
|
||
const status = statusAfterLabel(ws)
|
||
const time = timeLabel(ws)
|
||
const canEdit = Boolean(onEditTimes && canEditTimes?.(ws))
|
||
const canSupport = Boolean(onOwnSupport && canAddSupport?.(ws))
|
||
const ownSupport = parseSupporters(ws.supporters).some((s) => s.employeeId === currentUserId)
|
||
const showAbo = Boolean(onTogglePlan && showAboToggle(ws, aboHoursAllowed))
|
||
const isNote = ws.isComment && !isGitWorksheet(ws)
|
||
|
||
return (
|
||
<div key={ws.$id} className={isNote ? 'ws comment' : 'ws'}>
|
||
<div className="ws-when">
|
||
<div className="d">{when.date || '–'}</div>
|
||
{when.time && <div className="num">{when.time}</div>}
|
||
</div>
|
||
|
||
<div>
|
||
<div className="ws-head">
|
||
<span className="who">{ws.employeeName}</span>
|
||
{ws.employeeShort && <span className="faint xs">{ws.employeeShort}</span>}
|
||
{kind && <span className="muted">{kind}</span>}
|
||
<span className="faint xs num">WSID {ws.wsid}</span>
|
||
{badge && <span className={`badge ${badge.tone}`}>{badge.text}</span>}
|
||
{showAbo ? (
|
||
<button
|
||
type="button"
|
||
className={ws.countsToPlan ? 'abo-toggle on' : 'abo-toggle'}
|
||
title={ws.countsToPlan ? 'Nicht mehr vom Abo-Stundenkonto abziehen' : 'Vom Abo-Stundenkonto des Kunden abziehen'}
|
||
onClick={() => onTogglePlan(ws)}
|
||
>
|
||
{ws.countsToPlan ? 'Abo' : '+ Abo'}
|
||
</button>
|
||
) : (
|
||
ws.countsToPlan && !ws.isComment && <span className="muted xs">Abo</span>
|
||
)}
|
||
</div>
|
||
|
||
{ws.details && <div className="ws-text">{ws.details}</div>}
|
||
{lines.map((line, i) => (
|
||
<div key={i} className="ws-support">{line}</div>
|
||
))}
|
||
{status && <div className="ws-support">{status}</div>}
|
||
|
||
{(canEdit || canSupport) && (
|
||
<div className="ws-acts">
|
||
{canEdit && (
|
||
<button
|
||
type="button"
|
||
className="link"
|
||
title="Beginn, Ende und Arbeitszeit ändern"
|
||
onClick={() => onEditTimes(ws)}
|
||
>
|
||
{needsTimeEntry(ws) ? 'Zeit nachtragen' : 'Zeiten bearbeiten'}
|
||
</button>
|
||
)}
|
||
{canSupport && (
|
||
<button
|
||
type="button"
|
||
className="link"
|
||
title="Eintragen, dass du bei dieser Arbeit unterstützt hast"
|
||
onClick={() => onOwnSupport(ws)}
|
||
>
|
||
{ownSupport ? 'Meine Unterstützung bearbeiten' : 'Ich habe unterstützt'}
|
||
</button>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="ws-time">
|
||
{time && <div className={time === '–' ? 't faint' : 't'}>{time}</div>}
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)
|
||
}
|