agper-agen/modules/agen-edit.html

<div style="font-weight: 600; text-align: center;">Data Diri</div>
<div style="display: grid; grid-template-columns: auto 1fr; column-gap: 1.5ch; padding: 1ch;">
    <div style="height: 15em; width: 10em; text-align: center;">
        <img id="UagentPhoto" style="max-height: 99%; max-width: 99%;"/>
    </div>
    <div style="display: grid; grid-template-columns: auto auto 1fr; column-gap:.5ch;">
        <span>NIP</span>
        <span>:</span>
        <input id="UagentID" type="text" disabled>
        <span>Nama Agen*</span>
        <span>:</span>
        <input type="text" id="Uname">
        <span>Jabatan*</span>
        <span>:</span>
        <input type="text" id="Ujabatan">
        <span>Unit Kerja*</span>
        <span>:</span>
        <select id="Uunit">

        </select>
        <span>No SK Pengangkatan*</span>
        <span>:</span>
        <input type="text" id="Uska">
        <span>TMT*</span>
        <span>:</span>
        <input type="date" id="Utmta">
        <span>No SK Perubahan</span>
        <span>:</span>
        <input type="text" id="Uskp">
        <span>TMT</span>
        <span>:</span>
        <input type="date" id="Utmtp">
    </div>
    <file-input id="photoInput" accept="image/jpeg, image/png, image/webp" style="width: 20.1ch"></file-input>
</div>
<div style="text-align: center; padding: 1ch; text-align: center; font-weight: 600;">
    Visi dan Misi Agen Perubahan
</div>
<div style="display: flex; flex-direction: column; align-items: center;">
    <span>Visi</span>
    <textarea type="text" id="Uvisi" maxlength="128" style="width: 95%; text-align: center; height: 3.2em; resize: none;"></textarea>
    <span>Misi</span>
    <textarea id="Umisi" maxlength="1024" style="width: 95%; height: 7em; resize: none;"></textarea>
</div>
<div style="text-align: center; padding: 1ch; text-align: center; font-weight: 600;">
    Pembentukan Agen Perubahan
</div>
<div style="display: grid; grid-template-columns: auto auto 1fr; column-gap:.5ch;">
    <span>Seleksi Internal</span>
    <span>:</span>
    <input type="text" id="Uselect">
    <span>Penilaian dan Pemilihan</span>
    <span>:</span>
    <input type="date" id="Ugrading">
    <span>Dokumen Eviden Penetapan SK</span>
    <span>:</span>
    <input type="text" id="Uevidence">
    <span>Dokumentasi Penetapan SK</span>
    <span>:</span>
    <input type="text" id="Udocuments">
</div>
<div style="margin-top: 1em; border-top: 1px solid var(--secondary-foreground); display: grid; grid-template-columns: 1fr auto;">
    <a-button id="UCancel" type="negative">
        Batal
    </a-button>
    <a-button id="Uupdate">
        Perbarui
    </a-button>
