From 24e1d6ec1744a46cad2a41e5b268bbaae15e994b Mon Sep 17 00:00:00 2001 From: cygouw Date: Fri, 5 Jun 2026 14:50:20 +0700 Subject: [PATCH] fix(c4a): fix 'SOP tidak ditemukan' visibility logic on page load --- groups/C4A/js/ui.js | 72 ++++++++++++++++++++++++++++++++------------- 1 file changed, 51 insertions(+), 21 deletions(-) diff --git a/groups/C4A/js/ui.js b/groups/C4A/js/ui.js index 7dbca5d..10cdf4b 100644 --- a/groups/C4A/js/ui.js +++ b/groups/C4A/js/ui.js @@ -12,6 +12,20 @@ function t(key, fallback) { return fallback; } +/** + * Helper untuk melokalisasi teks dari objek bilingual {id, en} atau string biasa. + * @param {string|Object} field - Data teks (bisa string biasa atau objek {id, en}) + * @returns {string} Teks terlokalisasi + */ +function loc(field) { + if (!field) return ''; + if (typeof field === 'object') { + const lang = (window.getLang && typeof window.getLang === 'function') ? window.getLang() : 'id'; + return field[lang] || field['id'] || ''; + } + return String(field); +} + /** * Normalisasi nomor telepon ke format standard e.g. 628... * @param {string} phone - Nomor telepon mentah @@ -100,12 +114,12 @@ export function renderStaffCards(staffs) { const scheduleHTML = schedule.map(sched => `
` + - `${sched.day}` + - `${sched.time} | ${sched.break}` + + `${loc(sched.day)}` + + `${loc(sched.time)} | ${loc(sched.break)}` + `
` ).join(''); - const tasksHTML = tasks.map(task => `
  • ${task}
    • `).join(''); + const tasksHTML = tasks.map(task => `
  • ${loc(task)}
    • `).join(''); const isPhoneValid = isValidWhatsAppNumber(phone); const encodedPhone = isPhoneValid ? encodePhone(phone) : ''; const displayPhone = isPhoneValid ? formatPhoneForDisplay(phone) : '-'; @@ -123,13 +137,13 @@ export function renderStaffCards(staffs) { ${name}
    -
    ${name}
    -
    ${role}
    +
    ${loc(name)}
    +
    ${loc(role)}
    -
    📍
    ${t('grp_c4a_label_location', 'Lokasi')}${location}
    +
    📍
    ${t('grp_c4a_label_location', 'Lokasi')}${loc(location)}
    🕒
    @@ -202,27 +216,29 @@ function buildSopCard(sop) { const catLabel = getCatLabel(category); const catClass = CATEGORY_COLORS[category] || ''; + const titleText = loc(title); + const descText = loc(description); return ` -
    +
    -

    ${title}

    +

    ${titleText}

    ${catLabel}
    -

    ${description}

    +

    ${descText}

    ${procedures.length} ${t('grp_c4a_label_steps', 'Langkah')}
    -
    @@ -250,13 +266,18 @@ function buildSopModalContent(sop) { const catLabel = getCatLabel(category); const catClass = CATEGORY_COLORS[category] || ''; - const reqsHTML = requirements.map(req => `
  • ${req}
    • `).join(''); - const procsHTML = procedures.map(proc => `
  • ${proc}
    • `).join(''); + const titleText = loc(title); + const descText = loc(description); + const purposeText = loc(purpose); + const additionalInfoText = loc(additionalInfo); + + const reqsHTML = requirements.map(req => `
  • ${loc(req)}
    • `).join(''); + const procsHTML = procedures.map(proc => `
  • ${loc(proc)}
    • `).join(''); // staffResponsible bersifat opsional — sembunyikan blok jika tidak ada const hasStaff = Array.isArray(staffResponsible) && staffResponsible.length > 0; const staffHTML = hasStaff - ? staffResponsible.map(staffName => `${staffName}`).join('') + ? staffResponsible.map(staffName => `${loc(staffName)}`).join('') : ''; const staffBlockHTML = hasStaff ? `
    @@ -266,10 +287,10 @@ function buildSopModalContent(sop) { : ''; // additionalInfo bersifat opsional — sembunyikan blok jika tidak ada - const additionalInfoHTML = additionalInfo + const additionalInfoHTML = additionalInfoText ? `
    ℹī¸ -

    ${t('grp_c4a_label_additional_info', 'Informasi Tambahan (Bersifat Opsional):')} ${additionalInfo}

    +

    ${t('grp_c4a_label_additional_info', 'Informasi Tambahan (Bersifat Opsional):')} ${additionalInfoText}

    ` : ''; @@ -283,15 +304,15 @@ function buildSopModalContent(sop) {
    ${catLabel}
    -

    ${title}

    -

    ${description}

    +

    ${titleText}

    +

    ${descText}

    ${t('grp_c4a_label_purpose', 'Tujuan')}
    -

    ${purpose}

    +

    ${purposeText}

    @@ -319,15 +340,19 @@ export function renderSopCards(sops) { // simpan data global di element agar bisa diakses filter/search container._sopData = sops; + const emptyState = document.getElementById('sop-empty-state'); + // Tampilkan pesan jika data SOP kosong atau gagal dimuat if (!sops || sops.length === 0) { container.innerHTML = `

    ${t('grp_c4a_empty_sop', 'Data SOP tidak tersedia saat ini.')}

    `; updateResultInfo(0, 0); + if (emptyState) emptyState.style.display = 'none'; return; } container.innerHTML = sops.map(buildSopCard).join(''); updateResultInfo(sops.length, sops.length); + if (emptyState) emptyState.style.display = 'none'; } /** Update teks info jumlah hasil */ @@ -371,7 +396,12 @@ export function applySopFilter() { }); 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); } @@ -626,11 +656,11 @@ export function renderFaqSection(faqs) { return `
    - ${faq.question} + ${loc(faq.question)}
    +
    -
    ${faq.answer}
    +
    ${loc(faq.answer)}
    `; }).join(''); -- 2.52.0