filter profil petani
This commit is contained in:
@@ -1,5 +1,87 @@
|
||||
@extends('layout.main')
|
||||
|
||||
@push('style')
|
||||
<style>
|
||||
.indicator-filter-row {
|
||||
padding-bottom: 1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
.indicator-filter-bar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.indicator-filter-line {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
.indicator-filter-section-label {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-weight: 500;
|
||||
margin-right: .5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.indicator-filter-bar .form-select,
|
||||
.indicator-filter-bar .btn {
|
||||
min-height: 31px;
|
||||
}
|
||||
|
||||
.indicator-filter-bar .form-select {
|
||||
background-color: var(--bs-paper-bg);
|
||||
border-color: var(--bs-border-color);
|
||||
border-radius: var(--bs-border-radius);
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
|
||||
.indicator-filter-bar .btn {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.indicator-filter-bar .form-select:focus {
|
||||
border-color: rgba(40, 167, 69, .55);
|
||||
box-shadow: 0 0 0 .2rem rgba(40, 167, 69, .12);
|
||||
}
|
||||
|
||||
.indicator-filter-static {
|
||||
align-items: center;
|
||||
background-color: var(--bs-paper-bg);
|
||||
border: 1px solid var(--bs-border-color);
|
||||
border-radius: var(--bs-border-radius);
|
||||
color: var(--bs-body-color);
|
||||
display: flex;
|
||||
font-size: .8125rem;
|
||||
min-height: 31px;
|
||||
padding: .25rem .75rem;
|
||||
}
|
||||
|
||||
.indicator-filter-bar .input-group-sm {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.indicator-filter-line {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.indicator-filter-section-label {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.indicator-filter-bar .btn {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<div class="d-flex flex-row gap-3 mb-4">
|
||||
@@ -32,13 +114,154 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-6 indicator-filter-row">
|
||||
<div class="col-12">
|
||||
<div class="card card-border-shadow-primary">
|
||||
<div class="card-body py-3">
|
||||
<form method="GET" action="{{ route('petani.index') }}" id="petani-filter-form">
|
||||
<input type="hidden" name="per_page" value="{{ request('per_page', 10) }}">
|
||||
|
||||
<div class="indicator-filter-bar" id="indicator-filter-bar" aria-label="Filter data petani">
|
||||
<div class="indicator-filter-line">
|
||||
<div class="indicator-filter-section-label">
|
||||
<i class="icon-base ti tabler-map-2 me-2"></i>
|
||||
<span>Wilayah</span>
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<input
|
||||
type="hidden"
|
||||
name="kabupaten_kota_id"
|
||||
value="{{ $filters['kabupaten_kota_id'] }}"
|
||||
>
|
||||
<div
|
||||
id="filter-kabupaten"
|
||||
class="form-control form-control-sm indicator-filter-static"
|
||||
data-filter-key="kabupaten"
|
||||
data-filter-value="{{ $filters['kabupaten_kota_id'] }}"
|
||||
aria-label="Filter Kabupaten"
|
||||
role="text"
|
||||
>
|
||||
{{ preg_replace('/^(kabupaten|kota)\s+/i', '', $selectedKabupaten?->nama ?? 'Ngada') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<select
|
||||
name="kecamatan_id"
|
||||
id="filter-kecamatan"
|
||||
class="form-select form-select-sm indicator-filter-select"
|
||||
data-filter-key="kecamatan"
|
||||
aria-label="Filter Kecamatan"
|
||||
@disabled(empty($filters['kabupaten_kota_id']))
|
||||
>
|
||||
<option value="">Semua Kecamatan</option>
|
||||
@foreach($kecamatanOptions as $option)
|
||||
<option value="{{ $option->id }}" @selected((string) $filters['kecamatan_id'] === (string) $option->id)>
|
||||
{{ $option->nama }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<select
|
||||
name="desa_kelurahan_id"
|
||||
id="filter-desa"
|
||||
class="form-select form-select-sm indicator-filter-select"
|
||||
data-filter-key="desa"
|
||||
aria-label="Filter Desa"
|
||||
@disabled(empty($filters['kecamatan_id']))
|
||||
>
|
||||
<option value="">Semua Desa</option>
|
||||
@foreach($desaOptions as $option)
|
||||
<option value="{{ $option->id }}" @selected((string) $filters['desa_kelurahan_id'] === (string) $option->id)>
|
||||
{{ $option->nama }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-3">
|
||||
|
||||
<div class="indicator-filter-line">
|
||||
<div class="indicator-filter-section-label">
|
||||
<i class="icon-base ti tabler-adjustments-horizontal me-2"></i>
|
||||
<span>Data</span>
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<select
|
||||
name="komoditas_id"
|
||||
id="filter-komoditas"
|
||||
class="form-select form-select-sm indicator-filter-select"
|
||||
data-filter-key="komoditas"
|
||||
aria-label="Filter Komoditas"
|
||||
>
|
||||
<option value="">Semua Komoditas</option>
|
||||
@foreach($komoditasOptions as $option)
|
||||
<option value="{{ $option->id }}" @selected((string) $filters['komoditas_id'] === (string) $option->id)>
|
||||
{{ $option->nama }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<div class="input-group input-group-sm">
|
||||
<input
|
||||
type="text"
|
||||
name="search"
|
||||
class="form-control"
|
||||
placeholder="Cari nama / KTP..."
|
||||
value="{{ $filters['search'] }}"
|
||||
aria-label="Cari nama atau KTP"
|
||||
>
|
||||
<button type="submit" class="btn btn-outline-secondary" aria-label="Cari data petani">
|
||||
<i class="icon-base ti tabler-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-outline-secondary btn-sm"
|
||||
aria-label="Terapkan filter data petani"
|
||||
>
|
||||
<i class="icon-base ti tabler-filter me-1"></i>
|
||||
Filter
|
||||
</button>
|
||||
|
||||
<a
|
||||
href="{{ route('petani.index') }}"
|
||||
class="btn btn-outline-secondary btn-sm"
|
||||
aria-label="Reset filter data petani"
|
||||
>
|
||||
<i class="icon-base ti tabler-refresh me-1"></i>
|
||||
Reset
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header border-bottom">
|
||||
<h5 class="card-title mb-0">Data Petani</h5>
|
||||
</div>
|
||||
|
||||
<div class="card-body border-bottom pt-4">
|
||||
<form method="GET" action="{{ route('petani.index') }}" class="d-flex justify-content-between align-items-center row gap-3 gap-md-0">
|
||||
<form method="GET" action="{{ route('petani.index') }}" class="row g-3 align-items-end">
|
||||
<input type="hidden" name="komoditas_id" value="{{ $filters['komoditas_id'] }}">
|
||||
<input type="hidden" name="kabupaten_kota_id" value="{{ $filters['kabupaten_kota_id'] }}">
|
||||
<input type="hidden" name="kecamatan_id" value="{{ $filters['kecamatan_id'] }}">
|
||||
<input type="hidden" name="desa_kelurahan_id" value="{{ $filters['desa_kelurahan_id'] }}">
|
||||
<input type="hidden" name="search" value="{{ $filters['search'] }}">
|
||||
|
||||
<div class="col-md-auto">
|
||||
<div class="d-flex align-items-center">
|
||||
<label class="me-2 text-nowrap">Show</label>
|
||||
@@ -49,11 +272,7 @@
|
||||
<label class="ms-2 text-nowrap">entries</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-auto d-flex gap-2">
|
||||
<div class="input-group input-group-sm w-auto">
|
||||
<input type="text" name="search" class="form-control" placeholder="Cari Nama..." value="{{ request('search') }}">
|
||||
<button type="submit" class="btn btn-outline-primary"><i class="ti tabler-search"></i></button>
|
||||
</div>
|
||||
<div class="col-md-auto ms-md-auto">
|
||||
<a href="{{ route('petani.create') }}" class="btn btn-sm btn-primary">
|
||||
<i class="ti tabler-plus me-1"></i> Tambah
|
||||
</a>
|
||||
@@ -71,6 +290,9 @@
|
||||
<th>Usia</th>
|
||||
<th>Desa/Kelurahan</th>
|
||||
<th>Komoditas Utama</th>
|
||||
@if($showFasilitatorColumn)
|
||||
<th>Fasilitator</th>
|
||||
@endif
|
||||
<th>Segmentasi</th>
|
||||
<th>Aksi</th>
|
||||
</tr>
|
||||
@@ -84,6 +306,9 @@
|
||||
<td><span class="text-muted">{{ $item->umur }} tahun</span></td>
|
||||
<td><span class="text-muted">{{ $item->desaKelurahan?->nama }}, {{ $item->desaKelurahan?->kecamatan?->nama }}, {{ $item->desaKelurahan?->kecamatan?->kabupatenKota?->nama }}, {{ $item->desaKelurahan?->kecamatan?->kabupatenKota?->provinsi?->nama }}</span></td>
|
||||
<td>{{ $item->komoditas?->nama }}</td>
|
||||
@if($showFasilitatorColumn)
|
||||
<td><span class="text-muted">{{ $item->creator?->name ?? '-' }}</span></td>
|
||||
@endif
|
||||
<td>
|
||||
@if($item->segmen() == 'Penggerak')
|
||||
<span class="badge bg-label-success">Penggerak</span>
|
||||
@@ -104,7 +329,7 @@
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr><td colspan="6" class="text-center py-4">Tidak ada data ditemukan.</td></tr>
|
||||
<tr><td colspan="{{ $showFasilitatorColumn ? 9 : 8 }}" class="text-center py-4">Tidak ada data ditemukan.</td></tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -122,6 +347,55 @@
|
||||
const csrfToken = "{{ csrf_token() }}";
|
||||
|
||||
$(document).ready(function () {
|
||||
const kecamatanUrlTemplate = '{{ route("kecamatan.bykabupatenkota", ":id") }}';
|
||||
const desaUrlTemplate = '{{ route("desakelurahan.bykecamatan", ":id") }}';
|
||||
const $kabupatenFilter = $('#filter-kabupaten');
|
||||
const $kecamatanFilter = $('#filter-kecamatan');
|
||||
const $desaFilter = $('#filter-desa');
|
||||
|
||||
function resetSelect($select, placeholder, disabled = true) {
|
||||
$select.empty().append(`<option value="">${placeholder}</option>`);
|
||||
$select.prop('disabled', disabled);
|
||||
}
|
||||
|
||||
function fillSelect($select, data, selectedValue, placeholder) {
|
||||
resetSelect($select, placeholder, false);
|
||||
|
||||
data.forEach(function (item) {
|
||||
const option = new Option(item.nama, item.id, false, String(selectedValue || '') === String(item.id));
|
||||
$select.append(option);
|
||||
});
|
||||
}
|
||||
|
||||
$kabupatenFilter.on('change', function () {
|
||||
const kabupatenId = $(this).val();
|
||||
|
||||
resetSelect($kecamatanFilter, 'Semua Kecamatan');
|
||||
resetSelect($desaFilter, 'Semua Desa');
|
||||
|
||||
if (!kabupatenId) {
|
||||
return;
|
||||
}
|
||||
|
||||
$.get(kecamatanUrlTemplate.replace(':id', kabupatenId), function (data) {
|
||||
fillSelect($kecamatanFilter, data, '', 'Semua Kecamatan');
|
||||
});
|
||||
});
|
||||
|
||||
$kecamatanFilter.on('change', function () {
|
||||
const kecamatanId = $(this).val();
|
||||
|
||||
resetSelect($desaFilter, 'Semua Desa');
|
||||
|
||||
if (!kecamatanId) {
|
||||
return;
|
||||
}
|
||||
|
||||
$.get(desaUrlTemplate.replace(':id', kecamatanId), function (data) {
|
||||
fillSelect($desaFilter, data, '', 'Semua Desa');
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on('click', '.delete-record', function () {
|
||||
const id = $(this).data('id');
|
||||
const name = $(this).data('nama');
|
||||
|
||||
Reference in New Issue
Block a user