eightball/PluralKit
1
0
Fork 0
mirror of https://github.com/PluralKit/PluralKit.git synced 2026-02-13 09:10:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(dashboard): card list view

Browse source
This commit is contained in:
Jake Fulmine 2022-10-02 22:09:13 +02:00
parent f2aa458db8
commit 00c55533ea
11 changed files with 690 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

96
dashboard/src/lib/list/CardView.svelte Normal file
View file

@ -0,0 +1,96 @@
<script lang="ts">
import { Row, Tooltip } from 'sveltestrap';
import FaLock from 'svelte-icons/fa/FaLock.svelte';
import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte';
import FaUsers from 'svelte-icons/fa/FaUsers.svelte'
import { Member, Group } from '../../api/types';
import MemberCard from '../member/CardView.svelte';
import GroupCard from '../group/CardView.svelte';
export let list: Member[]|Group[];
export let groups: Group[] = [];
export let members: Group[] = [];
export let itemType: string;
export let searchBy = "name";
export let sortBy = "name";
export let isPublic = false;
export let isDash = false;
let copiedItems = {};
function getShortLink(id: string) {
let url = "https://pk.mt"
if (itemType === "member") url += "/m/"
else if (itemType === "group") url += "/g/"
url += id;
return url;
}
async function copyShortLink(index: string, id: string, event?) {
if (event) {
if (event.key !== "Tab") event.preventDefault();
event.stopPropagation();
let ctrlDown = event.ctrlKey||event.metaKey; // mac support
if (!(ctrlDown && event.key === "c") && event.key !== "Enter") return;
}
try {
await navigator.clipboard.writeText(getShortLink(id));
copiedItems[index] = copiedItems[index] || false;
copiedItems[index] = true;
await new Promise(resolve => setTimeout(resolve, 2000));
copiedItems[index] = false;
} catch (error) {
console.log(error);
}
}
</script>
<Row>
{#if itemType === "member"}
{#each list as item (item.uuid)}
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mx-auto mx-sm-0 dont-squish">
<MemberCard on:update member={item} {searchBy} {sortBy} {groups} {isPublic} {isDash}>
<div slot="icon" style="width: auto; height: 1em; cursor: pointer;" id={`${itemType}-copy-${item.uuid}`} on:click|stopPropagation={() => copyShortLink(item.uuid, item.id)} on:keydown={(e) => copyShortLink(item.uuid, item.id, e)} tabindex={0} >
{#if item.privacy && item.privacy.visibility === "private"}
<FaLock />
{:else}
<FaUserCircle />
{/if}
</div>
</MemberCard>
<Tooltip placement="top" target={`${itemType}-copy-${item.uuid}`}>{copiedItems[item.uuid] ? "Copied!" : "Copy public link"}</Tooltip>
</div>
{/each}
{:else if itemType === "group"}
{#each list as item (item.uuid)}
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mx-auto mx-sm-0 dont-squish">
<GroupCard group={item} {searchBy} {sortBy} {members} {isPublic} {isDash}>
<div slot="icon" style="width: auto; height: 1em; cursor: pointer;" id={`${itemType}-copy-${item.uuid}`} on:click|stopPropagation={() => copyShortLink(item.uuid, item.id)} on:keydown={(e) => copyShortLink(item.uuid, item.id, e)} tabindex={0} >
{#if item.privacy && item.privacy.visibility === "private"}
<FaLock />
{:else}
<FaUsers />
{/if}
</div>
</GroupCard>
<Tooltip placement="top" target={`${itemType}-copy-${item.uuid}`}>{copiedItems[item.uuid] ? "Copied!" : "Copy public link"}</Tooltip>
</div>
{/each}
{/if}
</Row>
<style>
@media (max-width: 576px) {
.dont-squish {
max-width: 24rem;
}
}
</style>