schemas and fields

front/js/svelte/members/MemberSettingsCard.svelte

@@ -1,14 +1,13 @@
 <script>
-    import Avatar from "../account/Avatar.svelte";
-    import {fly} from "svelte/transition";
-    import {createEventDispatcher} from "svelte";
+    import Avatar from "../../common/Avatar.svelte";
+    import { fly } from "svelte/transition";
+    import { createEventDispatcher } from "svelte";
     import Dropdown from "../common/Dropdown.svelte";
 
     const dispatch = createEventDispatcher();
     export let member;
     export let roles;
 
-
     function removeFrom(e, aRole) {
         e.preventDefault();
         let newRoles = member.roles.filter((r) => r !== aRole);
@@ -22,24 +21,23 @@
         e.preventDefault();
 
         let newRoles = [...member.roles, aRole];
-        console.log(member.roles)
-        console.log(aRole)
-        console.log(newRoles)
+        console.log(member.roles);
+        console.log(aRole);
+        console.log(newRoles);
         dispatch("update", {
             user: member.id,
             roles: newRoles,
         });
     }
-
-
 </script>
 
-<div
-        transition:fly={{ duration: 200 }}
-        class="member-item"
->
-    <div class="member-name status-{member.roles.includes('removed')  ? 'removed' : 'active'}">
-        <Avatar name={member.name ?? "" } side={32}/>
+<div transition:fly={{ duration: 200 }} class="member-item">
+    <div
+        class="member-name status-{member.roles.includes('removed')
+            ? 'removed'
+            : 'active'}"
+    >
+        <Avatar name={member.name ?? ""} side={32} />
         <div>
             <div>
                 {member.name}
@@ -50,41 +48,35 @@
         </div>
     </div>
     <Dropdown orientation="right">
-        <div slot="button">
-            Roles
-        </div>
+        <div slot="button">Roles</div>
         <h6 class="dropdown-header">Remove role</h6>
         {#each roles as role}
             {#if member.roles.includes(role)}
                 <button
-                        class="dropdown-item button"
-                        on:click={(e) => removeFrom(e,role)}
+                    class="dropdown-item button"
+                    on:click={(e) => removeFrom(e, role)}
                 >
                     {role}
                 </button>
             {/if}
         {/each}
 
-
         <h6 class="dropdown-header">Add role</h6>
         {#each roles as role}
             {#if !member.roles.includes(role)}
                 <button
-                        class="dropdown-item button"
-                        on:click={(e) => addTo(e,role)}
+                    class="dropdown-item button"
+                    on:click={(e) => addTo(e, role)}
                 >
                     {role}
                 </button>
             {/if}
         {/each}
-
     </Dropdown>
-
 </div>
+
 <style>
     .status-removed {
-        opacity: .5;
+        opacity: 0.5;
     }
-
-
 </style>