balitasehat/balitasehat-client/src/routes/(app)/admin/users/UpdateUser.svelte

<script>
    import api from "$lib/axios";
    import { onMount } from "svelte";

    export let context;
    export let pagination;
    export let modal;
    export let handleGetUsers;

    let form;
    let isLoadingOnSubmit = false;
    let alert = {
        success: true,
        message: "",
    };

    const handleSubmit = async () => {
        try {
            isLoadingOnSubmit = true;

            const fd = new FormData(form);
            const response = await api.put(`/users/${context.id}`, Object.fromEntries(fd));

            alert.success = true;
            alert.message = "";

            handleGetUsers(pagination.current_page, { withLoading: false });
            setTimeout(() => modal.hide(), 500);
        } catch (err) {
            alert.success = false;
            alert.message = err.message;
        } finally {
            isLoadingOnSubmit = false;
        }
    };

    onMount(() => {
        const bm = document.querySelector("#create-user-modal");
        bm.addEventListener("hide.bs.modal", () => {
            setTimeout(() => {
                alert.message = "";
            }, 500);
        });
    });
</script>

<div
    id="update-user-modal"
    class="modal fade"
    data-bs-backdrop="static"
    data-bs-keyboard="false"
    tabindex="-1"
    aria-hidden="true"
>
    <div class="modal-dialog modal-dialog-centered">
        <form action="" method="post" class="modal-content" bind:this={form} on:submit|preventDefault={handleSubmit}>
            <div class="modal-header">
                <h5 class="modal-title">Edit Pengguna</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {#if alert.message}
                    <div class="alert alert-danger alert-dismissible" role="alert">
                        <div class="alert-icon">
                            <i class="ti ti-exclamation-circle"></i>
                        </div>
                        {alert.message}
                        <a href={"#"} class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
                    </div>
                {/if}
                <div class="mb-3">
                    <label for="input-username" class="form-label">
                        Nama Pengguna <span class="text-danger">*</span>
                    </label>
                    <input
                        type="text"
                        name="username"
                        id="input-username"
                        class="form-control"
                        placeholder=""
                        value={context?.username || ""}
                        required
                    />
                </div>
                <div class="mb-3">
                    <label for="input-email" class="form-label">
                        Email <span class="text-danger">*</span>
                    </label>
                    <input
                        type="email"
                        name="email"
                        id="input-email"
                        class="form-control"
                        placeholder="nama@email.com"
                        value={context?.email || ""}
                        required
                    />
                </div>
                <div class="mb-3">
                    <label for="input-password" class="form-label">Password</label>
                    <input
                        type="password"
                        name="password"
                        id="input-password"
                        class="form-control"
                        placeholder=""
                        value=""
                    />
                </div>
                <div class="mb-3">
                    <label for="input-role" class="form-label">
                        Peran <span class="text-danger">*</span>
                    </label>
                    <div class="form-selectgroup-boxes row g-2 mb-3">
                        <div class="col-6">
                            <label class="form-selectgroup-item">
                                <input
                                    type="radio"
                                    name="role"
                                    class="form-selectgroup-input"
                                    value="admin"
                                    checked={context?.role === "admin"}
                                />
                                <span class="form-selectgroup-label d-flex align-items-center p-3">
                                    <span class="me-3">
                                        <span class="form-selectgroup-check"></span>
                                    </span>
                                    <span class="form-selectgroup-label-content">
                                        <span class="form-selectgroup-title strong">Admin</span>
                                        <span class="d-block text-secondary mt-1">
                                            Kelola pengguna, pantau aktivitas sistem, dan akses semua fitur.
                                        </span>
                                    </span>
                                </span>
                            </label>
                        </div>
                        <div class="col-6">
                            <label class="form-selectgroup-item">
                                <input
                                    type="radio"
                                    name="role"
                                    class="form-selectgroup-input"
                                    value="staff"
                                    checked={context?.role === "staff"}
                                />
                                <span class="form-selectgroup-label d-flex align-items-center p-3">
                                    <span class="me-3">
                                        <span class="form-selectgroup-check"></span>
                                    </span>
                                    <span class="form-selectgroup-label-content">
                                        <span class="form-selectgroup-title strong">Petugas</span>
                                        <span class="d-block text-secondary mt-1">
                                            Input data pasien, catat hasil diagnosa, dan kelola informasi pasien.
                                        </span>
                                    </span>
                                </span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn me-auto" data-bs-dismiss="modal">Batal</button>
                <button type="submit" class="btn btn-primary" disabled={isLoadingOnSubmit}>
                    {#if isLoadingOnSubmit}
                        <div class="spinner-border spinner-border-sm" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    {:else}
                        Simpan
                    {/if}
                </button>
            </div>
        </form>
    </div>
</div>