agper-agen/modules/laporan.html

<div style="text-align: center; font-weight: 600; margin: .8em 0; font-size: 1.1em;">
    Laporan Aksi Perubahan<br>
    <span id="uk"></span>
</div>
<div style="margin: 0 2ch;">
    Tahun&nbsp;
    <select id="pkYear" style="width: max-content;">

    </select>
</div>
<div style="max-height: calc(78vh - 6em); overflow: auto; margin: 0 0 1em 0; padding: 0 2ch 2ch 2ch;" id="agWrapper">
    <table id="agents" class="bordered selectable">
        <colgroup>
            <col style="width: 4ch;">
            <col style="width: 22ch;">
            <col style="min-width: 20ch;">
            <col style="width: 9ch;">
        </colgroup>
        <thead>
            <tr>
                <th>No</th>
                <th>NIP</th>
                <th>Nama Agen</th>
                <th>Rating Kinerja</th>
            </tr>
        </thead>
        <tbody id="agEmpty">
            <tr>
                <td colspan="4" style="text-align: center;"> 
                    Data Kosong
                </td>
            </tr>
        </tbody>
        <tbody id="agContent" hidden>

        </tbody>
    </table>
</div>
<script type="module">
    window.prokers = [];
    async function getProkers()
    {
        const loadid = moly.loadScreen.show("Memuat data...","bar","#agWrapper");
        const getprokers = await getJson("/api/getprokers");
        if (getprokers.status != 200)
        {
            moly.alert.show("Gagal Memuat Data","Data Program Kerja tidak berhasil dimuat. Silakan ulangi kembali beberapa saat lagi.");
            moly.loadScreen.close(loadid);
            return;
        }
        let years = [];
        prokers = getprokers.data.reduce((a,v)=>{
            const aindex = a.findIndex(e=>e.prokerID == v.prokerID);
            if(!years.includes(v.year))
            {
                years.push(v.year);
                const opt = moly.newElement("option");
                opt.value = v.year;
                opt.append(v.year);
                $('#pkYear').append(opt);
            }
            if(aindex >=0)
            {
                a[aindex].journal.push({
                    journalID: v.journalID,
                    submitterID: v.submitterID,
                    notes: v.notes,
                    status: v.status,
                    document: v.document,
                    timeStamp: v.timeStamp.replace("T"," ")
                })
                a[aindex].journal.sort((ja,jb)=>ja.journalID.localeCompare(jb.journalID));
            }
            else
            {
                const nv = JSON.parse(JSON.stringify(v));
                nv.journal= [{
                    journalID: v.journalID,
                    submitterID: v.submitterID,
                    notes: v.notes,
                    status: v.status,
                    document: v.document,
                    timeStamp: v.timeStamp.replace("T"," ")
                }]
                const owner = agents.find(e=> e.agentID == v.ownerID)
                if (owner)
                {
                    nv.owner = owner
                    delete nv.ownerID
                }
                delete nv.journalID;
                delete nv.submitterID;
                delete nv.notes;
                delete nv.status;
                delete nv.document;
                delete nv.timeStamp;
                a.push(nv);
            }
            return a;
        },[]).filter(p=>p.owner); //filter untested!
        //============AGENTS TABLE FILLING STARTS HERE======================
        $('#agContent').empty();
        const users = await getJson("/api/getusers");
        if(users.status != 200) 
        {
            moly.alert.show("Gagal Memuat Data","Data pengguna tidak berhasil dimuat. Silakan ulangi kembali beberapa saat lagi.")
            moly.loadScreen.close(loadid);
            return;
        }
        let num = 1;
        const repAgents = JSON.parse(JSON.stringify(agents))
        $.each(repAgents,(_,v)=>{
            if (users.data.find(u=>u.agentID == v.agentID).level != 3) return;
            v.prokers = prokers.filter(p=>p.owner.agentID == v.agentID);
            delete v.owner;
            if(v.prokers.length<=0)
            {
                v.approved = false;
                v.rating = 0;
            }
            else
            {
                v.approved = v.prokers[0].journal.at(-1).status >= 3
                v.rating = 0;
                $.each(v.prokers,(_,y)=>{
                    y.completed = y.journal.at(-1).status >= 4;
                    y.evaled = y.journal.at(-1).status == 8;
                    y.rating = y.evaled ? JSON.parse(y.journal.at(-1).notes).r : 0;
                    v.rating += y.rating;
                });
                v.completed = v.prokers.every(p=>p.completed);
                v.evaled = v.prokers.every(p=>p.evaled);
                v.rating = Number((v.rating / v.prokers.length).toFixed(2));
            }
            //====EXPAND LATER. WON'T WORK WELL LIKE THIS
            const ro = moly.newElement("tr");
            const no = moly.newElement("td");
            const ni = moly.newElement("td");
            const na = moly.newElement("td");
            const ra = moly.newElement("td");
            ro.append(no);
            ro.append(ni);
            ro.append(na);
            ro.append(ra);
            no.append(num + ".");
            num++;
            no.style.textAlign = "right";
            ni.append(v.agentID);
            ni.style.textAlign 
                = ra.style.textAlign 
                = "center";
            na.append(v.name);
            $(ro).click(async()=>{
                if(!v.approved)
                {
                    moly.alert.show("Belum Ada Program Kerja",`Agen ${v.name} belum memiliki program kerja yang disetujui.`);
                    return;
                }
                await moly.dialog.show({title:"Pratinjau Laporan Kerja Agen Perubahan "+v.name, content:"/modules/laporan-view.html",fetching:true, data: v});
            });
            ra.append(v.rating);
            $('#agContent').append(ro);
        })
        $('#agEmpty').prop("hidden",repAgents.length > 0);
        $('#agContent').prop("hidden",repAgents.length < 1);
        moly.loadScreen.close(loadid);
        return;
    }
    function µ(selector)
    {
        if (selector) return $('body>#main>#content').find(selector);
        return $('body>#main>#content');
    }
    µ('#uk').text(userDetails.info.unitKerja);
    await getProkers();
</script>