🔧 refactor(inspeksi): gunakan updateOrCreate & perbaikan kode

- Ganti `Inspeksi::create()` → `updateOrCreate()` di PenilaiController (2x) & SurveyorController (1x) dengan kondisi upsert (permohonan_id + dokument_id)
- Tambah logging di SaveFormInspesksiService.php (`Log::info`) untuk debugging & validasi action kosong
- Perbaiki error handling dengan pesan lebih informatif `'Gagal menyimpan data : '.$e->getMessage()`
- Refaktor parsing action memakai array_map & array_filter agar lebih efisien
- Rapikan kode: hapus baris kosong tidak perlu & improve readability
- Perbaiki urutan class CSS di beberapa Blade view (rap-penilai, penilai/index, surveyor/inspeksi)
- Perbaiki XSS di rap-penilai.blade.php dengan `{!! json_encode($dokumen->address ?? '') !!}`
- Tingkatkan integritas database: cegah duplikasi data inspeksi via updateOrCreate()
- Tambah keamanan & maintainability: logging, validasi input, perbaikan format, serta pembersihan kode lama
This commit is contained in:
Daeng Deni Mardaeni
2025-09-19 09:06:12 +07:00
parent 17f7482080
commit ee7c8ce97f
6 changed files with 181 additions and 182 deletions

View File

@@ -6,7 +6,7 @@
@section('content')
@include('lpj::assetsku.includenya')
<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">
<form id="formInspeksi" method="POST" enctype="multipart/form-data" class="grid gap-5">
@csrf
<input id="permohonan_id" type="hidden" name="permohonan_id" value="{{ $permohonan->id }}">
@@ -46,14 +46,14 @@
@endif
@endforeach
@endif
<div class="card border border-agi-100 w-full rounded-lg shadow-md overflow-hidden">
<div class="overflow-hidden w-full rounded-lg border shadow-md card border-agi-100">
<div class="card-header light:bg-agi-50">
<h3 class="card-title uppercase">
<h3 class="uppercase card-title">
Tanda Tangan
</h3>
</div>
<div class="card-body">
<div class="flex items-baseline justify-between flex-wrap lg:flex-nowrap">
<div class="flex flex-wrap justify-between items-baseline lg:flex-nowrap">
@foreach (['penilai', 'cabang', 'debitur', 'kjpp'] as $type)
@include('lpj::component.signature-pad', ['type' => $type])
@endforeach
@@ -65,7 +65,7 @@
</div>
</div>
<div class="flex justify-end gap-2" style="margin-right: 20px; margin-top: 20px">
<div class="flex gap-2 justify-end" style="margin-right: 20px; margin-top: 20px">
<button type="button" class="btn btn-primary" id="saveButton" onclick="submitData()">
<i class="ki-filled ki-save-2"></i>
<span id="saveButtonText">Simpan</span>
@@ -95,122 +95,122 @@
console.log(datas);
document.addEventListener('DOMContentLoaded', function() {
const signaturePads = {};
const types = ['penilai', 'cabang', 'debitur', 'kjpp'];
const types = ['penilai', 'cabang', 'debitur', 'kjpp'];
// Initialize all signature pads
types.forEach(type => initSignaturePad(type));
// Initialize all signature pads
types.forEach(type => initSignaturePad(type));
function initSignaturePad(type) {
const canvas = document.getElementById(`signature-pad-${type}`);
if (!canvas) return;
function initSignaturePad(type) {
const canvas = document.getElementById(`signature-pad-${type}`);
if (!canvas) return;
// Improved canvas sizing with strict boundary control
function resizeCanvas() {
const container = canvas.closest('.signature-pad-container');
const containerWidth = container.clientWidth;
// Improved canvas sizing with strict boundary control
function resizeCanvas() {
const container = canvas.closest('.signature-pad-container');
const containerWidth = container.clientWidth;
// Set canvas style dimensions
canvas.style.width = '100%';
canvas.style.height = `${containerWidth * 0.5}px`; // 2:1 aspect ratio
// Set canvas style dimensions
canvas.style.width = '100%';
canvas.style.height = `${containerWidth * 0.5}px`; // 2:1 aspect ratio
// Set actual canvas dimensions with high DPI support
const ratio = window.devicePixelRatio || 1;
canvas.width = containerWidth * ratio;
canvas.height = (containerWidth * 0.5) * ratio;
// Set actual canvas dimensions with high DPI support
const ratio = window.devicePixelRatio || 1;
canvas.width = containerWidth * ratio;
canvas.height = (containerWidth * 0.5) * ratio;
// Scale canvas context
const ctx = canvas.getContext('2d');
ctx.scale(ratio, ratio);
// Scale canvas context
const ctx = canvas.getContext('2d');
ctx.scale(ratio, ratio);
// Clear and redraw existing signature if any
if (signaturePads[type] && !signaturePads[type].isEmpty()) {
const signaturePad = signaturePads[type];
const imageData = signaturePad.toData();
signaturePad.clear();
signaturePad.fromData(imageData);
}
}
// Create signature pad with boundary and scaling control
const signaturePad = new SignaturePad(canvas, {
backgroundColor: 'rgba(255, 255, 255, 0)',
penColor: 'rgb(0, 0, 0)',
minWidth: 0.5,
maxWidth: 2.5,
throttle: 16,
dotSize: 2,
// Custom function to control signature drawing
onBegin: (event) => {
const ctx = canvas.getContext('2d');
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
// Ensure drawing stays within canvas
if (
event.clientX < rect.left ||
event.clientX > rect.right ||
event.clientY < rect.top ||
event.clientY > rect.bottom
) {
return false;
// Clear and redraw existing signature if any
if (signaturePads[type] && !signaturePads[type].isEmpty()) {
const signaturePad = signaturePads[type];
const imageData = signaturePad.toData();
signaturePad.clear();
signaturePad.fromData(imageData);
}
}
// Create signature pad with boundary and scaling control
const signaturePad = new SignaturePad(canvas, {
backgroundColor: 'rgba(255, 255, 255, 0)',
penColor: 'rgb(0, 0, 0)',
minWidth: 0.5,
maxWidth: 2.5,
throttle: 16,
dotSize: 2,
// Custom function to control signature drawing
onBegin: (event) => {
const ctx = canvas.getContext('2d');
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
// Ensure drawing stays within canvas
if (
event.clientX < rect.left ||
event.clientX > rect.right ||
event.clientY < rect.top ||
event.clientY > rect.bottom
) {
return false;
}
}
});
signaturePads[type] = signaturePad;
// Initial resize
resizeCanvas();
// Load existing signature
if (type === 'penilai' || type === 'cabang') {
loadPenilaiAndCabangSignature(type, signaturePad);
} else {
loadSignature(type, signaturePad);
}
// Add event listeners
addEventListeners(type, signaturePad);
// Add resize listener
window.addEventListener('resize', () => {
resizeCanvas();
});
}
});
signaturePads[type] = signaturePad;
// Initial resize
resizeCanvas();
function drawSignature(signaturePad, imageUrl) {
const image = new Image();
image.crossOrigin = 'Anonymous';
image.onload = function() {
const ctx = signaturePad.canvas.getContext('2d');
const canvasWidth = signaturePad.canvas.width;
const canvasHeight = signaturePad.canvas.height;
// Load existing signature
if (type === 'penilai' || type === 'cabang') {
loadPenilaiAndCabangSignature(type, signaturePad);
} else {
loadSignature(type, signaturePad);
}
// Clear previous content
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
// Add event listeners
addEventListeners(type, signaturePad);
// Calculate scaling to fit within canvas while maintaining aspect ratio
const scale = Math.min(
canvasWidth / image.width,
canvasHeight / image.height
);
// Add resize listener
window.addEventListener('resize', () => {
resizeCanvas();
});
}
const scaledWidth = image.width * scale;
const scaledHeight = image.height * scale;
function drawSignature(signaturePad, imageUrl) {
const image = new Image();
image.crossOrigin = 'Anonymous';
image.onload = function() {
const ctx = signaturePad.canvas.getContext('2d');
const canvasWidth = signaturePad.canvas.width;
const canvasHeight = signaturePad.canvas.height;
// Center the image
const x = (canvasWidth - scaledWidth) / 2;
const y = (canvasHeight - scaledHeight) / 2;
// Clear previous content
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
// Calculate scaling to fit within canvas while maintaining aspect ratio
const scale = Math.min(
canvasWidth / image.width,
canvasHeight / image.height
);
const scaledWidth = image.width * scale;
const scaledHeight = image.height * scale;
// Center the image
const x = (canvasWidth - scaledWidth) / 2;
const y = (canvasHeight - scaledHeight) / 2;
// Draw the scaled and centered image
ctx.drawImage(image, x, y, scaledWidth, scaledHeight);
};
image.onerror = function() {
console.error('Error loading signature image');
};
image.src = imageUrl;
}
// Draw the scaled and centered image
ctx.drawImage(image, x, y, scaledWidth, scaledHeight);
};
image.onerror = function() {
console.error('Error loading signature image');
};
image.src = imageUrl;
}
function addEventListeners(type, signaturePad) {
document.getElementById(`save-${type}`)?.addEventListener('click', () => saveSignature(type,
@@ -519,17 +519,17 @@
const formData = new FormData(form);
const fotoFields = [
'foto_gistaru',
'foto_bhumi',
'foto_argis_region',
'foto_tempat',
'foto_sentuh_tanahku',
'upload_gs'
];
'foto_gistaru',
'foto_bhumi',
'foto_argis_region',
'foto_tempat',
'foto_sentuh_tanahku',
'upload_gs'
];
fotoFields.forEach((field) => {
formData.delete(field);
});
fotoFields.forEach((field) => {
formData.delete(field);
});
$.ajax({
url: '{{ route('surveyor.store') }}',
type: 'POST',