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 Radio from "../forms/Radio.svelte";
    import MemberSettingsCard from "./MemberSettingsCard.svelte";
    import {getContext} from "svelte";


    const channel = getContext("channel");
    export let title;
    export let users;
    export let roles;
    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 = "";

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

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

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

<div class="wrapper-tiny transparent mb-5">
    <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">
                {#each roles.filter((r) => r !== "removed") as arole}
                    <Radio
                        bind:group={role}
                        value={arole}
                        name="role"
                        label={arole}
                    />
                {/each}
            </div>

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

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


    </div>
</div>