mirrors/pocket-id
1
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-02-12 22:30:15 +00:00
Code Activity

feat: modernize ui (#381)

Browse Source 
Co-authored-by: Elias Schneider <login@eliasschneider.com>
This commit is contained in:
Kyle Mendell
2025-03-30 13:19:14 -05:00
committed by GitHub
parent 5dcf69e974
commit 9881a1df9e
28 changed files with 847 additions and 512 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
frontend/src/routes/settings/admin/user-groups/+page.svelte
View File

@@ -2,16 +2,15 @@
import { goto } from '$app/navigation';
import { Button } from '$lib/components/ui/button';
import * as Card from '$lib/components/ui/card';
import { m } from '$lib/paraglide/messages';
import UserGroupService from '$lib/services/user-group-service';
import type { Paginated } from '$lib/types/pagination.type';
import type { UserGroupCreate, UserGroupWithUserCount } from '$lib/types/user-group.type';
import type { UserGroupCreate } from '$lib/types/user-group.type';
import { axiosErrorToast } from '$lib/utils/error-util';
import { LucideMinus } from 'lucide-svelte';
import { LucideMinus, UserCog, UserPlus } from 'lucide-svelte';
import { toast } from 'svelte-sonner';
import { slide } from 'svelte/transition';
import UserGroupForm from './user-group-form.svelte';
import UserGroupList from './user-group-list.svelte';
import { m } from '$lib/paraglide/messages';
let { data } = $props();
let userGroups = $state(data.userGroups);
@@ -40,36 +39,47 @@
<title>{m.user_groups()}</title>
</svelte:head>
<Card.Root>
<Card.Header>
<div class="flex items-center justify-between">
<div>
<Card.Title>{m.create_user_group()}</Card.Title>
<Card.Description>{m.create_a_new_group_that_can_be_assigned_to_users()}</Card.Description>
<div>
<Card.Root>
<Card.Header>
<div class="flex items-center justify-between">
<div>
<Card.Title>
<UserPlus class="text-primary/80 h-5 w-5" />
{m.create_user_group()}
</Card.Title>
<Card.Description>{m.create_a_new_group_that_can_be_assigned_to_users()}</Card.Description
>
</div>
{#if !expandAddUserGroup}
<Button on:click={() => (expandAddUserGroup = true)}>{m.add_group()}</Button>
{:else}
<Button class="h-8 p-3" variant="ghost" on:click={() => (expandAddUserGroup = false)}>
<LucideMinus class="h-5 w-5" />
</Button>
{/if}
</div>
{#if !expandAddUserGroup}
<Button on:click={() => (expandAddUserGroup = true)}>{m.add_group()}</Button>
{:else}
<Button class="h-8 p-3" variant="ghost" on:click={() => (expandAddUserGroup = false)}>
<LucideMinus class="h-5 w-5" />
</Button>
{/if}
</div>
</Card.Header>
{#if expandAddUserGroup}
<div transition:slide>
<Card.Content>
<UserGroupForm callback={createUserGroup} />
</Card.Content>
</div>
{/if}
</Card.Root>
</Card.Header>
{#if expandAddUserGroup}
<div transition:slide>
<Card.Content>
<UserGroupForm callback={createUserGroup} />
</Card.Content>
</div>
{/if}
</Card.Root>
</div>
<Card.Root>
<Card.Header>
<Card.Title>{m.manage_user_groups()}</Card.Title>
</Card.Header>
<Card.Content>
<UserGroupList {userGroups} requestOptions={userGroupsRequestOptions} />
</Card.Content>
</Card.Root>
<div>
<Card.Root>
<Card.Header>
<Card.Title>
<UserCog class="text-primary/80 h-5 w-5" />
{m.manage_user_groups()}
</Card.Title>
</Card.Header>
<Card.Content>
<UserGroupList {userGroups} requestOptions={userGroupsRequestOptions} />
</Card.Content>
</Card.Root>
</div>