feat(signature): penambahan tanda tangan di surveyor
This commit is contained in:
majid
@@ -9,50 +9,62 @@
|
||||
<div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
|
||||
<form id="formInspeksi" method="POST" enctype="multipart/form-data" class="grid gap-5">
|
||||
@csrf
|
||||
<input type="hidden" name="permohonan_id" value="{{ $permohonan->id }}">
|
||||
<input type="hidden" name="dokument_id" value="{{ request('dokument') }}">
|
||||
<input id="permohonan_id" type="hidden" name="permohonan_id" value="{{ $permohonan->id }}">
|
||||
<input id="dokument_id" type="hidden" name="dokument_id" value="{{ request('dokument') }}">
|
||||
<input type="hidden" name="nomor_registrasi" value="{{ $permohonan->nomor_registrasi }}">
|
||||
|
||||
@if (strtolower($permohonan->tujuanPenilaian->name) == 'rap')
|
||||
<input type="hidden" name="action" value="rap">
|
||||
<input type="hidden" name="type" value="rap">
|
||||
|
||||
@include('lpj::surveyor.components.header')
|
||||
@include('lpj::surveyor.components.rap')
|
||||
@else
|
||||
@foreach ($permohonan->debiture->documents as $dokumen)
|
||||
@if ($dokumen->jenisJaminan)
|
||||
@php
|
||||
$formKategori = json_decode($dokumen->jenisJaminan->form_kategori, true);
|
||||
@endphp
|
||||
@if (isset($formKategori) && $formKategori)
|
||||
@php
|
||||
$kategoriArray = is_array($formKategori) ? $formKategori : [$formKategori];
|
||||
$kategoriUnik = array_unique($kategoriArray);
|
||||
@endphp
|
||||
<input type="hidden" name="action" value="{{ implode(',', $kategoriUnik) }}">
|
||||
<input type="hidden" name="type" value="{{ implode(',', $kategoriUnik) }}">
|
||||
@if (array_intersect($kategoriUnik, ['tanah', 'bangunan', 'apartemen-kantor']))
|
||||
@include('lpj::surveyor.components.header')
|
||||
@endif
|
||||
<input type="hidden" name="action" value="rap">
|
||||
<input type="hidden" name="type" value="rap">
|
||||
|
||||
@foreach ($kategoriUnik as $kategori)
|
||||
{{-- Tampilkan komponen sesuai kategori --}}
|
||||
@include('lpj::surveyor.components.' . str_replace('-', '-', $kategori), [
|
||||
'dokumen' => $dokumen,
|
||||
])
|
||||
@endforeach
|
||||
@include('lpj::surveyor.components.header')
|
||||
@include('lpj::surveyor.components.rap')
|
||||
@else
|
||||
@foreach ($permohonan->debiture->documents as $dokumen)
|
||||
@if ($dokumen->jenisJaminan)
|
||||
@php
|
||||
$formKategori = json_decode($dokumen->jenisJaminan->form_kategori, true);
|
||||
@endphp
|
||||
@if (isset($formKategori) && $formKategori)
|
||||
@php
|
||||
$kategoriArray = is_array($formKategori) ? $formKategori : [$formKategori];
|
||||
$kategoriUnik = array_unique($kategoriArray);
|
||||
@endphp
|
||||
<input type="hidden" name="action" value="{{ implode(',', $kategoriUnik) }}">
|
||||
<input type="hidden" name="type" value="{{ implode(',', $kategoriUnik) }}">
|
||||
@if (array_intersect($kategoriUnik, ['tanah', 'bangunan', 'apartemen-kantor']))
|
||||
@include('lpj::surveyor.components.header')
|
||||
@endif
|
||||
|
||||
@foreach ($kategoriUnik as $kategori)
|
||||
{{-- Tampilkan komponen sesuai kategori --}}
|
||||
@include('lpj::surveyor.components.' . str_replace('-', '-', $kategori), [
|
||||
'dokumen' => $dokumen,
|
||||
])
|
||||
@endforeach
|
||||
@endif
|
||||
@endif
|
||||
@endif
|
||||
@endforeach
|
||||
@endif
|
||||
<div class="flex justify-end gap-2" style="margin-right: 20px; margin-top: 20px">
|
||||
<button type="button" class="btn btn-success" id="saveButton" onclick="submitData()">
|
||||
<span id="saveButtonText">Save</span>
|
||||
<div class="spinner-border spinner-border-sm text-light" role="status" style="display: none;"
|
||||
id="saveButtonSpinner">
|
||||
@endforeach
|
||||
@endif
|
||||
<div class="card border border-agi-100 w-full rounded-lg shadow-md overflow-hidden">
|
||||
<div class="card-header bg-agi-50">
|
||||
<h3 class="card-title uppercase">
|
||||
Tanda Tangan
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="flex items-baseline justify-between flex-wrap lg:flex-nowrap">
|
||||
@foreach (['penilai', 'cabang', 'debitur', 'kjjp'] as $type)
|
||||
@include('lpj::component.signature-pad', ['type' => $type])
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end gap-2" 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">Save</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -60,7 +72,226 @@
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const signaturePads = {};
|
||||
const types = ['penilai', 'cabang', 'debitur', 'kjjp'];
|
||||
|
||||
// Inisialisasi semua signature pad
|
||||
types.forEach(type => {
|
||||
initSignaturePad(type);
|
||||
});
|
||||
|
||||
function initSignaturePad(type) {
|
||||
const canvas = document.getElementById(`signature-pad-${type}`);
|
||||
if (!canvas) return;
|
||||
|
||||
// Set ukuran canvas yang responsif
|
||||
canvas.width = canvas.offsetWidth;
|
||||
canvas.height = canvas.offsetHeight;
|
||||
|
||||
signaturePads[type] = new SignaturePad(canvas, {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0)',
|
||||
penColor: 'rgb(0, 0, 0)',
|
||||
minWidth: 0.5,
|
||||
maxWidth: 2.5
|
||||
});
|
||||
|
||||
// Load existing signature
|
||||
loadSignature(type);
|
||||
|
||||
// Event listeners
|
||||
const saveBtn = document.getElementById(`save-${type}`);
|
||||
const clearBtn = document.getElementById(`clear-${type}`);
|
||||
const deleteBtn = document.getElementById(`delete-${type}`);
|
||||
|
||||
if (saveBtn) {
|
||||
saveBtn.addEventListener('click', () => saveSignature(type));
|
||||
}
|
||||
if (clearBtn) {
|
||||
clearBtn.addEventListener('click', () => clearSignature(type));
|
||||
}
|
||||
if (deleteBtn) {
|
||||
deleteBtn.addEventListener('click', () => deleteSignature(type));
|
||||
}
|
||||
}
|
||||
|
||||
function saveSignature(type) {
|
||||
const signaturePad = signaturePads[type];
|
||||
|
||||
if (!signaturePad || signaturePad.isEmpty()) {
|
||||
Swal.fire({
|
||||
icon: 'warning',
|
||||
title: 'Peringatan',
|
||||
text: 'Harap memberikan tanda tangan terlebih dahulu.'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const data = {
|
||||
signature: signaturePad.toDataURL('image/png'),
|
||||
type: type,
|
||||
document_id: document.getElementById('dokument_id')?.value,
|
||||
permohonan_id: document.getElementById('permohonan_id')?.value
|
||||
};
|
||||
console.log(data);
|
||||
|
||||
|
||||
// Tampilkan loading
|
||||
Swal.fire({
|
||||
title: 'Menyimpan...',
|
||||
allowOutsideClick: false,
|
||||
didOpen: () => {
|
||||
Swal.showLoading();
|
||||
}
|
||||
});
|
||||
|
||||
fetch(`{{ url('/surveyor/signatures') }}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
Swal.close();
|
||||
if (data.success) {
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
text: 'Tanda tangan berhasil disimpan!',
|
||||
timer: 1500
|
||||
});
|
||||
|
||||
} else {
|
||||
throw new Error(data.message || 'Terjadi kesalahan');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Error',
|
||||
text: error.message || 'Terjadi kesalahan saat menyimpan tanda tangan'
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function loadSignature(type) {
|
||||
const params = new URLSearchParams({
|
||||
document_id: document.getElementById('dokument_id')?.value,
|
||||
permohonan_id: document.getElementById('permohonan_id')?.value
|
||||
});
|
||||
|
||||
fetch(`{{ url('/surveyor/signatures/${type}?${params}') }}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success && data.data?.signature) {
|
||||
const canvas = document.getElementById(`signature-pad-${type}`);
|
||||
if (!canvas) return;
|
||||
|
||||
const signaturePad = signaturePads[type];
|
||||
const image = new Image();
|
||||
|
||||
image.onload = function() {
|
||||
const context = canvas.getContext('2d');
|
||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
context.drawImage(image, 0, 0, canvas.width, canvas.height);
|
||||
};
|
||||
image.src = data.data.signature;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading signature:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function deleteSignature(type) {
|
||||
Swal.fire({
|
||||
title: 'Konfirmasi',
|
||||
text: 'Apakah Anda yakin ingin menghapus tanda tangan ini?',
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Ya, Hapus',
|
||||
cancelButtonText: 'Batal'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
const data = {
|
||||
type: type,
|
||||
document_id: document.getElementById('dokument_id')?.value,
|
||||
permohonan_id: document.getElementById('permohonan_id')?.value
|
||||
};
|
||||
|
||||
fetch(`{{ url('/surveyor/signatures/${type}') }}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
clearSignature(type);
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
text: 'Tanda tangan berhasil dihapus!',
|
||||
timer: 1500
|
||||
});
|
||||
} else {
|
||||
throw new Error(data.message || 'Terjadi kesalahan');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Error',
|
||||
text: error.message ||
|
||||
'Terjadi kesalahan saat menghapus tanda tangan'
|
||||
});
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function clearSignature(type) {
|
||||
const signaturePad = signaturePads[type];
|
||||
if (signaturePad) {
|
||||
signaturePad.clear();
|
||||
updateStatus(type, '');
|
||||
}
|
||||
}
|
||||
|
||||
function updateStatus(type, message, status = '') {
|
||||
const statusElement = document.getElementById(`status-${type}`);
|
||||
if (statusElement) {
|
||||
statusElement.textContent = message;
|
||||
statusElement.className = `status-message ${status}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Handle window resize untuk canvas responsif
|
||||
window.addEventListener('resize', function() {
|
||||
types.forEach(type => {
|
||||
const canvas = document.getElementById(`signature-pad-${type}`);
|
||||
if (canvas) {
|
||||
const ratio = Math.max(window.devicePixelRatio || 1, 1);
|
||||
canvas.width = canvas.offsetWidth * ratio;
|
||||
canvas.height = canvas.offsetHeight * ratio;
|
||||
canvas.getContext('2d').scale(ratio, ratio);
|
||||
|
||||
// Reload signature jika ada
|
||||
loadSignature(type);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function updateAlamatFields(status) {
|
||||
@@ -211,7 +442,7 @@
|
||||
}).then((response) => {
|
||||
if (response.isConfirmed) {
|
||||
window.location.href =
|
||||
'{{ route('surveyor.show', ['id' => $permohonan->id]) }}';
|
||||
'{{ route('surveyor.show', ['id' => $permohonan->id]) }}';
|
||||
}
|
||||
});
|
||||
} else {
|
||||
|
||||
Reference in New Issue
Block a user