mirror of
https://github.com/open-webui/open-webui.git
synced 2026-10-10 03:27:57 +00:00
refac
This commit is contained in:
Timothy Jaeryang Baek
parent
d4f01d7344
commit
784b72f19e
2 changed files with 69 additions and 75 deletions
|
|
@ -1,11 +1,16 @@
|
|||
<script lang="ts">
|
||||
import { getContext, onMount } from 'svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
const i18n = getContext<typeof import('$lib/i18n').default>('i18n');
|
||||
|
||||
import { getGroups, getGroupById, getGroupInfoById } from '$lib/apis/groups';
|
||||
import { getUserInfoById } from '$lib/apis/users';
|
||||
import { WEBUI_API_BASE_URL } from '$lib/constants';
|
||||
import Dropdown from '$lib/components/common/Dropdown.svelte';
|
||||
import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
|
||||
import LockClosed from '$lib/components/icons/LockClosed.svelte';
|
||||
import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
|
||||
import Check from '$lib/components/icons/Check.svelte';
|
||||
import XMark from '$lib/components/icons/XMark.svelte';
|
||||
import Badge from '$lib/components/common/Badge.svelte';
|
||||
import GlobeAlt from '$lib/components/icons/GlobeAlt.svelte';
|
||||
|
|
@ -45,6 +50,16 @@
|
|||
const resolvingUserIds = new Set<string>();
|
||||
|
||||
let showAddAccessModal = false;
|
||||
$: visibility = getVisibility(accessGrants ?? []);
|
||||
$: visibilityOptions = [
|
||||
{ value: 'private' as const, label: $i18n.t('Private') },
|
||||
...((share && sharePublic) || hasPublicReadGrant(accessGrants ?? [])
|
||||
? [{ value: 'public' as const, label: $i18n.t('Public') }]
|
||||
: []),
|
||||
...((share && shareOpen) || hasAnyoneReadGrant(accessGrants ?? [])
|
||||
? [{ value: 'open' as const, label: $i18n.t('Open') }]
|
||||
: [])
|
||||
];
|
||||
|
||||
const dedupeAccessGrants = (grants: AccessGrant[] | null | undefined): AccessGrant[] => {
|
||||
if (!Array.isArray(grants)) return [];
|
||||
|
|
@ -475,83 +490,62 @@
|
|||
onAdd={handleAddAccess}
|
||||
/>
|
||||
|
||||
<div class="rounded-lg flex flex-col gap-1">
|
||||
<div class="py-1.5">
|
||||
<div class="flex gap-2 items-center">
|
||||
<div>
|
||||
<div class="p-2 bg-black/5 dark:bg-white/5 rounded-full">
|
||||
{#if getVisibility(accessGrants ?? []) === 'private'}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-5"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
|
||||
/>
|
||||
</svg>
|
||||
{:else}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-5"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M6.115 5.19l.319 1.913A6 6 0 008.11 10.36L9.75 12l-.387.775c-.217.433-.132.956.21 1.298l1.348 1.348c.21.21.329.497.329.795v1.089c0 .426.24.815.622 1.006l.153.076c.433.217.956.132 1.298-.21l.723-.723a8.7 8.7 0 002.288-4.042 1.087 1.087 0 00-.358-1.099l-1.33-1.108c-.251-.21-.582-.299-.905-.245l-1.17.195a1.125 1.125 0 01-.98-.314l-.295-.295a1.125 1.125 0 010-1.591l.13-.132a1.125 1.125 0 011.3-.21l.603.302a.809.809 0 001.086-1.086L14.25 7.5l1.256-.837a4.5 4.5 0 001.528-1.732l.146-.292M6.115 5.19A9 9 0 1017.18 4.64M6.115 5.19A8.965 8.965 0 0112 3c1.929 0 3.716.607 5.18 1.64"
|
||||
/>
|
||||
</svg>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Tooltip
|
||||
content={!(share && sharePublic) && getVisibility(accessGrants ?? []) === 'private'
|
||||
? $i18n.t('You do not have permission to make this public')
|
||||
: ''}
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="-mx-1 rounded-xl bg-gray-50/60 px-3 py-2 dark:bg-white/[0.03]">
|
||||
<Tooltip
|
||||
content={!(share && sharePublic) && visibility === 'private'
|
||||
? $i18n.t('You do not have permission to make this public')
|
||||
: ''}
|
||||
>
|
||||
<Dropdown closeOnSelect>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={$i18n.t('Visibility')}
|
||||
class="flex h-6 items-center gap-2 rounded-md text-[0.8125rem] font-medium text-gray-800 transition hover:text-gray-950 dark:text-gray-200 dark:hover:text-white"
|
||||
>
|
||||
<select
|
||||
id="models"
|
||||
class="outline-none bg-transparent text-sm font-normal block w-fit pr-8 max-w-full placeholder-gray-400"
|
||||
value={getVisibility(accessGrants ?? [])}
|
||||
on:change={(e) => {
|
||||
setVisibility((e.target as HTMLSelectElement).value as 'private' | 'public' | 'open');
|
||||
}}
|
||||
>
|
||||
<option class=" text-gray-700" value="private">{$i18n.t('Private')}</option>
|
||||
{#if (share && sharePublic) || hasPublicReadGrant(accessGrants ?? [])}
|
||||
<option class=" text-gray-700" value="public">{$i18n.t('Public')}</option>
|
||||
{/if}
|
||||
{#if (share && shareOpen) || hasAnyoneReadGrant(accessGrants ?? [])}
|
||||
<option class=" text-gray-700" value="open">{$i18n.t('Open')}</option>
|
||||
{/if}
|
||||
</select>
|
||||
</Tooltip>
|
||||
|
||||
<div class=" text-xs text-gray-400 font-normal">
|
||||
{#if getVisibility(accessGrants ?? []) === 'private'}
|
||||
{$i18n.t('Only select users and groups with permission can access')}
|
||||
{:else if getVisibility(accessGrants ?? []) === 'public'}
|
||||
{$i18n.t('Accessible to all users')}
|
||||
{#if visibility === 'private'}
|
||||
<LockClosed className="size-3.5 text-gray-500 dark:text-gray-400" />
|
||||
{:else}
|
||||
{$i18n.t('Anyone with the link can view')}
|
||||
<GlobeAlt className="size-3.5 text-gray-500 dark:text-gray-400" />
|
||||
{/if}
|
||||
<span>{visibilityOptions.find((option) => option.value === visibility)?.label}</span>
|
||||
<ChevronDown className="size-3 text-gray-400 dark:text-gray-500" strokeWidth="2" />
|
||||
</button>
|
||||
<div slot="content">
|
||||
<DropdownMenu className="min-w-40">
|
||||
{#each visibilityOptions as option}
|
||||
<button
|
||||
type="button"
|
||||
role="menuitemradio"
|
||||
aria-checked={visibility === option.value}
|
||||
on:click={() => {
|
||||
if (visibility !== option.value) setVisibility(option.value);
|
||||
}}
|
||||
>
|
||||
{#if option.value === 'private'}<LockClosed className="size-3.5" />
|
||||
{:else}<GlobeAlt className="size-3.5" />{/if}
|
||||
<span class="flex-1 text-left">{option.label}</span>
|
||||
{#if visibility === option.value}<Check className="size-3.5 text-blue-500" />{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dropdown>
|
||||
</Tooltip>
|
||||
<p class="mt-0.5 text-xs leading-5 text-gray-500 dark:text-gray-400">
|
||||
{#if visibility === 'private'}
|
||||
{$i18n.t('Only select users and groups with permission can access')}
|
||||
{:else if visibility === 'public'}
|
||||
{$i18n.t('Accessible to all users')}
|
||||
{:else}
|
||||
{$i18n.t('Anyone with the link can view')}
|
||||
{/if}
|
||||
</p>
|
||||
|
||||
{#if hasPublicReadGrant(accessGrants ?? []) && !hasAnyoneReadGrant(accessGrants ?? []) && accessRoles.includes('write')}
|
||||
<div class="flex w-full justify-between mt-1.5 ml-0.5">
|
||||
<div
|
||||
class="flex w-full items-center justify-between gap-3 border-t border-gray-100/70 pt-2 mt-2 dark:border-white/5"
|
||||
>
|
||||
<div class="self-center text-xs">
|
||||
{$i18n.t('Allow public write access')}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,10 +28,10 @@
|
|||
export let onChange: (grants: AccessGrant[]) => void | Promise<void> = () => {};
|
||||
</script>
|
||||
|
||||
<Modal size="sm" bind:show>
|
||||
<Modal size="sm" bind:show className="rounded-2xl bg-white dark:bg-gray-900">
|
||||
<div>
|
||||
<div class="flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
|
||||
<div class="text-base font-normal self-center">
|
||||
<div class="flex justify-between dark:text-gray-100 px-4 pt-3 pb-2">
|
||||
<div class="text-sm font-medium self-center">
|
||||
{$i18n.t('Access Control')}
|
||||
</div>
|
||||
<button
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue