init

2023-10-02 23:10:49 +03:00
commit c6cb488379
255 changed files with 18731 additions and 0 deletions
@@ -0,0 +1,69 @@
+<script>
+    import Avatar from "../account/Avatar.svelte";
+    import {fly} from "svelte/transition";
+    import {createEventDispatcher} from "svelte";
+
+    const dispatch = createEventDispatcher();
+    export let member;
+    export let roles;
+
+    function update(e, newRole) {
+        e.preventDefault();
+        dispatch("update", {
+            user: member.id,
+            role: newRole,
+        });
+    }
+
+
+</script>
+
+<div
+    transition:fly={{ duration: 200 }}
+    class="d-flex justify-content-between align-items-center mb-3 "
+>
+    <div class="d-flex align-items-center status-{member.role}">
+        <Avatar name={member.name ?? "" } side="32"/>
+        <div class="ms-3 ">
+            <div>
+                <span class="fs-5">
+                            {member.name}
+                        </span>
+            </div>
+            {member.email}
+        </div>
+    </div>
+    <div>
+        <div class="dropdown dropdown-center">
+            <button
+                class="  dropdown-toggle btn btn-light"
+                type="button"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+            >
+                {member.role}
+            </button>
+            <div class="dropdown-menu">
+                {#each roles as role}
+                    {#if member.role !== role}
+                        <button
+                            class="dropdown-item"
+                            on:click={(e) => update(e,role)}
+                        >
+                            Convert to {role}
+                        </button>
+                    {/if}
+                {/each}
+
+            </div>
+        </div>
+
+    </div>
+</div>
+<style>
+    .status-removed {
+        opacity: .5;
+    }
+
+
+</style>
@@ -0,0 +1,129 @@
+<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>