Skip to content

Commit 518d9ff

Browse files
dwmafdwmaf
committed
migrate to vanilla js for visualisasi page in dashboard (no need to db migrate or add new package)
1 parent df07b48 commit 518d9ff

File tree

4 files changed

+378
-220
lines changed

4 files changed

+378
-220
lines changed

‎app/Filament/Pages/Visualisasi.php‎

Lines changed: 51 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -6,124 +6,68 @@
66
use App\Models\Jurusan;
77
use App\Models\Komisariat;
88
use Filament\Pages\Page;
9-
use Filament\Support\Icons\Heroicon;
109
use BackedEnum;
11-
use Filament\Infolists\Components\ImageEntry;
12-
use Filament\Infolists\Components\TextEntry;
13-
use Filament\Infolists\Concerns\InteractsWithInfolists;
14-
use Filament\Infolists\Contracts\HasInfolists;
15-
use Filament\Schemas\Schema;
16-
use Livewire\Attributes\On;
10+
use Filament\Support\Icons\Heroicon;
11+
use Illuminate\Support\Facades\Storage;
1712

18-
class Visualisasi extends Page implements HasInfolists
13+
class visualisasi extends Page
1914
{
20-
use InteractsWithInfolists;
2115
protected static string|BackedEnum|null $navigationIcon = Heroicon::Map;
2216
protected string $view = 'filament.pages.visualisasi';
23-
protected int | string | array $columnSpan = 'full';
2417
protected static bool $isLazy = false;
2518

26-
public ?Anggota $selectedAnggota = null;
27-
public bool $showAnggotaFilters = false;
19+
// Kita kirim data mentah ke view, tidak perlu property livewire yang reaktif
20+
public $anggotaJson;
21+
public $komisariatJson;
22+
public $jurusanOptions;
23+
public $komisariatOptions;
2824

29-
public $selectedJurusan = null;
30-
public $selectedKomisariat = null;
31-
public int $markerCount = 0;
32-
public function getJurusanOptionsProperty()
33-
{
34-
return Jurusan::pluck('nama_jurusan', 'id');
35-
}
36-
public function getKomisariatOptionsProperty()
25+
public function mount()
3726
{
38-
return Komisariat::pluck('nama', 'id');
39-
}
40-
public function getKomisariatsData(): array
41-
{
42-
return Komisariat::whereNotNull('latitude')
27+
// 1. Siapkan Option untuk Select Filter
28+
$this->jurusanOptions = Jurusan::pluck('nama_jurusan', 'id');
29+
$this->komisariatOptions = Komisariat::pluck('nama', 'id');
30+
31+
// 2. Ambil Data Komisariat
32+
$this->komisariatJson = Komisariat::whereNotNull('latitude')
4333
->whereNotNull('longitude')
44-
->get(['nama', 'latitude', 'longitude'])
34+
->get(['id', 'nama', 'latitude', 'longitude'])
4535
->toArray();
46-
47-
}
48-
public function getAnggotasData(): array
49-
{
50-
$query = Anggota::query()->whereNotNull('latitude')
51-
->whereNotNull('longitude');
52-
if ($this->selectedJurusan) {
53-
$query->where('jurusan_id', $this->selectedJurusan);
54-
}
55-
if ($this->selectedKomisariat) {
56-
$query->where('komisariat_id', $this->selectedKomisariat);
57-
}
5836

59-
return $query->get(['id', 'nama', 'latitude', 'longitude'])->toArray();
60-
}
61-
public function updated($property): void
62-
{
63-
if($property === 'selectedJurusan' || $property === 'selectedKomisariat'){
64-
$anggotaData = $this->getAnggotasData();
65-
$this->markerCount = count($anggotaData);
66-
$this->dispatch('redrawAnggotaMarkers', data: $this->getAnggotasData());
67-
}
68-
}
69-
#[On('showAnggotaDetails')]
70-
public function showAnggotaDetails(int $anggotaId): void
71-
{
72-
$this->selectedAnggota = Anggota::find($anggotaId);
73-
}
74-
75-
#[On('hideInfolist')]
76-
public function hideDetails(): void
77-
{
78-
$this->selectedAnggota = null;
79-
}
80-
public function showAnggotaView(): void
81-
{
82-
$this->showAnggotaFilters = true;
83-
$anggotaData = $this->getAnggotasData();
84-
$this->markerCount = count($anggotaData);
85-
$this->dispatch('drawAnggotaMarkers', data: $this->getAnggotasData());
86-
}
87-
88-
public function showKomisariatView(): void
89-
{
90-
$this->showAnggotaFilters = false;
91-
$this->hideDetails();
92-
$komisariatData = $this->getKomisariatsData();
93-
$this->markerCount = count($komisariatData);
94-
$this->dispatch('drawKomisariatMarkers', data: $this->getKomisariatsData());
95-
}
96-
97-
public function infolist(Schema $schema): Schema
98-
{
99-
if (!$this->selectedAnggota) {
100-
return $schema;
101-
}
37+
// 3. Ambil SEMUA Data Anggota beserta relasinya
38+
// Kita perlu select semua field yang mau ditampilkan di Detail
39+
$anggotas = Anggota::with(['jurusan', 'komisariat'])
40+
->whereNotNull('latitude')
41+
->whereNotNull('longitude')
42+
->get();
10243

103-
return $schema
104-
->record($this->selectedAnggota)
105-
->columns(2)
106-
->components([
107-
ImageEntry::make('foto')->square()
108-
->defaultImageUrl(url('/images/default-avatar.png')),
109-
TextEntry::make('nama')->label('Nama'),
110-
TextEntry::make('kelamin')->label('Kelamin'),
111-
TextEntry::make('no_wa')->label('No. WA'),
112-
TextEntry::make('tempat_lahir')->label('Tempat Lahir'),
113-
TextEntry::make('tanggal_lahir')->label('Tanggal Lahir')->date('d F Y'),
114-
TextEntry::make('alamat')->label('Alamat'),
115-
TextEntry::make('jurusan.nama_jurusan')->label('Jurusan'),
116-
TextEntry::make('komisariat.nama')->label('Komisariat LK1'),
117-
TextEntry::make('tahun_lk1')->label('Tahun LK1'),
118-
TextEntry::make('cabang_lk2')->label('Cabang LK2'),
119-
TextEntry::make('tahun_lk2')->label('Tahun LK2'),
120-
TextEntry::make('badko_lk3')->label('Badko LK3'),
121-
TextEntry::make('tahun_lk3')->label('Tahun LK3'),
122-
TextEntry::make('tahun_lkk')->label('Tahun LKK')->visible(fn($record) => $record?->kelamin === 'Perempuan'),
123-
TextEntry::make('cabang_lkk')->label('Cabang LKK')->visible(fn($record) => $record?->kelamin === 'Perempuan'),
124-
TextEntry::make('tahun_masuk_kuliah')->label('Tahun Masuk Kuliah'),
125-
TextEntry::make('latitude')->label('Latitude'),
126-
TextEntry::make('longitude')->label('Longitude'),
127-
]);
44+
// Format data agar mudah dikonsumsi JS (terutama URL gambar dan Tanggal)
45+
$this->anggotaJson = $anggotas->map(function ($item) {
46+
return [
47+
'id' => $item->id,
48+
'nama' => $item->nama,
49+
'latitude' => $item->latitude,
50+
'longitude' => $item->longitude,
51+
'jurusan_id' => $item->jurusan_id,
52+
'komisariat_id' => $item->komisariat_id,
53+
'foto_url' => $item->foto ? Storage::url($item->foto) : url('/images/default-avatar.png'),
54+
'kelamin' => $item->kelamin,
55+
'no_wa' => $item->no_wa,
56+
'tempat_lahir' => $item->tempat_lahir,
57+
'tanggal_lahir' => $item->tanggal_lahir ? \Carbon\Carbon::parse($item->tanggal_lahir)->format('d F Y') : '-',
58+
'alamat' => $item->alamat,
59+
'jurusan_nama' => $item->jurusan?->nama_jurusan ?? '-',
60+
'komisariat_nama' => $item->komisariat?->nama ?? '-',
61+
'tahun_lk1' => $item->tahun_lk1,
62+
'tahun_masuk_kuliah' => $item->tahun_masuk_kuliah,
63+
'tahun_lk2' => $item->tahun_lk2,
64+
'cabang_lk2' => $item->cabang_lk2,
65+
'tahun_lk3' => $item->tahun_lk3,
66+
'badko_lk3' => $item->badko_lk3,
67+
'tahun_lkk' => $item->tahun_lkk,
68+
'cabang_lkk' => $item->cabang_lkk,
69+
'prestasi' => $item->prestasi,
70+
];
71+
})->toArray();
12872
}
129-
}
73+
}

