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) @foreach ($permohonan->documents as $dokumen)
@if ($dokumen->jenisJaminan) @if ($dokumen->jenisJaminan)
@@ -32,7 +32,7 @@
<div class="card"> <div class="card">
<div class="card-header bg-agi-50"> <div class="card-header bg-agi-50">
<h3 class="card-title uppercase"> <h3 class="uppercase card-title">
Informasi dan pembanding Informasi dan pembanding
</h3> </h3>
<div class="card-tools"> <div class="card-tools">
@@ -47,14 +47,14 @@
<div class="card"> <div class="card">
<div class="card-header bg-agi-50"> <div class="card-header bg-agi-50">
<h3 class="card-title uppercase"> <h3 class="uppercase card-title">
total nilai pasar wajar total nilai pasar wajar
</h3> </h3>
</div> </div>
<div class="card-body gap-5"> <div class="gap-5 card-body">
<div> <div>
<label for="total_nilai_pasar_wajar" class="form-label">Total Nilai Pasar Wajar</label> <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 @php
$labelNilai = [ $labelNilai = [
@@ -85,8 +85,10 @@
$luas = $luas =
$forminspeksi['tanah']['luas_tanah']['tidak sesuai'] ?? $forminspeksi['tanah']['luas_tanah']['tidak sesuai'] ??
($forminspeksi['tanah']['luas_tanah']['sesuai'] ?? null); ($forminspeksi['tanah']['luas_tanah']['sesuai'] ?? null);
} else if ($item === 'apartemen-kantor') { } elseif ($item === 'apartemen-kantor') {
$luas = $forminspeksi['luas_unit']['sesuai'] ?? ($forminspeksi['luas_unit']['tidak sesuai'] ?? null); $luas =
$forminspeksi['luas_unit']['sesuai'] ??
($forminspeksi['luas_unit']['tidak sesuai'] ?? null);
} else { } else {
$luas = null; $luas = null;
} }
@@ -96,52 +98,51 @@
$nilaiKey1 = 'nilai_' . $item . '_1'; $nilaiKey1 = 'nilai_' . $item . '_1';
$nilaiKey2 = 'nilai_' . $item . '_2'; $nilaiKey2 = 'nilai_' . $item . '_2';
@endphp @endphp
@if (isset($labelNilai[$item])) @if (isset($labelNilai[$item]))
<div class="flex grid-col-3 gap-2.5 w-full"> <div class="flex gap-2.5 w-full grid-col-3">
<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="form-label max-w-56"> <label for="province" class="form-label max-w-56">
{{ $labelNilai[$item] }} {{ $labelNilai[$item] }}
</label> </label>
<input type="text" id="{{ $luasKey }}" class="input w-full" <input type="text" id="{{ $luasKey }}" class="w-full input"
name="{{ $luasKey }}" name="{{ $luasKey }}"
value="{{ old($luasKey, $lpjData[$luasKey] ?? null) }}" value="{{ old($luasKey, $lpjData[$luasKey] ?? null) }}"
oninput="calculateTotal()"> oninput="calculateTotal()">
</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 for="province" class="">X</label>
<label class="input"> <label class="input">
<i class="">Rp</i> <i class="">Rp</i>
<input type="text" id="{{ $nilaiKey1 }}" class="w-full currency" <input type="text" id="{{ $nilaiKey1 }}" class="w-full currency"
name="{{ $nilaiKey1 }}" name="{{ $nilaiKey1 }}"
value="{{ old($nilaiKey1, $lpjData[$nilaiKey1] ?? null) }}" value="{{ old($nilaiKey1, $lpjData[$nilaiKey1] ?? null) }}"
oninput="calculateTotal()"> oninput="calculateTotal()">
</label> </label>
</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 class="input"> <label class="input">
<i class="">Rp</i> <i class="">Rp</i>
<input id="{{ $nilaiKey2 }}" type="text" <input id="{{ $nilaiKey2 }}" type="text" class="w-full currency-format"
class="w-full currency-format" name="{{ $nilaiKey2 }}"
name="{{ $nilaiKey2 }}" value="{{ old($nilaiKey2, $lpjData[$nilaiKey2] ?? null) }}">
value="{{ old($nilaiKey2, $lpjData[$nilaiKey2] ?? null) }}"> </label>
</label> </div>
</div> </div>
</div> @endif
@endif
@endforeach @endforeach
<div> <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> </div>
<div class="flex justify-end gap-2 "> <div class="flex gap-2 justify-end">
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 w-full grid-col-2"> <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 class="form-label max-w-56" for="">Total Nilai</label>
<label for="province" class="input"> <label for="province" class="input">
<i class="">Rp <i class="">Rp
</i> </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" name="total_nilai_pasar_wajar"
value="{{ old('total_nilai_pasar_wajar', $lpjData['total_nilai_pasar_wajar'] ?? null) }}"> value="{{ old('total_nilai_pasar_wajar', $lpjData['total_nilai_pasar_wajar'] ?? null) }}">
</label> </label>
@@ -151,22 +152,22 @@
</div> </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"> <button type="button" id="tambah-npw" class="btn btn-primary">
<i class="ki-filled ki-plus"></i> <i class="ki-filled ki-plus"></i>
Tambah NPW </button> Tambah NPW </button>
</div> </div>
<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> LIKUIDASI</label>
<div class="card-body grid gap-2.5 w-full"> <div class="grid gap-2.5 w-full card-body">
<div class="flex grid-col-3 gap-2.5 w-full"> <div class="flex gap-2.5 w-full grid-col-3">
<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">
<div class="w-full"> <div class="w-full">
<label class="input"> <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) }}" value="{{ old('likuidasi', $lpjData['likuidasi'] ?? null) }}"
oninput="calculateTotal()"> oninput="calculateTotal()">
<i class="">% <i class="">%
@@ -176,24 +177,24 @@
</span> </span>
</div> </div>
</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 for="province" class="">X</label>
<label class="input"> <label class="input">
<i class="">Rp <i class="">Rp
</i> </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" name="likuidasi_nilai_1"
value="{{ old('likuidasi_nilai_1', $lpjData['likuidasi_nilai_1'] ?? null) }}" value="{{ old('likuidasi_nilai_1', $lpjData['likuidasi_nilai_1'] ?? null) }}"
oninput="calculateTotal()"> oninput="calculateTotal()">
</label> </label>
</div> </div>
<div class="grid gap-2.5 w-full"> <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"> <label class="input">
<i class="">Rp <i class="">Rp
</i> </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) }}"> value="{{ old('likuidasi_nilai_2', $lpjData['likuidasi_nilai_2'] ?? null) }}">
</div> </div>
@@ -203,16 +204,16 @@
</div> </div>
</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> </label>
<div class="w-full"> <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'])) @if (!empty($lpjData['keterangan_penilai']) && is_array($lpjData['keterangan_penilai']))
@foreach ($lpjData['keterangan_penilai'] as $index => $item) @foreach ($lpjData['keterangan_penilai'] as $index => $item)
<div class="keterangan_penilai flex items-center gap-2 mt-2 textarea-group w-full"> <div class="flex gap-2 items-center mt-2 w-full keterangan_penilai textarea-group">
<textarea name="keterangan_penilai[]" class="textarea mt-2 " placeholder="Masukkan catatan penting" rows="10">{{ old("keterangan_penilai.$index", $item) }}</textarea> <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" <button class="btn btn-danger btn-sm remove-btn" type="button"
style="display: none;"> style="display: none;">
<i class="ki-outline ki-trash"></i> <i class="ki-outline ki-trash"></i>
@@ -220,19 +221,19 @@
</div> </div>
@endforeach @endforeach
@else @else
<div class="keterangan_penilai flex items-center gap-2 mt-2 textarea-group w-full"> <div class="flex gap-2 items-center mt-2 w-full keterangan_penilai textarea-group">
<textarea name="keterangan_penilai[]" class="textarea mt-2 " placeholder="Masukkan catatan penting" rows="10"></textarea> <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" <button class="btn btn-danger btn-sm remove-btn" type="button"
style="display: none;"> style="display: none;">
<i class="ki-outline ki-trash"></i> <i class="ki-outline ki-trash"></i>
</button> </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> </div>
@endif @endif
</div> </div>
<button type="button" <button type="button"
onclick="addClonableItem('keterangan_penilai-container', 'keterangan_penilai')" 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> <i class="ki-outline ki-plus"></i>
</button> </button>
</div> </div>
@@ -256,40 +257,40 @@
const newNPWRow = document.createElement('div'); const newNPWRow = document.createElement('div');
newNPWRow.className = 'flex grid-col-3 gap-2.5 w-full npw-row'; newNPWRow.className = 'flex grid-col-3 gap-2.5 w-full npw-row';
newNPWRow.innerHTML = ` 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" <input type="text"
id="name_npw_${npwCounter}" id="name_npw_${npwCounter}"
class="input w-full" class="w-full input"
name="name_npw_${npwCounter}" name="name_npw_${npwCounter}"
placeholder="Nama NPW"> placeholder="Nama NPW">
<input type="text" <input type="text"
id="ls_npw_${npwCounter}" id="ls_npw_${npwCounter}"
class="input w-full " class="w-full input"
name="luas_npw_${npwCounter}" name="luas_npw_${npwCounter}"
placeholder="Luas NPW" placeholder="Luas NPW"
oninput="calculateTotal()"> oninput="calculateTotal()">
</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 for="province" class="">X</label>
<label class="input"> <label class="input">
<i class="">Rp <i class="">Rp
</i> </i>
<input type="text" <input type="text"
id="nilai_npw_${npwCounter}_1" id="nilai_npw_${npwCounter}_1"
class=" w-full currency" class="w-full currency"
name="nilai_npw_${npwCounter}_1" name="nilai_npw_${npwCounter}_1"
placeholder="Harga per meter" placeholder="Harga per meter"
oninput="calculateTotal()"> oninput="calculateTotal()">
</label> </label>
</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 class="input"> <label class="input">
<i class="">Rp <i class="">Rp
</i> </i>
<input type="text" <input type="text"
id="nilai_npw_${npwCounter}_2" id="nilai_npw_${npwCounter}_2"
class="input w-full currency-format" class="w-full input currency-format"
name="nilai_npw_${npwCounter}_2" name="nilai_npw_${npwCounter}_2"
placeholder="Total Nilai" placeholder="Total Nilai"
readonly> readonly>
@@ -333,16 +334,16 @@
newNPWRow.className = 'flex grid-col-3 gap-2.5 w-full npw-row mb-3'; newNPWRow.className = 'flex grid-col-3 gap-2.5 w-full npw-row mb-3';
newNPWRow.innerHTML = ` 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" <input type="text"
id="name_npw_${npwCounter}" id="name_npw_${npwCounter}"
class="input w-full" class="w-full input"
name="name_npw_${npwCounter}" name="name_npw_${npwCounter}"
placeholder="Nama NPW" placeholder="Nama NPW"
value="${npw.name || ''}"> value="${npw.name || ''}">
<input type="text" <input type="text"
id="ls_npw_${npwCounter}" id="ls_npw_${npwCounter}"
class="input w-full currency-format" class="w-full input currency-format"
name="luas_npw_${npwCounter}" name="luas_npw_${npwCounter}"
placeholder="Luas NPW" placeholder="Luas NPW"
value="${npw.luas || ''}" value="${npw.luas || ''}"
@@ -350,34 +351,34 @@
</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 for="province" class="">X</label>
<label class="input"> <label class="input">
<i class="">Rp <i class="">Rp
</i> </i>
<input type="text" <input type="text"
id="nilai_npw_${npwCounter}_1" id="nilai_npw_${npwCounter}_1"
class=" w-full currency" class="w-full currency"
name="nilai_npw_${npwCounter}_1" name="nilai_npw_${npwCounter}_1"
placeholder="Harga per meter" placeholder="Harga per meter"
value="${npw.nilai_1 || ''}" value="${npw.nilai_1 || ''}"
oninput="calculateTotal()"> oninput="calculateTotal()">
</label> </label>
</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 class="input"> <label class="input">
<i class="">Rp <i class="">Rp
</i> </i>
<input type="text" <input type="text"
id="nilai_npw_${npwCounter}_2" id="nilai_npw_${npwCounter}_2"
class=" w-full currency-format" class="w-full currency-format"
name="nilai_npw_${npwCounter}_2" name="nilai_npw_${npwCounter}_2"
placeholder="Total Nilai" placeholder="Total Nilai"
value="${npw.nilai_2 || ''}" value="${npw.nilai_2 || ''}"
readonly> readonly>
</label> </label>
<div> <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> <i class="ki-filled ki-minus"></i>
</button> </button>
</div> </div>
@@ -620,4 +621,24 @@
input.value = formattedValue; 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> </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> </script>
@endpush @endpush

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

@@ -1,4 +1,24 @@
<script> <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) { function previewImage(input, imageId) {
const preview = document.getElementById(imageId); const preview = document.getElementById(imageId);
if (input.files && input.files[0]) { if (input.files && input.files[0]) {
@@ -13,25 +33,25 @@
function formatNumber(input) { 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) { if ((value.match(/,/g) || []).length > 1) {
value = value.replace(/,/g, (match, offset) => (offset === value.indexOf(',') ? ',' : '')); 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'); const addressInput = document.getElementById('address');
if (status === 'sesuai') { 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') { if (element.tagName === 'INPUT') {
element.setAttribute('readonly', true); element.setAttribute('readonly', true);
} else if (element.tagName === 'SELECT') { } else if (element.tagName === 'SELECT') {