izu/student-web-if-development-kit
2
0
Fork 11
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity

Merge pull request 'feature/halaman-stafPendukung-SOP' (#10) from feature/halaman-stafPendukung-SOP into main

Browse Source 
Reviewed-on: AnderiSaputra/student-web-if-development-kit#10
This commit is contained in:
AufaHafizah
2026-06-05 08:03:14 +00:00
parent 3830c1beeb 8e02c85c19
commit e074940509
2 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
groups/C4A/index.html
+2 -2
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="id" class="scroll-smooth"> <html lang="id" class="scroll-smooth">
<head> <head>
@@ -1163,7 +1163,7 @@
<div class="c4a-hero-tag" data-i18n="grp_c4a_hero_tag">LAYANAN AKADEMIK &bull; INFORMATIKA UNTAN <div class="c4a-hero-tag" data-i18n="grp_c4a_hero_tag">LAYANAN AKADEMIK &bull; INFORMATIKA UNTAN
</div> </div>
<h1 class="c4a-hero-title" data-i18n-html="grp_c4a_hero_title"> <h1 class="c4a-hero-title" data-i18n-html="grp_c4a_hero_title">
Staf Pendukung &amp; <br /> Staf Pendukung &amp; <br/>
<span class="highlight-orange">Standar Operasional Prosedur (SOP)</span> <span class="highlight-orange">Standar Operasional Prosedur (SOP)</span>
</h1> </h1>
<p class="c4a-hero-desc" data-i18n="grp_c4a_hero_desc">Halaman ini menampilkan informasi petugas <p class="c4a-hero-desc" data-i18n="grp_c4a_hero_desc">Halaman ini menampilkan informasi petugas
groups/C4A/js/ui.js
+14 -6
View File
@@ -32,7 +32,7 @@ function loc(field) {
const lang = getLang(); const lang = getLang();
return field[lang] || field['id'] || ''; return field[lang] || field['id'] || '';
} }
return field; return String(field);
} }
/** /**
@@ -127,7 +127,7 @@ export function renderStaffCards(staffs) {
const scheduleHTML = schedule.map(sched => const scheduleHTML = schedule.map(sched =>
`<div class="schedule-item">` + `<div class="schedule-item">` +
`<span class="s-day">${loc(sched.day)}</span>` + `<span class="s-day">${loc(sched.day)}</span>` +
`<span class="s-time">${sched.time} <span class="s-break">| ${loc(sched.break)}</span></span>` + `<span class="s-time">${loc(sched.time)} <span class="s-break">| ${loc(sched.break)}</span></span>` +
`</div>` `</div>`
).join(''); ).join('');
@@ -149,7 +149,7 @@ export function renderStaffCards(staffs) {
<img src="${image}" alt="${name}" onerror="this.style.display='none'"/> <img src="${image}" alt="${name}" onerror="this.style.display='none'"/>
</div> </div>
<div> <div>
<div class="staff-name">${name}</div> <div class="staff-name">${loc(name)}</div>
<div class="staff-role">${roleText}</div> <div class="staff-role">${roleText}</div>
</div> </div>
</div> </div>
@@ -283,14 +283,13 @@ function buildSopModalContent(sop) {
const catLabel = getCatLabel(category); const catLabel = getCatLabel(category);
const catClass = CATEGORY_COLORS[category] || ''; const catClass = CATEGORY_COLORS[category] || '';
const reqsHTML = requirements.map(req => `<li>${loc(req)}</li>`).join(''); const reqsHTML = requirements.map(req => `<li>${loc(req)}</li>`).join('');
const procsHTML = procedures.map(proc => `<li>${loc(proc)}</li>`).join(''); const procsHTML = procedures.map(proc => `<li>${loc(proc)}</li>`).join('');
// staffResponsible bersifat opsional — sembunyikan blok jika tidak ada // staffResponsible bersifat opsional — sembunyikan blok jika tidak ada
const hasStaff = Array.isArray(staffResponsible) && staffResponsible.length > 0; const hasStaff = Array.isArray(staffResponsible) && staffResponsible.length > 0;
const staffHTML = hasStaff const staffHTML = hasStaff
? staffResponsible.map(staffName => `<span class="sop-staff-pill">${staffName}</span>`).join('') ? staffResponsible.map(staffName => `<span class="sop-staff-pill">${loc(staffName)}</span>`).join('')
: ''; : '';
const staffBlockHTML = hasStaff const staffBlockHTML = hasStaff
? `<div class="sop-staff-block"> ? `<div class="sop-staff-block">
@@ -353,15 +352,19 @@ export function renderSopCards(sops) {
// simpan data global di element agar bisa diakses filter/search // simpan data global di element agar bisa diakses filter/search
container._sopData = sops; container._sopData = sops;
const emptyState = document.getElementById('sop-empty-state');
// Tampilkan pesan jika data SOP kosong atau gagal dimuat // Tampilkan pesan jika data SOP kosong atau gagal dimuat
if (!sops || sops.length === 0) { if (!sops || sops.length === 0) {
container.innerHTML = `<p class="empty-state-msg">${t('grp_c4a_empty_sop', 'Data SOP tidak tersedia saat ini.')}</p>`; container.innerHTML = `<p class="empty-state-msg">${t('grp_c4a_empty_sop', 'Data SOP tidak tersedia saat ini.')}</p>`;
updateResultInfo(0, 0); updateResultInfo(0, 0);
if (emptyState) emptyState.style.display = 'none';
return; return;
} }
container.innerHTML = sops.map(buildSopCard).join(''); container.innerHTML = sops.map(buildSopCard).join('');
updateResultInfo(sops.length, sops.length); updateResultInfo(sops.length, sops.length);
if (emptyState) emptyState.style.display = 'none';
} }
/** Update teks info jumlah hasil */ /** Update teks info jumlah hasil */
@@ -405,7 +408,12 @@ export function applySopFilter() {
}); });
const emptyState = document.getElementById('sop-empty-state'); const emptyState = document.getElementById('sop-empty-state');
if (emptyState) emptyState.style.display = visibleCount === 0 ? 'flex' : 'none'; if (emptyState) {
// Tampilkan "SOP tidak ditemukan" HANYA jika memang ada data SOP tetapi hasil filter 0.
// Jika data SOP memang kosong (tidak ada card sama sekali di data source), sembunyikan.
const hasData = container._sopData && container._sopData.length > 0;
emptyState.style.display = (hasData && visibleCount === 0) ? 'flex' : 'none';
}
updateResultInfo(visibleCount, cards.length); updateResultInfo(visibleCount, cards.length);
} }