File size: 1,970 Bytes
cfb0fa4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | <script>
import { toast } from 'svelte-sonner';
import { onMount, getContext } from 'svelte';
import { page } from '$app/stores';
const i18n = getContext('i18n');
import { deleteGroupById, updateGroupById } from '$lib/apis/groups';
import Pencil from '$lib/components/icons/Pencil.svelte';
import User from '$lib/components/icons/User.svelte';
import EditGroupModal from './EditGroupModal.svelte';
export let group = {
name: 'Admins',
user_ids: [1, 2, 3]
};
export let defaultPermissions = {};
export let setGroups = () => {};
let showEdit = false;
const updateHandler = async (_group) => {
const res = await updateGroupById(localStorage.token, group.id, _group).catch((error) => {
toast.error(`${error}`);
return null;
});
if (res) {
toast.success($i18n.t('Group updated successfully'));
setGroups();
}
};
const deleteHandler = async () => {
const res = await deleteGroupById(localStorage.token, group.id).catch((error) => {
toast.error(`${error}`);
return null;
});
if (res) {
toast.success($i18n.t('Group deleted successfully'));
setGroups();
}
};
onMount(() => {
const groupId = $page.url.searchParams.get('id');
if (groupId && groupId === group.id) {
showEdit = true;
}
});
</script>
<EditGroupModal
bind:show={showEdit}
edit
{group}
{defaultPermissions}
onSubmit={updateHandler}
onDelete={deleteHandler}
/>
<button
class="flex items-center gap-3 justify-between px-1 text-xs w-full transition"
on:click={() => {
showEdit = true;
}}
>
<div class="flex items-center gap-1.5 w-full font-medium flex-1">
<div class="line-clamp-1">
{group.name}
</div>
</div>
<div class="flex items-center gap-1.5 w-fit font-medium text-right justify-end">
{group?.member_count}
<div>
<User className="size-3.5" />
</div>
<div class=" rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-gray-850 transition">
<Pencil className="size-3.5" />
</div>
</div>
</button>
|