‎app/Providers/Filament/AdminPanelProvider.php‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
namespace App\Providers\Filament;
44

5+
use App\Filament\Pages\visualisasi;
56
use App\Filament\Widgets\JurusanChart;
67
use App\Filament\Widgets\KomisariatChart;
78
use App\Filament\Widgets\KomisariatMapWidget;
@@ -23,6 +24,7 @@
2324
use Illuminate\Session\Middleware\StartSession;
2425
use Illuminate\View\Middleware\ShareErrorsFromSession;
2526
use Illuminate\Support\Facades\Blade;
27+
use Filament\View\PanelsRenderHook;
2628
use Filament\Support\Facades\FilamentAsset;
2729

2830
class AdminPanelProvider extends PanelProvider
@@ -31,6 +33,11 @@ public function panel(Panel $panel): Panel
3133
{
3234
return $panel
3335
->spa()
36+
->spaUrlExceptions(fn (): array => [
37+
// Halaman ini akan di-load secara FULL RELOAD (bukan SPA)
38+
// Jadi Google Maps bakal aman sentosa
39+
visualisasi::getUrl(),
40+
])
3441
->id('admin')
3542
->path('dashboard')
3643
->login()
@@ -64,9 +71,13 @@ public function panel(Panel $panel): Panel
6471
Authenticate::class,
6572
])
6673
->sidebarFullyCollapsibleOnDesktop()
67-
->brandLogo(fn () => view('filament.admin.logo'))
74+
->brandLogo(fn() => view('filament.admin.logo'))
6875
->brandLogoHeight('2rem')
6976
->globalSearch(false)
70-
;
77+
->renderHook(
78+
PanelsRenderHook::HEAD_END,
79+
fn(): string => Blade::render('@vite(["resources/css/app.css", "resources/js/app.js"])')
80+
)
81+
;
7182
}
7283
}

‎resources/css/app.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,4 +50,4 @@
5050
html {
5151
scroll-behavior: smooth;
5252
}
53-
53+
@variant dark (&:where(.dark, .dark *));

0 commit comments

Comments
 (0)