ariefajar
/
MIF_E31221322
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(master-land): fix index page

This commit is contained in:
arieeefajar 2025-03-07 19:20:20 +07:00
parent fa9a30b9f0
commit f747c36eb7
5 changed files with 76 additions and 408 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/Http/Controllers/MasterData/LandController.php
View File

@ -15,8 +15,10 @@ class LandController extends Controller
public function index()
{
$lands = Land::orderBy('created_at', 'desc')->get();
$provinces = Province::all();
return view('master-data.lahan.index', compact('lands', 'provinces'));
$province = Province::where('id', $lands->first()->province_code)->first();
$regency = $province->regency()->where('id', $lands->first()->regency_code)->first();
$district = $regency->district()->where('id', $lands->first()->district_code)->first();
return view('master-data.lahan.index', compact('lands', 'province', 'regency', 'district'));
}
public function create()

10
app/Models/Province.php
View File

@ -11,4 +11,14 @@ class Province extends Model
protected $table = 'provinces';
protected $guarded = [];
public function regencies()
{
return $this->hasMany(Regency::class);
}
public function regency()
{
return $this->hasOne(Regency::class);
}
}

10
app/Models/Regency.php
View File

@ -11,4 +11,14 @@ class Regency extends Model
protected $table = 'regencies';
protected $guarded = [];
public function districts()
{
return $this->hasMany(District::class);
}
public function district()
{
return $this->hasOne(District::class);
}
}

282
public/assets/js/pages/customJs/master-data/lahan/index.js
View File

@ -1,17 +1,7 @@
var map, mapEdit;
var currentMarker = null;
var mapEdit;
var currentMarkerEdit = null;
var form = document.getElementById("add-form");
var formEdit = document.getElementById("edit-form");
var provinceField = form.querySelector("#province-field");
var provinceVal = new Choices(provinceField);
var regencyContainer = form.querySelector("#regency-container");
var regencyField = form.querySelector("#regency-field");
var regencyVal = new Choices(regencyField, {
shouldSort: false,
});
var regencyEditContainer = formEdit.querySelector("#regency-edit-container");
var regencyEditField = formEdit.querySelector("#regency-edit-field");
@ -19,51 +9,28 @@ var regencyEditVal = new Choices(regencyEditField, {
shouldSort: false,
});
var districtContainer = form.querySelector("#district-container");
var districtField = form.querySelector("#district-field");
var districtVal = new Choices(districtField, {
shouldSort: false,
});
var districtEditContainer = formEdit.querySelector("#district-edit-container");
var districtEditField = formEdit.querySelector("#district-edit-field");
var districtEditVal = new Choices(districtEditField, {
shouldSort: false,
});
var addressContainer = form.querySelector("#address-container");
var addressField = form.querySelector("#address-field");
var addressEditContainer = formEdit.querySelector("#address-edit-container");
var addressEditField = formEdit.querySelector("#address-edit-field");
var mapContainer = form.querySelector("#map-container");
var latField = form.querySelector("#lat");
var lngField = form.querySelector("#lng");
var mapEditConatiner = formEdit.querySelector("#map-edit-container");
var latEditField = formEdit.querySelector("#lat-edit");
var lngEditField = formEdit.querySelector("#lng-edit");
var loading = form.querySelector("#loading");
var loadingEdit = formEdit.querySelector("#loading-edit");
var btnContainer = form.querySelector("#add-footer");
var btnEditContainer = formEdit.querySelector("#edit-footer");
document.addEventListener("DOMContentLoaded", function () {
map = L.map("map", {
attributionControl: false,
}).setView([-8.157416852745705, 113.72281580436439], 16);
mapEdit = L.map("map-edit", {
attributionControl: false,
}).setView([-8.157416852745705, 113.72281580436439], 16);
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
}).addTo(map);
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
}).addTo(mapEdit);
@ -75,15 +42,6 @@ document.addEventListener("DOMContentLoaded", function () {
popupAnchor: [0, -50],
});
currentMarker = L.marker([-8.157416852745705, 113.72281580436439], {
icon: iconMarker,
draggable: true,
})
.addTo(map)
.bindPopup(
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan priksa lokasi petamu sudah benar.</div>`
);
currentMarkerEdit = L.marker([-8.157416852745705, 113.72281580436439], {
icon: iconMarker,
draggable: true,
@ -93,15 +51,10 @@ document.addEventListener("DOMContentLoaded", function () {
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan priksa lokasi petamu sudah benar.</div>`
);
$("#showModal").on("shown.bs.modal", function () {
map.invalidateSize();
});
$("#editModal").on("shown.bs.modal", function () {
mapEdit.invalidateSize();
});
map.on("click", onMapClick);
mapEdit.on("click", onMapClick);
});
@ -129,15 +82,10 @@ function getProvinces(provinceId) {
}
function getRegencies(provinceId) {
regencyContainer.style.display = "none";
regencyEditContainer.style.display = "none";
districtContainer.style.display = "none";
districtEditContainer.style.display = "none";
addressContainer.style.display = "none";
addressEditContainer.style.display = "none";
loading.style.display = "block";
loadingEdit.style.display = "block";
mapContainer.style.display = "none";
mapEditConatiner.style.display = "none";
const url = "/location/get-regency/" + provinceId;
@ -146,26 +94,12 @@ function getRegencies(provinceId) {
type: "GET",
success: function (response) {
if (response.success) {
loading.style.display = "none";
loadingEdit.style.display = "none";
const data = response.data;
regencyVal.clearStore();
regencyVal.clearChoices();
regencyEditVal.clearStore();
regencyEditVal.clearChoices();
regencyVal.value = "";
regencyVal.setChoices([
{
value: "",
label: "Pilih Kabupaten",
selected: true,
disabled: true,
},
]);
regencyEditVal.value = "";
regencyEditVal.setChoices([
{
@ -177,15 +111,6 @@ function getRegencies(provinceId) {
]);
if (Array.isArray(data)) {
regencyVal.setChoices(
data.map((regency) => ({
value: regency.id,
label: regency.name,
selected: false,
disabled: false,
}))
);
regencyEditVal.setChoices(
data.map((regency) => ({
value: regency.id,
@ -194,13 +119,8 @@ function getRegencies(provinceId) {
disabled: false,
}))
);
regencyContainer.style.display = "block";
regencyEditContainer.style.display = "block";
} else {
mapContainer.style.display = "block";
mapContainer.innerHTML =
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
mapEditConatiner.style.display = "block";
mapEditConatiner.innerHTML =
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
@ -208,10 +128,6 @@ function getRegencies(provinceId) {
}
},
error: function (xhr, status, error) {
mapContainer.style.display = "block";
mapContainer.innerHTML =
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
mapEditConatiner.style.display = "block";
mapEditConatiner.innerHTML =
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
@ -220,13 +136,9 @@ function getRegencies(provinceId) {
}
function getDistricts(regencyId) {
districtContainer.style.display = "none";
districtEditContainer.style.display = "none";
addressContainer.style.display = "none";
addressEditContainer.style.display = "none";
loading.style.display = "block";
loadingEdit.style.display = "block";
mapContainer.style.display = "none";
mapEditConatiner.style.display = "none";
const url = "/location/get-district/" + regencyId;
@ -235,26 +147,12 @@ function getDistricts(regencyId) {
type: "GET",
success: function (response) {
if (response.success) {
loading.style.display = "none";
loadingEdit.style.display = "none";
const data = response.data;
districtVal.clearStore();
districtVal.clearChoices();
districtEditVal.clearStore();
districtEditVal.clearChoices();
districtVal.value = "";
districtVal.setChoices([
{
value: "",
label: "Pilih Kecamatan",
selected: true,
disabled: true,
},
]);
districtEditVal.value = "";
districtEditVal.setChoices([
{
@ -266,15 +164,6 @@ function getDistricts(regencyId) {
]);
if (Array.isArray(data)) {
districtVal.setChoices(
data.map((district) => ({
value: district.id,
label: district.name,
selected: false,
disabled: false,
}))
);
districtEditVal.setChoices(
data.map((district) => ({
value: district.id,
@ -283,12 +172,8 @@ function getDistricts(regencyId) {
disabled: false,
}))
);
districtContainer.style.display = "block";
districtEditContainer.style.display = "block";
} else {
mapContainer.style.display = "block";
mapContainer.innerHTML =
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
mapEditConatiner.style.display = "block";
mapEditConatiner.innerHTML =
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
@ -296,10 +181,6 @@ function getDistricts(regencyId) {
}
},
error: function (xhr, status, error) {
mapContainer.style.display = "block";
mapContainer.innerHTML =
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
mapEditConatiner.style.display = "block";
mapEditConatiner.innerHTML =
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
@ -308,7 +189,6 @@ function getDistricts(regencyId) {
}
function showmap(districtId) {
loading.style.display = "block";
loadingEdit.style.display = "block";
if (!navigator.geolocation) {
alert("Geolocation tidak didukung oleh browser ini.");
@ -317,20 +197,13 @@ function showmap(districtId) {
navigator.geolocation.getCurrentPosition(
function (position) {
loading.style.display = "none";
loadingEdit.style.display = "none";
mapContainer.style.display = "block";
map.invalidateSize();
addressContainer.style.display = "block";
mapEditConatiner.style.display = "block";
mapEdit.invalidateSize();
addressEditContainer.style.display = "block";
btnContainer.style.display = "block";
btnEditContainer.style.display = "block";
var lat = position.coords.latitude;
@ -338,14 +211,9 @@ function showmap(districtId) {
console.log(lat, lng);
map.setView([lat, lng], 16);
mapEdit.setView([lat, lng], 16);
if (currentMarker) {
map.removeLayer(currentMarker);
}
if (currentMarker || currentMarkerEdit) {
map.removeLayer(currentMarker);
if (currentMarkerEdit) {
mapEdit.removeLayer(currentMarkerEdit);
}
@ -356,34 +224,19 @@ function showmap(districtId) {
popupAnchor: [0, -50],
});
currentMarker = L.marker([lat, lng], {
icon: iconMarker,
draggable: true,
}).addTo(map);
currentMarkerEdit = L.marker([lat, lng], {
icon: iconMarker,
draggable: true,
}).addTo(mapEdit);
currentMarker.on("dragend", onPointerDragend);
currentMarkerEdit.on("dragend", onPointerDragend);
currentMarker
.bindPopup(
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan priksa lokasi petamu sudah benar.</div>`
)
.openPopup();
currentMarkerEdit
.bindPopup(
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan priksa lokasi petamu sudah benar.</div>`
)
.openPopup();
latField.value = lat;
lngField.value = lng;
latEditField.value = lat;
lngEditField.value = lng;
},
@ -549,23 +402,13 @@ function onMapClick(e) {
var lat = e.latlng.lat;
var lng = e.latlng.lng;
if (!currentMarker || !currentMarkerEdit) {
currentMarker = L.marker(e.latlng).addTo(map);
if (!currentMarkerEdit) {
currentMarkerEdit = L.marker(e.latlng).addTo(mapEdit);
} else {
currentMarker.setLatLng(e.latlng);
currentMarkerEdit.setLatLng(e.latlng);
}
currentMarker.on("dragend", onPointerDragend);
currentMarkerEdit.on("dragend", onPointerDragend);
currentMarker
.bindPopup(
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan priksa lokasi petamu sudah benar.</div>`
)
.openPopup();
currentMarkerEdit
.bindPopup(
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan priksa lokasi petamu sudah benar.</div>`
@ -590,27 +433,6 @@ function onPointerDragend() {
lngField.value = coordinates.lng;
}
function validatePhoneNumber(input) {
input.value = input.value.replace(/\D/g, "");
if (input.value.length < 10 || input.value.length > 13) {
input.setCustomValidity("Nomor telepon tidak valid");
} else {
input.setCustomValidity("");
}
}
function validatePrice(input) {
let value = input.value.replace(/\D/g, "");
let formatted = new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
minimumFractionDigits: 0,
}).format(value);
input.value = formatted.replace("Rp", "").trim();
}
var checkAll = document.getElementById("checkAll");
checkAll &&
(checkAll.onclick = function () {
@ -722,67 +544,55 @@ function updateList() {
})),
userList.update();
}
filterContact("All"),
ischeckboxcheck(),
document
.getElementById("showModal")
.addEventListener("hidden.bs.modal", function () {
clearFields();
}),
document
.querySelector("#customerList")
.addEventListener("click", function () {
ischeckboxcheck();
});
filterContact("All"), ischeckboxcheck(), document.getElementById("showModal");
document.querySelector("#customerList").addEventListener("click", function () {
ischeckboxcheck();
});
var table = document.getElementById("customerTable"),
tr = table.getElementsByTagName("tr"),
trlist = table.querySelectorAll(".list tr"),
count = Number(isValue.replace(/[^0-9]/g, "")) + 1;
addBtn.addEventListener("click", function (e) {
"" !== customerNameField.value &&
"" !== emailField.value &&
"" !== dateField.value &&
"" !== phoneField.value &&
(customerList.add({
id:
'<a href="javascript:void(0);" class="fw-medium link-primary">#VZ' +
count +
"</a>",
customer_name: customerNameField.value,
email: emailField.value,
date: dateField.value,
phone: phoneField.value,
status: isStatus(statusField.value),
// addBtn.addEventListener("click", function (e) {
// "" !== customerNameField.value &&
// "" !== emailField.value &&
// "" !== dateField.value &&
// "" !== phoneField.value &&
// (customerList.add({
// id:
// '<a href="javascript:void(0);" class="fw-medium link-primary">#VZ' +
// count +
// "</a>",
// customer_name: customerNameField.value,
// email: emailField.value,
// date: dateField.value,
// phone: phoneField.value,
// status: isStatus(statusField.value),
// }),
// document.getElementById("close-modal").click(),
// clearFields(),
// filterContact("All"),
// count++);
// }),
editBtn.addEventListener("click", function (e) {
(document.getElementById("exampleModalLabel").innerHTML = "Edit Customer"),
customerList.get({ id: idField.value }).forEach(function (e) {
(isid = new DOMParser().parseFromString(e._values.id, "text/html")),
isid.body.firstElementChild.innerHTML == itemId &&
e.values({
id:
'<a href="javascript:void(0);" class="fw-medium link-primary">' +
idField.value +
"</a>",
customer_name: customerNameField.value,
email: emailField.value,
date: dateField.value,
phone: phoneField.value,
status: isStatus(statusField.value),
});
}),
document.getElementById("close-modal").click(),
clearFields(),
filterContact("All"),
count++);
}),
editBtn.addEventListener("click", function (e) {
(document.getElementById("exampleModalLabel").innerHTML =
"Edit Customer"),
customerList.get({ id: idField.value }).forEach(function (e) {
(isid = new DOMParser().parseFromString(
e._values.id,
"text/html"
)),
isid.body.firstElementChild.innerHTML == itemId &&
e.values({
id:
'<a href="javascript:void(0);" class="fw-medium link-primary">' +
idField.value +
"</a>",
customer_name: customerNameField.value,
email: emailField.value,
date: dateField.value,
phone: phoneField.value,
status: isStatus(statusField.value),
});
}),
document.getElementById("close-modal").click(),
clearFields();
});
clearFields();
});
function isStatus(e) {
switch (e) {
case "Active":

176
resources/views/master-data/lahan/index.blade.php
View File

@ -73,10 +73,8 @@ class="ri-add-line align-bottom me-1"></i>
<thead class="table-light">
<tr class="text-center">
<th class="sort" data-sort="no">No</th>
<th class="sort" data-sort="land_name">Nama Lahan</th>
<th class="sort" data-sort="owner">Pemilik</th>
<th class="sort" data-sort="rental_price">Harga Sewa</th>
<th class="sort" data-sort="length_of_ease">Lama Sewa</th>
<th class="sort" data-sort="address">Alamat</th>
<th class="sort" data-sort="action">Action</th>
</tr>
</thead>
@ -86,13 +84,12 @@ class="ri-add-line align-bottom me-1"></i>
<td class="no">{{ $loop->iteration }}</td>
<td class="id" style="display:none;"><a href="javascript:void(0);"
class="fw-medium link-primary">#VZ2101</a></td>
<td class="land_name">{{ $land->land_name }}</td>
<td class="owner">{{ $land->owner }}</td>
<td class="rental_price">Rp.{{ number_format($land->rental_price) }}
</td>
<td class="status">
<span>{{ \Carbon\Carbon::parse($land->length_of_ease)->diffInDays(\Carbon\Carbon::parse($land->rental_until)) }}
Hari</span>
<span class="text-capitalize">{{ $land->address }}, Kecamatan
{{ $district->name }},
{{ $regency->name }}, Provinsi {{ $province->name }}</span>
</td>
<td>
<div class="d-flex gap-2 justify-content-center">
@ -144,169 +141,8 @@ class="fw-medium link-primary">#VZ2101</a></td>
</div>
<!-- end row -->
{{-- add modal --}}
<div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header bg-light p-3">
<h5 class="modal-title" id="exampleModalLabel">Tambah Data Lahan</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
id="close-modal"></button>
</div>
<form id="add-form" class="needs-validation" method="POST" novalidate
action="{{ Auth::user()->role == 'admin' ? route('master_data.lahan.store') : route('lahan.store') }}">
@csrf
<div class="modal-body">
<div class="mb-3" id="modal-id" style="display: none;">
<label for="id-field" class="form-label">ID</label>
<input type="text" id="id-field" class="form-control" placeholder="ID"
readonly />
</div>
<div class="mb-3">
<label for="owner-field" class="form-label">Pemilik Lahan</label>
<input type="text" id="owner-field" class="form-control" name="owner"
value="{{ old('owner') }}" placeholder="Masukan Nama Pemilik Lahan" required />
<div class="invalid-feedback">
Masukan Nama Pemilik Lahan
</div>
</div>
<div class="mb-3">
<label for="nohp-field" class="form-label">Nomor HP</label>
<input type="text" id="nohp-field" class="form-control" name="nohp"
value="{{ old('nohp') }}" placeholder="Masukan Nomor HP" required
oninput="validatePhoneNumber(this)" />
<div class="invalid-feedback">
Masukan Nomor HP
</div>
</div>
<div class="mb-3">
<label for="rentalprice-field" class="form-label">Harga Sewa</label>
<input type="text" id="rentalprice-field" class="form-control"
name="rental_price" value="{{ old('rental_price') }}"
placeholder="Masukan Harga Sewa" required oninput="validatePrice(this)" />
<div class="invalid-feedback">
Masukan Harga Sewa
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="rentalstart-field" class="form-label">Mulai Dari</label>
<input type="date" id="rentalstart-field" class="form-control"
name="rental_start" value="{{ old('rental_start') }}"
min="{{ date('Y-m-d') }}" placeholder="Masukan Tanggal Mulai" required />
<div class="invalid-feedback">
Masukan Tanggal Mulai
</div>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="rentaluntil-field" class="form-label">Sampai</label>
<input type="date" id="rentaluntil-field" class="form-control"
name="rental_until" value="{{ old('rental_start') }}"
min="{{ date('Y-m-d') }}" placeholder="Masukan Tanggal Sampai"
required />
<div class="invalid-feedback">
Masukan Tanggal Sampai
</div>
</div>
</div>
</div>
<div class="mb-3">
<label for="landname-field" class="form-label">Nama Lahan</label>
<input type="text" id="landname-field" class="form-control" name="land_name"
value="{{ old('land_name') }}" placeholder="Masukan Nama Lahan" required />
<div class="invalid-feedback">
Masukan Nama Lahan
</div>
</div>
<div class="mb-3">
<label for="province-field" class="form-label">Provinsi</label>
<select name="province_id" id="province-field" class="form-control" required
onchange="getRegencies(this.value)">
<option value="" selected disabled>Pilih Provinsi</option>
@foreach ($provinces as $province)
<option value="{{ $province->id }}"
{{ old('province_id') == $province->id ? 'selected' : '' }}>
{{ $province->name }}</option>
@endforeach
</select>
<div class="invalid-feedback">
Harap Pilih Provinsi
</div>
</div>
<div class="mb-3" id="regency-container" style="display: none">
<label for="regency-field" class="form-label">Kabupaten atau Kota</label>
<select name="regency_id" id="regency-field" class="form-control" required
onchange="getDistricts(this.value)">
<option value="" selected disabled>Pilih Kabupaten atau Kota</option>
</select>
<div class="invalid-feedback">
Harap Pilih Kabupaten atau Kota
</div>
</div>
<div class="mb-3" id="district-container" style="display: none">
<label for="district-field" class="form-label">Kecamatan</label>
<select name="district_id" id="district-field" class="form-control" required
onchange="showmap(this.value)">
<option value="" selected disabled>Pilih Kecamatan</option>
</select>
<div class="invalid-feedback">
Harap Pilih Kecamatan
</div>
</div>
<div id="loading" class="text-center" style="display: none">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div class="mb-3" id="address-container" style="display: none">
<label for="address-field" class="form-label">Alamat</label>
<textarea name="address" id="address-field" rows="3" class="form-control"
placeholder="Masukan Alamat, cnth: Jl. Jend. Sudirman No. 12" required></textarea>
<div class="invalid-feedback">
Masukan Alamat
</div>
</div>
<div id="map-container" style="display: none">
<label for="map" class="form-label">Lokasi</label>
<div id="map"></div>
<div class="mt-3">
<input type="hidden" name="lat" id="lat" class="form-control"
readonly>
<input type="hidden" name="lng" id="lng" class="form-control"
readonly>
</div>
</div>
</div>
<div class="modal-footer" id="add-footer" style="display: none">
<div class="hstack gap-2 justify-content-end">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Tutup</button>
<button type="submit" class="btn btn-success" id="add-btn">Simpan</button>
</div>
</div>
</form>
</div>
</div>
</div>
{{-- edit modal --}}
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
{{-- <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header bg-light p-3">
@ -463,7 +299,7 @@ class="fw-medium link-primary">#VZ2101</a></td>
</form>
</div>
</div>
</div>
</div> --}}
<!-- Modal -->
<div class="modal fade zoomIn" id="deleteRecordModal" tabindex="-1" aria-hidden="true">