feat(assessment-history): create detail modal
This commit is contained in:
arieeefajar
parent
55c4309028
commit
753eda03ab
|
|
@ -1,20 +1,35 @@
|
|||
var checkAll = document.getElementById("checkAll");
|
||||
checkAll &&
|
||||
(checkAll.onclick = function () {
|
||||
for (
|
||||
var e = document.querySelectorAll(
|
||||
'.form-check-all input[type="checkbox"]'
|
||||
),
|
||||
t = 0;
|
||||
t < e.length;
|
||||
t++
|
||||
)
|
||||
(e[t].checked = this.checked),
|
||||
e[t].checked
|
||||
? e[t].closest("tr").classList.add("table-active")
|
||||
: e[t].closest("tr").classList.remove("table-active");
|
||||
});
|
||||
var perPage = 8,
|
||||
function detailData(data) {
|
||||
console.log(data);
|
||||
|
||||
// Ambil elemen tbody tabel
|
||||
let tbody = document.querySelector("#detailTable tbody");
|
||||
|
||||
// Kosongkan tabel sebelum menambahkan data baru
|
||||
tbody.innerHTML = "";
|
||||
|
||||
// Pastikan data adalah array atau objek iterable
|
||||
if (Array.isArray(data)) {
|
||||
data.forEach((item) => {
|
||||
let row = `
|
||||
<tr class="text-center">
|
||||
<td>${item.indicator.name}</td>
|
||||
<td>${item.md_value.toFixed(4)}</td>
|
||||
</tr>
|
||||
`;
|
||||
tbody.innerHTML += row;
|
||||
});
|
||||
} else {
|
||||
let row = `
|
||||
<tr class="text-center">
|
||||
<td>${data.indicator.name}</td>
|
||||
<td>${data.md_value.toFixed(4)}</td>
|
||||
</tr>
|
||||
`;
|
||||
tbody.innerHTML += row;
|
||||
}
|
||||
}
|
||||
|
||||
var perPage = 10,
|
||||
options = {
|
||||
valueNames: ["id", "customer_name", "email", "date", "phone", "status"],
|
||||
page: perPage,
|
||||
|
|
@ -308,29 +323,3 @@ document
|
|||
.querySelector(".active")
|
||||
.previousSibling.children[0].click());
|
||||
});
|
||||
var attroptions = {
|
||||
valueNames: [
|
||||
"name",
|
||||
"born",
|
||||
{ data: ["id"] },
|
||||
{ attr: "src", name: "image" },
|
||||
{ attr: "href", name: "link" },
|
||||
{ attr: "data-timestamp", name: "timestamp" },
|
||||
],
|
||||
},
|
||||
attrList = new List("users", attroptions);
|
||||
attrList.add({
|
||||
name: "Leia",
|
||||
born: "1954",
|
||||
image: "assets/images/users/avatar-5.jpg",
|
||||
id: 5,
|
||||
timestamp: "67893",
|
||||
});
|
||||
var existOptionsList = { valueNames: ["contact-name", "contact-message"] },
|
||||
existList = new List("contact-existing-list", existOptionsList),
|
||||
fuzzySearchList = new List("fuzzysearch-list", { valueNames: ["name"] }),
|
||||
paginationList = new List("pagination-list", {
|
||||
valueNames: ["pagi-list"],
|
||||
page: 3,
|
||||
pagination: !0,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -83,7 +83,8 @@ class="fw-medium link-primary">#VZ2101</a>
|
|||
<div class="d-flex gap-2 justify-content-center">
|
||||
<div class="edit">
|
||||
<button class="btn btn-sm btn-primary edit-item-btn"
|
||||
data-bs-toggle="modal" data-bs-target="#showModal">
|
||||
data-bs-toggle="modal" data-bs-target="#detailModal"
|
||||
onclick="detailData({{ $evaluation->evaluationDetails }})">
|
||||
Detail
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -139,11 +140,8 @@ class="fw-medium link-primary">#VZ2101</a>
|
|||
colors="primary:#25a0e2,secondary:#00bd9d"
|
||||
style="width: 75px; height: 75px">
|
||||
</lord-icon>
|
||||
<h5 class="mt-2">Sorry! No Result Found</h5>
|
||||
<p class="text-muted mb-0">
|
||||
We've searched more than 150+ Orders We did not
|
||||
find any orders for you search.
|
||||
</p>
|
||||
<h5 class="mt-2">Maaf! Data Tidak Ditemukan</h5>
|
||||
<p class="text-muted mb-0">Silahkan gunakan kata kunci lain</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -151,11 +149,11 @@ class="fw-medium link-primary">#VZ2101</a>
|
|||
<div class="d-flex justify-content-end">
|
||||
<div class="pagination-wrap hstack gap-2">
|
||||
<a class="page-item pagination-prev disabled" href="#">
|
||||
Previous
|
||||
Sebelumnya
|
||||
</a>
|
||||
<ul class="pagination listjs-pagination mb-0"></ul>
|
||||
<a class="page-item pagination-next" href="#">
|
||||
Next
|
||||
Selanjutnya
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -235,6 +233,33 @@ class="fw-medium link-primary">#VZ2101</a>
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="exampleModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-light p-3">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Detail Penilaian</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
|
||||
id="close-modal"></button>
|
||||
</div>
|
||||
<table class="table align-middle table-nowrap" id="detailTable">
|
||||
<thead>
|
||||
<tr class="text-center">
|
||||
<th>Indikator</th>
|
||||
<th>MD Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="text-center">
|
||||
<td>pH</td>
|
||||
<td>0.8</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade zoomIn" id="deleteRecordModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
|
|
|
|||
Loading…
Reference in New Issue