agper-agen/modules/submission.html

<group-el label="Daftar Agen Perubahan" id="agGroup">
    <div style="text-align: center; font-weight: 600; margin: .8em 0; font-size: 1.1em;">
        Daftar Agen Perubahan<br>
        <span id="uk"></span>
    </div>
    <div style="max-height: calc(50vh - 6em); overflow-y: scroll; 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>
            </colgroup>
            <thead>
                <tr>
                    <th>No</th>
                    <th>NIP</th>
                    <th>Nama Agen</th>
                </tr>
            </thead>
            <tbody id="agEmpty">
                <tr>
                    <td colspan="3" style="text-align: center;"> 
                        Data Kosong
                    </td>
                </tr>
            </tbody>
            <tbody id="agContent" hidden>

            </tbody>
        </table>
    </div>
</group-el>
<group-el label="Program Kerja" id="pkGroup" collapsed disabled>
    <div style="text-align: center; font-weight: 600; margin: .8em 0; font-size: 1.1em;">
        Program Kerja Agen Perubahan<br>
        <span id="agName"></span>
    </div>
    <div style="display: flex; justify-content: space-between; padding: 0 2.5ch;">
        <span>Tahun:&nbsp;
            <select id="pkYear" style="width: max-content;">

            </select>
        </span>
        &nbsp;
    </div>
    <div style="max-height: calc(50vh - 6em); overflow-y: scroll; margin: 0 0 1em 0; padding: 0 2ch 2ch 2ch;" id="pkWrapper">
        <table id="proker" class="bordered selectable">
            <colgroup>
                <col style="width: 4ch;">
                <col style="width: 19ch;">
                <col>
                <col style="width: 8ch;">
                <col style="width: 17ch;">
                <col style="width: 16ch;">
            </colgroup>
            <thead>
                <tr>
                    <th>No</th>
                    <th>Kegiatan</th>
                    <th>Sasaran</th>
                    <th>Target Waktu</th>
                    <th>Waktu Mulai</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody id="empty">
                <tr>
                    <td colspan="6" style="text-align: center;">Data Kosong</td>
                </tr>
            </tbody>
            <tbody id="pkContent" hidden>
            </tbody>
        </table>
    </div>
</group-el>
<script type="module">
    let prokers = [];
    const kegiatanName = [
        "Sebagai Katalis",
        "Sebagai Penggerak Perubahan",
        "Sebagai Pemberi Solusi",
        "Sebagai Mediator",
        "Sebagai Penghubung"
    ]
    const statusName = [
        "Draft",
        "Ditolak",
        "Diajukan",
        "Berjalan",
        "Lebih Awal",
        "Tepat Waktu",
        "Terlambat",
        "Tidak Terlaksana"
    ]
    async function populateProker(agentID)
    {
        if(!agentID) return;
        const loadid = moly.loadScreen.show("Memuat Daftar Program Kerja...","bar","#pkWrapper");
        prokers = await getJson('/api/getprokers');
        if (prokers.status != 200 || prokers.length < 1) 
        {
            moly.loadScreen.close(loadid);
            return;
        }
        $('#agName').text(agents.find(a=>a.agentID == agentID)?.name);
        prokers.data = prokers.data.filter(e=>e.ownerID == agentID);
        $('#pkYear').empty();
        const years = [];
        prokers = prokers.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;
        },[]);
        $('#pkYear').val(years.length > 0 ? years[0] : "");
        $('#submitProker').prop("disabled",years.length < 1);
        $('#pkYear').change(()=>{
            fillProker();
        })
        fillProker();
        moly.loadScreen.close(loadid);
    }
    function fillProker()
    {
        $('#proker #empty').prop("hidden", prokers.length > 0);
        $('#proker #pkContent').prop("hidden", prokers.length < 1);
        $('#proker #pkContent').empty();
        const listedProkers = prokers.filter(e=>e.year == Number($('#pkYear').val()));
        $('#submitProker').prop("disabled",!(listedProkers.length > 0 && listedProkers[0].journal.at(-1).status < 2));
        const statusStyles =[
            "text-align: center; background-color: var(--secondary-foreground); color: var(--primary-background)",
            "text-align: center; background-color: var(--neutral-n-accent); color: var(--primary-foreground)",
            "text-align: center; background-color: var(--positive-accent); color: var(--primary-foreground)",
            "text-align: center; background-color: unset; color: unset",
            "text-align: center; background-color: var(--positive-accent); color: var(--primary-foreground)",
            "text-align: center; background-color: var(--neutral-p-accent); color: var(--primary-foreground)",
            "text-align: center; background-color: var(--neutral-n-accent); color: var(--primary-foreground)",
            "text-align: center; background-color: var(--negative-accent); color: var(--primary-background)",
        ];
        $.each(listedProkers,(i,v)=>{
            
            const ro = moly.newElement("tr");
            const no = moly.newElement("td");
            const kg = moly.newElement("td");
            const ss = moly.newElement("td");
            const tw = moly.newElement("td");
            const wm = moly.newElement("td");
            const st = moly.newElement("td");
            ro.append(no);
            ro.append(kg);
            ro.append(ss);
            ro.append(tw);
            ro.append(wm);
            ro.append(st);
            no.append((i+1)+".");
            no.style.textAlign = "right";
            kg.append(kegiatanName[v.kegiatan]);
            ss.append(v.sasaran);
            tw.append(`${v.timeTarget} ${v.isInMonth ? "Bulan" : "Hari"}`);
            tw.style.textAlign = "center";
            wm.append(((v.startDay == null ? "" : v.startDay.toString().padStart(2,"0") + " ") + monthName[v.startMonth] + " " + v.year));
            wm.style.textAlign = "right";
            st.append(statusName[v.journal.at(-1).status]);
            st.style = statusStyles[v.journal.at(-1).status];
            $(ro).click(async()=>{
                const vr = await moly.dialog.show({title: "Detil Program Kerja "+v.owner.name, content: "/modules/submission-view.html", fetching: true, data: {startIndex: i, prokers}});
                // console.log(vr);
                if (vr) populateProker(vr);
            })
            $('#proker #pkContent').append(ro);
        });
    }
    function fillAgents()
    {
        const loadid = moly.loadScreen.show("Memuat data agen...","bar","#agWrapper");
        $('#agContent').empty();
        $.each(agents,(i,v)=>{
            const ro = moly.newElement("tr");
            const no = moly.newElement("td");
            const ni = moly.newElement("td");
            const na = moly.newElement("td");
            ro.append(no)
            ro.append(ni)
            ro.append(na)
            no.append((i+1) + ".");
            no.style.textAlign = "right";
            ni.append(v.agentID);
            ni.style.textAlign = "center";
            na.append(v.name);
            $(ro).click(()=>{
                $('#agGroup').prop("collapsed",true);
                $('#pkGroup').prop("collapsed",false);
                $('#pkGroup').prop("disabled",false);
                populateProker(v.agentID);
            });
            $('#agContent').append(ro);
        })
        $('#agEmpty').prop("hidden",agents.length > 0);
        $('#agContent').prop("hidden",agents.length < 1);
        moly.loadScreen.close(loadid);
    }
    $(document).ready(async()=>{
        $('#uk').text(userDetails.info.unitKerja);
        fillAgents();
        $($('#agGroup')[0].shadowRoot).find("group-label>a-button")[0].addEventListener("click",()=>{
                $('#pkGroup').prop("collapsed",!$('#agGroup').prop("collapsed"));
        });
    })
</script>