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");
|
function detailData(data) {
|
||||||
checkAll &&
|
console.log(data);
|
||||||
(checkAll.onclick = function () {
|
|
||||||
for (
|
// Ambil elemen tbody tabel
|
||||||
var e = document.querySelectorAll(
|
let tbody = document.querySelector("#detailTable tbody");
|
||||||
'.form-check-all input[type="checkbox"]'
|
|
||||||
),
|
// Kosongkan tabel sebelum menambahkan data baru
|
||||||
t = 0;
|
tbody.innerHTML = "";
|
||||||
t < e.length;
|
|
||||||
t++
|
// Pastikan data adalah array atau objek iterable
|
||||||
)
|
if (Array.isArray(data)) {
|
||||||
(e[t].checked = this.checked),
|
data.forEach((item) => {
|
||||||
e[t].checked
|
let row = `
|
||||||
? e[t].closest("tr").classList.add("table-active")
|
<tr class="text-center">
|
||||||
: e[t].closest("tr").classList.remove("table-active");
|
<td>${item.indicator.name}</td>
|
||||||
});
|
<td>${item.md_value.toFixed(4)}</td>
|
||||||
var perPage = 8,
|
</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 = {
|
options = {
|
||||||
valueNames: ["id", "customer_name", "email", "date", "phone", "status"],
|
valueNames: ["id", "customer_name", "email", "date", "phone", "status"],
|
||||||
page: perPage,
|
page: perPage,
|
||||||
|
|
@ -308,29 +323,3 @@ document
|
||||||
.querySelector(".active")
|
.querySelector(".active")
|
||||||
.previousSibling.children[0].click());
|
.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="d-flex gap-2 justify-content-center">
|
||||||
<div class="edit">
|
<div class="edit">
|
||||||
<button class="btn btn-sm btn-primary edit-item-btn"
|
<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
|
Detail
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -139,11 +140,8 @@ class="fw-medium link-primary">#VZ2101</a>
|
||||||
colors="primary:#25a0e2,secondary:#00bd9d"
|
colors="primary:#25a0e2,secondary:#00bd9d"
|
||||||
style="width: 75px; height: 75px">
|
style="width: 75px; height: 75px">
|
||||||
</lord-icon>
|
</lord-icon>
|
||||||
<h5 class="mt-2">Sorry! No Result Found</h5>
|
<h5 class="mt-2">Maaf! Data Tidak Ditemukan</h5>
|
||||||
<p class="text-muted mb-0">
|
<p class="text-muted mb-0">Silahkan gunakan kata kunci lain</p>
|
||||||
We've searched more than 150+ Orders We did not
|
|
||||||
find any orders for you search.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -151,11 +149,11 @@ class="fw-medium link-primary">#VZ2101</a>
|
||||||
<div class="d-flex justify-content-end">
|
<div class="d-flex justify-content-end">
|
||||||
<div class="pagination-wrap hstack gap-2">
|
<div class="pagination-wrap hstack gap-2">
|
||||||
<a class="page-item pagination-prev disabled" href="#">
|
<a class="page-item pagination-prev disabled" href="#">
|
||||||
Previous
|
Sebelumnya
|
||||||
</a>
|
</a>
|
||||||
<ul class="pagination listjs-pagination mb-0"></ul>
|
<ul class="pagination listjs-pagination mb-0"></ul>
|
||||||
<a class="page-item pagination-next" href="#">
|
<a class="page-item pagination-next" href="#">
|
||||||
Next
|
Selanjutnya
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -235,6 +233,33 @@ class="fw-medium link-primary">#VZ2101</a>
|
||||||
</div>
|
</div>
|
||||||
</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 -->
|
<!-- Modal -->
|
||||||
<div class="modal fade zoomIn" id="deleteRecordModal" tabindex="-1" aria-hidden="true">
|
<div class="modal fade zoomIn" id="deleteRecordModal" tabindex="-1" aria-hidden="true">
|
||||||
<div class="modal-dialog modal-dialog-centered">
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue