CraftAttack/website
4
0
Fork 0
Code Issues 3 Pull Requests Actions Wiki Activity

make admin users table resizable

Browse Source
This commit is contained in:
bytedream
2023-08-29 14:23:06 +02:00
parent d0c40e1d81
commit 8259c387e5
3 changed files with 79 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/routes/admin/admin/+page.svelte
View File

@ -196,17 +196,21 @@
</tr>
{/each}
<tr>
<td>{data.admins.length + 1}</td>
<td><Input type="text" bind:value={newAdminUsername} size="sm" /></td>
<td><Input type="password" bind:value={newAdminPassword} size="sm" /></td>
<td
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>{data.admins.length + 1}</td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}
><Input type="text" bind:value={newAdminUsername} size="sm" /></td
>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}
><Input type="password" bind:value={newAdminPassword} size="sm" /></td
>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}
><Badges
bind:value={newAdminPermissions}
available={allPermissionBadges}
disabled={!permissions.adminWrite()}
/></td
>
<td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<span
class="w-min"
class:cursor-not-allowed={!permissions.adminWrite() ||

83
src/routes/admin/users/+page.svelte
View File

@ -5,7 +5,7 @@
import Select from '$lib/components/Input/Select.svelte';
import { env } from '$env/dynamic/public';
import type { User } from '$lib/server/database';
import { buttonTriggeredRequest } from '$lib/components/utils';
import { buttonTriggeredRequest, resizeTableColumn } from '$lib/components/utils';
import { browser } from '$app/environment';
export let data: PageData;
@ -135,7 +135,7 @@
<tr class="[&>th]:bg-base-100 [&>th]:z-[1] [&>th]:sticky [&>th]:top-0">
<th />
{#each headers as header}
<th>
<th on:mousedown={(e) => resizeTableColumn(e, 5)}>
<button
class="flex items-center"
on:click={() => {
@ -161,22 +161,36 @@
{#await currentPageUsersRequest}
{#each Array(usersPerPage) as _, i}
<tr class="animate-pulse text-transparent">
<td>{i + 1}</td>
<td><Input type="text" disabled={true} size="sm" /></td>
<td><Input type="text" disabled={true} size="sm" /></td>
<td><Input type="date" disabled={true} size="sm" /></td>
<td><Input type="tel" disabled={true} size="sm" /></td>
<td><Input type="text" disabled={true} size="sm" /></td>
<td
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>{i + 1}</td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}
><Input type="text" disabled={true} size="sm" /></td
>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}
><Input type="text" disabled={true} size="sm" /></td
>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}
><Input type="date" disabled={true} size="sm" /></td
>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}
><Input type="tel" disabled={true} size="sm" /></td
>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}
><Input type="text" disabled={true} size="sm" /></td
>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}
><Select id="edition" disabled={true} size="sm">
<option value="java">Java Edition</option>
<option value="bedrock">Bedrock Edition</option>
<option value="cracked">Java cracked</option>
</Select></td
>
<td><Input type="text" disabled={true} size="sm" /></td>
<td><Input type="text" disabled={true} size="sm" /></td>
<td
<td on:mousedown={(e) => resizeTableColumn(e, 5)}
><Input type="text" disabled={true} size="sm" /></td
>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}
><Input type="text" disabled={true} size="sm" /></td
>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}
><div class="flex gap-1">
<button class="btn btn-sm btn-square" disabled />
</div></td
@ -186,14 +200,14 @@
{:then _}
{#each currentPageUsers as user, i}
<tr>
<td>{i + 1}</td>
<td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>{i + 1}</td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<Input type="text" bind:value={user.firstname} disabled={!user.edit} size="sm" />
</td>
<td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<Input type="text" bind:value={user.lastname} disabled={!user.edit} size="sm" />
</td>
<td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<Input
type="date"
value={new Date(user.birthday).toISOString().split('T')[0]}
@ -202,23 +216,23 @@
size="sm"
/>
</td>
<td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<Input type="tel" bind:value={user.telephone} disabled={!user.edit} size="sm" />
</td>
<td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<Input type="text" bind:value={user.username} disabled={!user.edit} size="sm" />
</td>
<td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<Select id="edition" bind:value={user.playertype} disabled={!user.edit} size="sm">
<option value="java">Java Edition</option>
<option value="bedrock">Bedrock Edition</option>
<option value="cracked">Java cracked</option>
</Select>
</td>
<td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<Input type="text" bind:value={user.password} disabled={!user.edit} size="sm" />
</td>
<td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<Input
id="uuid"
type="text"
@ -227,7 +241,7 @@
size="sm"
/>
</td>
<td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<div class="flex gap-1">
{#if user.edit}
<button
@ -288,3 +302,28 @@
</div>
</div>
</div>
<style lang="scss">
thead tr th,
tbody tr td {
@apply relative;
&:not(:first-child) {
@apply border-l-[1px] border-dashed;
&::before {
@apply absolute left-0 bottom-0 h-full w-[5px] cursor-col-resize;
content: '';
}
}
&:not(:last-child) {
@apply border-r-[1px] border-dashed border-base-300;
&::after {
@apply absolute right-0 bottom-0 h-full w-[5px] cursor-col-resize;
content: '';
}
}
}
</style>