remove table resizing and fix admin panel user scroll behavior
All checks were successful
delpoy / build-and-deploy (push) Successful in 56s
All checks were successful
delpoy / build-and-deploy (push) Successful in 56s
This commit is contained in:
@ -6,7 +6,7 @@
|
||||
import { Permissions } from '$lib/permissions';
|
||||
import { env } from '$env/dynamic/public';
|
||||
import ErrorToast from '$lib/components/Toast/ErrorToast.svelte';
|
||||
import { buttonTriggeredRequest, resizeTableColumn } from '$lib/components/utils';
|
||||
import { buttonTriggeredRequest } from '$lib/components/utils';
|
||||
import { goto } from '$app/navigation';
|
||||
import { adminCount } from '$lib/stores';
|
||||
|
||||
@ -97,18 +97,18 @@
|
||||
<table class="table table-zebra w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th on:mousedown={(e) => resizeTableColumn(e, 5)} />
|
||||
<th on:mousedown={(e) => resizeTableColumn(e, 5)}>Benutzername</th>
|
||||
<th on:mousedown={(e) => resizeTableColumn(e, 5)}>Passwort</th>
|
||||
<th on:mousedown={(e) => resizeTableColumn(e, 5)}>Berechtigungen</th>
|
||||
<th on:mousedown={(e) => resizeTableColumn(e, 5)} />
|
||||
<th />
|
||||
<th>Benutzername</th>
|
||||
<th>Passwort</th>
|
||||
<th>Berechtigungen</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data.admins as admin, i}
|
||||
<tr>
|
||||
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>{i + 1}</td>
|
||||
<td on:mousedown={(e) => resizeTableColumn(e, 5)}
|
||||
<td>{i + 1}</td>
|
||||
<td
|
||||
><Input
|
||||
type="text"
|
||||
bind:value={admin.username}
|
||||
@ -116,7 +116,7 @@
|
||||
size="sm"
|
||||
/></td
|
||||
>
|
||||
<td on:mousedown={(e) => resizeTableColumn(e, 5)}
|
||||
<td
|
||||
><Input
|
||||
type="password"
|
||||
bind:value={admin.password}
|
||||
@ -125,14 +125,14 @@
|
||||
size="sm"
|
||||
/></td
|
||||
>
|
||||
<td on:mousedown={(e) => resizeTableColumn(e, 5)}
|
||||
<td
|
||||
><Badges
|
||||
bind:value={admin.permissions}
|
||||
available={allPermissionBadges}
|
||||
disabled={!permissions.adminWrite() || !admin.edit}
|
||||
/></td
|
||||
>
|
||||
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
|
||||
<td>
|
||||
<div>
|
||||
{#if admin.edit}
|
||||
<span class="w-min" class:cursor-not-allowed={!permissions.adminWrite()}>
|
||||
@ -196,21 +196,17 @@
|
||||
</tr>
|
||||
{/each}
|
||||
<tr>
|
||||
<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)}
|
||||
<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
|
||||
><Badges
|
||||
bind:value={newAdminPermissions}
|
||||
available={allPermissionBadges}
|
||||
disabled={!permissions.adminWrite()}
|
||||
/></td
|
||||
>
|
||||
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
|
||||
<td>
|
||||
<span
|
||||
class="w-min"
|
||||
class:cursor-not-allowed={!permissions.adminWrite() ||
|
||||
@ -241,28 +237,3 @@
|
||||
<ErrorToast show={errorMessage !== ''}>
|
||||
<span />
|
||||
</ErrorToast>
|
||||
|
||||
<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>
|
||||
|
||||
@ -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, resizeTableColumn } from '$lib/components/utils';
|
||||
import { buttonTriggeredRequest } from '$lib/components/utils';
|
||||
import { browser } from '$app/environment';
|
||||
import HeaderBar from './HeaderBar.svelte';
|
||||
|
||||
@ -120,16 +120,16 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div class="h-screen flex flex-col overflow-hidden">
|
||||
<HeaderBar bind:userFilter />
|
||||
<hr class="divider my-1 mx-8 border-none" />
|
||||
<div class="h-[90vh] overflow-scroll" bind:this={userTableContainerElement}>
|
||||
<table class="table relative">
|
||||
<div class="h-full overflow-scroll" bind:this={userTableContainerElement}>
|
||||
<table class="table table-auto">
|
||||
<thead>
|
||||
<tr class="[&>th]:bg-base-100 [&>th]:z-[1] [&>th]:sticky [&>th]:top-0">
|
||||
<th />
|
||||
{#each headers as header}
|
||||
<th on:mousedown={(e) => resizeTableColumn(e, 5)}>
|
||||
<th>
|
||||
<button
|
||||
class="flex items-center"
|
||||
on:click={() => {
|
||||
@ -155,14 +155,14 @@
|
||||
{#await currentPageUsersRequest then _}
|
||||
{#each currentPageUsers as user, i}
|
||||
<tr>
|
||||
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>{i + 1}</td>
|
||||
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
|
||||
<td>{i + 1}</td>
|
||||
<td>
|
||||
<Input type="text" bind:value={user.firstname} disabled={!user.edit} size="sm" />
|
||||
</td>
|
||||
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
|
||||
<td>
|
||||
<Input type="text" bind:value={user.lastname} disabled={!user.edit} size="sm" />
|
||||
</td>
|
||||
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
|
||||
<td>
|
||||
<Input
|
||||
type="date"
|
||||
value={new Date(user.birthday).toISOString().split('T')[0]}
|
||||
@ -171,23 +171,23 @@
|
||||
size="sm"
|
||||
/>
|
||||
</td>
|
||||
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
|
||||
<td>
|
||||
<Input type="tel" bind:value={user.telephone} disabled={!user.edit} size="sm" />
|
||||
</td>
|
||||
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
|
||||
<td>
|
||||
<Input type="text" bind:value={user.username} disabled={!user.edit} size="sm" />
|
||||
</td>
|
||||
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
|
||||
<td>
|
||||
<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 on:mousedown={(e) => resizeTableColumn(e, 5)}>
|
||||
<td>
|
||||
<Input type="text" bind:value={user.password} disabled={!user.edit} size="sm" />
|
||||
</td>
|
||||
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
|
||||
<td>
|
||||
<Input
|
||||
id="uuid"
|
||||
type="text"
|
||||
@ -196,7 +196,7 @@
|
||||
size="sm"
|
||||
/>
|
||||
</td>
|
||||
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
|
||||
<td>
|
||||
<div class="flex gap-1">
|
||||
{#if user.edit}
|
||||
<button
|
||||
@ -242,43 +242,18 @@
|
||||
{/key}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="flex justify-center w-full mt-4 mb-6">
|
||||
<div class="join">
|
||||
{#each Array(Math.ceil(data.count / usersPerPage) || 1) as _, i}
|
||||
<button
|
||||
class="join-item btn"
|
||||
class:btn-active={i === userPage}
|
||||
on:click={() => {
|
||||
userPage = i;
|
||||
}}>{i + 1}</button
|
||||
>
|
||||
{/each}
|
||||
<div class="flex justify-center items-center mb-2 mt-4 w-full">
|
||||
<div class="join">
|
||||
{#each Array(Math.ceil(data.count / usersPerPage) || 1) as _, i}
|
||||
<button
|
||||
class="join-item btn"
|
||||
class:btn-active={i === userPage}
|
||||
on:click={() => {
|
||||
userPage = i;
|
||||
}}>{i + 1}</button
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user