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}