agper-agen/modules/agen.html

<group-el label="Manajemen Agen Perubahan" style="padding: 3ch 1ch;">
    <div style="max-height: 8em; overflow-y: scroll; margin: 1em 0" id="agentWrapper">
        <table id="agents" class="fullwidth bordered selectable">
            <thead>
                <tr>
                    <th style="width: 22ch;">NIP</th>
                    <th style="min-width: 12ch;">Nama Agen</th>
                    <th style="min-width: 12ch;">Jabatan</th>
                    <th style="min-width: 12ch;">Unit Kerja</th>
                </tr>
            </thead>
            <tbody id="agContent">
                <tr>
                    <td colspan="4" style="height: 4em; text-align: center;">&nbsp;</td>
                </tr>
            </tbody>
        </table>
    </div>
    <a-button id="newAgent">Tambah Agen</a-button>
</group-el>
<group-el label="Manajemen Akun Pengguna" style="padding: 3ch 1ch;">
    <div style="max-height: 8em; overflow-y: scroll; margin: 1em 0" id="accountWrapper">
        <table id="users" class="fullwidth bordered selectable">
            <thead>
                <tr>
                    <th style="width: 22ch;">NIP</th>
                    <th style="min-width: 12ch;">Username</th>
                    <th style="width: 12ch;">Level</th>
                    <th style="width: 6ch;">Aktif</th>
                </tr>
            </thead>
            <tbody id="usContent">
                <tr>
                    <td colspan="4" style="height: 4em; text-align: center;">&nbsp;</td>
                </tr>
            </tbody>
        </table>
    </div>
    
</group-el>
<script type="module">
    let agents = {};
    let units = {};
    let users = {};
    async function populateAgents()
    {
        const loadid = moly.loadScreen.show("Memuat Daftar Agen...","bar","#agentWrapper");
        units = await getJson('/api/getunits');
        if (units.status != 200) {
            moly.loadScreen.close(loadid);
            return false;
        }
        units = units.data;
        agents = await getJson('/api/getagents');
        if (agents.status != 200) {
            moly.loadScreen.close(loadid);
            return false;
        }
        agents = agents.data;
        $('#agContent').empty();
        $.each(agents,(_,v)=>{
            const fu = units.find(e=>e.deplID == v.deplID);
            v.unitKerja = fu.unitKerja
            const ro = moly.newElement("tr");
            const id = moly.newElement("td");
            const nm = moly.newElement("td");
            const jb = moly.newElement("td");
            const uk = moly.newElement("td");
            ro.append(id);
            ro.append(nm);
            ro.append(jb);
            ro.append(uk);
            id.append(v.agentID);
            nm.append(v.name);
            jb.append(v.jabatan);
            uk.append(v.unitKerja);
            $('#agContent').append(ro);
            $(ro).click(async()=>{
                v.allUnits = units;
                v.userAccount = users.find(e=>e.agentID == v.agentID);
                v.allUsers = users;
                const aksi = await moly.dialog.show({title: "Profil Agen Perubahan",content:"/modules/agen-profil.html",fetching: true, data: v});
                if(aksi.edit) 
                {
                    const edit = await moly.dialog.show({title: "Update Agen Perubahan",content:"/modules/agen-edit.html",fetching: true, data: aksi.data});  
                    if (edit) 
                    {
                        populateAgents();
                    } 
                }
                else if (aksi.adduser)
                {
                    populateUsers();
                }
            });
        });
        moly.loadScreen.close(loadid);
        return true;
    }
    async function populateUsers()
    {
        const loadid = moly.loadScreen.show("Memuat Daftar Akun...","bar","#accountWrapper");
        users = await getJson('/api/getusers');
        if (users.status != 200) {
            moly.loadScreen.close(loadid);
            return false;
        }
        users = users.data;
        $('#usContent').empty();
        $.each(users,(_,v)=>{
            const ro = moly.newElement("tr");
            const id = moly.newElement("td");
            const un = moly.newElement("td");
            const lv = moly.newElement("td");
            const ac = moly.newElement("td");
            ac.style = "text-align: center;"
            ro.append(id);
            ro.append(un);
            ro.append(lv);
            ro.append(ac);
            id.append(v.agentID);
            un.append(v.username);
            lv.append(v.level == 0 ? "Super Admin" : v.level == 1 ? "Evaluator" : v.level == 2 ? "Supervisor" : v.level ==3 ? "Agen" : "Tidak Diketahui: "+ v.level );
            ac.append(v.active ? "Ya" : "Tidak");
            $(ro).click(async()=>{
                const aksi = await moly.dialog.show({title: "Modifikasi Akun Agen",content:"/modules/agen-usermod.html",fetching: true, data: v});
                if(aksi && aksi.toggle)
                {
                    populateUsers();   
                }
            })
            $('#usContent').append(ro);
        });
        moly.loadScreen.close(loadid);
        return true;
    }
    $('#newAgent').click(async()=>{
        const na = await moly.dialog.show({title: "Tambah Agen Perubahan", content: "/modules/agen-new.html", fetching: true, data: {agents, units, users}});
        if(!na) return;
        populateAgents();
        if(na.ca) populateUsers();
    });
    populateAgents();
    populateUsers();
</script>