liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adding member(s) to group(s)!

Browse Source
This commit is contained in:
Spectralitree
2021-12-31 16:23:25 +01:00
parent ff2a6d038d
commit c286aaa0b8
3 changed files with 113 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/lib/group/MemberEdit.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import type Group from "../../api/group";
import type Member from "../../api/member";
import { Row, Col, Button, Alert, ListGroup, ListGroupItem } from 'sveltestrap';
import { Row, Col, Button, Alert, ListGroup, ListGroupItem, Spinner } from 'sveltestrap';
import { createEventDispatcher } from 'svelte';
import PKAPI from '../../api';
import ListPagination from "../ListPagination.svelte";
@@ -12,6 +12,7 @@
import Svelecte, { addFormatter } from 'svelecte';
let loading: boolean = false;
let err: string;
export let group: Group;
export let memberMode: boolean = true;
export let members: Member[];
@@ -28,7 +29,7 @@
let smallPages = true;
if (group.members) {
$: if (group.members) {
membersInGroup = members.filter(member => group.members.includes(member.uuid));
membersInGroup = membersInGroup.sort((a, b) => a.name.localeCompare(b.name));
@@ -61,8 +62,52 @@ function memberListRenderer(item: any) {
'member-list': memberListRenderer
});
</script>
const dispatch = createEventDispatcher();
function update() {
dispatch("update", group)
}
const api = new PKAPI();
async function submitAdd() {
let data = membersToBeAdded;
try {
loading = true;
await api.postGroupMembers({token: localStorage.getItem("pk-token"), id: group.id, data: data, removing: false});
data.forEach(member => group.members.push(member));
update();
err = null;
membersToBeAdded = [];
loading = false;
} catch (error) {
console.log(error);
err = error.message;
loading = false;
}
}
async function submitRemove() {
let data = membersToBeRemoved;
try {
loading = true;
await api.postGroupMembers({token: localStorage.getItem("pk-token"), id: group.id, data: data, removing: true});
group.members = group.members.filter(m => !data.includes(m));
update();
err = null;
membersToBeRemoved = [];
loading = false;
} catch (error) {
console.log(error);
err = error.message;
loading = false;
}
}
</script>
{#if err}
<Alert color="danger">{err}</Alert>
{/if}
<Row>
<Col xs={12} lg={6} class="text-center mb-3">
<h5><div class="icon d-inline-block">
@@ -85,13 +130,19 @@ function memberListRenderer(item: any) {
<FaUserPlus />
</div>Add Members</h5>
<Svelecte renderer="member-list" disableHighlight bind:value={membersToBeAdded} options={membersNotInGroupSelection} multiple/>
<p>(this is nonfunctional at the moment)</p>
{#if !loading && membersToBeAdded && membersToBeAdded.length > 0}
<Button class="w-100 mt-2" color="primary" on:click={submitAdd}>Add</Button>{:else}
<Button class="w-100 mt-2" color="primary" disabled>{#if loading}<Spinner size="sm" />{:else}Add{/if}</Button>
{/if}
<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>
{#if !loading && membersToBeRemoved && membersToBeRemoved.length > 0}
<Button class="w-100 mt-2" color="primary" on:click={submitRemove}>Remove</Button>{:else}
<Button class="w-100 mt-2" color="primary" disabled>{#if loading}<Spinner size="sm" />{:else}Remove{/if}</Button>
{/if}
</Col>
</Row>
<Button style="flex: 0" color="secondary" on:click={() => memberMode = false}>Back</Button>

2
src/lib/member/Body.svelte
View File

@@ -131,6 +131,6 @@
{:else if editMode}
<Edit on:update bind:member bind:editMode />
{:else if groupMode}
<GroupEdit on:update bind:member bind:groups bind:groupMode />
<GroupEdit on:updateGroups bind:member bind:groups bind:groupMode />
{/if}
</CardBody>

61
src/lib/member/GroupEdit.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import type Group from "../../api/group";
import type Member from "../../api/member";
import { Row, Col, Button, Alert, ListGroup, ListGroupItem } from 'sveltestrap';
import { Row, Col, Button, Alert, ListGroup, ListGroupItem, Spinner } from 'sveltestrap';
import { createEventDispatcher } from 'svelte';
import PKAPI from '../../api';
import ListPagination from "../ListPagination.svelte";
@@ -16,6 +16,7 @@
export let member: Member;
export let groups: Group[] = [];
let loading: boolean = false;
let err: string;
export let groupMode: boolean = true;
let groupsWithMember: Group[];
@@ -29,7 +30,7 @@
let currentPage = 1;
let smallPages = true;
if (groups) {
$: if (groups) {
groupsWithMember = groups.filter(group => group.members.includes(member.uuid));
groupsWithMember.sort((a, b) => a.name.localeCompare(b.name));
@@ -62,8 +63,52 @@
'member-list': groupListRenderer
});
</script>
const dispatch = createEventDispatcher();
function updateGroups() {
dispatch("updateGroups", groups);
}
const api = new PKAPI();
async function submitAdd() {
let data = groupsToBeAdded;
try {
loading = true;
await api.postMemberGroups({token: localStorage.getItem("pk-token"), id: member.id, data: data, removing: false});
groups.forEach(group => data.includes(group.uuid) && group.members.push(member.uuid));
updateGroups();
err = null;
groupsToBeAdded = [];
loading = false;
} catch (error) {
console.log(error);
err = error.message;
loading = false;
}
}
async function submitRemove() {
let data = groupsToBeRemoved;
try {
loading = true;
await api.postMemberGroups({token: localStorage.getItem("pk-token"), id: member.id, data: data, removing: true});
groups.forEach(group => {if (data.includes(group.uuid)) group.members = group.members.filter(m => m !== member.uuid)});
updateGroups();
err = null;
groupsToBeRemoved = [];
loading = false;
} catch (error) {
console.log(error);
err = error.message;
loading = false;
}
}
</script>
{#if err}
<Alert color="danger">{err}</Alert>
{/if}
<Row>
<Col xs={12} lg={6} class="text-center mb-3">
<h5><div class="icon d-inline-block">
@@ -86,13 +131,19 @@
<FaFolderPlus />
</div>Add to Groups</h5>
<Svelecte renderer="member-list" disableHighlight bind:value={groupsToBeAdded} options={groupsWithoutMemberSelection} multiple/>
<p>(this is nonfunctional at the moment)</p>
{#if !loading && groupsToBeAdded && groupsToBeAdded.length > 0}
<Button class="w-100 mt-2" color="primary" on:click={submitAdd}>Add</Button>{:else}
<Button class="w-100 mt-2" color="primary" disabled>{#if loading}<Spinner size="sm" />{:else}Add{/if}</Button>
{/if}
<hr/>
<h5><div class="icon d-inline-block">
<FaFolderMinus />
</div>Remove from Groups</h5>
<Svelecte renderer="member-list" disableHighlight bind:value={groupsToBeRemoved} options={groupsWithMemberSelection} multiple/>
<p>(this is ALSO nonfunctional)</p>
{#if !loading && groupsToBeRemoved && groupsToBeRemoved.length > 0}
<Button class="w-100 mt-2" color="primary" on:click={submitRemove}>Remove</Button>{:else}
<Button class="w-100 mt-2" color="primary" disabled>{#if loading}<Spinner size="sm" />{:else}Remove{/if}</Button>
{/if}
</Col>
</Row>
<Button style="flex: 0" color="secondary" on:click={() => groupMode = false}>Back</Button>