mirror of
https://github.com/samsonjs/immich.git
synced 2026-04-27 15:07:45 +00:00
refactor: admin card (#24723)
This commit is contained in:
Jason Rasmussen
GitHub
parent
3d2196b0f2
commit
1425b3da6b
3 changed files with 164 additions and 207 deletions
33
web/src/lib/components/AdminCard.svelte
Normal file
33
web/src/lib/components/AdminCard.svelte
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import HeaderActionButton from '$lib/components/HeaderActionButton.svelte';
|
||||||
|
import { Card, CardBody, CardHeader, CardTitle, Icon, type ActionItem, type IconLike } from '@immich/ui';
|
||||||
|
import type { Snippet } from 'svelte';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
icon: IconLike;
|
||||||
|
title: string;
|
||||||
|
headerAction?: ActionItem;
|
||||||
|
children?: Snippet;
|
||||||
|
};
|
||||||
|
|
||||||
|
const { icon, title, headerAction, children }: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Card color="secondary">
|
||||||
|
<CardHeader>
|
||||||
|
<div class="flex w-full justify-between items-center px-4 py-2">
|
||||||
|
<div class="flex gap-2 text-primary">
|
||||||
|
<Icon {icon} size="1.5rem" />
|
||||||
|
<CardTitle>{title}</CardTitle>
|
||||||
|
</div>
|
||||||
|
{#if headerAction}
|
||||||
|
<HeaderActionButton action={headerAction} />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody>
|
||||||
|
<div class="px-4 pb-7">
|
||||||
|
{@render children?.()}
|
||||||
|
</div>
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import emptyFoldersUrl from '$lib/assets/empty-folders.svg';
|
import emptyFoldersUrl from '$lib/assets/empty-folders.svg';
|
||||||
import HeaderActionButton from '$lib/components/HeaderActionButton.svelte';
|
import AdminCard from '$lib/components/AdminCard.svelte';
|
||||||
import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
|
import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
|
||||||
import OnEvents from '$lib/components/OnEvents.svelte';
|
import OnEvents from '$lib/components/OnEvents.svelte';
|
||||||
import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
|
import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
|
||||||
|
|
@ -15,18 +15,7 @@
|
||||||
getLibraryFolderActions,
|
getLibraryFolderActions,
|
||||||
} from '$lib/services/library.service';
|
} from '$lib/services/library.service';
|
||||||
import { getBytesWithUnit } from '$lib/utils/byte-units';
|
import { getBytesWithUnit } from '$lib/utils/byte-units';
|
||||||
import {
|
import { Code, CommandPaletteContext, Container, Heading, modalManager } from '@immich/ui';
|
||||||
Card,
|
|
||||||
CardBody,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
Code,
|
|
||||||
CommandPaletteContext,
|
|
||||||
Container,
|
|
||||||
Heading,
|
|
||||||
Icon,
|
|
||||||
modalManager,
|
|
||||||
} from '@immich/ui';
|
|
||||||
import { mdiCameraIris, mdiChartPie, mdiFilterMinusOutline, mdiFolderOutline, mdiPlayCircle } from '@mdi/js';
|
import { mdiCameraIris, mdiChartPie, mdiFilterMinusOutline, mdiFolderOutline, mdiPlayCircle } from '@mdi/js';
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
import type { PageData } from './$types';
|
import type { PageData } from './$types';
|
||||||
|
|
@ -64,77 +53,53 @@
|
||||||
<ServerStatisticsCard icon={mdiPlayCircle} title={$t('videos')} value={statistics.videos} />
|
<ServerStatisticsCard icon={mdiPlayCircle} title={$t('videos')} value={statistics.videos} />
|
||||||
<ServerStatisticsCard icon={mdiChartPie} title={$t('usage')} value={storageUsage} {unit} />
|
<ServerStatisticsCard icon={mdiChartPie} title={$t('usage')} value={storageUsage} {unit} />
|
||||||
</div>
|
</div>
|
||||||
<Card color="secondary">
|
|
||||||
<CardHeader>
|
<AdminCard icon={mdiFolderOutline} title={$t('folders')} headerAction={AddFolder}>
|
||||||
<div class="flex w-full justify-between items-center px-4 py-2">
|
{#if library.importPaths.length === 0}
|
||||||
<div class="flex gap-2 text-primary">
|
<EmptyPlaceholder
|
||||||
<Icon icon={mdiFolderOutline} size="1.5rem" />
|
src={emptyFoldersUrl}
|
||||||
<CardTitle>{$t('folders')}</CardTitle>
|
text={$t('admin.library_folder_description')}
|
||||||
</div>
|
fullWidth
|
||||||
<HeaderActionButton action={AddFolder} />
|
onClick={() => modalManager.show(LibraryFolderAddModal, { library })}
|
||||||
</div>
|
/>
|
||||||
</CardHeader>
|
{:else}
|
||||||
<CardBody>
|
<table class="w-full">
|
||||||
<div class="px-4 pb-7">
|
<tbody>
|
||||||
{#if library.importPaths.length === 0}
|
{#each library.importPaths as folder (folder)}
|
||||||
<EmptyPlaceholder
|
{@const { Edit, Delete } = getLibraryFolderActions($t, library, folder)}
|
||||||
src={emptyFoldersUrl}
|
<tr class="h-12">
|
||||||
text={$t('admin.library_folder_description')}
|
<td>
|
||||||
fullWidth
|
<Code>{folder}</Code>
|
||||||
onClick={() => modalManager.show(LibraryFolderAddModal, { library })}
|
</td>
|
||||||
/>
|
<td class="flex gap-2 justify-end">
|
||||||
{:else}
|
<TableButton action={Edit} />
|
||||||
<table class="w-full">
|
<TableButton action={Delete} />
|
||||||
<tbody>
|
</td>
|
||||||
{#each library.importPaths as folder (folder)}
|
</tr>
|
||||||
{@const { Edit, Delete } = getLibraryFolderActions($t, library, folder)}
|
{/each}
|
||||||
<tr class="h-12">
|
</tbody>
|
||||||
<td>
|
</table>
|
||||||
<Code>{folder}</Code>
|
{/if}
|
||||||
</td>
|
</AdminCard>
|
||||||
<td class="flex gap-2 justify-end">
|
|
||||||
<TableButton action={Edit} />
|
<AdminCard icon={mdiFilterMinusOutline} title={$t('exclusion_pattern')} headerAction={AddExclusionPattern}>
|
||||||
<TableButton action={Delete} />
|
<table class="w-full">
|
||||||
</td>
|
<tbody>
|
||||||
</tr>
|
{#each library.exclusionPatterns as exclusionPattern (exclusionPattern)}
|
||||||
{/each}
|
{@const { Edit, Delete } = getLibraryExclusionPatternActions($t, library, exclusionPattern)}
|
||||||
</tbody>
|
<tr class="h-12">
|
||||||
</table>
|
<td>
|
||||||
{/if}
|
<Code>{exclusionPattern}</Code>
|
||||||
</div>
|
</td>
|
||||||
</CardBody>
|
<td class="flex gap-2 justify-end">
|
||||||
</Card>
|
<TableButton action={Edit} />
|
||||||
<Card color="secondary">
|
<TableButton action={Delete} />
|
||||||
<CardHeader>
|
</td>
|
||||||
<div class="flex w-full justify-between items-center px-4 py-2">
|
</tr>
|
||||||
<div class="flex gap-2 text-primary">
|
{/each}
|
||||||
<Icon icon={mdiFilterMinusOutline} size="1.5rem" />
|
</tbody>
|
||||||
<CardTitle>{$t('exclusion_pattern')}</CardTitle>
|
</table>
|
||||||
</div>
|
</AdminCard>
|
||||||
<HeaderActionButton action={AddExclusionPattern} />
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<div class="px-4 pb-7">
|
|
||||||
<table class="w-full">
|
|
||||||
<tbody>
|
|
||||||
{#each library.exclusionPatterns as exclusionPattern (exclusionPattern)}
|
|
||||||
{@const { Edit, Delete } = getLibraryExclusionPatternActions($t, library, exclusionPattern)}
|
|
||||||
<tr class="h-12">
|
|
||||||
<td>
|
|
||||||
<Code>{exclusionPattern}</Code>
|
|
||||||
</td>
|
|
||||||
<td class="flex gap-2 justify-end">
|
|
||||||
<TableButton action={Edit} />
|
|
||||||
<TableButton action={Delete} />
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{/each}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
</AdminPageLayout>
|
</AdminPageLayout>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
|
import AdminCard from '$lib/components/AdminCard.svelte';
|
||||||
import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
|
import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
|
||||||
import OnEvents from '$lib/components/OnEvents.svelte';
|
import OnEvents from '$lib/components/OnEvents.svelte';
|
||||||
import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
|
import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
|
||||||
|
|
@ -15,10 +16,6 @@
|
||||||
import {
|
import {
|
||||||
Alert,
|
Alert,
|
||||||
Badge,
|
Badge,
|
||||||
Card,
|
|
||||||
CardBody,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
Code,
|
Code,
|
||||||
CommandPaletteContext,
|
CommandPaletteContext,
|
||||||
Container,
|
Container,
|
||||||
|
|
@ -131,128 +128,90 @@
|
||||||
<ServerStatisticsCard icon={mdiChartPie} title={$t('storage')} value={statsUsage} unit={statsUsageUnit} />
|
<ServerStatisticsCard icon={mdiChartPie} title={$t('storage')} value={statsUsage} unit={statsUsageUnit} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<Card color="secondary">
|
|
||||||
<CardHeader>
|
|
||||||
<div class="flex items-center gap-2 px-4 py-2 text-primary">
|
|
||||||
<Icon icon={mdiAccountOutline} size="1.5rem" />
|
|
||||||
<CardTitle>{$t('profile')}</CardTitle>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<div class="px-4 pb-7">
|
|
||||||
<Stack gap={2}>
|
|
||||||
<div>
|
|
||||||
<Heading tag="h3" size="tiny">{$t('name')}</Heading>
|
|
||||||
<Text>{user.name}</Text>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Heading tag="h3" size="tiny">{$t('email')}</Heading>
|
|
||||||
<Text>{user.email}</Text>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Heading tag="h3" size="tiny">{$t('created_at')}</Heading>
|
|
||||||
<Text>{userCreatedAtDateAndTime}</Text>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Heading tag="h3" size="tiny">{$t('updated_at')}</Heading>
|
|
||||||
<Text>{userUpdatedAtDateAndTime}</Text>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Heading tag="h3" size="tiny">{$t('id')}</Heading>
|
|
||||||
<Code>{user.id}</Code>
|
|
||||||
</div>
|
|
||||||
</Stack>
|
|
||||||
</div>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
<Card color="secondary">
|
|
||||||
<CardHeader>
|
|
||||||
<div class="flex items-center gap-2 px-4 py-2 text-primary">
|
|
||||||
<Icon icon={mdiFeatureSearchOutline} size="1.5rem" />
|
|
||||||
<CardTitle>{$t('features')}</CardTitle>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<div class="px-4 pb-4">
|
|
||||||
<Stack gap={3}>
|
|
||||||
<FeatureSetting title={$t('email_notifications')} state={userPreferences.emailNotifications.enabled} />
|
|
||||||
<FeatureSetting title={$t('folders')} state={userPreferences.folders.enabled} />
|
|
||||||
<FeatureSetting title={$t('memories')} state={userPreferences.memories.enabled} />
|
|
||||||
<FeatureSetting title={$t('people')} state={userPreferences.people.enabled} />
|
|
||||||
<FeatureSetting title={$t('rating')} state={userPreferences.ratings.enabled} />
|
|
||||||
<FeatureSetting title={$t('shared_links')} state={userPreferences.sharedLinks.enabled} />
|
|
||||||
<FeatureSetting title={$t('show_supporter_badge')} state={userPreferences.purchase.showSupportBadge} />
|
|
||||||
<FeatureSetting title={$t('tags')} state={userPreferences.tags.enabled} />
|
|
||||||
<FeatureSetting title={$t('gcast_enabled')} state={userPreferences.cast.gCastEnabled} />
|
|
||||||
</Stack>
|
|
||||||
</div>
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
<Card color="secondary">
|
|
||||||
<CardHeader>
|
|
||||||
<div class="flex items-center gap-2 px-4 py-2 text-primary">
|
|
||||||
<Icon icon={mdiChartPieOutline} size="1.5rem" />
|
|
||||||
<CardTitle>{$t('storage_quota')}</CardTitle>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<div class="px-4 pb-4">
|
|
||||||
{#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
|
|
||||||
<Text>
|
|
||||||
{$t('storage_usage', {
|
|
||||||
values: {
|
|
||||||
used: getByteUnitString(usedBytes, $locale, 3),
|
|
||||||
available: getByteUnitString(availableBytes, $locale, 3),
|
|
||||||
},
|
|
||||||
})}
|
|
||||||
</Text>
|
|
||||||
{:else}
|
|
||||||
<Text class="flex items-center gap-1">
|
|
||||||
<Icon icon={mdiCheckCircle} size="1.25rem" class="text-success" />
|
|
||||||
{$t('unlimited')}
|
|
||||||
</Text>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
|
<AdminCard icon={mdiAccountOutline} title={$t('profile')}>
|
||||||
<div
|
<Stack gap={2}>
|
||||||
class="storage-status p-4 mt-4 bg-gray-100 dark:bg-immich-dark-primary/10 rounded-lg text-sm w-full"
|
<div>
|
||||||
title={$t('storage_usage', {
|
<Heading tag="h3" size="tiny">{$t('name')}</Heading>
|
||||||
values: {
|
<Text>{user.name}</Text>
|
||||||
used: getByteUnitString(usedBytes, $locale, 3),
|
</div>
|
||||||
available: getByteUnitString(availableBytes, $locale, 3),
|
<div>
|
||||||
},
|
<Heading tag="h3" size="tiny">{$t('email')}</Heading>
|
||||||
})}
|
<Text>{user.email}</Text>
|
||||||
>
|
</div>
|
||||||
<p class="font-medium text-immich-dark-gray dark:text-white mb-2">{$t('storage')}</p>
|
<div>
|
||||||
<div class="mt-4 h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
|
<Heading tag="h3" size="tiny">{$t('created_at')}</Heading>
|
||||||
<div class="h-[7px] rounded-full {getUsageClass()}" style="width: {usedPercentage}%"></div>
|
<Text>{userCreatedAtDateAndTime}</Text>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<Heading tag="h3" size="tiny">{$t('updated_at')}</Heading>
|
||||||
|
<Text>{userUpdatedAtDateAndTime}</Text>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Heading tag="h3" size="tiny">{$t('id')}</Heading>
|
||||||
|
<Code>{user.id}</Code>
|
||||||
|
</div>
|
||||||
|
</Stack>
|
||||||
|
</AdminCard>
|
||||||
|
|
||||||
|
<AdminCard icon={mdiFeatureSearchOutline} title={$t('features')}>
|
||||||
|
<Stack gap={3}>
|
||||||
|
<FeatureSetting title={$t('email_notifications')} state={userPreferences.emailNotifications.enabled} />
|
||||||
|
<FeatureSetting title={$t('folders')} state={userPreferences.folders.enabled} />
|
||||||
|
<FeatureSetting title={$t('memories')} state={userPreferences.memories.enabled} />
|
||||||
|
<FeatureSetting title={$t('people')} state={userPreferences.people.enabled} />
|
||||||
|
<FeatureSetting title={$t('rating')} state={userPreferences.ratings.enabled} />
|
||||||
|
<FeatureSetting title={$t('shared_links')} state={userPreferences.sharedLinks.enabled} />
|
||||||
|
<FeatureSetting title={$t('show_supporter_badge')} state={userPreferences.purchase.showSupportBadge} />
|
||||||
|
<FeatureSetting title={$t('tags')} state={userPreferences.tags.enabled} />
|
||||||
|
<FeatureSetting title={$t('gcast_enabled')} state={userPreferences.cast.gCastEnabled} />
|
||||||
|
</Stack>
|
||||||
|
</AdminCard>
|
||||||
|
|
||||||
|
<AdminCard icon={mdiChartPieOutline} title={$t('storage_quota')}>
|
||||||
|
{#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
|
||||||
|
<Text>
|
||||||
|
{$t('storage_usage', {
|
||||||
|
values: {
|
||||||
|
used: getByteUnitString(usedBytes, $locale, 3),
|
||||||
|
available: getByteUnitString(availableBytes, $locale, 3),
|
||||||
|
},
|
||||||
|
})}
|
||||||
|
</Text>
|
||||||
|
{:else}
|
||||||
|
<Text class="flex items-center gap-1">
|
||||||
|
<Icon icon={mdiCheckCircle} size="1.25rem" class="text-success" />
|
||||||
|
{$t('unlimited')}
|
||||||
|
</Text>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
|
||||||
|
<div
|
||||||
|
class="storage-status p-4 mt-4 bg-gray-100 dark:bg-immich-dark-primary/10 rounded-lg text-sm w-full"
|
||||||
|
title={$t('storage_usage', {
|
||||||
|
values: {
|
||||||
|
used: getByteUnitString(usedBytes, $locale, 3),
|
||||||
|
available: getByteUnitString(availableBytes, $locale, 3),
|
||||||
|
},
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<p class="font-medium text-immich-dark-gray dark:text-white mb-2">{$t('storage')}</p>
|
||||||
|
<div class="mt-4 h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
|
||||||
|
<div class="h-[7px] rounded-full {getUsageClass()}" style="width: {usedPercentage}%"></div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
<Card color="secondary">
|
|
||||||
<CardHeader>
|
|
||||||
<div class="flex items-center gap-2 px-4 py-2 text-primary">
|
|
||||||
<Icon icon={mdiDevices} size="1.5rem" />
|
|
||||||
<CardTitle>{$t('authorized_devices')}</CardTitle>
|
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
{/if}
|
||||||
<CardBody>
|
</AdminCard>
|
||||||
<div class="px-4 pb-7">
|
|
||||||
<Stack gap={3}>
|
<AdminCard icon={mdiDevices} title={$t('authorized_devices')}>
|
||||||
{#each userSessions as session (session.id)}
|
<Stack gap={3}>
|
||||||
<DeviceCard {session} />
|
{#each userSessions as session (session.id)}
|
||||||
{:else}
|
<DeviceCard {session} />
|
||||||
<span class="text-dark">{$t('no_devices')}</span>
|
{:else}
|
||||||
{/each}
|
<span class="text-dark">{$t('no_devices')}</span>
|
||||||
</Stack>
|
{/each}
|
||||||
</div>
|
</Stack>
|
||||||
</CardBody>
|
</AdminCard>
|
||||||
</Card>
|
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue