permissions

front/js/svelte/members/MemberSettingsCard.svelte

@@ -7,11 +7,26 @@
     export let member;
     export let roles;
 
-    function update(e, newRole) {
+
+    function removeFrom(e, aRole) {
         e.preventDefault();
+        let newRoles = member.roles.filter((r) => r !== aRole);
         dispatch("update", {
             user: member.id,
-            role: newRole,
+            roles: newRoles,
+        });
+    }
+
+    function addTo(e, aRole) {
+        e.preventDefault();
+
+        let newRoles = [...member.roles, aRole];
+        console.log(member.roles)
+        console.log(aRole)
+        console.log(newRoles)
+        dispatch("update", {
+            user: member.id,
+            roles: newRoles,
         });
     }
 
@@ -19,11 +34,11 @@
 </script>
 
 <div
-    transition:fly={{ duration: 200 }}
-    class="d-flex justify-content-between align-items-center mb-3 "
+        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="d-flex align-items-center status-{member.roles.includes('removed')  ? 'removed' : 'active'}">
+        <Avatar name={member.name ?? "" } side={32}/>
         <div class="ms-3 ">
             <div>
                 <span class="fs-5">
@@ -36,21 +51,37 @@
     <div>
         <div class="dropdown dropdown-center">
             <button
-                class="  dropdown-toggle btn btn-light"
-                type="button"
-                data-bs-toggle="dropdown"
-                aria-expanded="false"
+                    class="  dropdown-toggle btn btn-light"
+                    type="button"
+                    data-bs-toggle="dropdown"
+                    aria-expanded="false"
             >
-                {member.role}
+                Roles
             </button>
             <div class="dropdown-menu">
+                <h6 class="dropdown-header">Remove role</h6>
                 {#each roles as role}
-                    {#if member.role !== role}
+                    {#if member.roles.includes(role)}
                         <button
-                            class="dropdown-item"
-                            on:click={(e) => update(e,role)}
+                                class="dropdown-item text-capitalize"
+                                on:click={(e) => removeFrom(e,role)}
                         >
-                            Convert to {role}
+                            {role}
+                        </button>
+                    {/if}
+                {/each}
+                <div>
+                    <hr class="dropdown-divider">
+                </div>
+
+                <h6 class="dropdown-header">Add role</h6>
+                {#each roles as role}
+                    {#if !member.roles.includes(role)}
+                        <button
+                                class="dropdown-item text-capitalize"
+                                on:click={(e) => addTo(e,role)}
+                        >
+                            {role}
                         </button>
                     {/if}
                 {/each}

front/js/svelte/members/Members.svelte

@@ -9,7 +9,6 @@
 
     const channel = getContext("channel");
     export let users;
-    export let roles;
     let name;
     let email;
     let role;
@@ -28,7 +27,7 @@
             .post(channel.lucentUrl + "/members/invite", {
                 name: newName,
                 email: newEmail,
-                role: newRole,
+                roles: [newRole],
             })
             .then((response) => {
                 successAlert.show("User was invited");
@@ -49,7 +48,7 @@
         axios
             .post(channel.lucentUrl + "/members/update", {
                 id: e.detail.user,
-                role: e.detail.role,
+                roles: e.detail.roles,
             })
             .then((response) => {
                 successAlert.show("Users updated");
@@ -96,7 +95,7 @@
             </div>
 
             <div class="me-3">
-                {#each roles.filter((r) => r !== "removed") as arole}
+                {#each channel.roles.filter((r) => r !== "removed") as arole}
                     <Radio
                         bind:group={role}
                         value={arole}
@@ -117,7 +116,7 @@
         {#each users as user}
             <MemberSettingsCard
                 member={user}
-                roles={roles}
+                roles={channel.roles}
                 on:update={update}
                 on:reinvite={(e) => invite(e.detail.email, e.detail.role)}
             />