feat(webstatement): optimasi tampilan tabel statement dan penyesuaian mekanisme pagination
- **Penyesuaian Tampilan pada Blade Template:** - Menambahkan pengaturan padding khusus pada baris tambahan `narrative-line` untuk meningkatkan keterbacaan. - Memperbaiki properti kolom, termasuk `min-width` dan `max-width` pada kolom keterangan untuk mencegah overflow. - Mengubah alignment kolom referensi agar lebih konsisten dengan tampilan keseluruhan. - **Optimasi Pagination:** - Menambahkan variabel `$linePerPage` untuk menentukan jumlah baris per halaman yang lebih fleksibel. - Mengganti hardcoded nilai 18 menjadi referensi ke `$linePerPage` di seluruh proses logika pagination. - Mengurangi maksimal panjang karakter baris narasi dari 35 menjadi 30 untuk meningkatkan tata letak. - **Peningkatan Kode Pemrosesan Narasi:** - Memastikan bahwa teks narasi tambahan dirapikan dengan penghapusan karakter bracket `[ ]` menggunakan fungsi `str_replace`. - Menambahkan class CSS `narrative-line` pada baris tambahan narasi untuk format spesifik. - **Refaktor Logika Pemrosesan:** - Optimasi perhitungan total halaman dengan menangani baris per halaman ($linePerPage). - Memperbaiki mekanisme pengecekan dan iterasi baris kosong pada akhir tabel untuk menyesuaikan jumlah baris tetap. - **Perbaikan Minor:** - Menggunakan substring 10 karakter alih-alih `date()` untuk menampilkan tanggal untuk optimalisasi kinerja. - Menambahkan margin dan padding default pada semua baris untuk konsistensi format antar data. Perubahan ini memperbaiki tata letak dan fleksibilitas tabel statement, baik untuk narasi panjang maupun pagination, memastikan tampilannya tetap user-friendly tanpa memengaruhi struktur data backend. Signed-off-by: Daeng Deni Mardaeni <ddeni05@gmail.com>
This commit is contained in:
Daeng Deni Mardaeni
@@ -196,6 +196,18 @@
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Menghilangkan padding dan margin untuk baris narrative tambahan */
|
||||
tbody tr td {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* Khusus untuk baris narrative tambahan - tanpa padding/margin */
|
||||
tbody tr.narrative-line td {
|
||||
padding: 2px 5px;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Column width classes */
|
||||
.col-date {
|
||||
width: 10%;
|
||||
@@ -204,7 +216,8 @@
|
||||
|
||||
.col-desc {
|
||||
width: 25%;
|
||||
|
||||
min-width: 150px;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.col-valuta {
|
||||
@@ -213,12 +226,12 @@
|
||||
}
|
||||
|
||||
.col-referensi {
|
||||
width: 20%;
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.col-debet,
|
||||
.col-kredit {
|
||||
width: 10%;
|
||||
width: 12.5%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -265,6 +278,7 @@
|
||||
$totalDebit = 0;
|
||||
$totalKredit = 0;
|
||||
$line = 1;
|
||||
$linePerPage = 26;
|
||||
@endphp
|
||||
@php
|
||||
// Hitung tanggal periode berdasarkan $period
|
||||
@@ -292,7 +306,7 @@
|
||||
$currentLine = '';
|
||||
|
||||
foreach ($words as $word) {
|
||||
if (strlen($currentLine . ' ' . $word) > 35) {
|
||||
if (strlen($currentLine . ' ' . $word) > 30) {
|
||||
$narrativeLineCount++;
|
||||
$currentLine = $word;
|
||||
} else {
|
||||
@@ -310,8 +324,8 @@
|
||||
// Add 1 for the "Saldo Awal Bulan" row
|
||||
$totalLines += 1;
|
||||
|
||||
// Calculate total pages (18 lines per page)
|
||||
$totalPages = ceil($totalLines / 18);
|
||||
// Calculate total pages ($linePerPage lines per page)
|
||||
$totalPages = ceil($totalLines / $linePerPage);
|
||||
$pageNumber = 0;
|
||||
|
||||
$footerContent =
|
||||
@@ -371,7 +385,7 @@
|
||||
<th class="col-date">Tanggal</th>
|
||||
<th class="col-valuta">Tanggal<br>Valuta</th>
|
||||
<th class="text-left col-desc">Keterangan</th>
|
||||
<th class="col-referensi">Referensi</th>
|
||||
<th class="text-left col-referensi">Referensi</th>
|
||||
<th class="col-debet">Debet</th>
|
||||
<th class="col-kredit">Kredit</th>
|
||||
<th class="col-saldo">Saldo</th>
|
||||
@@ -404,7 +418,7 @@
|
||||
$narrativeLines = [];
|
||||
$currentLine = '';
|
||||
foreach ($words as $word) {
|
||||
if (strlen($currentLine . ' ' . $word) > 35) {
|
||||
if (strlen($currentLine . ' ' . $word) > 30) {
|
||||
$narrativeLines[] = trim($currentLine);
|
||||
$currentLine = $word;
|
||||
} else {
|
||||
@@ -418,8 +432,8 @@
|
||||
@endphp
|
||||
<tr>
|
||||
<td class="text-center">{{ date('d/m/Y', strtotime($row->transaction_date)) }}</td>
|
||||
<td class="text-center">{{ date('d/m/Y', strtotime($row->actual_date)) }}</td>
|
||||
<td>{{ $narrativeLines[0] ?? '' }}</td>
|
||||
<td class="text-center">{{ substr($row->actual_date, 0, 10) }}</td>
|
||||
<td>{{ str_replace(['[', ']'], ' ', $narrativeLines[0] ?? '') }}</td>
|
||||
<td>{{ $row->reference_number }}</td>
|
||||
<td class="text-right">{{ $debit > 0 ? number_format($debit, 2, ',', '.') : '' }}</td>
|
||||
<td class="text-right">{{ $kredit > 0 ? number_format($kredit, 2, ',', '.') : '' }}
|
||||
@@ -427,10 +441,10 @@
|
||||
<td class="text-right">{{ number_format($saldo, 2, ',', '.') }}</td>
|
||||
</tr>
|
||||
@for ($i = 1; $i < count($narrativeLines); $i++)
|
||||
<tr>
|
||||
<tr class="narrative-line">
|
||||
<td class="text-center"></td>
|
||||
<td class="text-center"></td>
|
||||
<td>{{ $narrativeLines[$i] }}</td>
|
||||
<td>{{ str_replace(['[', ']'], ' ', $narrativeLines[$i] ?? '') }}</td>
|
||||
<td class="text-center"></td>
|
||||
<td class="text-right"></td>
|
||||
<td class="text-right"></td>
|
||||
@@ -449,7 +463,7 @@
|
||||
<td class="text-right"></td>
|
||||
</tr>
|
||||
|
||||
@if ($line >= 18 && !$loop->last)
|
||||
@if ($line >= $linePerPage && !$loop->last)
|
||||
@php
|
||||
$line = 0;
|
||||
$pageNumber++;
|
||||
@@ -520,7 +534,7 @@
|
||||
<tbody>
|
||||
@endif
|
||||
@endforeach
|
||||
@for ($i = 0; $i < 18 - $line; $i++)
|
||||
@for ($i = 0; $i < $linePerPage - $line; $i++)
|
||||
<tr>
|
||||
<td class="text-center"></td>
|
||||
<td class="text-center"></td>
|
||||
|
||||
Reference in New Issue
Block a user