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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/lib/components/utils.ts
View File

@ -21,17 +21,21 @@ export function resizeTableColumn(event: MouseEvent, dragOffset: number) {
const table = element.parentElement!.parentElement!.parentElement as HTMLTableElement; const table = element.parentElement!.parentElement!.parentElement as HTMLTableElement;
let resizeRow: HTMLTableRowElement; let resizeRow: HTMLTableRowElement;
if (table.tBodies[0].rows[0].hidden) { if (table.tBodies[0].rows[0].hasAttribute('resize-row')) {
resizeRow = table.rows[0]; resizeRow = table.tBodies[0].rows[0];
} else { } else {
resizeRow = table.tBodies[0].insertRow(0); resizeRow = table.tBodies[0].insertRow(0);
resizeRow.hidden = true; resizeRow.setAttribute('resize-row', '');
resizeRow.style.height = '0';
resizeRow.style.border = '0';
resizeRow.style.overflow = 'hidden';
for (let i = 0; i < table.rows[0].cells.length; i++) { for (let i = 0; i < table.rows[0].cells.length; i++) {
resizeRow.insertCell(); const cell = resizeRow.insertCell();
cell.style.padding = '0';
} }
// insert an additional to keep the zebra in place pattern which might be applied // insert an additional to keep the zebra in place pattern which might be applied
const zebraGhostRow = table.tBodies[0].insertRow(0); const zebraGhostRow = table.tBodies[0].insertRow(1);
zebraGhostRow.hidden = true; zebraGhostRow.hidden = true;
} }

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

@ -196,17 +196,21 @@
</tr> </tr>
{/each} {/each}
<tr> <tr>
<td>{data.admins.length + 1}</td> <td on:mousedown={(e) => resizeTableColumn(e, 5)}>{data.admins.length + 1}</td>
<td><Input type="text" bind:value={newAdminUsername} size="sm" /></td> <td on:mousedown={(e) => resizeTableColumn(e, 5)}
<td><Input type="password" bind:value={newAdminPassword} size="sm" /></td> ><Input type="text" bind:value={newAdminUsername} size="sm" /></td
<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 ><Badges
bind:value={newAdminPermissions} bind:value={newAdminPermissions}
available={allPermissionBadges} available={allPermissionBadges}
disabled={!permissions.adminWrite()} disabled={!permissions.adminWrite()}
/></td /></td
> >
<td> <td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<span <span
class="w-min" class="w-min"
class:cursor-not-allowed={!permissions.adminWrite() || 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 Select from '$lib/components/Input/Select.svelte';
import { env } from '$env/dynamic/public'; import { env } from '$env/dynamic/public';
import type { User } from '$lib/server/database'; 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'; import { browser } from '$app/environment';
export let data: PageData; export let data: PageData;
@ -135,7 +135,7 @@
<tr class="[&>th]:bg-base-100 [&>th]:z-[1] [&>th]:sticky [&>th]:top-0"> <tr class="[&>th]:bg-base-100 [&>th]:z-[1] [&>th]:sticky [&>th]:top-0">
<th /> <th />
{#each headers as header} {#each headers as header}
<th> <th on:mousedown={(e) => resizeTableColumn(e, 5)}>
<button <button
class="flex items-center" class="flex items-center"
on:click={() => { on:click={() => {
@ -161,22 +161,36 @@
{#await currentPageUsersRequest} {#await currentPageUsersRequest}
{#each Array(usersPerPage) as _, i} {#each Array(usersPerPage) as _, i}
<tr class="animate-pulse text-transparent"> <tr class="animate-pulse text-transparent">
<td>{i + 1}</td> <td on:mousedown={(e) => resizeTableColumn(e, 5)}>{i + 1}</td>
<td><Input type="text" disabled={true} size="sm" /></td> <td on:mousedown={(e) => resizeTableColumn(e, 5)}
<td><Input type="text" disabled={true} size="sm" /></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 on:mousedown={(e) => resizeTableColumn(e, 5)}
<td><Input type="text" disabled={true} size="sm" /></td> ><Input type="text" disabled={true} size="sm" /></td
<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"> ><Select id="edition" disabled={true} size="sm">
<option value="java">Java Edition</option> <option value="java">Java Edition</option>
<option value="bedrock">Bedrock Edition</option> <option value="bedrock">Bedrock Edition</option>
<option value="cracked">Java cracked</option> <option value="cracked">Java cracked</option>
</Select></td </Select></td
> >
<td><Input type="text" disabled={true} size="sm" /></td> <td on:mousedown={(e) => resizeTableColumn(e, 5)}
<td><Input type="text" disabled={true} size="sm" /></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)}
><div class="flex gap-1"> ><div class="flex gap-1">
<button class="btn btn-sm btn-square" disabled /> <button class="btn btn-sm btn-square" disabled />
</div></td </div></td
@ -186,14 +200,14 @@
{:then _} {:then _}
{#each currentPageUsers as user, i} {#each currentPageUsers as user, i}
<tr> <tr>
<td>{i + 1}</td> <td on:mousedown={(e) => resizeTableColumn(e, 5)}>{i + 1}</td>
<td> <td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<Input type="text" bind:value={user.firstname} disabled={!user.edit} size="sm" /> <Input type="text" bind:value={user.firstname} disabled={!user.edit} size="sm" />
</td> </td>
<td> <td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<Input type="text" bind:value={user.lastname} disabled={!user.edit} size="sm" /> <Input type="text" bind:value={user.lastname} disabled={!user.edit} size="sm" />
</td> </td>
<td> <td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<Input <Input
type="date" type="date"
value={new Date(user.birthday).toISOString().split('T')[0]} value={new Date(user.birthday).toISOString().split('T')[0]}
@ -202,23 +216,23 @@
size="sm" size="sm"
/> />
</td> </td>
<td> <td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<Input type="tel" bind:value={user.telephone} disabled={!user.edit} size="sm" /> <Input type="tel" bind:value={user.telephone} disabled={!user.edit} size="sm" />
</td> </td>
<td> <td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<Input type="text" bind:value={user.username} disabled={!user.edit} size="sm" /> <Input type="text" bind:value={user.username} disabled={!user.edit} size="sm" />
</td> </td>
<td> <td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<Select id="edition" bind:value={user.playertype} disabled={!user.edit} size="sm"> <Select id="edition" bind:value={user.playertype} disabled={!user.edit} size="sm">
<option value="java">Java Edition</option> <option value="java">Java Edition</option>
<option value="bedrock">Bedrock Edition</option> <option value="bedrock">Bedrock Edition</option>
<option value="cracked">Java cracked</option> <option value="cracked">Java cracked</option>
</Select> </Select>
</td> </td>
<td> <td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<Input type="text" bind:value={user.password} disabled={!user.edit} size="sm" /> <Input type="text" bind:value={user.password} disabled={!user.edit} size="sm" />
</td> </td>
<td> <td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<Input <Input
id="uuid" id="uuid"
type="text" type="text"
@ -227,7 +241,7 @@
size="sm" size="sm"
/> />
</td> </td>
<td> <td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<div class="flex gap-1"> <div class="flex gap-1">
{#if user.edit} {#if user.edit}
<button <button
@ -288,3 +302,28 @@
</div> </div>
</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>