feat: member list in groups

src/lib/group/Body.svelte

@@ -6,12 +6,16 @@
     import Edit from './Edit.svelte';
     import twemoji from 'twemoji';
     import Privacy from './Privacy.svelte';
+    import type Member from 'src/api/member';
+    import MemberEdit from './MemberEdit.svelte';
    
     export let group: Group;
-    let editMode: boolean;
+    let editMode: boolean = false;
+    let memberMode: boolean = false;
     export let isPublic: boolean;
     export let loading: boolean = false;
     let privacyLoading = false;
+    export let members: Member[];
 
     let htmlDescription: string;
     $: if (group.description) { 
@@ -42,7 +46,7 @@
 </script>
 
 <CardBody style="border-left: 4px solid #{group.color}; margin: -1rem -1.25rem">
-{#if !editMode }
+{#if !editMode && !memberMode}
 <Row>
     {#if group.id}
     <Col xs={12} lg={4} class="mb-2">
@@ -101,9 +105,11 @@
 <img src={group.banner} alt="your system banner" class="w-100 mb-3 rounded" style="max-height: 12em; object-fit: cover"/>
 {/if}
 {#if !isPublic}
-<Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button>
+<Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button> <Button style="flex: 0" color="secondary" on:click={() => memberMode = true}>Members</Button>
 {/if}
-{:else}
+{:else if editMode}
 <Edit on:update bind:loading bind:group bind:editMode />
+{:else if memberMode}
+    <MemberEdit on:update bind:loading bind:group bind:memberMode bind:members />
 {/if}
 </CardBody>

src/lib/group/MemberEdit.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+    import type Group from "../../api/group";
+    import type Member from "../../api/member";
+    import { Row, Col, Input, Button, Label, Alert, ListGroup, ListGroupItem } from 'sveltestrap';
+    import { createEventDispatcher, onDestroy } from 'svelte';
+    import PKAPI from '../../api';
+    import ListPagination from "../ListPagination.svelte";
+    import twemoji from "twemoji";
+    import FaUserPlus from 'svelte-icons/fa/FaUserPlus.svelte'
+    import FaUserFriends from 'svelte-icons/fa/FaUserFriends.svelte'
+    import FaUserMinus from 'svelte-icons/fa/FaUserMinus.svelte'
+    import Svelecte, { addFormatter } from 'svelecte';
+
+    export let loading: boolean;
+    export let group: Group;
+    export let memberMode: boolean = true;
+    export let members: Member[];
+
+    let membersInGroup: Member[];
+    let membersNotInGroup: Member[];
+    let membersInGroupSelection: any[];
+    let membersNotInGroupSelection: any[];
+
+    let membersToBeAdded: any[];
+    let membersToBeRemoved: any[];
+
+    let currentPage: number = 1;
+
+    let smallPages = true;
+
+    if (group.members) {
+        membersInGroup = members.filter(member => group.members.includes(member.uuid));
+        membersInGroup = membersInGroup.sort((a, b) => a.name.localeCompare(b.name));
+
+        membersNotInGroup = members.filter(member => !group.members.includes(member.uuid));
+        membersNotInGroup = membersNotInGroup.sort((a, b) => a.name.localeCompare(b.name));
+
+        membersInGroupSelection = membersInGroup.map(function(member) { return {name: member.name, shortid: member.id, id: member.uuid, display_name: member.display_name}; }).sort((a, b) => a.name.localeCompare(b.name));
+        membersNotInGroupSelection = membersNotInGroup.map(function(member) { return {name: member.name, shortid: member.id, id: member.uuid, display_name: member.display_name}; }).sort((a, b) => a.name.localeCompare(b.name));
+    }
+
+    $: indexOfLastItem = currentPage * 10;
+    $: indexOfFirstItem = indexOfLastItem - 10;
+    $: pageAmount = Math.ceil(membersInGroup.length / 10);
+
+    $: finalMemberList = membersInGroup.slice(indexOfFirstItem, indexOfLastItem);
+
+    let settings = JSON.parse(localStorage.getItem('pk-settings'));
+    let listGroupElements: any[] = [];
+    $: if (settings && settings.appearance.twemoji) {
+        if (listGroupElements && listGroupElements.length > 0) {
+            listGroupElements.forEach(element => element && twemoji.parse(element));
+        };
+    }
+
+function memberListRenderer(item: any) {
+    return `${item.name} (<code>${item.shortid}</code>)`;
+  }
+
+  addFormatter({
+    'member-list': memberListRenderer
+  });
+
+</script>
+
+<Row>
+    <Col xs={12} lg={6} class="text-center mb-3">
+        <h5><div class="icon d-inline-block">
+            <FaUserFriends />
+        </div>Current Members</h5>
+        <ListPagination bind:currentPage bind:pageAmount bind:smallPages/>
+        {#if finalMemberList.length > 0}
+        <ListGroup>
+            {#each finalMemberList as member, index (member.id)}
+            <ListGroupItem><span bind:this={listGroupElements[index]}><b>{member.name}</b> (<code>{member.id}</code>) {member.display_name ? `${member.display_name}` : ""}</span></ListGroupItem>
+            {/each}
+        </ListGroup>
+        {:else}
+        <p>There are no members in this group yet.</p>
+        <p>You can add some in this menu!</p>
+        {/if}
+    </Col>
+    <Col xs={12} lg={6} class="text-center mb-3">
+        <h5><div class="icon d-inline-block">
+            <FaUserPlus />
+        </div>Add Members</h5>
+        <Svelecte renderer="member-list" disableHighlight bind:value={membersToBeAdded} options={membersNotInGroupSelection} multiple/>
+        <p>(this is nonfunctional at the moment)</p>
+        <hr/>
+        <h5><div class="icon d-inline-block">
+            <FaUserMinus />
+        </div>Remove Members</h5>
+        <Svelecte renderer="member-list" disableHighlight bind:value={membersToBeRemoved} options={membersInGroupSelection} multiple/>
+        <p>(this is ALSO nonfunctional)</p>
+    </Col>
+</Row>
+<Button style="flex: 0" color="secondary" on:click={() => memberMode = false}>Back</Button>