refactor: replace conditional rendering with forelse and update card styling across attendance and learning modules
This commit is contained in:
parent
2d57ab4f0a
commit
3c9e2f1e2f
@ -14,7 +14,6 @@
|
|||||||
use Filament\Forms\Concerns\InteractsWithForms;
|
use Filament\Forms\Concerns\InteractsWithForms;
|
||||||
use Filament\Forms\Contracts\HasForms;
|
use Filament\Forms\Contracts\HasForms;
|
||||||
use Filament\Resources\Pages\Page;
|
use Filament\Resources\Pages\Page;
|
||||||
use Filament\Support\Icons\Heroicon;
|
|
||||||
use Filament\Tables\Columns\TextColumn;
|
use Filament\Tables\Columns\TextColumn;
|
||||||
use Filament\Tables\Concerns\InteractsWithTable;
|
use Filament\Tables\Concerns\InteractsWithTable;
|
||||||
use Filament\Tables\Contracts\HasTable;
|
use Filament\Tables\Contracts\HasTable;
|
||||||
@ -237,8 +236,8 @@ public function table(Table $table): Table
|
|||||||
})
|
})
|
||||||
->searchable(),
|
->searchable(),
|
||||||
])
|
])
|
||||||
->emptyStateIcon(Heroicon::OutlinedCheckCircle)
|
->emptyStateIcon('heroicon-o-finger-print')
|
||||||
->emptyStateDescription('Setelah Anda membuat data pertama, maka akan muncul disini.')
|
->emptyStateDescription('Belum ada riwayat presensi yang tercatat untuk Anda saat ini.')
|
||||||
->deferFilters(false)
|
->deferFilters(false)
|
||||||
->paginated([25, 50, 100, 'all'])
|
->paginated([25, 50, 100, 'all'])
|
||||||
->defaultPaginationPageOption(25);
|
->defaultPaginationPageOption(25);
|
||||||
|
|||||||
@ -191,8 +191,8 @@ public static function table(Table $table): Table
|
|||||||
...DefaultBulkActions::make('Materi'),
|
...DefaultBulkActions::make('Materi'),
|
||||||
]),
|
]),
|
||||||
])
|
])
|
||||||
->emptyStateIcon(Heroicon::OutlinedBookOpen)
|
->emptyStateIcon('heroicon-o-book-open')
|
||||||
->emptyStateDescription('Setelah Anda membuat data pertama, maka akan muncul disini.')
|
->emptyStateDescription('Belum ada materi pembelajaran yang terdaftar dalam sistem saat ini.')
|
||||||
->defaultSort('created_at', 'desc')
|
->defaultSort('created_at', 'desc')
|
||||||
->deferFilters(false)
|
->deferFilters(false)
|
||||||
->paginated([25, 50, 100, 'all'])
|
->paginated([25, 50, 100, 'all'])
|
||||||
|
|||||||
@ -17,11 +17,9 @@ class="fi-section-content rounded-xl border border-info-200 bg-info-50 dark:bg-i
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if ($this->schedulesGrouped->isNotEmpty())
|
|
||||||
<div class="overflow-x-auto">
|
<div class="overflow-x-auto">
|
||||||
<div class="flex flex-nowrap gap-6 min-w-max pb-4">
|
<div class="flex flex-nowrap gap-6 min-w-max pb-4">
|
||||||
|
@forelse ($this->schedulesGrouped as $dayName => $daySchedules)
|
||||||
@foreach ($this->schedulesGrouped as $dayName => $daySchedules)
|
|
||||||
<section class="w-80 shrink-0 space-y-4">
|
<section class="w-80 shrink-0 space-y-4">
|
||||||
|
|
||||||
<div class="flex items-center gap-2 border-b border-gray-200 dark:border-gray-700 pb-2">
|
<div class="flex items-center gap-2 border-b border-gray-200 dark:border-gray-700 pb-2">
|
||||||
@ -108,14 +106,15 @@ class="flex items-center justify-end gap-1 pt-3 border-t border-gray-100 dark:bo
|
|||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@endforeach
|
@empty
|
||||||
|
<div class="w-full">
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@else
|
|
||||||
<x-filament::empty-state icon="heroicon-o-calendar-days" heading="Tidak ada data yang ditemukan"
|
<x-filament::empty-state icon="heroicon-o-calendar-days" heading="Tidak ada data yang ditemukan"
|
||||||
description="Setelah Anda membuat data pertama, maka akan muncul disini." iconColor="gray">
|
description="Belum ada jadwal perkuliahan yang terdaftar untuk kriteria ini. Hubungi administrator jika jadwal Anda belum muncul."
|
||||||
|
iconColor="gray">
|
||||||
</x-filament::empty-state>
|
</x-filament::empty-state>
|
||||||
@endif
|
</div>
|
||||||
|
@endforelse
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</x-filament::section>
|
</x-filament::section>
|
||||||
</x-filament-panels::page>
|
</x-filament-panels::page>
|
||||||
|
|||||||
@ -6,9 +6,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@if ($this->studyGroups->isNotEmpty())
|
|
||||||
<div class="columns-1 md:columns-2 lg:columns-3 xl:columns-4 gap-6 space-y-6">
|
<div class="columns-1 md:columns-2 lg:columns-3 xl:columns-4 gap-6 space-y-6">
|
||||||
@foreach ($this->studyGroups as $record)
|
@forelse ($this->studyGroups as $record)
|
||||||
<div class="break-inside-avoid mb-6">
|
<div class="break-inside-avoid mb-6">
|
||||||
<div class="{{ $record->card_classes }}">
|
<div class="{{ $record->card_classes }}">
|
||||||
|
|
||||||
@ -144,14 +143,11 @@ class="text-[10px] font-bold px-1.5 py-0.5 rounded bg-violet-50 dark:bg-violet-5
|
|||||||
@endcanAny
|
@endcanAny
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@endforeach
|
@empty
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
|
|
||||||
@if ($this->studyGroups->isEmpty())
|
|
||||||
<x-filament::empty-state icon="heroicon-o-users" heading="Tidak ada data yang ditemukan"
|
<x-filament::empty-state icon="heroicon-o-users" heading="Tidak ada data yang ditemukan"
|
||||||
description="Setelah Anda membuat data pertama, maka akan muncul disini." iconColor="gray">
|
description="Anda belum terdaftar dalam kelompok belajar apapun untuk saat ini." iconColor="gray">
|
||||||
</x-filament::empty-state>
|
</x-filament::empty-state>
|
||||||
@endif
|
@endforelse
|
||||||
|
</div>
|
||||||
</x-filament::section>
|
</x-filament::section>
|
||||||
</x-filament-panels::page>
|
</x-filament-panels::page>
|
||||||
|
|||||||
@ -3,13 +3,8 @@
|
|||||||
<x-slot name="heading">Tugas Saya</x-slot>
|
<x-slot name="heading">Tugas Saya</x-slot>
|
||||||
<x-slot name="description">Klik tugas untuk melihat detail dan mengumpulkan file.</x-slot>
|
<x-slot name="description">Klik tugas untuk melihat detail dan mengumpulkan file.</x-slot>
|
||||||
|
|
||||||
@if ($this->assignmentCards->isEmpty())
|
|
||||||
<x-filament::empty-state icon="heroicon-o-clipboard-document-list" heading="Tidak ada data yang ditemukan"
|
|
||||||
description="Setelah Anda membuat data pertama, maka akan muncul disini." iconColor="gray">
|
|
||||||
</x-filament::empty-state>
|
|
||||||
@else
|
|
||||||
<div class="space-y-6">
|
<div class="space-y-6">
|
||||||
@foreach ($this->assignmentCards as $card)
|
@forelse ($this->assignmentCards as $card)
|
||||||
<div class="{{ $card->card_classes }}">
|
<div class="{{ $card->card_classes }}">
|
||||||
<a href="{{ \App\Filament\Resources\Learning\Assignments\AssignmentResource::getUrl('submit', ['record' => $card->id]) }}"
|
<a href="{{ \App\Filament\Resources\Learning\Assignments\AssignmentResource::getUrl('submit', ['record' => $card->id]) }}"
|
||||||
wire:navigate
|
wire:navigate
|
||||||
@ -110,8 +105,13 @@ class="{{ $card->indicator_icon_classes }}"
|
|||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
@endforeach
|
@empty
|
||||||
|
<x-filament::empty-state icon="heroicon-o-clipboard-document-list"
|
||||||
|
heading="Tidak ada data yang ditemukan"
|
||||||
|
description="Belum ada tugas baru yang perlu dikerjakan untuk saat ini. Tetap semangat!"
|
||||||
|
iconColor="gray">
|
||||||
|
</x-filament::empty-state>
|
||||||
|
@endforelse
|
||||||
</div>
|
</div>
|
||||||
@endif
|
|
||||||
</x-filament::section>
|
</x-filament::section>
|
||||||
</x-filament-panels::page>
|
</x-filament-panels::page>
|
||||||
|
|||||||
@ -3,9 +3,8 @@
|
|||||||
<x-slot name="heading">Sesi Kuliah</x-slot>
|
<x-slot name="heading">Sesi Kuliah</x-slot>
|
||||||
<x-slot name="description">Silakan melakukan presensi sesuai dengan waktu kelas.</x-slot>
|
<x-slot name="description">Silakan melakukan presensi sesuai dengan waktu kelas.</x-slot>
|
||||||
|
|
||||||
@if ($this->scheduleCards->isNotEmpty())
|
|
||||||
<div class="columns-1 md:columns-2 lg:columns-3 xl:columns-4 gap-6 space-y-6">
|
<div class="columns-1 md:columns-2 lg:columns-3 xl:columns-4 gap-6 space-y-6">
|
||||||
@foreach ($this->scheduleCards as $card)
|
@forelse ($this->scheduleCards as $card)
|
||||||
<div class="break-inside-avoid mb-6">
|
<div class="break-inside-avoid mb-6">
|
||||||
<div class="{{ $card->card_classes }}">
|
<div class="{{ $card->card_classes }}">
|
||||||
|
|
||||||
@ -48,7 +47,7 @@ class="text-[10px] font-bold uppercase text-gray-400 tracking-widest leading-non
|
|||||||
|
|
||||||
<div @class([
|
<div @class([
|
||||||
'pt-4 border-t',
|
'pt-4 border-t',
|
||||||
'border-gray-100 dark:border-gray-800' => !$card->is_attended,
|
'border-gray-100 dark:border-gray-700' => !$card->is_attended,
|
||||||
'border-primary-200 dark:border-primary-800' => $card->is_attended,
|
'border-primary-200 dark:border-primary-800' => $card->is_attended,
|
||||||
])>
|
])>
|
||||||
<div class="flex items-center justify-between mb-3">
|
<div class="flex items-center justify-between mb-3">
|
||||||
@ -96,13 +95,13 @@ class="text-[10px] font-bold text-gray-400 uppercase tracking-widest leading-non
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@endforeach
|
@empty
|
||||||
</div>
|
|
||||||
@else
|
|
||||||
<x-filament::empty-state icon="heroicon-o-finger-print" heading="Tidak ada data yang ditemukan"
|
<x-filament::empty-state icon="heroicon-o-finger-print" heading="Tidak ada data yang ditemukan"
|
||||||
description="Setelah jadwal Anda muncul, Anda dapat melakukan presensi di sini." iconColor="gray">
|
description="Setelah jadwal Anda muncul, Anda dapat melakukan presensi di sini. Pastikan Anda mengecek kembali pada jam perkuliahan."
|
||||||
|
iconColor="gray">
|
||||||
</x-filament::empty-state>
|
</x-filament::empty-state>
|
||||||
@endif
|
@endforelse
|
||||||
|
</div>
|
||||||
</x-filament::section>
|
</x-filament::section>
|
||||||
|
|
||||||
<x-filament::section>
|
<x-filament::section>
|
||||||
|
|||||||
@ -1,9 +1,6 @@
|
|||||||
<div class="space-y-3">
|
<div class="space-y-3">
|
||||||
@if ($attendances->isEmpty())
|
@forelse ($attendances as $attendance)
|
||||||
<x-filament::empty-state icon="heroicon-o-user-group" heading="Tidak ada data yang ditemukan"
|
@if ($loop->first)
|
||||||
description="Belum ada mahasiswa yang melakukan presensi pada sesi ini." iconColor="gray">
|
|
||||||
</x-filament::empty-state>
|
|
||||||
@else
|
|
||||||
<div
|
<div
|
||||||
class="fi-ta-content overflow-x-auto rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900">
|
class="fi-ta-content overflow-x-auto rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900">
|
||||||
<table class="w-full text-sm text-left divider-y dark:divider-white/5">
|
<table class="w-full text-sm text-left divider-y dark:divider-white/5">
|
||||||
@ -14,7 +11,7 @@ class="fi-ta-content overflow-x-auto rounded-xl border border-gray-200 dark:bord
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody class="divide-y divide-gray-200 dark:divide-white/5">
|
<tbody class="divide-y divide-gray-200 dark:divide-white/5">
|
||||||
@foreach ($attendances as $attendance)
|
@endif
|
||||||
<tr class="hover:bg-gray-50 dark:hover:bg-white/5 transition-colors">
|
<tr class="hover:bg-gray-50 dark:hover:bg-white/5 transition-colors">
|
||||||
<td class="px-4 py-3 text-gray-950 dark:text-white font-medium">
|
<td class="px-4 py-3 text-gray-950 dark:text-white font-medium">
|
||||||
<div class="flex flex-col">
|
<div class="flex flex-col">
|
||||||
@ -31,16 +28,21 @@ class="inline-flex items-center rounded-md bg-success-50 dark:bg-success-400/10
|
|||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
@endforeach
|
@if ($loop->last)
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-4 flex items-center justify-between px-2">
|
<div class="mt-4 flex items-center justify-between px-2">
|
||||||
<p class="text-xs text-gray-500 font-medium">
|
<p class="text-xs text-gray-500 font-medium">
|
||||||
Total Kehadiran: <span
|
Total Kehadiran: <span
|
||||||
class="text-primary-600 dark:text-primary-400 font-bold font-mono">{{ $attendances->count() }}
|
class="text-primary-600 dark:text-primary-400 font-bold font-mono">{{ $loop->count }}
|
||||||
Mahasiswa</span>
|
Mahasiswa</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
|
@empty
|
||||||
|
<x-filament::empty-state icon="heroicon-o-user-group" heading="Tidak ada data yang ditemukan"
|
||||||
|
description="Belum ada mahasiswa yang melakukan presensi pada sesi ini." iconColor="gray">
|
||||||
|
</x-filament::empty-state>
|
||||||
|
@endforelse
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -17,9 +17,8 @@
|
|||||||
Sesi yang dijadwalkan pada {{ $this->today_date }}
|
Sesi yang dijadwalkan pada {{ $this->today_date }}
|
||||||
</x-slot>
|
</x-slot>
|
||||||
|
|
||||||
@if ($this->todaySessions->isNotEmpty())
|
|
||||||
<div class="space-y-4">
|
<div class="space-y-4">
|
||||||
@foreach ($this->todaySessions as $session)
|
@forelse ($this->todaySessions as $session)
|
||||||
<a href="{{ $session->url }}" class="{{ $session->card_classes }}">
|
<a href="{{ $session->url }}" class="{{ $session->card_classes }}">
|
||||||
<div class="flex flex-1 items-start gap-4 p-5">
|
<div class="flex flex-1 items-start gap-4 p-5">
|
||||||
<div class="{{ $session->session_badge_classes }}">
|
<div class="{{ $session->session_badge_classes }}">
|
||||||
@ -103,13 +102,12 @@ class="text-[9px] uppercase font-bold text-gray-500 mt-1 leading-none tracking-w
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</a>
|
</a>
|
||||||
@endforeach
|
@empty
|
||||||
</div>
|
|
||||||
@else
|
|
||||||
<x-filament::empty-state icon="heroicon-o-calendar-days" heading="Tidak ada data yang ditemukan"
|
<x-filament::empty-state icon="heroicon-o-calendar-days" heading="Tidak ada data yang ditemukan"
|
||||||
description="Tidak ada jadwal hari ini." iconColor="gray">
|
description="Tidak ada sesi perkuliahan yang dijadwalkan untuk hari ini." iconColor="gray">
|
||||||
</x-filament::empty-state>
|
</x-filament::empty-state>
|
||||||
@endif
|
@endforelse
|
||||||
|
</div>
|
||||||
</x-filament::section>
|
</x-filament::section>
|
||||||
|
|
||||||
<!-- All Courses Section -->
|
<!-- All Courses Section -->
|
||||||
@ -121,9 +119,8 @@ class="text-[9px] uppercase font-bold text-gray-500 mt-1 leading-none tracking-w
|
|||||||
Pilih mata kuliah untuk melihat dan mengelola semua riwayat sesi.
|
Pilih mata kuliah untuk melihat dan mengelola semua riwayat sesi.
|
||||||
</x-slot>
|
</x-slot>
|
||||||
|
|
||||||
@if ($this->courses->isNotEmpty())
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
@foreach ($this->courses as $course)
|
@forelse ($this->courses as $course)
|
||||||
<a href="{{ $course->url }}"
|
<a href="{{ $course->url }}"
|
||||||
class="fi-card rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm overflow-hidden transition hover:shadow-md h-fit block group">
|
class="fi-card rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm overflow-hidden transition hover:shadow-md h-fit block group">
|
||||||
|
|
||||||
@ -155,12 +152,13 @@ class="text-base font-bold text-gray-950 dark:text-white leading-tight group-hov
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
@endforeach
|
@empty
|
||||||
</div>
|
<div class="col-span-full text-center">
|
||||||
@else
|
<x-filament::empty-state icon="heroicon-o-academic-cap" heading="Mata Kuliah Belum Terdaftar"
|
||||||
<x-filament::empty-state icon="heroicon-o-presentation-chart-bar" heading="Tidak ada data yang ditemukan"
|
description="Belum ada mata kuliah yang terdaftar untuk semester aktif ini." iconColor="gray">
|
||||||
description="Setelah Anda membuat data pertama, maka akan muncul disini." iconColor="gray">
|
|
||||||
</x-filament::empty-state>
|
</x-filament::empty-state>
|
||||||
@endif
|
</div>
|
||||||
|
@endforelse
|
||||||
|
</div>
|
||||||
</x-filament::section>
|
</x-filament::section>
|
||||||
</x-filament-panels::page>
|
</x-filament-panels::page>
|
||||||
|
|||||||
@ -1,8 +1,7 @@
|
|||||||
<x-filament-panels::page>
|
<x-filament-panels::page>
|
||||||
<x-filament::section>
|
<x-filament::section>
|
||||||
@if ($this->sessions->isNotEmpty())
|
|
||||||
<div class="space-y-4">
|
<div class="space-y-4">
|
||||||
@foreach ($this->sessions as $session)
|
@forelse ($this->sessions as $session)
|
||||||
<div
|
<div
|
||||||
class="fi-card p-5 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm flex items-center justify-between hover:shadow-md transition">
|
class="fi-card p-5 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm flex items-center justify-between hover:shadow-md transition">
|
||||||
<div class="flex items-start gap-4">
|
<div class="flex items-start gap-4">
|
||||||
@ -58,12 +57,11 @@ class="flex items-center gap-1.5 font-bold text-success-600 dark:text-success-40
|
|||||||
{{ ($this->deleteSessionAction)(['session' => $session->id]) }}
|
{{ ($this->deleteSessionAction)(['session' => $session->id]) }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@endforeach
|
@empty
|
||||||
</div>
|
|
||||||
@else
|
|
||||||
<x-filament::empty-state icon="heroicon-o-presentation-chart-bar" heading="Tidak ada data yang ditemukan"
|
<x-filament::empty-state icon="heroicon-o-presentation-chart-bar" heading="Tidak ada data yang ditemukan"
|
||||||
description="Setelah Anda membuat data pertama, maka akan muncul disini." iconColor="gray">
|
description="Belum ada sesi perkuliahan yang dibuat untuk mata kuliah ini." iconColor="gray">
|
||||||
</x-filament::empty-state>
|
</x-filament::empty-state>
|
||||||
@endif
|
@endforelse
|
||||||
|
</div>
|
||||||
</x-filament::section>
|
</x-filament::section>
|
||||||
</x-filament-panels::page>
|
</x-filament-panels::page>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user