bhetherman/open-webui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek committed 2026-08-10 19:42:05 -06:00
1 parent 11739a2de8
commit 385d08bea5
1 file changed
+71 -62
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/workspace/common/MemberSelector.svelte
+71 -62
View File
@@ -2,7 +2,7 @@
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import { getContext, onMount, onDestroy } from 'svelte'; import { getContext, onMount, onDestroy } from 'svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n') as any;
import { user as _user } from '$lib/stores'; import { user as _user } from '$lib/stores';
import { getUserInfoById, searchUsers } from '$lib/apis/users'; import { getUserInfoById, searchUsers } from '$lib/apis/users';
@@ -24,22 +24,34 @@
export let includeSessionUser = false; export let includeSessionUser = false;
export let accessGrants: { principal_type: string; principal_id: string }[] = []; export let accessGrants: { principal_type: string; principal_id: string }[] = [];
export let groupIds = []; export let groupIds: string[] = [];
export let userIds = []; export let userIds: string[] = [];
let groups = null; let groups: any[] | null = null;
let filteredGroups = []; let filteredGroups: any[] = [];
const hasGrant = (principalType: string, principalId: string) =>
accessGrants.some(
(grant) => grant.principal_type === principalType && grant.principal_id === principalId
);
$: filteredGroups = groups $: filteredGroups = groups
? groups.filter((group) => group.name.toLowerCase().includes(query.toLowerCase())) ? groups.filter(
(group) =>
group.name.toLowerCase().includes(query.toLowerCase()) && !hasGrant('group', group.id)
)
: []; : [];
let selectedGroup = {}; $: filteredUsers = (users ?? []).filter(
let selectedUsers = {}; (user) => !hasGrant('user', user.id) && (includeSessionUser || user?.id !== $_user?.id)
);
let selectedGroup: Record<string, any> = {};
let selectedUsers: Record<string, any> = {};
let page = 1; let page = 1;
let users = null; let users: any[] | null = null;
let total = null; let total: number | null = null;
let query = ''; let query = '';
let searchDebounceTimer: ReturnType<typeof setTimeout>; let searchDebounceTimer: ReturnType<typeof setTimeout>;
@@ -195,7 +207,7 @@
</div> </div>
</div> </div>
{#if users.length > 0 || filteredGroups.length > 0} {#if filteredUsers.length > 0 || filteredGroups.length > 0}
<div class="scrollbar-hidden relative whitespace-nowrap w-full max-w-full"> <div class="scrollbar-hidden relative whitespace-nowrap w-full max-w-full">
<div class=" text-sm text-left text-gray-500 dark:text-gray-400 w-full max-w-full"> <div class=" text-sm text-left text-gray-500 dark:text-gray-400 w-full max-w-full">
<div class="w-full max-h-96 overflow-y-auto rounded-lg"> <div class="w-full max-h-96 overflow-y-auto rounded-lg">
@@ -241,64 +253,61 @@
</div> </div>
{/if} {/if}
{#if includeUsers} {#if includeUsers && filteredUsers.length > 0}
<div class="text-xs text-gray-500 mb-1 mx-1"> <div class="text-xs text-gray-500 mb-1 mx-1">
{$i18n.t('Users')} {$i18n.t('Users')}
</div> </div>
<div> <div>
{#each users as user, userIdx (user.id)} {#each filteredUsers as user (user.id)}
{#if !accessGrants.some((grant) => grant.principal_type === 'user' && grant.principal_id === user.id) && (includeSessionUser || user?.id !== $_user?.id)} <button
<button class=" dark:border-gray-850 text-xs flex items-center justify-between w-full"
class=" dark:border-gray-850 text-xs flex items-center justify-between w-full" type="button"
type="button" on:click={() => {
on:click={() => { if ((userIds ?? []).includes(user.id)) {
if ((userIds ?? []).includes(user.id)) { userIds = userIds.filter((id) => id !== user.id);
userIds = userIds.filter((id) => id !== user.id); delete selectedUsers[user.id];
delete selectedUsers[user.id]; } else {
} else { userIds = [...userIds, user.id];
userIds = [...userIds, user.id]; selectedUsers[user.id] = user;
selectedUsers[user.id] = user; }
} }}
}} >
> <div class="px-3 py-1.5 font-normal text-gray-900 dark:text-white flex-1">
<div class="px-3 py-1.5 font-normal text-gray-900 dark:text-white flex-1"> <div class="flex items-center gap-2">
<div class="flex items-center gap-2"> <ProfilePreview {user} side="right" align="center" sideOffset={6}>
<ProfilePreview {user} side="right" align="center" sideOffset={6}> <img
<img class="rounded-2xl w-6 h-6 object-cover flex-shrink-0"
class="rounded-2xl w-6 h-6 object-cover flex-shrink-0" src={`${WEBUI_API_BASE_URL}/users/${user.id}/profile/image`}
src={`${WEBUI_API_BASE_URL}/users/${user.id}/profile/image`} alt="user"
alt="user"
/>
</ProfilePreview>
<Tooltip content={user.email} placement="top-start">
<div class="font-normal truncate">{user.name}</div>
</Tooltip>
{#if user?.is_active}
<div>
<span class="relative flex size-1.5">
<span
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"
></span>
<span
class="relative inline-flex size-1.5 rounded-full bg-green-500"
></span>
</span>
</div>
{/if}
</div>
</div>
<div class="px-3 py-1">
<div class=" translate-y-0.5">
<Checkbox
state={(userIds ?? []).includes(user.id) ? 'checked' : 'unchecked'}
/> />
</div> </ProfilePreview>
<Tooltip content={user.email} placement="top-start">
<div class="font-normal truncate">{user.name}</div>
</Tooltip>
{#if user?.is_active}
<div>
<span class="relative flex size-1.5">
<span
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"
></span>
<span class="relative inline-flex size-1.5 rounded-full bg-green-500"
></span>
</span>
</div>
{/if}
</div> </div>
</button> </div>
{/if}
<div class="px-3 py-1">
<div class=" translate-y-0.5">
<Checkbox
state={(userIds ?? []).includes(user.id) ? 'checked' : 'unchecked'}
/>
</div>
</div>
</button>
{/each} {/each}
</div> </div>
{/if} {/if}