86 lines
6.0 KiB
PHP
86 lines
6.0 KiB
PHP
<div wire:poll.30s>
|
|
<x-topbar :title="__('nav.persons')" :subtitle="__('persons.subtitle')">
|
|
<x-slot:actions>
|
|
<button type="button" wire:click="$dispatch('openModal', { component: 'modals.manage-person' })"
|
|
class="inline-flex items-center gap-1.5 rounded-lg bg-accent px-3 py-1.5 text-[12px] font-bold text-base hover:brightness-110 transition-[filter]">
|
|
<x-icon name="plus" :size="15" /> <span class="hidden sm:inline">{{ __('persons.add') }}</span>
|
|
</button>
|
|
</x-slot:actions>
|
|
</x-topbar>
|
|
|
|
<div class="px-5 lg:px-[26px] py-6 flex flex-col gap-5 max-w-[1560px] mx-auto w-full">
|
|
@if ($persons->isEmpty())
|
|
<x-panel>
|
|
<div class="flex flex-col items-center gap-3 py-8 text-center">
|
|
<span class="grid place-items-center w-12 h-12 rounded-xl bg-inset text-ink-3"><x-icon name="persons" :size="24" /></span>
|
|
<div>
|
|
<div class="text-[14px] font-semibold text-ink">{{ __('persons.empty_title') }}</div>
|
|
<div class="text-[12.5px] text-ink-3 mt-1 max-w-sm">{{ __('persons.empty_body') }}</div>
|
|
</div>
|
|
</div>
|
|
</x-panel>
|
|
@else
|
|
{{-- Who's home --}}
|
|
<section class="relative overflow-hidden rounded-card border border-line-soft {{ $home->isNotEmpty() ? 'bg-online/10' : 'bg-surface' }}">
|
|
<span class="absolute inset-y-0 left-0 w-[3px] {{ $home->isNotEmpty() ? 'bg-online' : 'bg-line' }}"></span>
|
|
<div class="flex flex-wrap items-center gap-4 p-4 pl-5">
|
|
<div class="min-w-0">
|
|
<h2 class="text-[15px] font-bold text-ink"><span class="font-mono tabular-nums">{{ $home->count() }}</span> {{ __('persons.home_title') }}</h2>
|
|
<p class="text-[12px] text-ink-2">{{ trans_choice('persons.away_count', $awayCount, ['count' => $awayCount]) }}</p>
|
|
</div>
|
|
<div class="flex items-center -space-x-2 ml-auto">
|
|
@forelse ($home as $p)
|
|
@if ($p->avatarUrl())
|
|
<img src="{{ $p->avatarUrl() }}" alt="{{ $p->name }}" title="{{ $p->name }}" class="w-9 h-9 rounded-full object-cover border-2 border-base">
|
|
@else
|
|
<span title="{{ $p->name }}" class="grid place-items-center w-9 h-9 rounded-full bg-online/20 text-online font-bold text-[13px] uppercase border-2 border-base">{{ $p->initials() }}</span>
|
|
@endif
|
|
@empty
|
|
<span class="text-[12.5px] text-ink-3">{{ __('persons.home_none') }}</span>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- People --}}
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
|
|
@foreach ($persons as $person)
|
|
<x-panel>
|
|
<div class="flex items-center gap-3">
|
|
@if ($person->avatarUrl())
|
|
<img src="{{ $person->avatarUrl() }}" alt="{{ $person->name }}" class="w-11 h-11 rounded-full object-cover shrink-0">
|
|
@else
|
|
<span @class([
|
|
'grid place-items-center w-11 h-11 rounded-full font-bold text-[15px] uppercase shrink-0',
|
|
'bg-online/20 text-online' => $person->isHome(),
|
|
'bg-inset text-ink-2' => ! $person->isHome(),
|
|
])>{{ $person->initials() }}</span>
|
|
@endif
|
|
<div class="min-w-0">
|
|
<div class="text-[14px] font-bold text-ink truncate">{{ $person->name }}</div>
|
|
<div class="text-[11.5px] text-ink-3">{{ __('persons.since') }} {{ $person->presence_changed_at?->diffForHumans() ?? '—' }}</div>
|
|
</div>
|
|
<div class="ml-auto flex items-center gap-1.5 shrink-0">
|
|
<x-status-pill :state="$person->isHome() ? 'online' : ($person->presence === 'away' ? 'neutral' : 'warning')">
|
|
{{ __('persons.presence_'.$person->presence) }}
|
|
</x-status-pill>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2 mt-3 pt-3 border-t border-line-soft">
|
|
<button type="button" wire:click="$dispatch('openModal', { component: 'modals.manage-person', arguments: { person: @js($person->uuid) } })"
|
|
class="inline-flex items-center gap-1.5 rounded-lg border border-line px-3 py-1.5 text-[12px] font-semibold text-ink-2 hover:text-ink hover:bg-raised transition-colors">
|
|
<x-icon name="settings" :size="13" /> {{ __('persons.edit') }}
|
|
</button>
|
|
<button type="button"
|
|
x-on:click="$wire.set('pendingDelete', @js($person->uuid)); $wire.$dispatch('openModal', { component: 'modals.confirm', arguments: { title: @js(__('persons.delete_title')), body: @js(__('persons.delete_body', ['name' => $person->name])), confirmLabel: @js(__('persons.delete')), event: 'delete-person', to: 'persons', danger: true } })"
|
|
class="ml-auto inline-flex items-center gap-1.5 rounded-lg border border-line px-3 py-1.5 text-[12px] font-semibold text-ink-3 hover:text-offline hover:border-offline/40 transition-colors">
|
|
<x-icon name="close" :size="13" /> {{ __('persons.delete') }}
|
|
</button>
|
|
</div>
|
|
</x-panel>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|