here and there

This commit is contained in:
2024-08-17 21:10:01 +03:00
parent 36165444cf
commit ec15f21e67
18 changed files with 170 additions and 135 deletions
@@ -2,6 +2,7 @@
import Avatar from "../account/Avatar.svelte";
import {fly} from "svelte/transition";
import {createEventDispatcher} from "svelte";
import Dropdown from "../common/Dropdown.svelte";
const dispatch = createEventDispatcher();
export let member;
@@ -35,61 +36,50 @@
<div
transition:fly={{ duration: 200 }}
class="d-flex justify-content-between align-items-center mb-3 "
class="member-item"
>
<div class="d-flex align-items-center status-{member.roles.includes('removed') ? 'removed' : 'active'}">
<div class="member-name status-{member.roles.includes('removed') ? 'removed' : 'active'}">
<Avatar name={member.name ?? "" } side={32}/>
<div class="ms-3 ">
<div>
<div>
<span class="fs-5">
{member.name}
</span>
{member.name}
</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"
>
Roles
</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">Remove role</h6>
{#each roles as role}
{#if member.roles.includes(role)}
<button
class="dropdown-item text-capitalize"
on:click={(e) => removeFrom(e,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}
<div>
{member.email}
</div>
</div>
</div>
<Dropdown orientation="right">
<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)}
>
{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)}
>
{role}
</button>
{/if}
{/each}
</Dropdown>
</div>
<style>
.status-removed {