UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2024-11-28 15:05:07 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Added the ability to sort users in the admin panel

Browse Source
This commit is contained in:
rdavis 2024-06-13 19:01:13 +00:00
parent 4727e5cbb1
commit 5844d0525a
1 changed files with 55 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/routes/(app)/admin/+page.svelte
View File

@ -75,6 +75,17 @@
}
loaded = true;
});
let sortKey = 'created_at'; // default sort key
let sortOrder = 'asc'; // default sort order
function setSortKey(key) {
if (sortKey === key) {
sortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
} else {
sortKey = key;
sortOrder = 'asc';
}
}
</script>
{#key selectedUser}
@ -139,12 +150,46 @@
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400">
<tr>
<th scope="col" class="px-3 py-2"> {$i18n.t('Role')} </th>
<th scope="col" class="px-3 py-2"> {$i18n.t('Name')} </th>
<th scope="col" class="px-3 py-2"> {$i18n.t('Email')} </th>
<th scope="col" class="px-3 py-2"> {$i18n.t('Last Active')} </th>
<th scope="col" class="px-3 py-2"> {$i18n.t('Created at')} </th>
<th scope="col" class="px-3 py-2 cursor-pointer select-none" on:click={() => setSortKey('role')}>
{$i18n.t('Role')}
{#if sortKey === 'role'}
{sortOrder === 'asc' ? '▲' : '▼'}
{:else}
<span style="visibility:hidden">▲</span>
{/if}
</th>
<th scope="col" class="px-3 py-2 cursor-pointer select-none" on:click={() => setSortKey('name')}>
{$i18n.t('Name')}
{#if sortKey === 'name'}
{sortOrder === 'asc' ? '▲' : '▼'}
{:else}
<span style="visibility:hidden">▲</span>
{/if}
</th>
<th scope="col" class="px-3 py-2 cursor-pointer select-none" on:click={() => setSortKey('email')}>
{$i18n.t('Email')}
{#if sortKey === 'email'}
{sortOrder === 'asc' ? '▲' : '▼'}
{:else}
<span style="visibility:hidden">▲</span>
{/if}
</th>
<th scope="col" class="px-3 py-2 cursor-pointer select-none" on:click={() => setSortKey('last_active_at')}>
{$i18n.t('Last Active')}
{#if sortKey === 'last_active_at'}
{sortOrder === 'asc' ? '▲' : '▼'}
{:else}
<span style="visibility:hidden">▲</span>
{/if}
</th>
<th scope="col" class="px-3 py-2 cursor-pointer select-none" on:click={() => setSortKey('created_at')}>
{$i18n.t('Created at')}
{#if sortKey === 'created_at'}
{sortOrder === 'asc' ? '▲' : '▼'}
{:else}
<span style="visibility:hidden">▲</span>
{/if}
</th>
<th scope="col" class="px-3 py-2 text-right" />
</tr>
@ -159,6 +204,10 @@
const query = search.toLowerCase();
return name.includes(query);
}
}).sort((a, b) => {
if (a[sortKey] < b[sortKey]) return sortOrder === 'asc' ? -1 : 1;
if (a[sortKey] > b[sortKey]) return sortOrder === 'asc' ? 1 : -1;
return 0;
})
.slice((page - 1) * 20, page * 20) as user}
<tr class="bg-white border-b dark:bg-gray-900 dark:border-gray-850 text-xs">