switch to use:enchance for all forms, split overview into its own file
This commit is contained in:
parent
365c43c501
commit
f47d113a01
5 changed files with 367 additions and 81 deletions
|
|
@ -14,18 +14,25 @@
|
|||
import Button, { buttonVariants } from './ui/button/button.svelte';
|
||||
import User from './extra/User.svelte';
|
||||
import type { SessionValidationResult } from '$lib/server/auth';
|
||||
import { Status, statuses, type OverviewData, type OverviewUser } from '$lib';
|
||||
import { Status, type OverviewData, type OverviewUser } from '$lib';
|
||||
import Label from './ui/label/label.svelte';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { enhance } from '$app/forms';
|
||||
import { invalidateAll } from '$app/navigation';
|
||||
import { fill_overview_data } from '$lib/state.svelte';
|
||||
import type { PageServerLoad } from '../../routes/app/$types';
|
||||
|
||||
let {
|
||||
currentPage = $bindable<string | null>(),
|
||||
subPage = $bindable<string | null>(),
|
||||
data,
|
||||
psd,
|
||||
user,
|
||||
...restProps
|
||||
}: {
|
||||
currentPage: string | null;
|
||||
subPage: string | null;
|
||||
psd: PageServerLoad;
|
||||
data: OverviewData;
|
||||
user: SessionValidationResult['user'];
|
||||
} = $props();
|
||||
|
|
@ -65,7 +72,27 @@
|
|||
</Dialog.Header>
|
||||
|
||||
<!-- input to add a new friend -->
|
||||
<form method="POST" action="?/addFriend" class="mb-4">
|
||||
<form
|
||||
method="POST"
|
||||
action="?/addFriend"
|
||||
class="mb-4"
|
||||
use:enhance={() => {
|
||||
return async ({ result }) => {
|
||||
if (result.type == 'success') {
|
||||
toast.success('Friend request sent successfully');
|
||||
}
|
||||
|
||||
if (result.type == 'error' || result.type == 'failure') {
|
||||
toast.error(
|
||||
'Could not send friend request: ' + (result.error || result.data?.error)
|
||||
);
|
||||
}
|
||||
|
||||
await invalidateAll();
|
||||
await fill_overview_data(psd);
|
||||
};
|
||||
}}
|
||||
>
|
||||
<Input name="username" placeholder="username" required class="mb-2" />
|
||||
<Dialog.Footer>
|
||||
<Dialog.Close class={buttonVariants({ variant: 'outline' })}>Cancel</Dialog.Close>
|
||||
|
|
@ -93,7 +120,27 @@
|
|||
<Card.Description>Request sent</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Footer>
|
||||
<form method="POST" action="?/cancelFriendRequest">
|
||||
<form
|
||||
method="POST"
|
||||
action="?/cancelFriendRequest"
|
||||
use:enhance={() => {
|
||||
return async ({ result }) => {
|
||||
if (result.type == 'success') {
|
||||
toast.success('Cancelled friend request successfully');
|
||||
}
|
||||
|
||||
if (result.type == 'error' || result.type == 'failure') {
|
||||
toast.error(
|
||||
'Could not cancel friend request: ' +
|
||||
(result.error || result.data?.error)
|
||||
);
|
||||
}
|
||||
|
||||
await invalidateAll();
|
||||
await fill_overview_data(psd);
|
||||
};
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="requestId" value={request.id} />
|
||||
<Button type="submit" variant="outline" size="sm">Cancel</Button>
|
||||
</form>
|
||||
|
|
@ -116,12 +163,52 @@
|
|||
</Card.Header>
|
||||
<Card.Footer class="flex gap-2">
|
||||
<!-- accept friend -->
|
||||
<form method="POST" action="?/addFriend">
|
||||
<form
|
||||
method="POST"
|
||||
action="?/addFriend"
|
||||
use:enhance={() => {
|
||||
return async ({ result }) => {
|
||||
if (result.type == 'success') {
|
||||
toast.success('Accepted friend request successfully');
|
||||
}
|
||||
|
||||
if (result.type == 'error' || result.type == 'failure') {
|
||||
toast.error(
|
||||
'Could not accept friend request: ' +
|
||||
(result.error || result.data?.error)
|
||||
);
|
||||
}
|
||||
|
||||
await invalidateAll();
|
||||
await fill_overview_data(psd);
|
||||
};
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="userId" value={request.fromUser} />
|
||||
<Button type="submit" size="sm">Accept</Button>
|
||||
</form>
|
||||
<!-- decline friend -->
|
||||
<form method="POST" action="?/cancelFriendRequest">
|
||||
<form
|
||||
method="POST"
|
||||
action="?/cancelFriendRequest"
|
||||
use:enhance={() => {
|
||||
return async ({ result }) => {
|
||||
if (result.type == 'success') {
|
||||
toast.success('Cancelled friend request successfully');
|
||||
}
|
||||
|
||||
if (result.type == 'error' || result.type == 'failure') {
|
||||
toast.error(
|
||||
'Could not cancel friend request: ' +
|
||||
(result.error || result.data?.error)
|
||||
);
|
||||
}
|
||||
|
||||
await invalidateAll();
|
||||
await fill_overview_data(psd);
|
||||
};
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="requestId" value={request.id} />
|
||||
<Button type="submit" variant="outline" size="sm">Decline</Button>
|
||||
</form>
|
||||
|
|
@ -141,7 +228,27 @@
|
|||
<Card.Description>Currently your friend</Card.Description>
|
||||
</Card.Header>
|
||||
<Card.Footer>
|
||||
<form method="POST" action="?/removeFriend">
|
||||
<form
|
||||
method="POST"
|
||||
action="?/removeFriend"
|
||||
use:enhance={() => {
|
||||
return async ({ result }) => {
|
||||
if (result.type == 'success') {
|
||||
toast.success('Removed friend successfully');
|
||||
}
|
||||
|
||||
if (result.type == 'error' || result.type == 'failure') {
|
||||
toast.error(
|
||||
'Could not remove friend: ' +
|
||||
(result.error || result.data?.error)
|
||||
);
|
||||
}
|
||||
|
||||
await invalidateAll();
|
||||
await fill_overview_data(psd);
|
||||
};
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="userId" value={friend.id} />
|
||||
<Button type="submit" variant="destructive" size="sm">
|
||||
Remove Friend
|
||||
|
|
@ -164,7 +271,26 @@
|
|||
</Dialog.Trigger>
|
||||
|
||||
<Dialog.Content class="sm:max-w-106.25">
|
||||
<form method="POST" action="?/createGroup">
|
||||
<form
|
||||
method="POST"
|
||||
action="?/createGroup"
|
||||
use:enhance={() => {
|
||||
return async ({ result }) => {
|
||||
if (result.type == 'success') {
|
||||
toast.success('Created group successfully');
|
||||
}
|
||||
|
||||
if (result.type == 'error' || result.type == 'failure') {
|
||||
toast.error(
|
||||
'Could not create group: ' + (result.error || result.data?.error)
|
||||
);
|
||||
}
|
||||
|
||||
await invalidateAll();
|
||||
await fill_overview_data(psd);
|
||||
};
|
||||
}}
|
||||
>
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>Create a group</Dialog.Title>
|
||||
<Dialog.Description>Add friends into your group!</Dialog.Description>
|
||||
|
|
@ -193,7 +319,25 @@
|
|||
</Dialog.Trigger>
|
||||
|
||||
<Dialog.Content class="sm:max-w-106.25">
|
||||
<form method="POST" action="?/joinServer">
|
||||
<form
|
||||
method="POST"
|
||||
action="?/joinServer"
|
||||
use:enhance={() => {
|
||||
return async ({ result }) => {
|
||||
console.log(result);
|
||||
if (result.type == 'success') {
|
||||
toast.success('Joined server successfully');
|
||||
}
|
||||
|
||||
if (result.type == 'error' || result.type == 'failure') {
|
||||
toast.error('Could not join server: ' + (result.error || result.data?.error));
|
||||
}
|
||||
|
||||
await invalidateAll();
|
||||
await fill_overview_data(psd);
|
||||
};
|
||||
}}
|
||||
>
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>Join a server</Dialog.Title>
|
||||
<Dialog.Description>Enter an invite link.</Dialog.Description>
|
||||
|
|
@ -217,7 +361,26 @@
|
|||
</Dialog.Trigger>
|
||||
|
||||
<Dialog.Content class="sm:max-w-106.25">
|
||||
<form method="POST" action="?/createServer">
|
||||
<form
|
||||
method="POST"
|
||||
action="?/createServer"
|
||||
use:enhance={() => {
|
||||
return async ({ result }) => {
|
||||
if (result.type == 'success') {
|
||||
toast.success('Created server successfully');
|
||||
}
|
||||
|
||||
if (result.type == 'error' || result.type == 'failure') {
|
||||
toast.error(
|
||||
'Could not create server: ' + (result.error || result.data?.error)
|
||||
);
|
||||
}
|
||||
|
||||
await invalidateAll();
|
||||
await fill_overview_data(psd);
|
||||
};
|
||||
}}
|
||||
>
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>Create a server</Dialog.Title>
|
||||
<Dialog.Description>Name your new server.</Dialog.Description>
|
||||
|
|
@ -358,7 +521,24 @@
|
|||
</Dialog.Trigger>
|
||||
|
||||
<Dialog.Content>
|
||||
<form method="POST" action="?/updateProfile">
|
||||
<form
|
||||
method="POST"
|
||||
action="?/updateProfile"
|
||||
use:enhance={() => {
|
||||
return async ({ result }) => {
|
||||
if (result.type == 'success') {
|
||||
toast.success('Edited profile successfully');
|
||||
}
|
||||
|
||||
if (result.type == 'error' || result.type == 'failure') {
|
||||
toast.error('Could not edit profile: ' + (result.error || result.data?.error));
|
||||
}
|
||||
|
||||
await invalidateAll();
|
||||
await fill_overview_data(psd);
|
||||
};
|
||||
}}
|
||||
>
|
||||
<Dialog.Header>
|
||||
<Dialog.Title>Edit profile</Dialog.Title>
|
||||
<Dialog.Description>Update how others see you.</Dialog.Description>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
import type { SessionValidationResult } from '$lib/server/auth';
|
||||
import {
|
||||
GroupID,
|
||||
ServerID,
|
||||
type OverviewData,
|
||||
type OverviewGroup,
|
||||
type OverviewServer,
|
||||
|
|
@ -16,6 +15,11 @@
|
|||
} from '$lib';
|
||||
import Button from './ui/button/button.svelte';
|
||||
import Input from './ui/input/input.svelte';
|
||||
import { enhance } from '$app/forms';
|
||||
import { invalidateAll } from '$app/navigation';
|
||||
import { fill_overview_data } from '$lib/state.svelte';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import type { PageServerLoad } from '../../routes/app/$types';
|
||||
|
||||
// Props for the member sidebar.
|
||||
let {
|
||||
|
|
@ -23,12 +27,14 @@
|
|||
members = $bindable<OverviewUser[]>([]),
|
||||
user,
|
||||
data,
|
||||
psd,
|
||||
currentEntity,
|
||||
currentEntityId = $bindable<string | null>(null)
|
||||
}: {
|
||||
open: boolean;
|
||||
members: OverviewUser[];
|
||||
data: OverviewData;
|
||||
psd: PageServerLoad;
|
||||
user: SessionValidationResult['user'];
|
||||
currentEntity: OverviewGroup | OverviewServer;
|
||||
currentEntityId: string | null;
|
||||
|
|
@ -62,12 +68,31 @@
|
|||
<Tabs.Trigger value="admins">Admin Settings</Tabs.Trigger>
|
||||
{/if}
|
||||
</Tabs.List>
|
||||
{#if ServerID.is(currentEntityId)}
|
||||
<h1>not done yet for later</h1>
|
||||
{:else if GroupID.is(currentEntityId)}
|
||||
{#if GroupID.is(currentEntityId)}
|
||||
{#if user.id == currentEntity.ownerId}
|
||||
<Tabs.Content value="admins">
|
||||
<form method="POST" action="?/configureGroup" class="space-y-4 p-2">
|
||||
<form
|
||||
method="POST"
|
||||
action="?/configureGroup"
|
||||
class="space-y-4 p-2"
|
||||
use:enhance={() => {
|
||||
return async ({ result }) => {
|
||||
if (result.type == 'success') {
|
||||
toast.success('Configured group succesfully');
|
||||
}
|
||||
|
||||
if (result.type == 'error' || result.type == 'failure') {
|
||||
toast.error(
|
||||
'Could not configure group successfully: ' +
|
||||
(result.error || result.data?.error)
|
||||
);
|
||||
}
|
||||
|
||||
await invalidateAll();
|
||||
await fill_overview_data(psd);
|
||||
};
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="groupId" value={currentEntityId} />
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
|
|
@ -111,6 +136,23 @@
|
|||
method="POST"
|
||||
action="?/deleteGroup"
|
||||
class="border-t border-red-500/30 pt-4"
|
||||
use:enhance={() => {
|
||||
return async ({ result }) => {
|
||||
if (result.type == 'success') {
|
||||
toast.success('Group deleted successfully');
|
||||
}
|
||||
|
||||
if (result.type == 'error' || result.type == 'failure') {
|
||||
toast.error(
|
||||
'Could not delete group successfully: ' +
|
||||
(result.error || result.data?.error)
|
||||
);
|
||||
}
|
||||
|
||||
await invalidateAll();
|
||||
await fill_overview_data(psd);
|
||||
};
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="groupId" value={currentEntityId} />
|
||||
|
||||
|
|
@ -129,7 +171,28 @@
|
|||
)}
|
||||
|
||||
{#if addableMembers.length !== 0}
|
||||
<form method="POST" action="?/addMembers" class="space-y-4">
|
||||
<form
|
||||
method="POST"
|
||||
action="?/addMembers"
|
||||
class="space-y-4"
|
||||
use:enhance={() => {
|
||||
return async ({ result }) => {
|
||||
if (result.type == 'success') {
|
||||
toast.success('Users added successfully');
|
||||
}
|
||||
|
||||
if (result.type == 'error' || result.type == 'failure') {
|
||||
toast.error(
|
||||
'Could not add users successfully: ' +
|
||||
(result.error || result.data?.error)
|
||||
);
|
||||
}
|
||||
|
||||
await invalidateAll();
|
||||
await fill_overview_data(psd);
|
||||
};
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="groupId" value={currentEntityId} />
|
||||
|
||||
<h1>Add members</h1>
|
||||
|
|
@ -148,7 +211,28 @@
|
|||
{/if}
|
||||
|
||||
{#if (currentEntity as OverviewGroup).permissions.changeTitle || user.id == currentEntity.ownerId}
|
||||
<form method="POST" action="?/changeTitle" class="space-y-4">
|
||||
<form
|
||||
method="POST"
|
||||
action="?/changeTitle"
|
||||
class="space-y-4"
|
||||
use:enhance={() => {
|
||||
return async ({ result }) => {
|
||||
if (result.type == 'success') {
|
||||
toast.success('Title changed successfully');
|
||||
}
|
||||
|
||||
if (result.type == 'error' || result.type == 'failure') {
|
||||
toast.error(
|
||||
'Could not change title successfully: ' +
|
||||
(result.error || result.data?.error)
|
||||
);
|
||||
}
|
||||
|
||||
await invalidateAll();
|
||||
await fill_overview_data(psd);
|
||||
};
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="groupId" value={currentEntityId} />
|
||||
|
||||
<h1>Change title</h1>
|
||||
|
|
@ -161,7 +245,28 @@
|
|||
{/if}
|
||||
|
||||
{#if (currentEntity as OverviewGroup).permissions.removeMembers || user.id == currentEntity.ownerId}
|
||||
<form method="POST" action="?/removeMembers" class="space-y-4">
|
||||
<form
|
||||
method="POST"
|
||||
action="?/removeMembers"
|
||||
class="space-y-4"
|
||||
use:enhance={() => {
|
||||
return async ({ result }) => {
|
||||
if (result.type == 'success') {
|
||||
toast.success('Users removed successfully');
|
||||
}
|
||||
|
||||
if (result.type == 'error' || result.type == 'failure') {
|
||||
toast.error(
|
||||
'Could not remove users successfully: ' +
|
||||
(result.error || result.data?.error)
|
||||
);
|
||||
}
|
||||
|
||||
await invalidateAll();
|
||||
await fill_overview_data(psd);
|
||||
};
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="groupId" value={currentEntityId} />
|
||||
|
||||
<h1>Remove members</h1>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue