daengdeni/lpj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 refactor(form-penilai): rapikan struktur CSS dan formatting kode

Browse Source 
- Reorder CSS class sesuai standar Tailwind (layout → sizing → styling)
- Perbaiki indentasi, spacing, dan line breaks untuk readability
- Ganti `else if` menjadi `elseif` pada PHP conditional
- Rapikan multi-line assignment pada nilai luas apartemen-kantor
- Update contoh class: `input w-full` → `w-full input`, `card-title uppercase` → `uppercase card-title`
- Rapikan class ordering pada container flex & grid
- Perbaiki class di button: `btn btn-primary btn-sm mt-5` → `mt-5 btn btn-primary btn-sm`
- Konsistensi class ordering di dynamic HTML generation (JavaScript)
- Fokus pada konsistensi visual tanpa mengubah tampilan UI
This commit is contained in:
Daeng Deni Mardaeni
2025-09-19 10:18:30 +07:00
parent 698935d06f
commit 006dd44c64
3 changed files with 155 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
resources/views/component/form-penilai.blade.php
View File

@@ -1,4 +1,4 @@
<div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
<div class="grid gap-5 mx-auto w-full lg:gap-7.5">
@foreach ($permohonan->documents as $dokumen)
@if ($dokumen->jenisJaminan)
@@ -32,7 +32,7 @@
<div class="card">
<div class="card-header bg-agi-50">
<h3 class="card-title uppercase">
<h3 class="uppercase card-title">
Informasi dan pembanding
</h3>
<div class="card-tools">
@@ -47,14 +47,14 @@
<div class="card">
<div class="card-header bg-agi-50">
<h3 class="card-title uppercase">
<h3 class="uppercase card-title">
total nilai pasar wajar
</h3>
</div>
<div class="card-body gap-5">
<div class="gap-5 card-body">
<div>
<label for="total_nilai_pasar_wajar" class="form-label">Total Nilai Pasar Wajar</label>
<div class="card-body grid gap-2.5 ">
<div class="grid gap-2.5 card-body">
@php
$labelNilai = [
@@ -85,8 +85,10 @@
$luas =
$forminspeksi['tanah']['luas_tanah']['tidak sesuai'] ??
($forminspeksi['tanah']['luas_tanah']['sesuai'] ?? null);
} else if ($item === 'apartemen-kantor') {
$luas = $forminspeksi['luas_unit']['sesuai'] ?? ($forminspeksi['luas_unit']['tidak sesuai'] ?? null);
} elseif ($item === 'apartemen-kantor') {
$luas =
$forminspeksi['luas_unit']['sesuai'] ??
($forminspeksi['luas_unit']['tidak sesuai'] ?? null);
} else {
$luas = null;
}
@@ -96,52 +98,51 @@
$nilaiKey1 = 'nilai_' . $item . '_1';
$nilaiKey2 = 'nilai_' . $item . '_2';
@endphp
@if (isset($labelNilai[$item]))
<div class="flex grid-col-3 gap-2.5 w-full">
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
<label for="province" class="form-label max-w-56">
{{ $labelNilai[$item] }}
</label>
<input type="text" id="{{ $luasKey }}" class="input w-full"
name="{{ $luasKey }}"
value="{{ old($luasKey, $lpjData[$luasKey] ?? null) }}"
oninput="calculateTotal()">
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
<label for="province" class="">X</label>
<label class="input">
<i class="">Rp</i>
<input type="text" id="{{ $nilaiKey1 }}" class="w-full currency"
name="{{ $nilaiKey1 }}"
value="{{ old($nilaiKey1, $lpjData[$nilaiKey1] ?? null) }}"
oninput="calculateTotal()">
</label>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
<label class="input">
<i class="">Rp</i>
<input id="{{ $nilaiKey2 }}" type="text"
class="w-full currency-format"
name="{{ $nilaiKey2 }}"
value="{{ old($nilaiKey2, $lpjData[$nilaiKey2] ?? null) }}">
</label>
</div>
</div>
@endif
@if (isset($labelNilai[$item]))
<div class="flex gap-2.5 w-full grid-col-3">
<div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
<label for="province" class="form-label max-w-56">
{{ $labelNilai[$item] }}
</label>
<input type="text" id="{{ $luasKey }}" class="w-full input"
name="{{ $luasKey }}"
value="{{ old($luasKey, $lpjData[$luasKey] ?? null) }}"
oninput="calculateTotal()">
</div>
<div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
<label for="province" class="">X</label>
<label class="input">
<i class="">Rp</i>
<input type="text" id="{{ $nilaiKey1 }}" class="w-full currency"
name="{{ $nilaiKey1 }}"
value="{{ old($nilaiKey1, $lpjData[$nilaiKey1] ?? null) }}"
oninput="calculateTotal()">
</label>
</div>
<div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
<label class="input">
<i class="">Rp</i>
<input id="{{ $nilaiKey2 }}" type="text" class="w-full currency-format"
name="{{ $nilaiKey2 }}"
value="{{ old($nilaiKey2, $lpjData[$nilaiKey2] ?? null) }}">
</label>
</div>
</div>
@endif
@endforeach
<div>
<div id="add_pasar_wajar" class="flex flex-wrap gap-2.5 w-full">
<div id="add_pasar_wajar" class="flex flex-wrap gap-2.5 w-full">
</div>
</div>
<div class="flex justify-end gap-2 ">
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full grid-col-2">
<div class="flex gap-2 justify-end">
<div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap grid-col-2">
<label class="form-label max-w-56" for="">Total Nilai</label>
<label for="province" class="input">
<i class="">Rp
</i>
<input type="text" class=" w-full currency-format" id="total_nilai_pasar_wajar"
<input type="text" class="w-full currency-format" id="total_nilai_pasar_wajar"
name="total_nilai_pasar_wajar"
value="{{ old('total_nilai_pasar_wajar', $lpjData['total_nilai_pasar_wajar'] ?? null) }}">
</label>
@@ -151,22 +152,22 @@
</div>
<div class="tambah mb-10" style="margin-bottom: 20px;">
<div class="mb-10 tambah" style="margin-bottom: 20px;">
<button type="button" id="tambah-npw" class="btn btn-primary">
<i class="ki-filled ki-plus"></i>
Tambah NPW </button>
</div>
<div>
<label for="total_nilai_pasar_wajar" class="form-label uppercase">TOTAL NILAI
<label for="total_nilai_pasar_wajar" class="uppercase form-label">TOTAL NILAI
LIKUIDASI</label>
<div class="card-body grid gap-2.5 w-full">
<div class="flex grid-col-3 gap-2.5 w-full">
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
<div class="grid gap-2.5 w-full card-body">
<div class="flex gap-2.5 w-full grid-col-3">
<div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
<div class="w-full">
<label class="input">
<input type="text" id="likuidasi" name="likuidasi" class=" w-full currency"
<input type="text" id="likuidasi" name="likuidasi" class="w-full currency"
value="{{ old('likuidasi', $lpjData['likuidasi'] ?? null) }}"
oninput="calculateTotal()">
<i class="">%
@@ -176,24 +177,24 @@
</span>
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
<div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
<label for="province" class="">X</label>
<label class="input">
<i class="">Rp
</i>
<input type="text" class=" w-full currency-format" id="likuidasi_nilai_1"
<input type="text" class="w-full currency-format" id="likuidasi_nilai_1"
name="likuidasi_nilai_1"
value="{{ old('likuidasi_nilai_1', $lpjData['likuidasi_nilai_1'] ?? null) }}"
oninput="calculateTotal()">
</label>
</div>
<div class="grid gap-2.5 w-full">
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
<div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
<label class="input">
<i class="">Rp
</i>
<input type="text" class=" w-full currency-format" name="likuidasi_nilai_2"
<input type="text" class="w-full currency-format" name="likuidasi_nilai_2"
value="{{ old('likuidasi_nilai_2', $lpjData['likuidasi_nilai_2'] ?? null) }}">
</div>
@@ -203,16 +204,16 @@
</div>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5" style="margin-top: 20px">
<div class="flex flex-wrap gap-2.5 items-baseline lg:flex-nowrap" style="margin-top: 20px">
<label class="form-label lg:form-label max-w-56 ">Catatan yang Perlu Diperhatikan
<label class="form-label lg:form-label max-w-56">Catatan yang Perlu Diperhatikan
</label>
<div class="w-full">
<div id="keterangan_penilai-container" class="flex items-baseline flex-wrap gap-2.5 w-full">
<div id="keterangan_penilai-container" class="flex flex-wrap gap-2.5 items-baseline w-full">
@if (!empty($lpjData['keterangan_penilai']) && is_array($lpjData['keterangan_penilai']))
@foreach ($lpjData['keterangan_penilai'] as $index => $item)
<div class="keterangan_penilai flex items-center gap-2 mt-2 textarea-group w-full">
<textarea name="keterangan_penilai[]" class="textarea mt-2 " placeholder="Masukkan catatan penting" rows="10">{{ old("keterangan_penilai.$index", $item) }}</textarea>
<div class="flex gap-2 items-center mt-2 w-full keterangan_penilai textarea-group">
<textarea name="keterangan_penilai[]" class="mt-2 textarea" placeholder="Masukkan catatan penting" rows="10">{{ old("keterangan_penilai.$index", $item) }}</textarea>
<button class="btn btn-danger btn-sm remove-btn" type="button"
style="display: none;">
<i class="ki-outline ki-trash"></i>
@@ -220,19 +221,19 @@
</div>
@endforeach
@else
<div class="keterangan_penilai flex items-center gap-2 mt-2 textarea-group w-full">
<textarea name="keterangan_penilai[]" class="textarea mt-2 " placeholder="Masukkan catatan penting" rows="10"></textarea>
<div class="flex gap-2 items-center mt-2 w-full keterangan_penilai textarea-group">
<textarea name="keterangan_penilai[]" class="mt-2 textarea" placeholder="Masukkan catatan penting" rows="10"></textarea>
<button class="btn btn-danger btn-sm remove-btn" type="button"
style="display: none;">
<i class="ki-outline ki-trash"></i>
</button>
<em id="error-keterangan_penilai" class="alert text-danger text-sm"></em>
<em id="error-keterangan_penilai" class="text-sm alert text-danger"></em>
</div>
@endif
</div>
<button type="button"
onclick="addClonableItem('keterangan_penilai-container', 'keterangan_penilai')"
class="btn btn-primary btn-sm mt-5 ">
class="mt-5 btn btn-primary btn-sm">
<i class="ki-outline ki-plus"></i>
</button>
</div>
@@ -256,40 +257,40 @@
const newNPWRow = document.createElement('div');
newNPWRow.className = 'flex grid-col-3 gap-2.5 w-full npw-row';
newNPWRow.innerHTML = `
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
<div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
<input type="text"
id="name_npw_${npwCounter}"
class="input w-full"
class="w-full input"
name="name_npw_${npwCounter}"
placeholder="Nama NPW">
<input type="text"
id="ls_npw_${npwCounter}"
class="input w-full "
class="w-full input"
name="luas_npw_${npwCounter}"
placeholder="Luas NPW"
oninput="calculateTotal()">
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
<div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
<label for="province" class="">X</label>
<label class="input">
<i class="">Rp
</i>
<input type="text"
id="nilai_npw_${npwCounter}_1"
class=" w-full currency"
class="w-full currency"
name="nilai_npw_${npwCounter}_1"
placeholder="Harga per meter"
oninput="calculateTotal()">
</label>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
<div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
<label class="input">
<i class="">Rp
</i>
<input type="text"
id="nilai_npw_${npwCounter}_2"
class="input w-full currency-format"
class="w-full input currency-format"
name="nilai_npw_${npwCounter}_2"
placeholder="Total Nilai"
readonly>
@@ -333,16 +334,16 @@
newNPWRow.className = 'flex grid-col-3 gap-2.5 w-full npw-row mb-3';
newNPWRow.innerHTML = `
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
<div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
<input type="text"
id="name_npw_${npwCounter}"
class="input w-full"
class="w-full input"
name="name_npw_${npwCounter}"
placeholder="Nama NPW"
value="${npw.name || ''}">
<input type="text"
id="ls_npw_${npwCounter}"
class="input w-full currency-format"
class="w-full input currency-format"
name="luas_npw_${npwCounter}"
placeholder="Luas NPW"
value="${npw.luas || ''}"
@@ -350,34 +351,34 @@
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
<div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
<label for="province" class="">X</label>
<label class="input">
<i class="">Rp
</i>
<input type="text"
id="nilai_npw_${npwCounter}_1"
class=" w-full currency"
class="w-full currency"
name="nilai_npw_${npwCounter}_1"
placeholder="Harga per meter"
value="${npw.nilai_1 || ''}"
oninput="calculateTotal()">
</label>
</div>
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full">
<div class="flex flex-wrap gap-2.5 items-baseline w-full lg:flex-nowrap">
<label class="input">
<i class="">Rp
</i>
<input type="text"
id="nilai_npw_${npwCounter}_2"
class=" w-full currency-format"
class="w-full currency-format"
name="nilai_npw_${npwCounter}_2"
placeholder="Total Nilai"
value="${npw.nilai_2 || ''}"
readonly>
</label>
<div>
<button type="button" class="btn btn-danger remove-npw h-full">
<button type="button" class="h-full btn btn-danger remove-npw">
<i class="ki-filled ki-minus"></i>
</button>
</div>
@@ -620,4 +621,24 @@
input.value = formattedValue;
}
function showLoadingSwal(message, duration = 5000) {
Swal.fire({
title: message,
allowOutsideClick: false,
didOpen: () => {
Swal.showLoading();
},
timer: duration, // Durasi dalam milidetik
timerProgressBar: true, // Menampilkan progres bar timer
}).then((result) => {
if (result.dismiss === Swal.DismissReason.timer) {
console.log("Dialog loading otomatis ditutup.");
}
});
}
function hideLoadingSwal() {
Swal.close();
}
</script>

20
resources/views/penilai/index.blade.php
View File

@@ -337,5 +337,25 @@
});
}
function showLoadingSwal(message, duration = 5000) {
Swal.fire({
title: message,
allowOutsideClick: false,
didOpen: () => {
Swal.showLoading();
},
timer: duration, // Durasi dalam milidetik
timerProgressBar: true, // Menampilkan progres bar timer
}).then((result) => {
if (result.dismiss === Swal.DismissReason.timer) {
console.log("Dialog loading otomatis ditutup.");
}
});
}
function hideLoadingSwal() {
Swal.close();
}
</script>
@endpush

54
resources/views/surveyor/js/utils.blade.php
View File

@@ -1,4 +1,24 @@
<script>
function showLoadingSwal(message, duration = 5000) {
Swal.fire({
title: message,
allowOutsideClick: false,
didOpen: () => {
Swal.showLoading();
},
timer: duration, // Durasi dalam milidetik
timerProgressBar: true, // Menampilkan progres bar timer
}).then((result) => {
if (result.dismiss === Swal.DismissReason.timer) {
console.log("Dialog loading otomatis ditutup.");
}
});
}
function hideLoadingSwal() {
Swal.close();
}
function previewImage(input, imageId) {
const preview = document.getElementById(imageId);
if (input.files && input.files[0]) {
@@ -13,25 +33,25 @@
function formatNumber(input) {
const cursorPosition = input.selectionStart;
const cursorPosition = input.selectionStart;
let value = input.value.replace(/[^0-9,]/g, '');
let value = input.value.replace(/[^0-9,]/g, '');
if ((value.match(/,/g) || []).length > 1) {
value = value.replace(/,/g, (match, offset) => (offset === value.indexOf(',') ? ',' : ''));
if ((value.match(/,/g) || []).length > 1) {
value = value.replace(/,/g, (match, offset) => (offset === value.indexOf(',') ? ',' : ''));
}
if (value.includes(',')) {
const [beforeComma, afterComma] = value.split(',');
value = `${beforeComma},${afterComma.substring(0, 2)}`;
}
input.value = value ? value + ' m²' : 'm²';
input.setSelectionRange(cursorPosition, cursorPosition);
}
if (value.includes(',')) {
const [beforeComma, afterComma] = value.split(',');
value = `${beforeComma},${afterComma.substring(0, 2)}`;
}
input.value = value ? value + ' m²' : 'm²';
input.setSelectionRange(cursorPosition, cursorPosition);
}
@@ -399,9 +419,9 @@
const addressInput = document.getElementById('address');
if (status === 'sesuai') {
addressInput.value = {!! json_encode($dokumen->address ?? '') !!};
addressInput.value = {!! json_encode($dokumen->address ?? '') !!};
inputs.forEach(element => {
inputs.forEach(element => {
if (element.tagName === 'INPUT') {
element.setAttribute('readonly', true);
} else if (element.tagName === 'SELECT') {