</div>
<load-screen id="blocker"><sonar-ping></sonar-ping><load-message>Memuat...</load-message></load-screen>
<script type="module">
    const thisDialog = moly.lastDialog();
    const data = thisDialog.data;
    let photo = "";
    $('#Uunit').empty();
    $.each(data.allUnits,(_,v)=>{
        const opt = moly.newElement("option");
        opt.value = v.deplID;
        opt.append(v.unitKerja);
        $('#Uunit').append(opt);
    });
    $('#UagentPhoto')[0].src = data.photoURL;
    $('#UagentID').val(data.agentID);
    $('#Uname').val(data.name);
    $('#Ujabatan').val(data.jabatan);
    $('#Uunit').val(data.deplID);
    $('#Uska').val(data.skAngkat);
    $('#Utmta').val(data.tmt);
    $('#Uskp').val(data.skPerb == null ? "" : data.skPerb);
    $('#Utmtp').val(data.tmUbah == null ? null : data.tmUbah);
    $('#Uvisi').val(data.vision);
    $('#Umisi').val(data.mission);
    $('#Uselect').val(data.seleksi);
    $('#Ugrading').val(data.nilaiPilih);
    $('#Uevidence').val(data.eviden);
    $('#Udocuments').val(data.dokumentasi);
    $('#Uupdate').click(async()=>{
        const loadid = moly.loadScreen.show("Memperbarui Data Agen...","sonar","#"+thisDialog.content.id);
        let updates = {};
        if(
            $('#Uname').val().length < 1 ||
            $('#Ujabatan').val().length < 1 ||
            $('#Uska').val().length < 1 ||
            $('#Utmta').val().length < 1
        )
        {
            moly.alert.show("Data Belum Lengkap","Harap pastikan semua kolom sudah terisi dengan benar. Kolom bertanda * wajib diisi.");
            moly.loadScreen.close(loadid);
            return;
        }
        updates.name = $('#Uname').val() == data.name ? undefined : $('#Uname').val();
        updates.jabatan = $('#Ujabatan').val() == data.jabatan ? undefined : $('#Ujabatan').val();
        updates.deplid = Number($('#Uunit').val()) == data.deplID ? undefined : Number($('#Uunit').val());
        updates.skangkat = $('#Uska').val() == data.skAngkat ? undefined : $('#Uska').val();
        updates.tmt = $('#Utmta').val() == data.tmt ? undefined : $('#Utmta').val();
        updates.skperubahan = $('#Uskp').val() == "" ? null : $('#Uskp').val();
        updates.skperubahan = updates.skperubahan == data.skPerb ? undefined : updates.skperubahan;
        updates.tgperubahan = $('#Utmtp').val() == "" ? null : $('#Utmtp').val();
        updates.tgperubahan = updates.tgperubahan == data.tmUbah ? undefined : updates.tgperubahan;
        updates.vision = $('#Uvisi').val() == data.vision ? undefined : $('#Uvisi').val();
        updates.mission = $('#Umisi').val() == data.mission ? undefined : $('#Umisi').val();
        updates.seleksi = $('#Uselect').val() == "" ? null : $('#Uselect').val();
        updates.seleksi = updates.seleksi == data.seleksi ? undefined : updates.seleksi;
        updates.nilaipilih = $('#Uggrading').val() == "" ? null : $('#Uggrading').val();
        updates.nilaipilih = updates.nilaipilih == data.nilaiPilih ? undefined : updates.nilaipilih;
        updates.eviden = $('#Uevidence').val() == "" ? null : $('#Uevidence').val();
        updates.eviden = updates.eviden == data.eviden ? undefined : updates.eviden;
        updates.dokumentasi = $('#Udocuments').val() == "" ? undefined : $('#Udocuments').val();
        updates.dokumentasi = updates.dokumentasi == data.dokumentasi ? undefined : updates.dokumentasi;
        updates = JSON.parse(JSON.stringify(updates));
        if (Object.keys(updates).length <1 && photo.length < 16)
        {
            moly.alert.show("Data Tidak Berubah","Tidak ada data yang diubah. Operasi tidak dilanjutkan.");
            moly.loadScreen.close(loadid);
            return;
        }
        const update = await postJson('/api/chagent',{agentid: data.agentID, photo, updates});
        if(update.status != 202)
        {
            moly.alert.show("Pembaruan Gagal","Data tidak berhasil diperbarui. Silakan ulangi kembali beberapa saat lagi.");
            moly.loadScreen.close(loadid);
            return;
        }
        moly.loadScreen.close(loadid);
        thisDialog.resolve(true);
    });
    $('#UCancel').click(async()=>{
        thisDialog.resolve(false);
    });
    $($('#photoInput')[0]._input).change(async()=>{
        const me = $('#photoInput')[0]._input;
        if(me.files.length > 0)
        {
            const file = await moly.file.serialise(me.files[0]);
            photo = "data:";
            photo += file.type;
            photo += ";base64,";
            photo += file.data;
            $('#UagentPhoto')[0].src = photo;
        }
        else
        {
            $('#UagentPhoto')[0].src = data.photoURL;
        }
    });
    setTimeout(() => {
        $('#blocker').remove();
    }, 500);
</script>