lucent-laravel/front/js/svelte/members/Members.svelte

<script>
    import ErrorAlert from "../common/ErrorAlert.svelte";
    import SuccessAlert from "../common/SuccessAlert.svelte";
    import SpinnerButton from "../common/SpinnerButton.svelte";
    import MemberSettingsCard from "./MemberSettingsCard.svelte";
    import { getContext } from "svelte";
    import { apiPost } from "../../helpers";

    const channel = getContext("channel");
    export let users;
    let name;
    let email;
    let role;
    let errorMessage = "";
    let successAlert;

    function submitInvite(e) {
        e.preventDefault();
        invite(name, email, role);
    }

    function invite(newName, newEmail, newRole) {
        errorMessage = "";

        apiPost(channel.lucentUrl + "/members/invite", {
            name: newName,
            email: newEmail,
            roles: [newRole],
        })
            .then((response) => {
                successAlert.show("User was invited");
                users = [...users, response.user];
                name = null;
                email = null;
                role = null;
            })
            .catch((error) => {
                errorMessage = error.response?.data?.error ?? "";
            });
    }

    function update(e) {
        e.preventDefault();
        errorMessage = "";

        apiPost(channel.lucentUrl + "/members/update", {
            id: e.detail.user,
            roles: e.detail.roles,
        })
            .then((response) => {
                successAlert.show("Users updated");
                users = response.users;
            })
            .catch((error) => {
                errorMessage = error.response?.data?.error ?? "";
            });
    }
</script>

<div class="common-wrapper">
    <div class="lx-card mt-5">
        <h3 class="header-small mb-5">Invite people</h3>
        <ErrorAlert message={errorMessage} />
        <SuccessAlert bind:this={successAlert} />

        <form on:submit={submitInvite}>
            <div class="mb-3">
                <label for="inviteeName" class="form-label">Invitee Name</label>
                <input
                    type="text"
                    bind:value={name}
                    class="form-control"
                    id="inviteeName"
                    placeholder="Member name"
                    required
                />
            </div>
            <div class="mb-3">
                <label for="inviteeEmail" class="form-label"
                    >Invitee Email Address</label
                >
                <input
                    type="email"
                    bind:value={email}
                    class="form-control"
                    id="inviteeEmail"
                    placeholder="Member email"
                    required
                />
            </div>

            <div class="me-3">
                <select bind:value={role}>
                    {#each channel.roles.filter((r) => r !== "removed") as arole}
                        <option value={arole}>{arole}</option>
                    {/each}
                </select>
            </div>

            <div class="mt-5 d-block text-center">
                <SpinnerButton label="Invite" />
            </div>
        </form>
    </div>

    <div class="member-list">
        <h3 class="header-small mb-5 mt-5">Members</h3>
        {#each users as user}
            <MemberSettingsCard
                member={user}
                roles={channel.roles}
                on:update={update}
                on:reinvite={(e) => invite(e.detail.email, e.detail.role)}
            />
        {/each}
    </div>
</div>