Untitled
unknown
plain_text
9 months ago
14 kB
4
Indexable
view <meta name="csrf-token" content="{{ csrf_token() }}"> <div class="modal fade" id="modal-komphard-test" aria-labelledby="modalKompHardLabel" aria-hidden="true" data-route="{{ route('jobprofile-fetch-hardkompetensi') }}" data-route2="{{ route('jobprofile-fetch-softkompetensi') }}" data-route3="{{ route('edit-jobprofileeditkomhardsoft') }}" data-route4="{{ route('jobprofile-hapus-hardsoft') }}" data-route5="{{ route('jobprofile-fetch-rumpun') }}"> <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="staticBackdropLabel">Edit Kompetensi Technical: Hard Skills</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <form id="form-komphard-test" method="POST"> @csrf <div class="row"> <div class="col-sm-6"> <ul id="listContainerhard-test" class="list-group"></ul> <div style="margin-bottom: 16px;"> <div class="row"> <div class="col-sm-5"> <p class="body-title">Pilih Rumpun</p> <select id="rumpunhard-test" class="form-select select2" style="width: 100%;" data-placeholder="Nama Rumpun"> <option selected disabled></option> @foreach($selectnamarumpun['result'] as $item) <option value="{{ $item['koderumpunjbtn'] }}">{{ $item['namarumpun'] }}</option> @endforeach </select> </div> <div class="col-sm-7"> <p class="body-title">Pilih Kompetensi</p> <select id="kompetensihard-test" class="form-select select2" style="width: 100%;" data-placeholder="Kompetensi"> <option selected disabled></option> </select> </div> </div> </div> <div id="selectedKompetensiHard-test"> <!-- Selected kompetensi will be appended here --> </div> <span class="divider"></span> </div> <div class="col-sm-6"> <p class="body-title" style="text-align:center">Kamus Kompetensi</p> <hr> <div class="nama-kompetensi"> <p style="font-weight: 600; text-align:left">Nama Kompetensi:</p> <p style="text-align:left" id="namakompetensihard"></p> </div> <div class="desc-kompetensi"> <p style="font-weight: 600; text-align:left">Definisi:</p> <p style="text-align:left" id="desckompetensihard"></p> </div> <div> <table class="table table-striped"> <thead> <tr> <th scope="col">Proficiency Level</th> <th scope="col">Indikator Perilaku</th> </tr> </thead> <tbody id="data-body-hard-test"> <!-- Rows will be appended here --> </tbody> </table> </div> </div> </div> </form> </div> <div class="modal-footer justify-content-between"> <div> <button type="button" class="btn btn-batal" data-bs-dismiss="modal">Batal</button> </div> <div> <button type="submit" class="btn btn-primary" id="submit-komphard-test">Simpan</button> </div> </div> </div> </div> </div> script <script> $(document).ready(function () { $('#modal-komphard-test').on('shown.bs.modal', function (e) { $('.select2').select2({ dropdownParent: $('#modal-komphard-test'), placeholder: "Pilih", allowClear: true, }); var idIdentitas = $('input[name="ididentitasjbtn"]').val(); var routeUrl = $('#modal-komphard-test').data('route'); // Fetch and populate existing hard skills $.ajax({ url: routeUrl, type: 'GET', data: { ididentitasjbtn: idIdentitas }, success: function (response) { console.log(response); var levels = response.result.result; var listItems = levels.map(function (level) { return '<li class="list-group-item d-flex justify-content-between align-items-center">' + level.namakomphardsoft + '<button type="button" class="btn btn-danger btn-sm delete-item" data-ididentitasjbtn="' + level.ididentitasjbtn + '" data-idkompsoft="' + level.idkomphardsoft + '">' + '<i class="fa-solid fa-trash"></i>' + '</button>' + '</li>'; }).join(''); $('#listContainerhard-test').html(listItems); // Add delete button event listener $('.delete-item').on('click', function () { var ididentitasjbtn = $(this).data('ididentitasjbtn'); var idkompsoft = $(this).data('idkompsoft'); var listItem = $(this).closest('li'); var routeUrlhapus = $('#modal-komphard-test').data('route4'); // Show confirmation popup if (confirm("Apakah Anda yakin ingin menghapus data ini?")) { $.ajax({ url: routeUrlhapus, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'), 'Content-Type': 'application/json' }, type: 'POST', data: JSON.stringify({ ididentitasjbtn: ididentitasjbtn, idhardsoft: idkompsoft }), success: function (response) { // Handle successful response console.log(response); listItem.remove(); // Remove <li> element from DOM }, error: function (xhr, status, error) { console.error(error); // Handle error } }); } }); }, error: function (xhr, status, error) { console.error(error); // Handle error } }); // Event listener for changes on "Pilih Rumpun" $('#rumpunhard-test').on('change', function () { var selectedRumpun = $(this).val(); var fetchUrl = $('#modal-komphard-test').data('route5'); fetchKompetensiByRumpun(selectedRumpun, fetchUrl); }); // Event listener for changes on "Pilih Kompetensi" $('#kompetensihard-test').on('change', function () { var selectedId = $(this).val(); var selectedText = $(this).find('option:selected').text(); if (selectedId) { updateDescriptionHard(selectedId, selectedText); appendSelectedKompetensi(selectedId, selectedText); // Call function to append selected kompetensi fetchProficiency(selectedId); // Call function to fetch and display proficiency } }); }); // Fetch kompetensi by selected rumpun function fetchKompetensiByRumpun(rumpunId, fetchUrl) { var idIdentitas = $('input[name="ididentitasjbtn"]').val(); $.ajax({ url: fetchUrl, type: 'GET', data: { ididentitasjbtn: idIdentitas, koderumpun: rumpunId, kodejeniskomp: 1 // Always 1 for hard skills }, success: function (response) { console.log('Kompetensi fetch response:', response); var kompetensiOptions = '<option selected disabled></option>'; response.result.result.forEach(function (item) { kompetensiOptions += '<option value="' + item.idkomphardsoft + '">' + item.namakomphardsoft + '</option>'; }); $('#kompetensihard-test').html(kompetensiOptions).trigger('change'); }, error: function (xhr, status, error) { console.error('Error fetching kompetensi:', error); } }); } // Update description based on selected kompetensi function updateDescriptionHard(selectedValue, selectedText) { var idIdentitas = $('input[name="ididentitasjbtn"]').val(); var data = { ididentitasjbtn: idIdentitas, id: selectedValue, koderumpun: $('#rumpunhard-test').val(), kodejeniskomp: 1 // Always 1 for hard skills }; var fetchUrl = $('#modal-komphard-test').data('route5'); $.ajax({ url: fetchUrl, type: "GET", data: data, beforeSend: function () { $('#desckompetensihard').text('Loading...'); }, success: function (response) { console.log('AJAX Response:', response); var nameElement = $('#namakompetensihard'); var descriptionElement = $('#desckompetensihard'); if (response.result) { nameElement.text(selectedText || ''); let dataFetch = response.result.result.find((data) => { return data.namakomphardsoft == selectedText; }); descriptionElement.text(dataFetch.desckomphardsoft || ''); } else { console.error("No matching item found for id:", selectedValue); descriptionElement.text('No matching description found.'); } }, error: function (xhr, status, error) { console.error('Error fetching description:', error); $('#desckompetensihard').text('Error fetching description.'); } }); } // Append selected kompetensi to the list function appendSelectedKompetensi(selectedId, selectedText) { var idIdentitas = $('input[name="ididentitasjbtn"]').val(); var levelOptions = '<option value="1">Level 1</option><option value="2">Level 2</option>'; // Replace with actual level options var row = '<div class="row mb-2" style="padding-right: 10px;">' + '<div class="col-7"><input type="text" class="form-control" value="' + selectedText + '" disabled></div>' + '<input type="hidden" name="ididentitasjbtn[]" value="' + idIdentitas + '">' + '<input type="hidden" name="iddictkomphardsoft[]" value="' + selectedId + '">' + '<div class="col-3"><select class="form-select" name="idkomphardsoft[]" aria-label="Default select example">' + levelOptions + '</select></div>' + `<div class="col-1"><button onclick="deleteBtn(${selectedId})" type="button" class="btn btn-danger delete-row" data-toggle="tooltip" title="Hapus" data-placement="bottom"><i class="fa-solid fa-trash"></i></button></div>` + '</div>'; $('#selectedKompetensiHard-test').append(row); $('[data-toggle="tooltip"]').tooltip(); } // Function to handle deletion of rows window.deleteBtn = function(selectedId) { // Find and remove the row with the given selectedId $('input[name="iddictkomphardsoft[]"][value="' + selectedId + '"]').closest('.row.mb-2').remove(); }; // Fetch and display proficiency data for selected kompetensi function fetchProficiency(selectedId) { var idIdentitas = $('input[name="ididentitasjbtn"]').val(); var fetchUrl = $('#modal-komphard-test').data('route'); $.ajax({ url: fetchUrl, type: 'GET', data: { ididentitasjbtn: idIdentitas, idkomphardsoft: selectedId }, success: function (response) { console.log('Proficiency fetch response:', response); var proficiencyLevels = response.result.result.find(function (item) { return item.idkomphardsoft == selectedId; }).lvlkomphardsoft; var tbody = $('#data-body-hard-test'); tbody.empty(); // Clear existing rows proficiencyLevels.forEach(function (level) { var row = '<tr>' + '<td>' + level.proficiencyLevel + '</td>' + '<td>' + level.indikatorPerilaku + '</td>' + '</tr>'; tbody.append(row); }); }, error: function (xhr, status, error) { console.error('Error fetching proficiency:', error); } }); } }); </script>
Editor is loading...
Leave a Comment