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

refactor(dashboard): revamp how lists work entirely

Browse Source
This commit is contained in:
Jake Fulmine
2022-11-27 19:27:07 +01:00
parent a62b6d53e2
commit 39e18704a6
19 changed files with 1090 additions and 613 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
dashboard/src/components/member/CardView.svelte
View File

@@ -93,7 +93,7 @@
try {
let res = await api().members(member.id).patch({data});
update({...member, ...res});
success = true;
view = 'card';
} catch (error) {
console.log(error);
err.push(error.message);
@@ -111,7 +111,7 @@
}
</script>
<Card class="mb-4 pb-3" style={`height: 27.5rem; ${member.color && `border-bottom: 4px solid #${member.color}`}`}>
<div class="mb-4 pb-3 card item" style={`${member.color && `border-bottom: 4px solid #${member.color}`}`}>
<CardHeader>
<CardTitle class="d-flex justify-content-center align-middle w-100 mb-0">
<div class="icon d-inline-block">
@@ -141,13 +141,13 @@
<hr style="min-height: 1px;"/>
<Row>
<Col xs={4} class="align-items-center justify-content-center">
{#if !isPublic}<Button color="link" class="mt-2" on:click={() => {view = "edit"}} id={`member-${member.uuid}-edit-button-card`}><FaEdit/></Button>{/if}
{#if !isPublic}<Button color="link" class="mt-2" style="height: 3.5rem;" on:click={() => {view = "edit"}} id={`member-${member.uuid}-edit-button-card`}><FaEdit/></Button>{/if}
</Col>
<Col xs={4} class="align-items-center justify-content-center">
{#if !isPublic && isDash}<Button color="link" class="mt-2 text-reset" on:click={() => {view = "groups"}} id={`member-${member.uuid}-groups-button-card`}><FaUsers/></Button>{/if}
{#if !isPublic && isDash}<Button color="link" class="mt-2 text-reset" style="height: 3.5rem;" on:click={() => {view = "groups"}} id={`member-${member.uuid}-groups-button-card`}><FaUsers/></Button>{/if}
</Col>
<Col xs={4} class="align-items-center justify-content-center">
<Link tabindex={-1} to={pageLink} class="text-reset"><Button color="link" class="mt-2 w-100 text-reset" id={`member-${member.uuid}-view-button-card`}><FaInfoCircle/></Button></Link>
<Link tabindex={-1} to={pageLink} class="text-reset"><Button color="link" class="mt-2 w-100 text-reset" style="height: 3.5rem;" id={`member-${member.uuid}-view-button-card`}><FaInfoCircle/></Button></Link>
</Col>
{#if !isPublic}<Tooltip target={`member-${member.uuid}-edit-button-card`} placement="bottom">Edit member</Tooltip>{/if}
{#if !isPublic && isDash}<Tooltip target={`member-${member.uuid}-groups-button-card`} placement="bottom">View groups</Tooltip>{/if}
@@ -168,13 +168,13 @@
<hr style="min-height: 1px"/>
<Row>
<Col xs={4} class="align-items-center justify-content-center">
<Button color="link" class="mt-2" on:click={() => {view = "edit"}} id={`member-${member.uuid}-edit-button-groups`}><FaEdit/></Button>
<Button color="link" class="mt-2" style="height: 3.5rem;" on:click={() => {view = "edit"}} id={`member-${member.uuid}-edit-button-groups`}><FaEdit/></Button>
</Col>
<Col xs={4} class="align-items-center justify-content-center">
<Button color="link" class="mt-2 text-reset" on:click={() => {view = "card"}} id={`member-${member.uuid}-back-button-groups`}><FaTimes/></Button>
<Button color="link" class="mt-2 text-reset" style="height: 3.5rem;" on:click={() => {view = "card"}} id={`member-${member.uuid}-back-button-groups`}><FaTimes/></Button>
</Col>
<Col xs={4} class="align-items-center justify-content-center">
<Link tabindex={-1} to={`./m/${member.id}`} class="text-reset"><Button color="link" class="mt-2 w-100 text-reset" id={`member-${member.uuid}-view-button-groups`}><FaInfoCircle/></Button></Link>
<Link tabindex={-1} to={`./m/${member.id}`} class="text-reset"><Button color="link" class="mt-2 w-100 text-reset" style="height: 3.5rem;" id={`member-${member.uuid}-view-button-groups`}><FaInfoCircle/></Button></Link>
</Col>
<Tooltip target={`member-${member.uuid}-edit-button-groups`} placement="bottom">Edit member</Tooltip>
<Tooltip target={`member-${member.uuid}-back-button-groups`} placement="bottom">Back to info</Tooltip>
@@ -204,9 +204,6 @@
</Col>
</Row>
<hr style="min-height: 1px" />
{#if success}
<Alert class="m-0 mb-2" color="success">Member edited!</Alert>
{/if}
{#if err}
{#each err as errorMessage}
<Alert class="m-0 mb-2" color="danger">{@html errorMessage}</Alert>
@@ -214,19 +211,19 @@
{/if}
<Row>
<Col xs={4} class="align-items-center justify-content-center">
<Button disabled={loading} color="link" class="mt-2 text-danger" style="height: 3rem;" on:click={() => {view = "card"}} id={`member-${member.uuid}-back-button-edit`}><FaTimes/></Button>
<Button disabled={loading} color="link" class="mt-2 text-danger" style="height: 3.5rem;" on:click={() => {view = "card"}} id={`member-${member.uuid}-back-button-edit`}><FaTimes/></Button>
</Col>
<Col xs={4}>
</Col>
<Col xs={4} class="align-items-center justify-content-center">
<Button disabled={loading} color="link" class="mt-2 text-success" on:click={submit} id={`member-${member.uuid}-submit-button-edit`}><FaCheck/></Button>
<Button disabled={loading} color="link" class="mt-2 text-success" style="height: 3.5rem;" on:click={submit} id={`member-${member.uuid}-submit-button-edit`}><FaCheck/></Button>
</Col>
<Tooltip target={`member-${member.uuid}-back-button-edit`} placement="bottom">Go back</Tooltip>
<Tooltip target={`member-${member.uuid}-submit-button-edit`} placement="bottom">Submit edit</Tooltip>
</Row>
{/if}
</div>
</Card>
</div>
<style>
.hide-scrollbar::-webkit-scrollbar {
@@ -237,4 +234,13 @@
scrollbar-width: none;
}
.item {
height: auto;
}
@media (min-width: 768px) {
.item {
height: 30rem;
}
}
</style>

3
dashboard/src/components/member/Edit.svelte
View File

@@ -74,7 +74,8 @@
try {
let res = await api().members(member.id).patch({data});
update({...member, ...res});
success = true;
editMode = false;
return;
} catch (error) {
console.log(error);
err.push(error.message);