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

perbaikan basic data di form inspeksi tidak muncul

Browse Source
This commit is contained in:
majid76
2024-12-09 07:28:50 +07:00
parent b645682de8
commit 2d45e03095
10 changed files with 425 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
resources/views/surveyor/components/bangunan.blade.php
View File

@@ -144,50 +144,102 @@
</div>
</div>
<!-- Spek Bangunan -->
<div class="gap-2.5">
<div class="flex items-stretch flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Spek Bangunan</label>
<div class="flex flex-wrap items-baseline w-full" id="spek-bangunan-container">
<div class="spek-bangunan w-full gap-4 mt-5">
<input type="hidden" name="nama_bagunan[]" value="Bangunan">
<label class="building-label form-label">Bangunan 1</label>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2 w-full">
@if (@isset($basicData['spekKategoriBangunan']))
@foreach ($basicData['spekKategoriBangunan'] as $item)
<div>
<input type="hidden" name="spek_kategori_bangunan[]"
value="{{ $item->name }}">
<label
class="form-label flex items-center gap-3 text-nowrap">{{ $item->name }}</label>
<div class="flex flex-wrap items-baseline w-full">
<div class="flex flex-col items-start gap-4" style="margin-top: 10px">
@foreach ($basicData['spekBangunan'] as $spek)
@if ($spek->spek_kategori_bangunan_id == $item->id)
<label class="form-label flex items-center gap-2.5">
<input class="checkbox"
name="spek_bangunan[{{ $item->name }}][]"
type="checkbox" value="{{ $spek->name }}" />
{{ $spek->name }}
</label>
@endif
@endforeach
@if (isset($forminspeksi['bangunan']) && is_array($forminspeksi['bangunan']))
@foreach ($forminspeksi['bangunan']['spesifikasi_bangunan'] as $index => $bangunan)
<div class="spek-bangunan w-full gap-4 mt-5">
<input type="hidden" name="nama_bangunan[]"
value="{{ isset($bangunan['bagunan']) ? $bangunan['bagunan'] : 'Bangunan ' . ($index + 1) }}"
required>
<label
class="building-label form-label">{{ isset($bangunan['bagunan']) ? $bangunan['bagunan'] : 'Bangunan ' . ($index + 1) }}</label>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2 w-full">
@if (@isset($basicData['spekKategoriBangunan']))
@foreach ($basicData['spekKategoriBangunan'] as $item)
<div>
<input type="hidden" name="spek_kategori_bangunan[]"
value="{{ $item->name }}">
<label
class="form-label flex items-center gap-3 text-nowrap">{{ $item->name }}</label>
<div class="flex flex-wrap items-baseline w-full">
<div class="flex flex-col items-start gap-4"
style="margin-top: 10px">
@foreach ($basicData['spekBangunan'] as $spek)
@if ($spek->spek_kategori_bangunan_id == $item->id)
<label
class="form-label flex items-center gap-2.5">
<input class="checkbox"
name="spek_bangunan[{{ $index }}][{{ $item->name }}][]"
type="checkbox"
value="{{ $spek->name }}"
{{ isset($bangunan['spek_kategori_bangunan'][$item->name]) &&
in_array($spek->name, $bangunan['spek_kategori_bangunan'][$item->name])
? 'checked'
: '' }} />
{{ $spek->name }}
</label>
@endif
@endforeach
</div>
<em id="error-spek_bangunan_{{ $item->name }}"
class="alert text-danger text-sm"></em>
</div>
</div>
@endforeach
@endif
</div>
<button type="button"
class="mt-2 btn btn-danger btn-outline btn-xs delete-button"
style="display: none;">Hapus</button>
</div>
@endforeach
@else
<!-- Default empty building form when no data exists -->
<div class="spek-bangunan w-full gap-4 mt-5">
<input type="text" name="nama_bangunan[]" value="Bangunan 1" required>
<label class="building-label form-label">Bangunan 1</label>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2 w-full">
@if (@isset($basicData['spekKategoriBangunan']))
@foreach ($basicData['spekKategoriBangunan'] as $item)
<div>
<input type="hidden" name="spek_kategori_bangunan[]"
value="{{ $item->name }}">
<label
class="form-label flex items-center gap-3 text-nowrap">{{ $item->name }}</label>
<div class="flex flex-wrap items-baseline w-full">
<div class="flex flex-col items-start gap-4"
style="margin-top: 10px">
@foreach ($basicData['spekBangunan'] as $spek)
@if ($spek->spek_kategori_bangunan_id == $item->id)
<label class="form-label flex items-center gap-2.5">
<input class="checkbox"
name="spek_bangunan[0][{{ $item->name }}][]"
type="checkbox"
value="{{ $spek->name }}" />
{{ $spek->name }}
</label>
@endif
@endforeach
</div>
<em id="error-spek_bangunan_{{ $item->name }}"
class="alert text-danger text-sm"></em>
</div>
<em id="error-spek_bangunan_{{ $item->name }}"
class="alert text-danger text-sm"></em>
</div>
</div>
@endforeach
@endif
@endforeach
@endif
</div>
<button type="button" class="mt-2 btn btn-danger btn-outline btn-xs delete-button"
style="display: none;">Hapus</button>
</div>
<button type="button" class="mt-2 btn btn-danger btn-outline btn-xs delete-button"
style="display: none;">Hapus</button>
</div>
@endif
</div>
</div>
<div class="flex justify-end">
<button class="btn btn-xs btn-primary" type="button" id="addBagunan">
<button class="btn btn-xs btn-primary" type="button" id="addBagunan">
tambah bangunan
<i class="ki-filled ki-plus"></i>
</button>
@@ -245,11 +297,8 @@
function updateDeleteButtonsVisibility() {
const allDeleteButtons = spekBangunanContainer.querySelectorAll('.delete-button');
allDeleteButtons.forEach(button => {
if (spekBangunanContainer.querySelectorAll('.spek-bangunan').length > 1) {
button.style.display = 'inline-block';
} else {
button.style.display = 'none';
}
button.style.display = spekBangunanContainer.querySelectorAll('.spek-bangunan').length > 1 ?
'inline-block' : 'none';
});
}
@@ -257,64 +306,80 @@
const allSpekBangunan = spekBangunanContainer.querySelectorAll('.spek-bangunan');
allSpekBangunan.forEach((div, index) => {
const label = div.querySelector('.building-label');
const nameInput = div.querySelector('input[name^="nama_bangunan"]');
if (label) {
label.textContent = `Bangunan ${index + 1}`;
const buildingName = `Bangunan ${index + 1}`;
label.textContent = buildingName;
if (nameInput) {
nameInput.value = buildingName;
}
}
});
}
function updateInputNames(container, index) {
container.querySelectorAll('input').forEach(input => {
if (input.name) {
if (input.name.includes('[')) {
if (input.name.startsWith('spek_bangunan')) {
// Handle spek_bangunan inputs
const matches = input.name.match(/spek_bangunan\[\d+\]\[(.*?)\]/);
if (matches) {
input.name = `spek_bangunan[${index}][${matches[1]}][]`;
}
} else {
// Handle other array inputs
input.name = input.name.replace(/\[\d*\]/, `[${index}]`);
}
}
}
});
}
document.getElementById('addBagunan').addEventListener('click', function() {
const newDiv = spekBangunanContainer.querySelector('.spek-bangunan').cloneNode(true);
const newIndex = spekBangunanContainer.querySelectorAll('.spek-bangunan').length;
// Update input fields
newDiv.querySelectorAll('select, input').forEach((input, index) => {
if (input.type === 'checkbox' || input.type === 'radio') {
// Reset and update inputs
newDiv.querySelectorAll('input').forEach(input => {
if (input.type === 'checkbox') {
input.checked = false;
} else {
input.value = '';
}
// Update name attribute
if (input.name) {
const baseName = input.name.split('[')[0]; // Get the base name
const count = spekBangunanContainer.querySelectorAll('.spek-bangunan').length + 1;
input.name = `${baseName}[${count}]`;
}
});
// Append the cloned div
spekBangunanContainer.appendChild(newDiv);
// Update input names
updateInputNames(newDiv, newIndex);
// Add event listener to the delete button in the cloned div
newDiv.querySelector('.delete-button').addEventListener('click', function() {
spekBangunanContainer.removeChild(newDiv);
// Add delete button handler
const deleteButton = newDiv.querySelector('.delete-button');
deleteButton.addEventListener('click', function() {
newDiv.remove();
updateDeleteButtonsVisibility();
updateBuildingLabels();
});
// Update UI
// Append and update UI
spekBangunanContainer.appendChild(newDiv);
updateDeleteButtonsVisibility();
updateBuildingLabels();
});
// Initial setup: Ensure "Bangunan 1" is labeled
// Initialize on page load
document.addEventListener('DOMContentLoaded', () => {
updateDeleteButtonsVisibility();
updateBuildingLabels(); // Ensure the first label is set
});
updateBuildingLabels();
// Add delete functionality to the initial form
spekBangunanContainer.querySelectorAll('.delete-button').forEach(button => {
button.addEventListener('click', function() {
const spekBangunan = this.closest('.spek-bangunan');
// Make sure not to delete the last remaining form
if (spekBangunanContainer.querySelectorAll('.spek-bangunan').length > 1) {
spekBangunan.remove();
updateDeleteButtonsVisibility();
updateBuildingLabels(); // Update the labels after removing
}
// Add delete handlers to existing buttons
spekBangunanContainer.querySelectorAll('.delete-button').forEach(button => {
button.addEventListener('click', function() {
if (spekBangunanContainer.querySelectorAll('.spek-bangunan').length > 1) {
this.closest('.spek-bangunan').remove();
updateDeleteButtonsVisibility();
updateBuildingLabels();
}
});
});
});
</script>