Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

preview suplemen #481

Open
wants to merge 2 commits into
base: bug-fix
Choose a base branch
from
+247 −8
Open

preview suplemen #481

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f503cd5
preview suplemen
FirlianiF Dec 28, 2024
c867fcb
update
FirlianiF Jan 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions app/Helpers/general.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,6 @@
'time' => 'Input Jam',
'textarea' => 'Text Area',
'select-manual' => 'Pilihan (Kustom)',
'select-otomatis' => 'Pilihan (Referensi)',
'hari' => 'Input Hari',
'hari-tanggal' => 'Input Hari dan Tanggal',
]));

if (! function_exists('openkab_versi')) {
Expand Down
7 changes: 7 additions & 0 deletions resources/views/suplemen/edit.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,9 @@
</div>
<div class="card-footer">
@include('layouts.reset_form')
<button type="button" class="btn btn-secondary btn-sm pull-right" id="previewButton">
<i class="fa fa-eye"></i> Preview
</button>
<button type="submit" class="btn btn-info btn-sm pull-right">
<i class="fa fa-check"></i> Simpan
</button>
Expand All @@ -87,8 +90,12 @@
</div>
</div>
</div>
@include('suplemen.preview')

@endsection

@section('js')
@include('suplemen.edit_js')
@include('suplemen.preview_js')

@endsection
8 changes: 7 additions & 1 deletion resources/views/suplemen/form.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,13 +69,15 @@
</div>
<div class="form-group row">
@include('suplemen.kode_isian')

</div>


</div>
<div class="card-footer">
@include('layouts.reset_form')
<button type="button" class="btn btn-secondary btn-sm pull-right" id="previewButton">
<i class="fa fa-eye"></i> Preview
</button>
<button type="submit" class="btn btn-info btn-sm pull-right">
<i class="fa fa-check"></i> Simpan
</button>
Expand All @@ -84,9 +86,13 @@
</div>
</div>
</div>
@include('suplemen.preview')


@endsection

@section('js')
@include('suplemen.kode_isian_js')
@include('suplemen.form_js')
@include('suplemen.preview_js')
@endsection
3 changes: 1 addition & 2 deletions resources/views/suplemen/kode_isian.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,5 +66,4 @@
<button type="button" class="btn btn-success btn-sm btn-block tambah-kode" data-type="utama" title="Tambah Kode Isian">
<i class="fa fa-plus"></i>
</button>
</div>

</div>
3 changes: 1 addition & 2 deletions resources/views/suplemen/kode_isian_js.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,5 +192,4 @@
$(this).parents('.duplikasi').find('.isian').val('');
});
});

</script>
</script>
41 changes: 41 additions & 0 deletions resources/views/suplemen/preview.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<div class="modal fade" id="previewModal" tabindex="-1" role="dialog" aria-labelledby="previewModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="previewModalLabel">Preview Data Suplemen</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<table class="table table-bordered">
<tr>
<th>Sasaran</th>
<td id="previewSasaran"></td>
</tr>
<tr>
<th>Nama Data Suplemen</th>
<td id="previewNama"></td>
</tr>
<tr>
<th>Keterangan</th>
<td id="previewKeterangan"></td>
</tr>
<tr>
<th>Status</th>
<td id="previewStatus"></td>
</tr>
<tr>
<th colspan="2">Kode Isian</th>
</tr>
<tr>
<td colspan="2" id="previewKodeIsian"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
</div>
</div>
</div>
</div>
190 changes: 190 additions & 0 deletions resources/views/suplemen/preview_js.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,190 @@
<script>
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('previewButton').addEventListener('click', function () {
let isValid = true;
const requiredFields = document.querySelectorAll('[required]');
requiredFields.forEach(field => {
if (!field.value.trim()) {
isValid = false;
field.classList.add('is-invalid'); // Tambahkan class error pada input
} else {
field.classList.remove('is-invalid'); // Hapus class error jika sudah terisi
}
});

// Jika tidak valid, cegah modal tampil
if (!isValid) {
// alert('Harap isi semua bidang yang wajib (required).');
return;
}
// Ambil nilai dari form

// Ambil data dari PHP
const sasaranMap = JSON.parse('<?php echo json_encode(unserialize(SASARAN)); ?>');

// Ambil value yang dipilih dari dropdown
const selectedValue = document.querySelector('select[name="sasaran"]').value;

// Ambil nama sasaran berdasarkan value
const sasaran = sasaranMap[selectedValue] || 'Belum dipilih';
const nama = document.querySelector('input[name="nama"]').value || 'Belum diisi';
const keterangan = document.querySelector('textarea[name="keterangan"]').value || 'Belum diisi';
const status = document.querySelector('select[name="status"]').value || 'Belum dipilih';

// Format status
const statusText = status === '1' ? 'Aktif' : status === '0' ? 'Tidak Aktif' : 'Belum dipilih';

// Ambil data kode isian
const kodeIsianRows = document.querySelectorAll('#dragable-form-utama tr');
// let kodeIsianContent = '<ul>';
// kodeIsianRows.forEach(row => {
// const tipe = row.querySelector('select[name="tipe_kode[]"]').value || 'N/A';
// const namaKode = row.querySelector('input[name="nama_kode[]"]').value || 'N/A';
// const label = row.querySelector('input[name="label_kode[]"]').value || 'N/A';
// kodeIsianContent += `<li>${tipe} - ${namaKode} - ${label}</li>`;
// });
// kodeIsianContent += '</ul>';
let kodeIsianContent = '';
kodeIsianRows.forEach(row => {
const tipe = row.querySelector('select[name="tipe_kode[]"]').value || 'N/A';
const namaKode = row.querySelector('input[name="nama_kode[]"]').value || 'N/A';
const label = row.querySelector('input[name="label_kode[]"]').value || 'N/A';
const placeholder = row.querySelector('input[name="deskripsi_kode[]"]') ? row.querySelector('input[name="deskripsi_kode[]"]').value : '';
const kolom = row.querySelector('select[name="kolom[]"]').value || '12';
// Cek jika elemen required ada
const requiredElement = row.querySelector('input[name="required_kode[]"]');
const required = requiredElement && requiredElement.checked ? 'required' : '';

// Menentukan class kolom
const widthClass = 'col-sm-' + kolom;

let fieldHtml = '';
if (tipe === 'date') {
fieldHtml = `
<div class="row mb-3">
<label class="col-sm-3 control-label" for="${namaKode}">${label}</label>
<div class="col-sm-9">
<div class="row">
<div class="${widthClass}">
<div class="input-group input-group-sm date">
<input type="date" class="form-control input-sm pull-right" name="input_data[${namaKode}]" id="${namaKode}" ${required} placeholder="${placeholder}">
</div>
</div>
</div>
</div>
</div>`;
} else if (tipe === 'text') {
fieldHtml = `
<div class="row mb-3">
<label class="col-sm-3 control-label" for="${namaKode}">${label}</label>
<div class="col-sm-9">
<div class="row">
<div class="${widthClass}">
<input type="text" class="form-control" name="input_data[${namaKode}]" id="${namaKode}" ${required} placeholder="${placeholder}">
</div>
</div>
</div>
</div>`;
} else if (tipe === 'email') {
fieldHtml = `
<div class="row mb-3">
<label class="col-sm-3 control-label" for="${namaKode}">${label}</label>
<div class="col-sm-9">
<div class="row">
<div class="${widthClass}">
<input type="email" class="form-control" name="input_data[${namaKode}]" id="${namaKode}" ${required} placeholder="${placeholder}">
</div>
</div>
</div>
</div>`;
} else if (tipe === 'url') {
fieldHtml = `
<div class="row mb-3">
<label class="col-sm-3 control-label" for="${namaKode}">${label}</label>
<div class="col-sm-9">
<div class="row">
<div class="${widthClass}">
<input type="url" class="form-control" name="input_data[${namaKode}]" id="${namaKode}" ${required} placeholder="${placeholder}">
</div>
</div>
</div>
</div>`;
} else if (tipe === 'number') {
fieldHtml = `
<div class="row mb-3">
<label class="col-sm-3 control-label" for="${namaKode}">${label}</label>
<div class="col-sm-9">
<div class="row">
<div class="${widthClass}">
<input type="number" class="form-control" name="input_data[${namaKode}]" id="${namaKode}" ${required} placeholder="${placeholder}">
</div>
</div>
</div>
</div>`;
} else if (tipe === 'time') {
fieldHtml = `
<div class="row mb-3">
<label class="col-sm-3 control-label" for="${namaKode}">${label}</label>
<div class="col-sm-9">
<div class="row">
<div class="${widthClass}">
<div class="input-group input-group-sm">
<div class="input-group-addon">
<i class="fa fa-clock-o"></i>
</div>
<input type="time" class="form-control input-sm" name="input_data[${namaKode}]" id="${namaKode}" ${required} placeholder="${placeholder}">
</div>
</div>
</div>
</div>
</div>`;
} else if (tipe === 'textarea') {
fieldHtml = `
<div class="row mb-3">
<label class="col-sm-3 control-label" for="${namaKode}">${label}</label>
<div class="col-sm-9">
<div class="row">
<div class="${widthClass}">
<textarea class="form-control" name="input_data[${namaKode}]" id="${namaKode}" ${required} placeholder="${placeholder}"></textarea>
</div>
</div>
</div>
</div>`;
} else if (tipe === 'select-manual') {
const pilihan = row.querySelector('textarea[name="pilihan_kode[]"]').value.split(','); // Assuming choices are in a comma-separated string
let optionsHtml = '<option value="">-- Pilih --</option>';
pilihan.forEach(option => {
optionsHtml += `<option value="${option}">${option}</option>`;
});

fieldHtml = `
<div class="row mb-3">
<label class="col-sm-3 control-label" for="${namaKode}">${label}</label>
<div class="col-sm-9">
<div class="row">
<div class="${widthClass}">
<select class="form-control" name="input_data[${namaKode}]" id="${namaKode}" ${required}>
${optionsHtml}
</select>
</div>
</div>
</div>
</div>`;
}

kodeIsianContent += fieldHtml;
});


// Isi modal dengan data
document.getElementById('previewSasaran').textContent = sasaran;
document.getElementById('previewNama').textContent = nama;
document.getElementById('previewKeterangan').textContent = keterangan;
document.getElementById('previewStatus').textContent = statusText;
document.getElementById('previewKodeIsian').innerHTML = kodeIsianContent;

// Tampilkan modal
$('#previewModal').modal('show');
});
});
</script>
Loading