From b1f546ee94b466f7795c35463ff39b0785455f90 Mon Sep 17 00:00:00 2001 From: bytedream Date: Sat, 30 Sep 2023 01:42:59 +0200 Subject: [PATCH] add user search in admin panel and remove user skeleton while loading data --- src/routes/admin/reports/HeaderBar.svelte | 40 +++++++------- src/routes/admin/users/+page.svelte | 63 ++++------------------- src/routes/admin/users/+server.ts | 17 +++++- src/routes/admin/users/HeaderBar.svelte | 25 +++++++++ 4 files changed, 69 insertions(+), 76 deletions(-) create mode 100644 src/routes/admin/users/HeaderBar.svelte diff --git a/src/routes/admin/reports/HeaderBar.svelte b/src/routes/admin/reports/HeaderBar.svelte index 945019f..d3ebbfe 100644 --- a/src/routes/admin/reports/HeaderBar.svelte +++ b/src/routes/admin/reports/HeaderBar.svelte @@ -10,24 +10,22 @@ }; -
-
- - Report Ersteller - - - Reportete Spieler - - - -
-
+
+ + Report Ersteller + + + Reportete Spieler + + + +
diff --git a/src/routes/admin/users/+page.svelte b/src/routes/admin/users/+page.svelte index ffe5be5..70f8b28 100644 --- a/src/routes/admin/users/+page.svelte +++ b/src/routes/admin/users/+page.svelte @@ -7,6 +7,7 @@ import type { User } from '$lib/server/database'; import { buttonTriggeredRequest, resizeTableColumn } from '$lib/components/utils'; import { browser } from '$app/environment'; + import HeaderBar from './HeaderBar.svelte'; export let data: PageData; @@ -44,33 +45,24 @@ let currentPageUsers: (typeof User.prototype.dataValues)[] = []; let currentPageUsersRequest: Promise = new Promise((resolve) => resolve()); - let usersCache: (typeof User.prototype.dataValues)[][] = []; let usersPerPage = 50; let userPage = 0; + let userFilter = { name: null, edition: null }; let userTableContainerElement: HTMLDivElement; - function fetchPageUsers(page: number) { + function fetchPageUsers(page: number, filter: any) { if (!browser) return; if (userTableContainerElement) userTableContainerElement.scrollTop = 0; - if (usersCache[page]) { - currentPageUsers = usersCache[page]; - return; - } - // eslint-disable-next-line no-async-promise-executor currentPageUsersRequest = new Promise(async (resolve, reject) => { const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/users`, { method: 'POST', - body: JSON.stringify({ - limit: usersPerPage, - from: usersPerPage * page - }) + body: JSON.stringify({ ...filter, limit: usersPerPage, from: usersPerPage * page }) }); if (response.ok) { - const pageUsers = await response.json(); - currentPageUsers = usersCache[page] = pageUsers; + currentPageUsers = await response.json(); resolve(); } else { reject(Error()); @@ -97,7 +89,7 @@ currentPageUsers = currentPageUsers; } - $: fetchPageUsers(userPage); + $: fetchPageUsers(userPage, userFilter); async function updateUser(user: typeof User.prototype.dataValues) { const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/users`, { @@ -129,6 +121,8 @@
+ +
@@ -158,46 +152,7 @@ {#key currentPageUsersRequest} - {#await currentPageUsersRequest} - {#each Array(usersPerPage) as _, i} - - - - - - - - - - - - - {/each} - {:then _} + {#await currentPageUsersRequest then _} {#each currentPageUsers as user, i} diff --git a/src/routes/admin/users/+server.ts b/src/routes/admin/users/+server.ts index ff659f4..1378668 100644 --- a/src/routes/admin/users/+server.ts +++ b/src/routes/admin/users/+server.ts @@ -14,12 +14,24 @@ export const POST = (async ({ request, cookies }) => { const data: { limit: number | null; from: number | null; + + name: string | null; + edition: 'java' | 'bedrock' | 'cracked' | null; + search: string | null; slim: boolean | null; } = await request.json(); const usersFindOptions: Attributes = {}; - if (data.search) { + if (data.name) { + Object.assign(usersFindOptions, { + [Op.or]: { + firstname: { [Op.like]: `%${data.name}%` }, + lastname: { [Op.like]: `%${data.name}%` }, + username: { [Op.like]: `%${data.name}%` } + } + }); + } else if (data.search) { Object.assign(usersFindOptions, { [Op.or]: { username: { [Op.like]: `%${data.search}%` }, @@ -27,6 +39,9 @@ export const POST = (async ({ request, cookies }) => { } }); } + if (data.edition) { + usersFindOptions.edition = data.edition; + } const users = await User.findAll({ where: usersFindOptions, attributes: data.slim ? ['username', 'uuid'] : undefined, diff --git a/src/routes/admin/users/HeaderBar.svelte b/src/routes/admin/users/HeaderBar.svelte new file mode 100644 index 0000000..6650d61 --- /dev/null +++ b/src/routes/admin/users/HeaderBar.svelte @@ -0,0 +1,25 @@ + + +
+
+ + Suche + +
+
+ +
+
resizeTableColumn(e, 5)}>{i + 1} resizeTableColumn(e, 5)} - > resizeTableColumn(e, 5)} - > resizeTableColumn(e, 5)} - > resizeTableColumn(e, 5)} - > resizeTableColumn(e, 5)} - > resizeTableColumn(e, 5)} - > resizeTableColumn(e, 5)} - > resizeTableColumn(e, 5)} - > resizeTableColumn(e, 5)} - >
-
resizeTableColumn(e, 5)}>{i + 1}