CluPilotCloud/resources/views/livewire/admin/open-work.blade.php

88 lines
4.7 KiB
PHP

{{-- Gebaut wie die Bereitschaftsseite, und das mit Absicht.
Die erste Fassung nahm das Muster der Host-Anlegen-Seite: `lbl`-Etikett,
große Kopfzeile, pro Punkt eine fette Karte mit einer Beschreibungsliste
darin. Das ist die Sprache einer Formularseite, nicht die einer Liste mit
Zuständen und für dieselbe Aufgabe gibt es in dieser Konsole längst eine:
Bereitschaft. Zwei Muster für ein Problem sind zwei Sprachen.
Also: schlichte Kopfzeile, ein Sammelbanner mit dem dringendsten Zustand,
danach je Zustand eine Karte mit einer `divide-y`-Liste. Ein Punkt ist eine
Zeile mit Symbol, Titel und drei kleinen Angaben darunter nicht
ein eigener Kasten. --}}
@php
// Ton je Zustand, an einer Stelle. Nur „verkauft, nicht geliefert" ist rot:
// wenn alles auffällt, fällt nichts auf.
$tone = [
App\Support\OpenWork::SOLD => ['alert-triangle', 'text-danger'],
App\Support\OpenWork::PARTIAL => ['alert-triangle', 'text-warning'],
App\Support\OpenWork::UNPROVEN => ['shield-check', 'text-muted'],
App\Support\OpenWork::PLANNED => ['bell', 'text-muted'],
];
@endphp
<div class="space-y-5">
<div class="animate-rise">
<h1 class="text-2xl font-bold tracking-tight text-ink">{{ __('open_work.title') }}</h1>
<p class="mt-1 text-sm text-muted">{{ __('open_work.subtitle') }}</p>
</div>
@if ($groups)
{{-- Ein Satz, der die Frage vor der Liste beantwortet: ist etwas dabei,
das gerade Geld kostet? Der Ton kommt vom dringendsten Zustand, der
wirklich vorkommt nicht von einer festen Farbe. --}}
@php([$worstIcon, $worstText] = $tone[$worst])
<div class="flex items-center gap-3 rounded-lg border p-5 shadow-xs animate-rise
{{ $worst === App\Support\OpenWork::SOLD ? 'border-danger/30 bg-danger/5' : 'border-line bg-surface' }}">
<x-ui.icon :name="$worstIcon" class="{{ $worstText }}" />
<p class="text-lg font-semibold {{ $worstText }}">
{{ trans_choice('open_work.summary', $total, ['n' => $total]) }}
</p>
</div>
@foreach ($groups as $state => $items)
@php([$icon, $text] = $tone[$state])
<div class="rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise">
<div class="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1">
<h2 class="font-semibold text-ink">{{ __('open_work.state.'.$state) }}</h2>
<span class="text-xs tabular-nums text-muted">{{ count($items) }}</span>
</div>
<p class="mt-1 text-sm text-muted">{{ __('open_work.state_hint.'.$state) }}</p>
<ul class="mt-3 divide-y divide-line">
@foreach ($items as $item)
<li class="flex flex-wrap items-start gap-3 py-3">
<x-ui.icon :name="$icon" class="mt-0.5 size-4 shrink-0 {{ $text }}" />
<div class="min-w-0 flex-1">
{{-- Keine Zustands-Plakette an der Zeile: die
Karte darüber sagt den Zustand schon, und
alle Zeilen darin teilen ihn. Sie stand
hier und wiederholte dasselbe Wort dreimal
pro Bildschirm, ohne eine Frage zu
beantworten. --}}
<p class="font-medium text-ink">{{ $item['title'] }}</p>
{{-- Was fehlt, dann die Folge. Die Folge zuletzt,
weil sie den Satz ist, der über die
Reihenfolge entscheidet und der letzte
bleibt hängen. --}}
<p class="mt-1 max-w-[76ch] text-sm text-muted">{{ $item['missing'] }}</p>
<p class="mt-1 max-w-[76ch] text-sm {{ $state === App\Support\OpenWork::SOLD ? 'text-danger' : 'text-body' }}">
<span class="text-muted">{{ __('open_work.risk') }}:</span> {{ $item['risk'] }}
</p>
<p class="mt-1 font-mono text-xs text-faint break-all">{{ $item['where'] }}</p>
</div>
</li>
@endforeach
</ul>
</div>
@endforeach
@else
<div class="rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise">
<p class="text-sm text-muted">{{ __('open_work.empty') }}</p>
</div>
@endif
</div>